mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-11-23 18:17:20 +00:00
Added new storyview that shows tiddlers stacked up sideways
This commit is contained in:
parent
08e80d6e02
commit
4bbe0cd4d3
45
core/modules/macros/story/views/sideways.js
Normal file
45
core/modules/macros/story/views/sideways.js
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
/*\
|
||||||
|
title: $:/core/modules/macros/story/views/sideways.js
|
||||||
|
type: application/javascript
|
||||||
|
module-type: storyview
|
||||||
|
|
||||||
|
A storyview that shows a sequence of tiddlers as horizontally stacked blocks
|
||||||
|
|
||||||
|
\*/
|
||||||
|
(function(){
|
||||||
|
|
||||||
|
/*jslint node: true, browser: true */
|
||||||
|
/*global $tw: false */
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
function setStoryElementStyles(e) {
|
||||||
|
e.style.display = "inline-block";
|
||||||
|
e.style.width = "350px";
|
||||||
|
e.style.verticalAlign = "top";
|
||||||
|
e.style.whiteSpace = "normal";
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidewaysView(story) {
|
||||||
|
this.story = story;
|
||||||
|
var wrapper = this.story.child.children[1].domNode;
|
||||||
|
// Scroll horizontally
|
||||||
|
wrapper.style.whiteSpace = "nowrap";
|
||||||
|
// Make all the tiddlers position absolute, and hide all but the first one
|
||||||
|
for(var t=0; t<wrapper.children.length; t++) {
|
||||||
|
setStoryElementStyles(wrapper.children[t]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Visualise navigation to the specified tiddler macro, optionally specifying a source node for the visualisation
|
||||||
|
targetTiddlerNode: tree node of the tiddler macro we're navigating to
|
||||||
|
isNew: true if the node we're navigating to has just been added to the DOM
|
||||||
|
sourceNode: optional tree node that initiated the navigation
|
||||||
|
*/
|
||||||
|
SidewaysView.prototype.navigate = function(targetTiddlerNode,isNew,sourceEvent) {
|
||||||
|
setStoryElementStyles(targetTiddlerNode.domNode);
|
||||||
|
};
|
||||||
|
|
||||||
|
exports.sideways = SidewaysView;
|
||||||
|
|
||||||
|
})();
|
@ -27,6 +27,7 @@ title: $:/templates/PageTemplate
|
|||||||
<div class="open">
|
<div class="open">
|
||||||
{{dropdown-menu tw-suppress-missing-tiddlylink{
|
{{dropdown-menu tw-suppress-missing-tiddlylink{
|
||||||
* <<link to:classic>< <<hide tiddler:[[$:/CurrentView]] notequal:classic>< <span class="tw-ticked-menu-item"></span> >> Classic>>
|
* <<link to:classic>< <<hide tiddler:[[$:/CurrentView]] notequal:classic>< <span class="tw-ticked-menu-item"></span> >> Classic>>
|
||||||
|
* <<link to:sideways>< <<hide tiddler:[[$:/CurrentView]] notequal:sideways>< <span class="tw-ticked-menu-item"></span> >> Sideways>>
|
||||||
* <<link to:zoomin>< <<hide tiddler:[[$:/CurrentView]] notequal:zoomin>< <span class="tw-ticked-menu-item"></span> >> Zoomin>>
|
* <<link to:zoomin>< <<hide tiddler:[[$:/CurrentView]] notequal:zoomin>< <span class="tw-ticked-menu-item"></span> >> Zoomin>>
|
||||||
* <<link to:pasteboard>< <<hide tiddler:[[$:/CurrentView]] notequal:pasteboard>< <span class="tw-ticked-menu-item"></span> >> Pasteboard>>
|
* <<link to:pasteboard>< <<hide tiddler:[[$:/CurrentView]] notequal:pasteboard>< <span class="tw-ticked-menu-item"></span> >> Pasteboard>>
|
||||||
}}}
|
}}}
|
||||||
|
@ -9,7 +9,7 @@ body {
|
|||||||
|
|
||||||
.tw-story-element {
|
.tw-story-element {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 30px 0px 30px 0px;
|
margin: 30px 5px 30px 5px;
|
||||||
padding: 20px 20px 20px 20px;
|
padding: 20px 20px 20px 20px;
|
||||||
border: 1px solid #999;
|
border: 1px solid #999;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
Loading…
Reference in New Issue
Block a user