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