mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-09-29 15:30:47 +00:00
Code Issues Releases Wiki Activity

Added closure animation to sideways storyview

Browse Source
This commit is contained in:
Jeremy Ruston 2012-06-22 11:28:40 +01:00
parent d9c916715b
commit be6bff402d
2 changed files with 34 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,7 +35,7 @@ ClassicScroller.prototype.close = function(targetTiddlerNode,sourceEvent) {
targetElement.parentNode.insertBefore(wrapperElement,targetElement);
wrapperElement.appendChild(targetElement);
// Animate the closure
var d = ($tw.config.preferences.animationDuration/1000).toFixed(8) + "s"
var d = ($tw.config.preferences.animationDuration/1000).toFixed(8) + "s";
wrapperElement.style[$tw.browser.transformorigin] = "0% 0%";
wrapperElement.style[$tw.browser.transform] = "translateX(0px)";
wrapperElement.style.opacity = "1.0";

33
core/modules/macros/story/views/sideways.js
View File

@ -41,6 +41,39 @@ SidewaysView.prototype.navigate = function(targetTiddlerNode,isNew,sourceEvent)
$tw.utils.scrollIntoView(targetTiddlerNode.domNode);
};
SidewaysView.prototype.close = function(targetTiddlerNode,sourceEvent) {
var targetElement = targetTiddlerNode.domNode;
// Get the current width of the tiddler
var currWidth = targetElement.offsetWidth;
// Put a wrapper around the dom node we're closing
var wrapperElement = document.createElement("div");
targetElement.parentNode.insertBefore(wrapperElement,targetElement);
wrapperElement.appendChild(targetElement);
// Animate the closure
var d = ($tw.config.preferences.animationDuration/1000).toFixed(8) + "s";
wrapperElement.style.display = "inline-block";
wrapperElement.style[$tw.browser.transformorigin] = "0% 0%";
wrapperElement.style[$tw.browser.transform] = "translateY(0px)";
wrapperElement.style.opacity = "1.0";
wrapperElement.style.width = currWidth + "px";
wrapperElement.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out, " +
"opacity " + d + " ease-out, " +
"width " + d + " ease-in-out";
$tw.utils.nextTick(function() {
wrapperElement.style[$tw.browser.transform] = "translateY(" + window.innerHeight + "px)";
wrapperElement.style.opacity = "0.0";
wrapperElement.style.width = "0px";
});
// Attach an event handler for th eend of the transition
wrapperElement.addEventListener($tw.browser.transitionEnd,function(event) {
if(wrapperElement.parentNode) {
wrapperElement.parentNode.removeChild(wrapperElement);
}
},true);
// Returning true causes the DOM node not to be deleted
return true;
};
exports.sideways = SidewaysView;
})();