Steem Tool(1.1.12) : Add Tag Shortcut Function and Animation Effect

Repository

https://github.com/steemhappyberrysboy/steem_design_tool


New Features

• What feature(s) did you add?

1. Tag Shortcuts

https://steemitimages.com/80x0/https://cdn.steemitimages.com/DQmeBM8uYHoA6vNfhKWffgTb2GsuB4iBZwWWV4hESwi4gTg/border_05.png

• Add tag shortcut function.
• Input the tag you want to register as a shortcut in Input Tag
• The Tag is added to the lower container
• Click the tag button to go to the tag page

2. Animation

https://steemitimages.com/80x0/https://cdn.steemitimages.com/DQmeBM8uYHoA6vNfhKWffgTb2GsuB4iBZwWWV4hESwi4gTg/border_05.png

• Added some animation to give a little more liveliness and fun.
• Used open source Animate.css

• How did you implement it/them?

• Add Animate.css

• Add Semantic.js

• Expend jquery function for animateCss

// ===== popup.html =====
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> 
<script src="thirdParty/semantic.min.js"></script>

// ===== common.js =====
// Apply Semantic-ui accordion design 
$('.ui.accordion').accordion();

// Animate.css extend in Jquery 
$.fn.extend(｛
  animateCss: function(animationName, callback) ｛
    var animationEnd = (function(el) ｛
      var animations = ｛
        animation: 'animationend',
        OAnimation: 'oAnimationEnd',
        MozAnimation: 'mozAnimationEnd',
        WebkitAnimation: 'webkitAnimationEnd',
      ｝;

      for (var t in animations) ｛
        if (el.style[t] !== undefined) ｛
          return animations[t];
        ｝
      ｝
    ｝)(document.createElement('div'));

    this.addClass('animated ' + animationName).one(animationEnd, function() ｛
      $(this).removeClass('animated ' + animationName);

      if (typeof callback === 'function') callback();
    ｝);

    return this;
  ｝,
｝);

// ===== srcManager.js =====
// Apply Animation
  $('#copied').animateCss('flip', (() => (setTimeout(copied.style.display = 'none'), 3000)));


Roadmap

• Add new features using steemjs
• Make image/html source group tab


GitHub Account

https://github.com/steemhappyberrysboy