mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-12-24 17:10:29 +00:00
Re-introduce the sideways view
And further related tweaks
This commit is contained in:
parent
f2460a3744
commit
07c5a43404
@ -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
|
||||
|
132
core/modules/macros/list/listviews/sideways.js
Normal file
132
core/modules/macros/list/listviews/sideways.js
Normal 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;
|
||||
|
||||
})();
|
@ -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
|
||||
*/
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
/*
|
||||
|
@ -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">>
|
||||
}}}
|
||||
|
7
tw5.com/tiddlers/samples/SidewaysView.tid
Normal file
7
tw5.com/tiddlers/samples/SidewaysView.tid
Normal 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">>
|
||||
}}}
|
@ -1,6 +1,7 @@
|
||||
title: $:/DefaultTiddlers
|
||||
|
||||
HelloThere
|
||||
SidewaysView
|
||||
CecilyView
|
||||
Introduction
|
||||
Improvements
|
||||
|
Loading…
Reference in New Issue
Block a user