From 5443c8243a439f3e400735ed92f7e83083e498ac Mon Sep 17 00:00:00 2001 From: Jeremy Ruston Date: Sat, 3 Nov 2012 12:34:36 +0000 Subject: [PATCH] Lots of tweaks to list view animations There's a regression in that navigation animations are currently not working --- core/modules/macros/link.js | 2 +- core/modules/macros/list/listviews/cecily.js | 1 - core/modules/macros/list/listviews/classic.js | 112 ++++++------------ .../modules/macros/list/listviews/sideways.js | 57 +++------ core/modules/macros/navigator.js | 2 +- core/modules/macros/scrollable.js | 62 ++++++++++ core/modules/utils/dom/scroller.js | 3 +- core/styles/tiddlywiki.css | 58 ++------- core/templates/ViewTemplate.tid | 2 - cssbuild/tiddlywiki.less | 49 +------- tw5.com/tiddlers/samples/CecilyView.tid | 6 +- tw5.com/tiddlers/samples/SidewaysView.tid | 6 +- 12 files changed, 140 insertions(+), 220 deletions(-) create mode 100644 core/modules/macros/scrollable.js diff --git a/core/modules/macros/link.js b/core/modules/macros/link.js index 9d5940a64..859b07f0b 100644 --- a/core/modules/macros/link.js +++ b/core/modules/macros/link.js @@ -36,7 +36,7 @@ exports.handleEvent = function (event) { navEvent.initEvent("tw-navigate",true,true); navEvent.navigateTo = this.linkInfo.to; navEvent.navigateFromNode = this; - navEvent.navigateFromPageRect = $tw.utils.getBoundingPageRect(this.child.domNode); + navEvent.navigateFromClientRect = this.child.domNode.getBoundingClientRect(); event.target.dispatchEvent(navEvent); event.preventDefault(); return false; diff --git a/core/modules/macros/list/listviews/cecily.js b/core/modules/macros/list/listviews/cecily.js index 1873ce0f5..04f410f53 100644 --- a/core/modules/macros/list/listviews/cecily.js +++ b/core/modules/macros/list/listviews/cecily.js @@ -18,7 +18,6 @@ function CecilyListView(listMacro) { // Prepare the list frame var listFrame = this.listMacro.listFrame, listFrameDomNode = listFrame.domNode; - listFrameDomNode.style.position = "relative"; // Position the initial list entries on the map this.loadMap(); for(var t=0; t
<> << <
diff --git a/cssbuild/tiddlywiki.less b/cssbuild/tiddlywiki.less index 7f3ed5745..f49b193de 100644 --- a/cssbuild/tiddlywiki.less +++ b/cssbuild/tiddlywiki.less @@ -142,56 +142,19 @@ a.tw-tiddlylink-missing { font-style: inherit; } -/* -Cecily views -*/ +.tw-list-element { + white-space: normal; +} -.mediumCecilyView { - overflow: scroll; - -webkit-overflow-scrolling: touch; - white-space: nowrap; +.tw-scrollable-outer { .box-shadow(inset 1px 1px 4px 1px rgba(0, 0, 0, 0.15)); background: #ccc; - padding: 10px 10px 10px 10px; - width: 100%; - height: 400px; } -.mediumCecilyView .tw-list-element { - white-space: normal; - overflow: auto; +.tw-scrollable-inner { } -.mediumCecilyView .tw-cecily-tiddler-frame { - padding: 30px 30px 30px 30px; - .box-shadow(1px 1px 6px rgba(0,0,0,0.4)); - background-color: #fff; - width: 400px; -} - -/* -Sideways views -*/ - -.mediumSidewaysView { - overflow: scroll; - -webkit-overflow-scrolling: touch; - white-space: nowrap; - .box-shadow(inset 1px 1px 4px 1px rgba(0, 0, 0, 0.15)); - background: #ccc; - padding: 10px 10px 10px 10px; - width: 100%; - height: 400px; -} - -.mediumSidewaysView .tw-list-element { - white-space: normal; - overflow: auto; -} - -.mediumSidewaysView .tw-sideways-tiddler-frame { - vertical-align: top; - display: inline-block; +.tw-scrollable .tw-tiddler-frame { margin: 10px 10px 10px 10px; padding: 30px 30px 30px 30px; .box-shadow(1px 1px 6px rgba(0,0,0,0.4)); diff --git a/tw5.com/tiddlers/samples/CecilyView.tid b/tw5.com/tiddlers/samples/CecilyView.tid index 0f2b6ae7a..e7e1588f7 100644 --- a/tw5.com/tiddlers/samples/CecilyView.tid +++ b/tw5.com/tiddlers/samples/CecilyView.tid @@ -2,6 +2,6 @@ title: CecilyView "Cecily" provides a customisable ZoomableUserInterface to your tiddlers. -{{mediumCecilyView{ -<> -}}} +<< +<> +>> diff --git a/tw5.com/tiddlers/samples/SidewaysView.tid b/tw5.com/tiddlers/samples/SidewaysView.tid index d7ccbdf52..122d6f832 100644 --- a/tw5.com/tiddlers/samples/SidewaysView.tid +++ b/tw5.com/tiddlers/samples/SidewaysView.tid @@ -2,6 +2,6 @@ title: SidewaysView This view shows your tiddlers stacked horizontally. -{{mediumSidewaysView{ -<> -}}} +<< +<> +>>