diff --git a/core/modules/widgets/list/listviews/pop.js b/core/modules/widgets/list/listviews/pop.js new file mode 100644 index 000000000..43aceda6c --- /dev/null +++ b/core/modules/widgets/list/listviews/pop.js @@ -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; + +})(); diff --git a/core/ui/TagsEditor.tid b/core/ui/TagsEditor.tid index 3f20483b4..0fb5408d2 100644 --- a/core/ui/TagsEditor.tid +++ b/core/ui/TagsEditor.tid @@ -1,6 +1,6 @@ title: $:/core/ui/TagsEditor -<$fieldmangler>