97 lines
3.1 KiB
JavaScript
97 lines
3.1 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
|
|
var scrollEvent = document.createEvent("Event");
|
|
scrollEvent.initEvent("tw-scroll",true,true);
|
|
targetElement.dispatchEvent(scrollEvent);
|
|
};
|
|
|
|
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;
|
|
|
|
})();
|