From fbfe5a26c57d4092653bc471da5cc31fc301cc0c Mon Sep 17 00:00:00 2001 From: Jeremy Ruston Date: Wed, 28 Aug 2013 15:15:56 +0100 Subject: [PATCH] Move the animation duration into a tiddler so that we can easily let it be adjusted in the control panel --- core/modules/config.js | 2 -- core/modules/hacks.js | 28 ---------------- core/modules/utils/dom/animations/slide.js | 32 ++++++++++--------- core/modules/utils/dom/modal.js | 7 ++-- core/modules/utils/dom/notifier.js | 4 +-- core/modules/utils/dom/scroller.js | 3 +- core/modules/utils/utils.js | 7 ++++ .../modules/widgets/list/listviews/classic.js | 20 ++++++------ core/modules/widgets/list/listviews/pop.js | 18 ++++++----- core/modules/widgets/list/listviews/zoomin.js | 18 ++++++----- core/wiki/ControlPanel.tid | 2 ++ core/wiki/config/AnimationDuration.tid | 3 ++ 12 files changed, 68 insertions(+), 76 deletions(-) delete mode 100644 core/modules/hacks.js create mode 100644 core/wiki/config/AnimationDuration.tid diff --git a/core/modules/config.js b/core/modules/config.js index e012a7d5f..d94a03407 100644 --- a/core/modules/config.js +++ b/core/modules/config.js @@ -14,8 +14,6 @@ Core configuration constants exports.preferences = {}; -exports.preferences.animationDuration = 400; -exports.preferences.animationDurationMs = exports.preferences.animationDuration + "ms"; exports.preferences.notificationDuration = 3 * 1000; exports.preferences.jsonSpaces = 4; diff --git a/core/modules/hacks.js b/core/modules/hacks.js deleted file mode 100644 index 0d5c9a47f..000000000 --- a/core/modules/hacks.js +++ /dev/null @@ -1,28 +0,0 @@ -/*\ -title: $:/core/modules/hacks.js -type: application/javascript -module-type: global - -These functions are designed to be invoked in the browser developer tools or the node.js REPL. - -\*/ -(function(){ - -/*jslint node: true, browser: true */ -/*global $tw: false */ -"use strict"; - -/* -Switch slowmotion animation mode on or off -*/ -exports.slowmo = function(status) { - if(status === undefined || status) { - $tw.config.preferences.animationDuration = 4000; - } else { - $tw.config.preferences.animationDuration = 400; - } - $tw.config.preferences.animationDurationMs = $tw.config.preferences.animationDuration + "ms"; - return "Slowmo is " + ($tw.config.preferences.animationDuration === 400 ? "dis" : "") + "engaged." -}; - -})(); diff --git a/core/modules/utils/dom/animations/slide.js b/core/modules/utils/dom/animations/slide.js index a853155e5..b8864093f 100644 --- a/core/modules/utils/dom/animations/slide.js +++ b/core/modules/utils/dom/animations/slide.js @@ -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"}, diff --git a/core/modules/utils/dom/modal.js b/core/modules/utils/dom/modal.js index a23bc1788..20789b1ef 100644 --- a/core/modules/utils/dom/modal.js +++ b/core/modules/utils/dom/modal.js @@ -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); diff --git a/core/modules/utils/dom/notifier.js b/core/modules/utils/dom/notifier.js index a27f3271e..b9177b533 100644 --- a/core/modules/utils/dom/notifier.js +++ b/core/modules/utils/dom/notifier.js @@ -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); diff --git a/core/modules/utils/dom/scroller.js b/core/modules/utils/dom/scroller.js index b74c911ee..74178f5e2 100644 --- a/core/modules/utils/dom/scroller.js +++ b/core/modules/utils/dom/scroller.js @@ -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; diff --git a/core/modules/utils/utils.js b/core/modules/utils/utils.js index cb3441377..46c2a444c 100644 --- a/core/modules/utils/utils.js +++ b/core/modules/utils/utils.js @@ -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); +}; + })(); diff --git a/core/modules/widgets/list/listviews/classic.js b/core/modules/widgets/list/listviews/classic.js index 01e443a64..4634a54bb 100644 --- a/core/modules/widgets/list/listviews/classic.js +++ b/core/modules/widgets/list/listviews/classic.js @@ -31,7 +31,8 @@ ClassicListView.prototype.navigateTo = function(historyInfo) { ClassicListView.prototype.insert = function(index) { var listElementNode = this.listWidget.children[index], - targetElement = listElementNode.domNode; + targetElement = listElementNode.domNode, + duration = $tw.utils.getAnimationDuration(); // Get the current height of the tiddler var currMarginBottom = parseInt(window.getComputedStyle(targetElement).marginBottom,10), currMarginTop = parseInt(window.getComputedStyle(targetElement).marginTop,10), @@ -42,7 +43,7 @@ ClassicListView.prototype.insert = function(index) { {transition: "none"}, {marginBottom: ""} ]); - },$tw.config.preferences.animationDuration); + },duration); // Set up the initial position of the element $tw.utils.setStyle(targetElement,[ {transition: "none"}, @@ -52,8 +53,8 @@ ClassicListView.prototype.insert = function(index) { $tw.utils.forceLayout(targetElement); // Transition to the final position $tw.utils.setStyle(targetElement,[ - {transition: "opacity " + $tw.config.preferences.animationDurationMs + " ease-in-out, " + - "margin-bottom " + $tw.config.preferences.animationDurationMs + " ease-in-out"}, + {transition: "opacity " + duration + "ms ease-in-out, " + + "margin-bottom " + duration + "ms ease-in-out"}, {marginBottom: currMarginBottom + "px"}, {opacity: "1.0"} ]); @@ -61,7 +62,8 @@ ClassicListView.prototype.insert = function(index) { ClassicListView.prototype.remove = function(index) { var listElementNode = this.listWidget.children[index], - targetElement = listElementNode.domNode; + targetElement = listElementNode.domNode, + duration = $tw.utils.getAnimationDuration(); // Get the current height of the tiddler var currWidth = targetElement.offsetWidth, currMarginBottom = parseInt(window.getComputedStyle(targetElement).marginBottom,10), @@ -72,7 +74,7 @@ ClassicListView.prototype.remove = function(index) { if(targetElement.parentNode) { targetElement.parentNode.removeChild(targetElement); } - },$tw.config.preferences.animationDuration); + },duration); // Animate the closure $tw.utils.setStyle(targetElement,[ {transition: "none"}, @@ -82,9 +84,9 @@ ClassicListView.prototype.remove = function(index) { ]); $tw.utils.forceLayout(targetElement); $tw.utils.setStyle(targetElement,[ - {transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out, " + - "opacity " + $tw.config.preferences.animationDurationMs + " ease-in-out, " + - "margin-bottom " + $tw.config.preferences.animationDurationMs + " ease-in-out"}, + {transition: $tw.utils.roundTripPropertyName("transform") + " " + duration + "ms ease-in-out, " + + "opacity " + duration + "ms ease-in-out, " + + "margin-bottom " + duration + "ms ease-in-out"}, {transform: "translateX(-" + currWidth + "px)"}, {marginBottom: (-currHeight) + "px"}, {opacity: "0.0"} diff --git a/core/modules/widgets/list/listviews/pop.js b/core/modules/widgets/list/listviews/pop.js index 1475254f4..4a8071175 100644 --- a/core/modules/widgets/list/listviews/pop.js +++ b/core/modules/widgets/list/listviews/pop.js @@ -18,14 +18,15 @@ var PopListView = function(listWidget) { PopListView.prototype.insert = function(index) { var listElementNode = this.listWidget.children[index], - targetElement = listElementNode.domNode; + targetElement = listElementNode.domNode, + duration = $tw.utils.getAnimationDuration(); // Reset once the transition is over setTimeout(function() { $tw.utils.setStyle(targetElement,[ {transition: "none"}, {transform: "none"} ]); - },$tw.config.preferences.animationDuration); + },duration); // Set up the initial position of the element $tw.utils.setStyle(targetElement,[ {transition: "none"}, @@ -35,8 +36,8 @@ PopListView.prototype.insert = function(index) { $tw.utils.forceLayout(targetElement); // Transition to the final position $tw.utils.setStyle(targetElement,[ - {transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out, " + - "opacity " + $tw.config.preferences.animationDurationMs + " ease-in-out"}, + {transition: $tw.utils.roundTripPropertyName("transform") + " " + duration + "ms ease-in-out, " + + "opacity " + duration + "ms ease-in-out"}, {transform: "scale(1)"}, {opacity: "1.0"} ]); @@ -44,13 +45,14 @@ PopListView.prototype.insert = function(index) { PopListView.prototype.remove = function(index) { var listElementNode = this.listWidget.children[index], - targetElement = listElementNode.domNode; + targetElement = listElementNode.domNode, + duration = $tw.utils.getAnimationDuration(); // Remove the element at the end of the transition setTimeout(function() { if(targetElement.parentNode) { targetElement.parentNode.removeChild(targetElement); } - },$tw.config.preferences.animationDuration); + },duration); // Animate the closure $tw.utils.setStyle(targetElement,[ {transition: "none"}, @@ -59,8 +61,8 @@ PopListView.prototype.remove = function(index) { ]); $tw.utils.forceLayout(targetElement); $tw.utils.setStyle(targetElement,[ - {transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out, " + - "opacity " + $tw.config.preferences.animationDurationMs + " ease-in-out"}, + {transition: $tw.utils.roundTripPropertyName("transform") + " " + duration + "ms ease-in-out, " + + "opacity " + duration + "ms ease-in-out"}, {transform: "scale(0.1)"}, {opacity: "0.0"} ]); diff --git a/core/modules/widgets/list/listviews/zoomin.js b/core/modules/widgets/list/listviews/zoomin.js index f2903f172..cfed003dc 100644 --- a/core/modules/widgets/list/listviews/zoomin.js +++ b/core/modules/widgets/list/listviews/zoomin.js @@ -74,7 +74,8 @@ Visualise navigating back to the previous tiddler */ ZoominListView.prototype.remove = function(index) { var listElementNode = this.listWidget.children[index], - targetElement = listElementNode.domNode; + targetElement = listElementNode.domNode, + duration = $tw.utils.getAnimationDuration(); // Set up the tiddler that is being closed $tw.utils.setStyle(targetElement,[ {position: "absolute"}, @@ -96,7 +97,7 @@ ZoominListView.prototype.remove = function(index) { {display: "block"}, {transformOrigin: "50% 50%"}, {transform: "translateX(0px) translateY(0px) scale(10)"}, - {transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in, opacity " + $tw.config.preferences.animationDurationMs + " ease-in"}, + {transition: $tw.utils.roundTripPropertyName("transform") + " " + duration + "ms ease-in, opacity " + duration + "ms ease-in"}, {opacity: "0"}, {zIndex: "500"} ]); @@ -109,7 +110,7 @@ ZoominListView.prototype.remove = function(index) { $tw.utils.setStyle(targetElement,[ {transformOrigin: "50% 50%"}, {transform: "translateX(0px) translateY(0px) scale(0.1)"}, - {transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in, opacity " + $tw.config.preferences.animationDurationMs + " ease-in"}, + {transition: $tw.utils.roundTripPropertyName("transform") + " " + duration + "ms ease-in, opacity " + duration + "ms ease-in"}, {opacity: "0"}, {zIndex: "0"} ]); @@ -118,7 +119,7 @@ ZoominListView.prototype.remove = function(index) { if(targetElement.parentNode) { targetElement.parentNode.removeChild(targetElement); } - },$tw.config.preferences.animationDuration); + },duration); // Now the tiddler we're going back to if(toElement) { $tw.utils.setStyle(toElement,[ @@ -130,7 +131,8 @@ ZoominListView.prototype.remove = function(index) { }; ZoominListView.prototype.navigateTo = function(historyInfo) { - var listElementIndex = this.listWidget.findListElementByTitle(0,historyInfo.title); + var listElementIndex = this.listWidget.findListElementByTitle(0,historyInfo.title), + duration = $tw.utils.getAnimationDuration(); if(listElementIndex === undefined) { return; } @@ -172,7 +174,7 @@ ZoominListView.prototype.navigateTo = function(historyInfo) { this.currentTiddler = targetElement; // Transform the target tiddler to its natural size $tw.utils.setStyle(targetElement,[ - {transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in, opacity " + $tw.config.preferences.animationDurationMs + " ease-in"}, + {transition: $tw.utils.roundTripPropertyName("transform") + " " + duration + "ms ease-in, opacity " + duration + "ms ease-in"}, {opacity: "1.0"}, {transform: "translateX(0px) translateY(0px) scale(1)"}, {zIndex: "500"}, @@ -183,7 +185,7 @@ ZoominListView.prototype.navigateTo = function(historyInfo) { x = zoomBounds.left - targetBounds.left - (sourceBounds.left - targetBounds.left) * scale; y = zoomBounds.top - targetBounds.top - (sourceBounds.top - targetBounds.top) * scale; $tw.utils.setStyle(prevCurrentTiddler,[ - {transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in, opacity " + $tw.config.preferences.animationDurationMs + " ease-in"}, + {transition: $tw.utils.roundTripPropertyName("transform") + " " + duration + "ms ease-in, opacity " + duration + "ms ease-in"}, {opacity: "0.0"}, {transformOrigin: "0 0"}, {transform: "translateX(" + x + "px) translateY(" + y + "px) scale(" + scale + ")"}, @@ -194,7 +196,7 @@ ZoominListView.prototype.navigateTo = function(historyInfo) { if(self.currentTiddler !== prevCurrentTiddler) { prevCurrentTiddler.style.display = "none"; } - },$tw.config.preferences.animationDuration); + },duration); } // Scroll the target into view // $tw.pageScroller.scrollIntoView(targetElement); diff --git a/core/wiki/ControlPanel.tid b/core/wiki/ControlPanel.tid index 27d5d8566..7e78f2037 100644 --- a/core/wiki/ControlPanel.tid +++ b/core/wiki/ControlPanel.tid @@ -8,6 +8,8 @@ title: $:/ControlPanel * [[Username for signing edits|$:/status/UserName]]: <$edit tiddler="$:/status/UserName" default="" type="input"/> +* [[Animation duration|$:/config/AnimationDuration]]: <$edit tiddler="$:/config/AnimationDuration" default="" type="input"/> + * Edit [[DefaultTiddlers|$:/DefaultTiddlers]] to choose which tiddlers are displayed at startup ! Import tiddlers diff --git a/core/wiki/config/AnimationDuration.tid b/core/wiki/config/AnimationDuration.tid new file mode 100644 index 000000000..b2a46cd67 --- /dev/null +++ b/core/wiki/config/AnimationDuration.tid @@ -0,0 +1,3 @@ +title: $:/config/AnimationDuration + +400 \ No newline at end of file