mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-12-25 01:20:30 +00:00
Add pop visualiser
This commit is contained in:
parent
6a0ae2c48b
commit
aa79b4aff1
82
core/modules/storyviews/pop.js
Normal file
82
core/modules/storyviews/pop.js
Normal file
@ -0,0 +1,82 @@
|
||||
/*\
|
||||
title: $:/core/modules/storyviews/pop.js
|
||||
type: application/javascript
|
||||
module-type: storyview
|
||||
|
||||
Animates list insertions and removals
|
||||
|
||||
\*/
|
||||
(function(){
|
||||
|
||||
/*jslint node: true, browser: true */
|
||||
/*global $tw: false */
|
||||
"use strict";
|
||||
|
||||
var PopStoryView = function(listWidget) {
|
||||
this.listWidget = listWidget;
|
||||
}
|
||||
|
||||
ClassicStoryView.prototype.navigateTo = function(historyInfo) {
|
||||
var listElementIndex = this.listWidget.findListItem(0,historyInfo.title);
|
||||
if(listElementIndex === undefined) {
|
||||
return;
|
||||
}
|
||||
var listItemWidget = this.listWidget.children[listElementIndex],
|
||||
targetElement = listItemWidget.findFirstDomNode();
|
||||
// Scroll the node into view
|
||||
this.listWidget.dispatchEvent({type: "tw-scroll", target: targetElement});
|
||||
};
|
||||
|
||||
PopStoryView.prototype.insert = function(widget) {
|
||||
var targetElement = widget.findFirstDomNode(),
|
||||
duration = $tw.utils.getAnimationDuration();
|
||||
// Reset once the transition is over
|
||||
setTimeout(function() {
|
||||
$tw.utils.setStyle(targetElement,[
|
||||
{transition: "none"},
|
||||
{transform: "none"}
|
||||
]);
|
||||
},duration);
|
||||
// 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") + " " + duration + "ms ease-in-out, " +
|
||||
"opacity " + duration + "ms ease-in-out"},
|
||||
{transform: "scale(1)"},
|
||||
{opacity: "1.0"}
|
||||
]);
|
||||
};
|
||||
|
||||
PopStoryView.prototype.remove = function(widget) {
|
||||
var targetElement = widget.findFirstDomNode(),
|
||||
duration = $tw.utils.getAnimationDuration();
|
||||
// Remove the element at the end of the transition
|
||||
setTimeout(function() {
|
||||
if(targetElement.parentNode) {
|
||||
widget.removeChildDomNodes();
|
||||
}
|
||||
},duration);
|
||||
// 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") + " " + duration + "ms ease-in-out, " +
|
||||
"opacity " + duration + "ms ease-in-out"},
|
||||
{transform: "scale(0.1)"},
|
||||
{opacity: "0.0"}
|
||||
]);
|
||||
};
|
||||
|
||||
exports.pop = PopStoryView;
|
||||
|
||||
})();
|
Loading…
Reference in New Issue
Block a user