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

• 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

• 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