diff --git a/core/modules/macros/list/list.js b/core/modules/macros/list/list.js index 8138cac92..4d8b5dcbe 100644 --- a/core/modules/macros/list/list.js +++ b/core/modules/macros/list/list.js @@ -18,6 +18,7 @@ exports.info = { params: { type: {byPos: 0, type: "text"}, filter: {byName: true, type: "filter"}, + history: {byName: true, type: "tiddler"}, template: {byName: true, type: "tiddler"}, templateText: {byName: true, type: "text"}, editTemplate: {byName: true, type: "tiddler"}, @@ -64,6 +65,7 @@ exports.executeMacro = function() { exports.postRenderInDom = function() { this.listview = this.chooseListView(); + this.history = []; }; /* @@ -209,8 +211,21 @@ exports.refreshInDom = function(changes) { return; } } + // Reflect any changes in the list + this.handleListChanges(changes); + // Process any history list changes + if(this.hasParameter("history") && $tw.utils.hop(changes,this.params.history)) { + this.handleHistoryChanges(); + } +}; + +/* +Handle changes to the content of the list +*/ +exports.handleListChanges = function(changes) { // Get the list of tiddlers, saving the previous length - var prevListLength = this.list.length; + var t, + prevListLength = this.list.length; this.getTiddlerList(); // Check if the list is empty if(this.list.length === 0) { @@ -265,4 +280,26 @@ exports.refreshInDom = function(changes) { } }; +/* +Handle any changes to the history list +*/ +exports.handleHistoryChanges = function() { + // Get the history data + var newHistory = this.wiki.getTiddlerData(this.params.history,[]); + // Ignore any entries of the history that match the previous history + var entry = 0; + while(entry < newHistory.length && entry < this.history.length && newHistory[entry].title === this.history[entry].title) { + entry++; + } + // Navigate forwards to each of the new tiddlers + while(entry < newHistory.length) { + if(this.listview && this.listview.navigateTo) { + this.listview.navigateTo(newHistory[entry].title); + } + entry++; + } + // Update the history + this.history = newHistory; +}; + })(); diff --git a/core/modules/macros/list/listviews/cecily.js b/core/modules/macros/list/listviews/cecily.js index 3892d005a..e82da89ca 100644 --- a/core/modules/macros/list/listviews/cecily.js +++ b/core/modules/macros/list/listviews/cecily.js @@ -74,13 +74,16 @@ CecilyListView.prototype.lookupTiddlerInMap = function(title,domNode) { CecilyListView.prototype.positionTiddler = function(title,domNode) { var pos = this.lookupTiddlerInMap(title,domNode), scale = pos.w/domNode.offsetWidth; -console.log("positioning",title,"domNode.offsetWidth",domNode.offsetWidth); domNode.style.position = "absolute"; $tw.utils.setStyle(domNode,[ - {transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out"}, + {transition: ""}, {transformOrigin: "0% 0%"}, {transform: "translateX(" + pos.x + "px) translateY(" + pos.y + "px) scale(" + scale + ")"} ]); + $tw.utils.forceLayout(domNode); + $tw.utils.setStyle(domNode,[ + {transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out, opacity " + $tw.config.preferences.animationDurationMs + " ease-out"} + ]); }; CecilyListView.prototype.insert = function(index) { @@ -88,13 +91,10 @@ CecilyListView.prototype.insert = function(index) { targetElement = listElementNode.domNode; // Animate the insertion $tw.utils.setStyle(targetElement,[ - {transition: ""}, - {transformOrigin: "0% 0%"}, {opacity: "0.0"} ]); $tw.utils.forceLayout(targetElement); $tw.utils.setStyle(targetElement,[ - {transition: "opacity " + $tw.config.preferences.animationDurationMs + " ease-out"}, {opacity: "1.0"} ]); // Position the dom node diff --git a/core/modules/macros/list/listviews/classic.js b/core/modules/macros/list/listviews/classic.js index ca5d15a2b..4c7cbb8db 100644 --- a/core/modules/macros/list/listviews/classic.js +++ b/core/modules/macros/list/listviews/classic.js @@ -16,6 +16,23 @@ function ClassicListView(listMacro) { this.listMacro = listMacro; } +ClassicListView.prototype.navigateTo = function(title) { + var listElementIndex = this.listMacro.findListElementByTitle(0,title), + listElementNode = this.listMacro.listFrame.children[listElementIndex], + targetElement = listElementNode.domNode; + // Replace any previous transition on the target element + $tw.utils.setStyle(targetElement,[ + {transition: ""} + ]); + $tw.utils.forceLayout(targetElement); + $tw.utils.setStyle(targetElement,[ + {transform: ""}, + ]); + $tw.utils.forceLayout(targetElement); + // Scroll the target element into view + $tw.scroller.scrollIntoView(targetElement); +}; + ClassicListView.prototype.insert = function(index) { var listElementNode = this.listMacro.listFrame.children[index], targetElement = listElementNode.domNode; diff --git a/core/modules/macros/navigator.js b/core/modules/macros/navigator.js index 4e040fb0f..56f19fccd 100644 --- a/core/modules/macros/navigator.js +++ b/core/modules/macros/navigator.js @@ -69,9 +69,9 @@ exports.eventMap["tw-navigate"] = function(event) { this.wiki.setTextReference(this.params.set,event.navigateTo); } // Add a new record to the top of the history stack - this.history = this.getList(this.historyTitle); - this.history.push(event.navigateTo); - this.saveList(this.historyTitle,this.history); + this.history = this.wiki.getTiddlerData(this.historyTitle,[]); + this.history.push({title: event.navigateTo}); + this.wiki.setTiddlerData(this.historyTitle,this.history); event.stopPropagation(); return false; }; @@ -181,9 +181,9 @@ exports.eventMap["tw-NewTiddler"] = function(event) { // Save the updated story this.saveList(this.storyTitle,this.story); // Add a new record to the top of the history stack - this.history = this.getList(this.historyTitle); - this.history.push(draftTitle); - this.saveList(this.historyTitle,this.history); + this.history = this.wiki.getTiddlerData(this.historyTitle,[]); + this.history.push({title: draftTitle}); + this.wiki.setTiddlerData(this.historyTitle,this.history); event.stopPropagation(); return false; }; diff --git a/core/styles/tiddlywiki.css b/core/styles/tiddlywiki.css index 5f3245958..971a84848 100644 --- a/core/styles/tiddlywiki.css +++ b/core/styles/tiddlywiki.css @@ -5931,8 +5931,9 @@ Cecily views box-shadow: inset 1px 1px 4px 1px rgba(0, 0, 0, 0.15); } -.mediumCecily * { +.mediumCecily .tw-list-element { overflow-x: auto; + white-space: normal; } .mediumCecily .tw-cecily-tiddler-frame { diff --git a/core/templates/PageTemplate.tid b/core/templates/PageTemplate.tid index ad535c7c5..19311a51b 100644 --- a/core/templates/PageTemplate.tid +++ b/core/templates/PageTemplate.tid @@ -93,7 +93,7 @@ title: $:/templates/PageTemplate