From 811df7bbf07528a1b7318b7daf72615c8ba21e4b Mon Sep 17 00:00:00 2001 From: Jermolene Date: Tue, 8 Jul 2014 10:07:17 +0100 Subject: [PATCH 1/2] Refactor animation easings --- core/modules/storyviews/classic.js | 12 +++++++----- core/modules/storyviews/zoomin.js | 10 ++++++---- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/core/modules/storyviews/classic.js b/core/modules/storyviews/classic.js index 9728ce4a1..90fab15a1 100644 --- a/core/modules/storyviews/classic.js +++ b/core/modules/storyviews/classic.js @@ -12,6 +12,8 @@ Views the story as a linear sequence /*global $tw: false */ "use strict"; +var easing = "cubic-bezier(0.645, 0.045, 0.355, 1)"; // From http://easings.net/#easeInOutCubic + var ClassicStoryView = function(listWidget) { this.listWidget = listWidget; } @@ -51,8 +53,8 @@ ClassicStoryView.prototype.insert = function(widget) { $tw.utils.forceLayout(targetElement); // Transition to the final position $tw.utils.setStyle(targetElement,[ - {transition: "opacity " + duration + "ms ease-in-out, " + - "margin-bottom " + duration + "ms ease-in-out"}, + {transition: "opacity " + duration + "ms " + easing + ", " + + "margin-bottom " + duration + "ms " + easing}, {marginBottom: currMarginBottom + "px"}, {opacity: "1.0"} ]); @@ -80,9 +82,9 @@ ClassicStoryView.prototype.remove = function(widget) { ]); $tw.utils.forceLayout(targetElement); $tw.utils.setStyle(targetElement,[ - {transition: $tw.utils.roundTripPropertyName("transform") + " " + duration + "ms ease-in-out, " + - "opacity " + duration + "ms ease-in-out, " + - "margin-bottom " + duration + "ms ease-in-out"}, + {transition: $tw.utils.roundTripPropertyName("transform") + " " + duration + "ms " + easing + ", " + + "opacity " + duration + "ms " + easing + ", " + + "margin-bottom " + duration + "ms " + easing}, {transform: "translateX(-" + currWidth + "px)"}, {marginBottom: (-currHeight) + "px"}, {opacity: "0.0"} diff --git a/core/modules/storyviews/zoomin.js b/core/modules/storyviews/zoomin.js index 7f210a7c8..42683566b 100644 --- a/core/modules/storyviews/zoomin.js +++ b/core/modules/storyviews/zoomin.js @@ -12,6 +12,8 @@ Zooms between individual tiddlers /*global $tw: false */ "use strict"; +var easing = "cubic-bezier(0.645, 0.045, 0.355, 1)"; // From http://easings.net/#easeInOutCubic + var ZoominListView = function(listWidget) { var self = this; this.listWidget = listWidget; @@ -77,7 +79,7 @@ ZoominListView.prototype.navigateTo = function(historyInfo) { this.currentTiddlerDomNode = targetElement; // Transform the target tiddler to its natural size $tw.utils.setStyle(targetElement,[ - {transition: $tw.utils.roundTripPropertyName("transform") + " " + duration + "ms ease-in, opacity " + duration + "ms ease-in"}, + {transition: $tw.utils.roundTripPropertyName("transform") + " " + duration + "ms " + easing + ", opacity " + duration + "ms " + easing}, {opacity: "1.0"}, {transform: "translateX(0px) translateY(0px) scale(1)"}, {zIndex: "500"}, @@ -88,7 +90,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") + " " + duration + "ms ease-in, opacity " + duration + "ms ease-in"}, + {transition: $tw.utils.roundTripPropertyName("transform") + " " + duration + "ms " + easing + ", opacity " + duration + "ms " + easing}, {opacity: "0.0"}, {transformOrigin: "0 0"}, {transform: "translateX(" + x + "px) translateY(" + y + "px) scale(" + scale + ")"}, @@ -151,7 +153,7 @@ ZoominListView.prototype.remove = function(widget) { {display: "block"}, {transformOrigin: "50% 50%"}, {transform: "translateX(0px) translateY(0px) scale(10)"}, - {transition: $tw.utils.roundTripPropertyName("transform") + " " + duration + "ms ease-in, opacity " + duration + "ms ease-in"}, + {transition: $tw.utils.roundTripPropertyName("transform") + " " + duration + "ms " + easing + ", opacity " + duration + "ms " + easing}, {opacity: "0"}, {zIndex: "500"} ]); @@ -164,7 +166,7 @@ ZoominListView.prototype.remove = function(widget) { $tw.utils.setStyle(targetElement,[ {transformOrigin: "50% 50%"}, {transform: "translateX(0px) translateY(0px) scale(0.1)"}, - {transition: $tw.utils.roundTripPropertyName("transform") + " " + duration + "ms ease-in, opacity " + duration + "ms ease-in"}, + {transition: $tw.utils.roundTripPropertyName("transform") + " " + duration + "ms " + easing + ", opacity " + duration + "ms " + easing}, {opacity: "0"}, {zIndex: "0"} ]); From 91acad0f7ce8637945a953dfcb122cd31292626d Mon Sep 17 00:00:00 2001 From: Jermolene Date: Tue, 8 Jul 2014 10:16:10 +0100 Subject: [PATCH 2/2] Add support for story backdrop and frontdrop Allows elements to be added above or below the story river --- core/ui/PageTemplate/story.tid | 22 ++++++++++++++++++- .../tw5.com/tiddlers/concepts/SystemTags.tid | 4 +++- 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/core/ui/PageTemplate/story.tid b/core/ui/PageTemplate/story.tid index 7545b7c0b..692bce49c 100644 --- a/core/ui/PageTemplate/story.tid +++ b/core/ui/PageTemplate/story.tid @@ -3,6 +3,26 @@ tags: $:/tags/PageTemplate
-<$list filter="[list[$:/StoryList]]" history="$:/HistoryList" template="$:/core/ui/ViewTemplate" editTemplate="$:/core/ui/EditTemplate" storyview={{$:/view}} /> +
+ +<$list filter="[all[shadows+tiddlers]tag[$:/tags/StoryBackdrop]!has[draft.of]]"> + +<$transclude/> + + + +
+ +<$list filter="[list[$:/StoryList]]" history="$:/HistoryList" template="$:/core/ui/ViewTemplate" editTemplate="$:/core/ui/EditTemplate" storyview={{$:/view}} /> + +
+ +<$list filter="[all[shadows+tiddlers]tag[$:/tags/StoryFrontdrop]!has[draft.of]]"> + +<$transclude/> + + + +
diff --git a/editions/tw5.com/tiddlers/concepts/SystemTags.tid b/editions/tw5.com/tiddlers/concepts/SystemTags.tid index 1ca539491..c3977a897 100644 --- a/editions/tw5.com/tiddlers/concepts/SystemTags.tid +++ b/editions/tw5.com/tiddlers/concepts/SystemTags.tid @@ -1,5 +1,5 @@ created: 20130822080600000 -modified: 20131228161338857 +modified: 20140707161338857 tags: concepts title: SystemTags type: text/vnd.tiddlywiki @@ -17,6 +17,8 @@ System tags are used to give special behaviour to tiddlers: * [[$:/tags/EditToolbar]] for the edit mode tiddler toolbar * [[$:/tags/PageControls]] for the page control tools in the sidebar * [[$:/tags/PageTemplate]] for the main page elements +* [[$:/tags/StoryBackdrop]] for elements to be placed at the top of the story river +* [[$:/tags/StoryFrontdrop]] for elements to be placed at the bottom of the story river * [[$:/tags/RawMarkup]] for raw markup to be included in the generated HTML file ! System tags in use