1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-24 00:50:28 +00:00

Re-introduce the sideways view

And further related tweaks
This commit is contained in:
Jeremy Ruston 2012-10-28 08:46:35 +00:00
parent f2460a3744
commit 07c5a43404
7 changed files with 224 additions and 16 deletions

View File

@ -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

View File

@ -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;
})();

View File

@ -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 {
overflow-x: auto;
.mediumCecilyView .tw-list-element {
overflow: auto;
white-space: normal;
}
.mediumCecily .tw-cecily-tiddler-frame {
width: 300px;
.mediumCecilyView .tw-cecily-tiddler-frame {
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
*/

View File

@ -146,24 +146,57 @@ a.tw-tiddlylink-missing {
Cecily views
*/
.mediumCecily {
overflow-x: scroll;
.mediumCecilyView {
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;
}
/*

View File

@ -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">>
}}}

View File

@ -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">>
}}}

View File

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