Re-introduce the sideways view

And further related tweaks

core/modules/macros/list/listviews/cecily.js

@@ -16,10 +16,8 @@ function CecilyListView(listMacro) {
 	// The list macro we're attached to
 	this.listMacro = listMacro;
 	// Prepare the list frame
-	var listFrameDomNode = this.listMacro.listFrame.domNode
+	var listFrameDomNode = this.listMacro.listFrame.domNode;
 	listFrameDomNode.style.position = "relative";
-	listFrameDomNode.style.width = "100%"; // TODO: This isn't the best way to set the width and height
-	listFrameDomNode.style.height = "400px";
 	// Prepare the nozzle for dispensing new tiddlers onto the map
 	this.newTiddlerPosition = {x: 0, y: 0};
 	// Position the initial list entries on the map

core/modules/macros/list/listviews/sideways.js

@@ -0,0 +1,132 @@
+/*\
+title: $:/core/modules/macros/list/listviews/sideways.js
+type: application/javascript
+module-type: listview
+
+Views the list as a sideways linear sequence
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+function SidewaysListView(listMacro) {
+	this.listMacro = listMacro;
+}
+
+SidewaysListView.prototype.navigateTo = function(historyInfo) {
+	var listElementIndex = this.listMacro.findListElementByTitle(0,historyInfo.title),
+		listElementNode = this.listMacro.listFrame.children[listElementIndex],
+		targetElement = listElementNode.domNode;
+	// Remove any transform on the target element
+	$tw.utils.setStyle(targetElement,[
+		{transition: "none"},
+		{transformOrigin: "0% 0%"},
+		{transform: "none"},
+		{height: "auto"}
+	]);
+	// Compute the start and end positions of the target element
+	var srcRect = historyInfo.fromPageRect;
+	if(!srcRect) {
+		var scrollPos = $tw.utils.getScrollPosition();
+		srcRect.width = window.innerWidth;
+		srcRect.height = window.innerHeight;
+		srcRect = {
+			left: scrollPos.x,
+			top: scrollPos.y,
+			right: scrollPos.x + srcRect.width,
+			bottom: scrollPos.y + srcRect.height
+		};
+	};
+$tw.utils.forceLayout(targetElement);
+	var dstRect = $tw.utils.getBoundingPageRect(targetElement);
+	// Compute the transformations
+	var scale = srcRect.width / dstRect.width;
+	// Position the target element over the source rectangle
+	$tw.utils.setStyle(targetElement,[
+		{transition: "none"},
+		{transform: "translateX(" + (srcRect.left-dstRect.left) + "px) translateY(" + (srcRect.top-dstRect.top) + "px) scale(" + scale + ")"}
+	]);
+	$tw.utils.forceLayout(targetElement);
+	// Transition the target element to its final resting place
+	$tw.utils.setStyle(targetElement,[
+		{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
+					"opacity " + $tw.config.preferences.animationDurationMs + " ease-out"},
+		{transform: "none"}
+	]);
+	// Scroll the target element into view
+	$tw.scroller.scrollIntoView(dstRect);
+};
+
+SidewaysListView.prototype.insert = function(index) {
+	var listElementNode = this.listMacro.listFrame.children[index],
+		targetElement = listElementNode.domNode;
+	// Get the current height of the tiddler
+	var currHeight = targetElement.offsetHeight;
+	// Reset the height once the transition is over
+	targetElement.addEventListener($tw.utils.convertEventName("transitionEnd"),function(event) {
+		$tw.utils.setStyle(targetElement,[
+			{transition: "none"},
+			{height: "auto"}
+		]);
+	},false);
+	// Set up the initial position of the element
+	$tw.utils.setStyle(targetElement,[
+		{transition: "none"},
+		{transformOrigin: "0% 0%"},
+		{transform: "translateX(" + window.innerWidth + "px)"},
+		{opacity: "0.0"},
+		{height: "0px"}
+	]);
+	$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-out, " +
+					"height " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
+		{transform: "translateX(0px)"},
+		{opacity: "1.0"},
+		{height: currHeight + "px"}
+	]);
+};
+
+SidewaysListView.prototype.remove = function(index) {
+	var listElementNode = this.listMacro.listFrame.children[index],
+		targetElement = listElementNode.domNode;
+	// Get the current height of the tiddler
+	var currHeight = targetElement.offsetHeight;
+	// Put a wrapper around the dom node we're closing
+	var wrapperElement = document.createElement("div");
+	targetElement.parentNode.insertBefore(wrapperElement,targetElement);
+	wrapperElement.appendChild(targetElement);
+	// Attach an event handler for the end of the transition
+	wrapperElement.addEventListener($tw.utils.convertEventName("transitionEnd"),function(event) {
+		if(wrapperElement.parentNode) {
+			wrapperElement.parentNode.removeChild(wrapperElement);
+		}
+	},false);
+	// Animate the closure
+	$tw.utils.setStyle(wrapperElement,[
+		{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
+					"opacity " + $tw.config.preferences.animationDurationMs + " ease-out, " +
+					"height " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
+		{transformOrigin: "0% 0%"},
+		{transform: "translateX(0px)"},
+		{opacity: "1.0"},
+		{height: currHeight + "px"}
+	]);
+	$tw.utils.forceLayout(wrapperElement);
+	$tw.utils.setStyle(wrapperElement,[
+		{transform: "translateX(-" + window.innerWidth + "px)"},
+		{opacity: "0.0"},
+		{height: "0px"}
+	]);
+	// Returning true causes the DOM node not to be deleted
+	return true;
+};
+
+exports["sideways"] = SidewaysListView;
+
+})();

core/styles/tiddlywiki.css

@@ -5922,23 +5922,26 @@ a.tw-tiddlylink-missing {
 Cecily views
 */
 
-.mediumCecily {
+.mediumCecilyView {
+  width: 100%;
+  height: 400px;
   padding: 10px 10px 10px 10px;
-  overflow-x: scroll;
+  overflow: scroll;
   white-space: nowrap;
   background: #ccc;
   -webkit-box-shadow: inset 1px 1px 4px 1px rgba(0, 0, 0, 0.15);
      -moz-box-shadow: inset 1px 1px 4px 1px rgba(0, 0, 0, 0.15);
           box-shadow: inset 1px 1px 4px 1px rgba(0, 0, 0, 0.15);
+  -webkit-overflow-scroll: touch;
 }
 
-.mediumCecily .tw-list-element {
+.mediumCecilyView .tw-list-element {
-  overflow-x: auto;
+  overflow: auto;
   white-space: normal;
 }
 
-.mediumCecily .tw-cecily-tiddler-frame {
+.mediumCecilyView .tw-cecily-tiddler-frame {
-  width: 300px;
+  width: 400px;
   padding: 30px 30px 30px 30px;
   background-color: #fff;
   -webkit-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
@@ -5946,6 +5949,40 @@ Cecily views
           box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
 }
 
+/*
+Sideways views
+*/
+
+.mediumSidewaysView {
+  width: 100%;
+  height: 400px;
+  padding: 10px 10px 10px 10px;
+  overflow: scroll;
+  white-space: nowrap;
+  background: #ccc;
+  -webkit-box-shadow: inset 1px 1px 4px 1px rgba(0, 0, 0, 0.15);
+     -moz-box-shadow: inset 1px 1px 4px 1px rgba(0, 0, 0, 0.15);
+          box-shadow: inset 1px 1px 4px 1px rgba(0, 0, 0, 0.15);
+  -webkit-overflow-scroll: touch;
+}
+
+.mediumSidewaysView .tw-list-element {
+  overflow: auto;
+  white-space: normal;
+}
+
+.mediumSidewaysView .tw-sideways-tiddler-frame {
+  display: inline-block;
+  width: 400px;
+  padding: 30px 30px 30px 30px;
+  margin: 10px 10px 10px 10px;
+  vertical-align: top;
+  background-color: #fff;
+  -webkit-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
+     -moz-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
+          box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
+}
+
 /*
 Dropdown menus
 */

cssbuild/tiddlywiki.less

@@ -146,24 +146,57 @@ a.tw-tiddlylink-missing {
 Cecily views
 */
 
-.mediumCecily {
+.mediumCecilyView {
-	overflow-x: scroll;
+	overflow: scroll;
+	-webkit-overflow-scroll: 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;
 }
 
-.mediumCecily .tw-list-element {
+.mediumCecilyView .tw-list-element {
 	white-space: normal;
-	overflow-x: auto;
+	overflow: auto;
 }
 
-.mediumCecily .tw-cecily-tiddler-frame {
+.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: 300px;
+	width: 400px;
+}
+
+/*
+Sideways views
+*/
+
+.mediumSidewaysView {
+	overflow: scroll;
+	-webkit-overflow-scroll: 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;
+	margin: 10px 10px 10px 10px;
+	padding: 30px 30px 30px 30px;
+	.box-shadow(1px 1px 6px rgba(0,0,0,0.4));
+	background-color: #fff;
+	width: 400px;
 }
 
 /*

tw5.com/tiddlers/samples/CecilyView.tid

@@ -2,6 +2,6 @@ title: CecilyView
 
 "Cecily" provides a customisable ZoomableUserInterface to your tiddlers.
 
-{{mediumCecily{
+{{mediumCecilyView{
 <<list filter:"[list[$:/StoryList]]" history:"$:/HistoryList" template:"CecilyTemplate" listview:cecily itemClass:"tw-cecily-tiddler-frame">>
 }}}

tw5.com/tiddlers/samples/SidewaysView.tid

@@ -0,0 +1,7 @@
+title: SidewaysView
+
+This view shows your tiddlers stacked horizontally.
+
+{{mediumSidewaysView{
+<<list filter:"[list[$:/StoryList]]" history:"$:/HistoryList" template:"CecilyTemplate" listview:sideways itemClass:"tw-sideways-tiddler-frame">>
+}}}

tw5.com/wiki/DefaultTiddlers.tid

@@ -1,6 +1,7 @@
 title: $:/DefaultTiddlers
 
 HelloThere
+SidewaysView
 CecilyView
 Introduction
 Improvements