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