mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-09-18 18:29:42 +00:00
6819365dfc
Fixed problem with starting up with the empty message displayed, and problem with incorrect width reading of newly inserted list elements
95 lines
3.0 KiB
JavaScript
95 lines
3.0 KiB
JavaScript
/*\
|
|
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;
|
|
// Prepare the list frame
|
|
var listFrame = this.listMacro.listFrame,
|
|
listFrameDomNode = listFrame.domNode;
|
|
// Prepare any list elements
|
|
for(var t=0; t<this.listMacro.list.length; t++) {
|
|
var index = this.listMacro.findListElementByTitle(0,this.listMacro.list[t]);
|
|
if(index !== undefined) {
|
|
var listElement = listFrame.children[index];
|
|
$tw.utils.setStyle(listElement.domNode,[
|
|
{verticalAlign: "top"},
|
|
{display: "inline-block"}
|
|
]);
|
|
}
|
|
}
|
|
}
|
|
|
|
SidewaysListView.prototype.navigateTo = function(historyInfo) {
|
|
var listElementIndex = this.listMacro.findListElementByTitle(0,historyInfo.title),
|
|
listElementNode = this.listMacro.listFrame.children[listElementIndex],
|
|
targetElement = listElementNode.domNode;
|
|
// Scroll the node into view
|
|
$tw.scroller.scrollIntoView(targetElement);
|
|
};
|
|
|
|
SidewaysListView.prototype.insert = function(index) {
|
|
var listElementNode = this.listMacro.listFrame.children[index],
|
|
targetElement = listElementNode.domNode;
|
|
// Set up the initial position of the element
|
|
$tw.utils.setStyle(targetElement,[
|
|
{verticalAlign: "top"},
|
|
{display: "inline-block"},
|
|
{transition: "none"},
|
|
{opacity: "0.0"},
|
|
]);
|
|
var currWidth = targetElement.offsetWidth + parseInt(window.getComputedStyle(targetElement).marginLeft,10);
|
|
$tw.utils.setStyle(targetElement,[
|
|
{marginRight: (-currWidth) + "px"}
|
|
]);
|
|
$tw.utils.forceLayout(targetElement);
|
|
// Transition to the final position
|
|
$tw.utils.setStyle(targetElement,[
|
|
{transition: "opacity " + $tw.config.preferences.animationDurationMs + " ease-out, " +
|
|
"margin-right " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
|
|
{opacity: "1.0"},
|
|
{marginRight: ""}
|
|
]);
|
|
};
|
|
|
|
SidewaysListView.prototype.remove = function(index) {
|
|
var listElementNode = this.listMacro.listFrame.children[index],
|
|
targetElement = listElementNode.domNode,
|
|
currWidth = targetElement.offsetWidth + parseInt(window.getComputedStyle(targetElement).marginLeft,10);
|
|
// Attach an event handler for the end of the transition
|
|
targetElement.addEventListener($tw.utils.convertEventName("transitionEnd"),function(event) {
|
|
if(targetElement.parentNode) {
|
|
targetElement.parentNode.removeChild(targetElement);
|
|
}
|
|
},false);
|
|
// Animate the closure
|
|
$tw.utils.setStyle(targetElement,[
|
|
{transition: ""},
|
|
{opacity: "1.0"},
|
|
{marginRight: "0px"}
|
|
]);
|
|
$tw.utils.forceLayout(targetElement);
|
|
$tw.utils.setStyle(targetElement,[
|
|
{transition: "opacity " + $tw.config.preferences.animationDurationMs + " ease-out, " +
|
|
"margin-right " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
|
|
{opacity: "0.0"},
|
|
{marginRight: (-currWidth) + "px"}
|
|
]);
|
|
// Returning true causes the DOM node not to be deleted
|
|
return true;
|
|
};
|
|
|
|
exports["sideways"] = SidewaysListView;
|
|
|
|
})();
|