mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-27 03:57:21 +00:00
Code Issues Releases Wiki Activity

Add a barebones animation framework

Browse Source 
The idea is to allow us to package animations/transitions into plugins
This commit is contained in:
Jeremy Ruston 2013-05-28 16:28:16 +01:00
parent 3e6efd7902
commit 227cadd326
3 changed files with 147 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
core/modules/startup.js
View File

@ -96,6 +96,8 @@ exports.startup = function() {
document.addEventListener("tw-clear-password",function(event) {
$tw.crypto.setPassword(null);
});
// Install the animator
$tw.anim = new $tw.utils.Animator();
// Kick off the stylesheet manager
$tw.stylesheetManager = new $tw.utils.StylesheetManager($tw.wiki);
// If we're being viewed on a data: URI then give instructions for how to save

107
core/modules/utils/dom/animations/slide.js Normal file
View File

@ -0,0 +1,107 @@
/*\
title: $:/core/modules/utils/dom/animations/slide.js
type: application/javascript
module-type: animation
A simple slide animation that varies the height of the element
\*/
(function(){
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
function slideOpen(domNode,options) {
// Get the current height of the domNode
var computedStyle = window.getComputedStyle(domNode),
currMarginBottom = parseInt(computedStyle.marginBottom,10),
currMarginTop = parseInt(computedStyle.marginTop,10),
currPaddingBottom = parseInt(computedStyle.paddingBottom,10),
currPaddingTop = parseInt(computedStyle.paddingTop,10),
currHeight = domNode.offsetHeight;
// Reset the margin once the transition is over
var transitionEventName = $tw.utils.convertEventName("transitionEnd");
domNode.addEventListener(transitionEventName,function handler(event) {
$tw.utils.setStyle(domNode,[
{transition: "none"},
{marginBottom: ""},
{marginTop: ""},
{paddingBottom: ""},
{paddingTop: ""},
{height: "auto"}
]);
domNode.removeEventListener(transitionEventName,handler,false);
if(options.callback) {
options.callback();
}
},false);
// Set up the initial position of the element
$tw.utils.setStyle(domNode,[
{transition: "none"},
{marginTop: "0px"},
{marginBottom: "0px"},
{paddingTop: "0px"},
{paddingBottom: "0px"},
{height: "0px"}
]);
$tw.utils.forceLayout(domNode);
// Transition to the final position
$tw.utils.setStyle(domNode,[
{transition: "margin-top " + $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-bottom " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
"height " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
{marginBottom: currMarginBottom + "px"},
{marginTop: currMarginTop + "px"},
{paddingBottom: currPaddingBottom + "px"},
{paddingTop: currPaddingTop + "px"},
{height: currHeight + "px"}
]);
}
function slideClosed(domNode,options) {
var currHeight = domNode.offsetHeight;
// Clear the properties we've set when the animation is over
var transitionEventName = $tw.utils.convertEventName("transitionEnd");
domNode.addEventListener(transitionEventName,function handler(event) {
$tw.utils.setStyle(domNode,[
{transition: "none"},
{marginBottom: ""},
{marginTop: ""},
{paddingBottom: ""},
{paddingTop: ""},
{height: "auto"}
]);
domNode.removeEventListener(transitionEventName,handler,false);
if(options.callback) {
options.callback();
}
},false);
// Set up the initial position of the element
$tw.utils.setStyle(domNode,[
{height: currHeight + "px"}
]);
$tw.utils.forceLayout(domNode);
// Transition to the final position
$tw.utils.setStyle(domNode,[
{transition: "margin-top " + $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-bottom " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
"height " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
{marginTop: "0px"},
{marginBottom: "0px"},
{paddingTop: "0px"},
{paddingBottom: "0px"},
{height: "0px"}
]);
}
exports.slide = {
open: slideOpen,
close: slideClosed
};
})();

38
core/modules/utils/dom/animator.js Normal file
View File

@ -0,0 +1,38 @@
/*\
title: $:/core/modules/utils/dom/animator.js
type: application/javascript
module-type: utils
Orchestrates animations and transitions
\*/
(function(){
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
function Animator() {
// Get the registered animation modules
this.animations = {};
$tw.modules.applyMethods("animation",this.animations);
}
Animator.prototype.perform = function(type,domNode,options) {
options = options || {};
// Find an animation that can handle this type
var chosenAnimation;
$tw.utils.each(this.animations,function(animation,name) {
if($tw.utils.hop(animation,type)) {
chosenAnimation = animation[type];
}
});
// Call the animation
if(chosenAnimation) {
chosenAnimation(domNode,options);
}
};
exports.Animator = Animator;
})();