mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-24 17:10:29 +00:00
Code Issues Releases Wiki Activity

Improved animation for closing tiddlers in the zoomin view

Browse Source
This commit is contained in:
Jeremy Ruston 2012-07-07 17:58:28 +01:00
parent f412dd19d9
commit c49c4ef681
2 changed files with 40 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
core/modules/macros/story/story.js
View File

@ -132,7 +132,7 @@ exports.removeStoryElement = function(storyElementIndex) {
var storyElement = this.storyNode.children[storyElementIndex]; var storyElement = this.storyNode.children[storyElementIndex];
// Invoke the storyview to animate the removal // Invoke the storyview to animate the removal
if(this.storyview && this.storyview.remove) { if(this.storyview && this.storyview.remove) {
if(!this.storyview.remove(storyElement)) { if(!this.storyview.remove(storyElement,storyElementIndex)) {
// Only delete the DOM element if the storyview.remove() returned false // Only delete the DOM element if the storyview.remove() returned false
storyElement.domNode.parentNode.removeChild(storyElement.domNode); storyElement.domNode.parentNode.removeChild(storyElement.domNode);
} }

75
core/modules/macros/story/views/zoomin.js
View File

@ -125,52 +125,55 @@ Zoomin.prototype.navigateForward = function(toStoryElement,fromStoryElement,hist
/* /*
Visualise navigating back to the previous tiddler Visualise navigating back to the previous tiddler
toStoryElement: story element being navigated back to storyElement: story element being closed
fromStoryElement: story element being navigated back from
historyInfo: member of the history stack[] array being navigated back through
*/ */
Zoomin.prototype.navigateBack = function(toStoryElement,fromStoryElement,historyInfo) { Zoomin.prototype.remove = function(storyElement,storyElementIndex) {
// Get the animation duration // Get the animation duration
var d = $tw.config.preferences.animationDuration + "ms"; var d = $tw.config.preferences.animationDuration + "ms";
// Set up the tiddler that is being closed // Set up the tiddler that is being closed
if(fromStoryElement) { storyElement.domNode.style.position = "absolute";
fromStoryElement.domNode.style.position = "absolute"; storyElement.domNode.style.display = "block";
fromStoryElement.domNode.style.display = "block"; storyElement.domNode.style[$tw.browser.transformorigin] = "50% 50%";
fromStoryElement.domNode.style[$tw.browser.transformorigin] = "50% 50%"; storyElement.domNode.style[$tw.browser.transform] = "translateX(0px) translateY(0px) scale(1)";
fromStoryElement.domNode.style[$tw.browser.transform] = "translateX(0px) translateY(0px) scale(1)"; storyElement.domNode.style[$tw.browser.transition] = "none";
fromStoryElement.domNode.style[$tw.browser.transition] = "none"; storyElement.domNode.style.zIndex = "0";
fromStoryElement.domNode.style.zIndex = "0"; // We'll move back to the previous or next element in the story
var toStoryElement = this.story.storyNode.children[storyElementIndex - 1];
if(!toStoryElement) {
toStoryElement = this.story.storyNode.children[storyElementIndex + 1];
} }
// Set up the tiddler we're moving back in // Set up the tiddler we're moving back in
toStoryElement.domNode.style.position = "absolute"; if(toStoryElement) {
toStoryElement.domNode.style.display = "block"; toStoryElement.domNode.style.position = "absolute";
toStoryElement.domNode.style[$tw.browser.transformorigin] = "50% 50%"; toStoryElement.domNode.style.display = "block";
toStoryElement.domNode.style[$tw.browser.transform] = "translateX(0px) translateY(0px) scale(10)"; toStoryElement.domNode.style[$tw.browser.transformorigin] = "50% 50%";
toStoryElement.domNode.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out, opacity " + d + " ease-out"; toStoryElement.domNode.style[$tw.browser.transform] = "translateX(0px) translateY(0px) scale(10)";
toStoryElement.domNode.style.opacity = "0.0"; toStoryElement.domNode.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out, opacity " + d + " ease-out";
toStoryElement.domNode.style.zIndex = "500"; toStoryElement.domNode.style.opacity = "0.0";
this.currentTiddler = toStoryElement; toStoryElement.domNode.style.zIndex = "500";
this.currentTiddler = toStoryElement;
}
// Animate them both // Animate them both
$tw.utils.nextTick(function() { $tw.utils.nextTick(function() {
// First, the tiddler we're closing // First, the tiddler we're closing
if(fromStoryElement) { storyElement.domNode.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out, opacity " + d + " ease-out";
fromStoryElement.domNode.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out, opacity " + d + " ease-out"; storyElement.domNode.style.opacity = "0.0";
fromStoryElement.domNode.style.opacity = "0.0"; storyElement.domNode.style[$tw.browser.transformorigin] = "50% 50%";
fromStoryElement.domNode.style[$tw.browser.transformorigin] = "50% 50%"; storyElement.domNode.style[$tw.browser.transform] = "translateX(0px) translateY(0px) scale(0.1)";
fromStoryElement.domNode.style[$tw.browser.transform] = "translateX(0px) translateY(0px) scale(0.1)"; storyElement.domNode.style.zIndex = "0";
fromStoryElement.domNode.style.zIndex = "0"; var eventHandler = function(event) {
var eventHandler = function(event) { // Delete the DOM node when the transition is over
// Delete the DOM node when the transition is over if(storyElement.domNode.parentNode) {
if(fromStoryElement.domNode.parentNode) { storyElement.domNode.parentNode.removeChild(storyElement.domNode);
fromStoryElement.domNode.parentNode.removeChild(fromStoryElement.domNode); }
} storyElement.domNode.removeEventListener($tw.browser.transitionEnd,eventHandler,true);
fromStoryElement.domNode.removeEventListener($tw.browser.transitionEnd,eventHandler,true); };
}; storyElement.domNode.addEventListener($tw.browser.transitionEnd,eventHandler,true);
fromStoryElement.domNode.addEventListener($tw.browser.transitionEnd,eventHandler,true);
}
// Now the tiddler we're going back to // Now the tiddler we're going back to
toStoryElement.domNode.style[$tw.browser.transform] = "translateX(0px) translateY(0px) scale(1)"; if(toStoryElement) {
toStoryElement.domNode.style.opacity = "1.0"; toStoryElement.domNode.style[$tw.browser.transform] = "translateX(0px) translateY(0px) scale(1)";
toStoryElement.domNode.style.opacity = "1.0";
}
}); });
return true; // Indicate that we'll delete the DOM node return true; // Indicate that we'll delete the DOM node
}; };