mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-08-07 14:23:53 +00:00
Code Issues Releases Wiki Activity

Improvements to slide animation

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

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

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

2
core/templates/ViewTemplate.tid
View File

@ -5,7 +5,7 @@ modifier: JeremyRuston
</span><$view field="title"/></span> </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"/> <$transclude template="$:/templates/TiddlerInfo"/>