mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-07-30 07:40:38 +00:00
88 lines
3.0 KiB
JavaScript
88 lines
3.0 KiB
JavaScript
/*\
|
|
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 = "380px";
|
|
e.style.verticalAlign = "top";
|
|
e.style.whiteSpace = "normal";
|
|
}
|
|
|
|
function SidewaysView(story) {
|
|
this.story = story;
|
|
var wrapper = this.story.child.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 a new tiddler
|
|
toStoryElementNode: tree node of the tiddler macro we're navigating to
|
|
fromStoryElementNode: optionally, tree node of the tiddler we're navigating from
|
|
historyInfo: record from the history tiddler corresponding to this navigation
|
|
*/
|
|
SidewaysView.prototype.navigateForward = function(toStoryElement,fromStoryElement,historyInfo) {
|
|
$tw.scroller.scrollIntoView(toStoryElement.domNode);
|
|
};
|
|
|
|
/*
|
|
Visualise insertion of the specified tiddler macro, optionally specifying a source node for the visualisation
|
|
storyElementNode: tree node of the tiddler macro we're navigating to
|
|
*/
|
|
SidewaysView.prototype.insert = function(storyElementNode) {
|
|
setStoryElementStyles(storyElementNode.domNode);
|
|
$tw.scroller.scrollIntoView(storyElementNode.domNode);
|
|
};
|
|
|
|
SidewaysView.prototype.remove = function(storyElementNode) {
|
|
var targetElement = storyElementNode.domNode;
|
|
// Get the current width of the tiddler
|
|
var currWidth = targetElement.offsetWidth;
|
|
// Put a wrapper around the dom node we're closing
|
|
var wrapperElement = document.createElement("div");
|
|
targetElement.parentNode.insertBefore(wrapperElement,targetElement);
|
|
wrapperElement.appendChild(targetElement);
|
|
// Animate the closure
|
|
var d = $tw.config.preferences.animationDuration + "ms";
|
|
wrapperElement.style.display = "inline-block";
|
|
wrapperElement.style[$tw.browser.transformorigin] = "0% 0%";
|
|
wrapperElement.style[$tw.browser.transform] = "translateY(0px)";
|
|
wrapperElement.style.opacity = "1.0";
|
|
wrapperElement.style.width = currWidth + "px";
|
|
wrapperElement.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out, " +
|
|
"opacity " + d + " ease-out, " +
|
|
"width " + d + " ease-in-out";
|
|
// Attach an event handler for th eend of the transition
|
|
wrapperElement.addEventListener($tw.browser.transitionEnd,function(event) {
|
|
if(wrapperElement.parentNode) {
|
|
wrapperElement.parentNode.removeChild(wrapperElement);
|
|
}
|
|
},true);
|
|
// Animate
|
|
$tw.utils.forceLayout(wrapperElement);
|
|
wrapperElement.style[$tw.browser.transform] = "translateY(" + window.innerHeight + "px)";
|
|
wrapperElement.style.opacity = "0.0";
|
|
wrapperElement.style.width = "0px";
|
|
// Returning true causes the DOM node not to be deleted
|
|
return true;
|
|
};
|
|
|
|
exports.sideways = SidewaysView;
|
|
|
|
})();
|