mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2026-09-15 14:21:23 +00:00
Code Issues Releases Wiki Activity

Add a popping animation to the tags editor

Browse Source
This commit is contained in:
Jeremy Ruston
2013-07-04 12:50:31 +01:00
parent c2bfe7f311
commit e6450e60e2
3 changed files with 81 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/modules/widgets/list/listviews/pop.js
+75
View File
@@ -0,0 +1,75 @@
/*\
title: $:/core/modules/widgets/list/listviews/pop.js
type: application/javascript
module-type: listview
Animates list insertions and removals
\*/
(function(){
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
var PopListView = function(listWidget) {
this.listWidget = listWidget;
}
PopListView.prototype.insert = function(index) {
var listElementNode = this.listWidget.children[index],
targetElement = listElementNode.domNode;
// Reset once the transition is over
var transitionEventName = $tw.utils.convertEventName("transitionEnd");
targetElement.addEventListener(transitionEventName,function handler(event) {
$tw.utils.setStyle(targetElement,[
{transition: "none"},
{transform: "none"}
]);
targetElement.removeEventListener(transitionEventName,handler,false);
},false);
// Set up the initial position of the element
$tw.utils.setStyle(targetElement,[
{transition: "none"},
{transform: "scale(2)"},
{opacity: "0.0"}
]);
$tw.utils.forceLayout(targetElement);
// Transition to the final position
$tw.utils.setStyle(targetElement,[
{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
"opacity " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
{transform: "scale(1)"},
{opacity: "1.0"}
]);
};
PopListView.prototype.remove = function(index) {
var listElementNode = this.listWidget.children[index],
targetElement = listElementNode.domNode;
// Attach an event handler for the end of the transition
targetElement.addEventListener($tw.utils.convertEventName("transitionEnd"),function(event) {
if(targetElement.parentNode) {
targetElement.parentNode.removeChild(targetElement);
}
},false);
// Animate the closure
$tw.utils.setStyle(targetElement,[
{transition: "none"},
{transform: "scale(1)"},
{opacity: "1.0"}
]);
$tw.utils.forceLayout(targetElement);
$tw.utils.setStyle(targetElement,[
{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
"opacity " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
{transform: "scale(0.1)"},
{opacity: "0.0"}
]);
// Returning true causes the DOM node not to be deleted
return true;
};
exports.pop = PopListView;
})();