mirrors
/
TiddlyWiki5
mirror of https://github.com/Jermolene/TiddlyWiki5
1
0
Fork 0
Code Issues Releases Wiki Activity

Improvements to slide animation

This commit is contained in:
Jeremy Ruston 2013-05-28 16:47:16 +01:00
parent c7fe9b747a
commit a8b1da33de
3 changed files with 28 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
core/modules/utils/dom/animations/slide.js
View File

@ -29,7 +29,8 @@ function slideOpen(domNode,options) {
{marginTop: ""},
{paddingBottom: ""},
{paddingTop: ""},
{height: "auto"}
{height: "auto"},
{opacity: ""}
]);
domNode.removeEventListener(transitionEventName,handler,false);
if(options.callback) {
@ -43,7 +44,8 @@ function slideOpen(domNode,options) {
{marginBottom: "0px"},
{paddingTop: "0px"},
{paddingBottom: "0px"},
{height: "0px"}
{height: "0px"},
{opacity: "0"}
]);
$tw.utils.forceLayout(domNode);
// Transition to the final position
@ -52,12 +54,14 @@ function slideOpen(domNode,options) {
"margin-bottom " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
"padding-top " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
"padding-bottom " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
"height " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
"height " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
"opacity " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
{marginBottom: currMarginBottom + "px"},
{marginTop: currMarginTop + "px"},
{paddingBottom: currPaddingBottom + "px"},
{paddingTop: currPaddingTop + "px"},
{height: currHeight + "px"}
{height: currHeight + "px"},
{opacity: "1"}
]);
}
@ -72,7 +76,8 @@ function slideClosed(domNode,options) {
{marginTop: ""},
{paddingBottom: ""},
{paddingTop: ""},
{height: "auto"}
{height: "auto"},
{opacity: ""}
]);
domNode.removeEventListener(transitionEventName,handler,false);
if(options.callback) {
@ -81,7 +86,8 @@ function slideClosed(domNode,options) {
},false);
// Set up the initial position of the element
$tw.utils.setStyle(domNode,[
{height: currHeight + "px"}
{height: currHeight + "px"},
{opacity: "1"}
]);
$tw.utils.forceLayout(domNode);
// Transition to the final position
@ -90,12 +96,14 @@ function slideClosed(domNode,options) {
"margin-bottom " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
"padding-top " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
"padding-bottom " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
"height " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
"height " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
"opacity " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
{marginTop: "0px"},
{marginBottom: "0px"},
{paddingTop: "0px"},
{paddingBottom: "0px"},
{height: "0px"}
{height: "0px"},
{opacity: "0"}
]);
}

17
core/modules/widgets/reveal.js
View File

@ -28,6 +28,7 @@ RevealWidget.prototype.generate = function() {
this["default"] = this.renderer.getAttribute("default");
this.qualifyTiddlerTitles = this.renderer.getAttribute("qualifyTiddlerTitles");
this["class"] = this.renderer.getAttribute("class");
this.animate = this.renderer.getAttribute("animate","no");
// Compute the title of the state tiddler and read it
this.stateTitle = this.state;
if(this.qualifyTiddlerTitles) {
@ -151,13 +152,17 @@ RevealWidget.prototype.refreshInDom = function(changedAttributes,changedTiddlers
}
// Animate the opening or closing
if(this.isOpen !== previousState) {
if(this.isOpen) {
this.renderer.domNode.style.display = this.renderer.parseTreeNode.isBlock ? "block" : "inline";
$tw.anim.perform("open",this.renderer.domNode);
if(this.animate !== "no") {
if(this.isOpen) {
this.renderer.domNode.style.display = this.renderer.parseTreeNode.isBlock ? "block" : "inline";
$tw.anim.perform("open",this.renderer.domNode);
} else {
$tw.anim.perform("close",this.renderer.domNode,{callback: function() {
self.renderer.domNode.style.display = "none";
}});
}
} else {
$tw.anim.perform("close",this.renderer.domNode,{callback: function() {
self.renderer.domNode.style.display = "none";
}});
this.renderer.domNode.style.display = this.isOpen ? (this.renderer.parseTreeNode.isBlock ? "block" : "inline") : "none";
}
}
// Add or remove the tw-reveal-open class

2
core/templates/ViewTemplate.tid
View File

@ -5,7 +5,7 @@ modifier: JeremyRuston
</span><$view field="title"/></span>
<$reveal type="nomatch" text="" default="" state="$:/state/tiddlerInfo" qualifyTiddlerTitles="yes" class="tw-tiddler-info">
<$reveal type="nomatch" text="" default="" state="$:/state/tiddlerInfo" qualifyTiddlerTitles="yes" class="tw-tiddler-info" animate="yes">
<$transclude template="$:/templates/TiddlerInfo"/>