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

Move the animation duration into a tiddler so that we can easily let it be adjusted in the control panel

Browse Source
This commit is contained in:
Jeremy Ruston
2013-08-28 15:15:56 +01:00
parent e8425131f4
commit fbfe5a26c5
12 changed files with 68 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,6 +13,7 @@ A simple slide animation that varies the height of the element
"use strict";
function slideOpen(domNode,options) {
var duration = $tw.utils.getAnimationDuration();
// Get the current height of the domNode
var computedStyle = window.getComputedStyle(domNode),
currMarginBottom = parseInt(computedStyle.marginBottom,10),
@@ -34,7 +35,7 @@ function slideOpen(domNode,options) {
if(options.callback) {
options.callback();
}
},$tw.config.preferences.animationDuration);
},duration);
// Set up the initial position of the element
$tw.utils.setStyle(domNode,[
{transition: "none"},
@@ -48,12 +49,12 @@ function slideOpen(domNode,options) {
$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, " +
"opacity " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
{transition: "margin-top " + duration + "ms ease-in-out, " +
"margin-bottom " + duration + "ms ease-in-out, " +
"padding-top " + duration + "ms ease-in-out, " +
"padding-bottom " + duration + "ms ease-in-out, " +
"height " + duration + "ms ease-in-out, " +
"opacity " + duration + "ms ease-in-out"},
{marginBottom: currMarginBottom + "px"},
{marginTop: currMarginTop + "px"},
{paddingBottom: currPaddingBottom + "px"},
@@ -64,7 +65,8 @@ function slideOpen(domNode,options) {
}
function slideClosed(domNode,options) {
var currHeight = domNode.offsetHeight;
var duration = $tw.utils.getAnimationDuration(),
currHeight = domNode.offsetHeight;
// Clear the properties we've set when the animation is over
setTimeout(function() {
$tw.utils.setStyle(domNode,[
@@ -79,7 +81,7 @@ function slideClosed(domNode,options) {
if(options.callback) {
options.callback();
}
},$tw.config.preferences.animationDuration);
},duration);
// Set up the initial position of the element
$tw.utils.setStyle(domNode,[
{height: currHeight + "px"},
@@ -88,12 +90,12 @@ function slideClosed(domNode,options) {
$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, " +
"opacity " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
{transition: "margin-top " + duration + "ms ease-in-out, " +
"margin-bottom " + duration + "ms ease-in-out, " +
"padding-top " + duration + "ms ease-in-out, " +
"padding-bottom " + duration + "ms ease-in-out, " +
"height " + duration + "ms ease-in-out, " +
"opacity " + duration + "ms ease-in-out"},
{marginTop: "0px"},
{marginBottom: "0px"},
{paddingTop: "0px"},

7
core/modules/utils/dom/modal.js
View File

@@ -26,7 +26,8 @@ Options include:
*/
Modal.prototype.display = function(title,options) {
options = options || {};
var self = this;
var self = this,
duration = $tw.utils.getAnimationDuration();
// Up the modal count and adjust the body class
this.modalCount++;
this.adjustPageClass();
@@ -42,7 +43,7 @@ Modal.prototype.display = function(title,options) {
modalFooterHelp = document.createElement("span"),
modalFooterButtons = document.createElement("span"),
tiddler = this.wiki.getTiddler(title),
d = $tw.config.preferences.animationDuration + "ms";
d = duration + "ms";
// Don't do anything if the tiddler doesn't exist
if(!tiddler) {
return;
@@ -154,7 +155,7 @@ Modal.prototype.display = function(title,options) {
{transition: "opacity " + d + " ease-out"}
]);
$tw.utils.setStyle(modalWrapper,[
{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out"}
{transition: $tw.utils.roundTripPropertyName("transform") + " " + duration + "ms ease-in-out"}
]);
// Force layout
$tw.utils.forceLayout(modalBackdrop);

4
core/modules/utils/dom/notifier.js
View File

@@ -27,7 +27,7 @@ Notifier.prototype.display = function(title,options) {
// Create the wrapper divs
var notification = document.createElement("div"),
tiddler = this.wiki.getTiddler(title),
d = $tw.config.preferences.animationDuration + "ms";
d = $tw.utils.getAnimationDuration() + "ms";
// Don't do anything if the tiddler doesn't exist
if(!tiddler) {
return;
@@ -47,7 +47,7 @@ Notifier.prototype.display = function(title,options) {
{opacity: "0"},
{transformOrigin: "0% 0%"},
{transform: "translateY(" + (-window.innerHeight) + "px)"},
{transition: "opacity " + d + " ease-out, " + $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out"}
{transition: "opacity " + d + " ease-out, " + $tw.utils.roundTripPropertyName("transform") + " " + d + " ease-in-out"}
]);
// Add the notification to the DOM
document.body.appendChild(notification);

3
core/modules/utils/dom/scroller.js
View File

@@ -54,6 +54,7 @@ PageScroller.prototype.handleEvent = function(event) {
Handle a scroll event hitting the page document
*/
PageScroller.prototype.scrollIntoView = function(element) {
var duration = $tw.utils.getAnimationDuration()
// Get the offset bounds of the element
var bounds = {
left: element.offsetLeft,
@@ -94,7 +95,7 @@ PageScroller.prototype.scrollIntoView = function(element) {
var self = this,
drawFrame;
drawFrame = function () {
var t = ((new Date()) - self.startTime) / $tw.config.preferences.animationDuration;
var t = ((new Date()) - self.startTime) / duration;
if(t >= 1) {
self.cancelScroll();
t = 1;

7
core/modules/utils/utils.js
View File

@@ -395,4 +395,11 @@ exports.extractVersionInfo = function() {
}
/*
Get the animation duration in ms
*/
exports.getAnimationDuration = function() {
return parseInt($tw.wiki.getTiddlerText("$:/config/AnimationDuration","400"),10);
};
})();