2012-10-23 16:13:47 +00:00
|
|
|
/*\
|
|
|
|
title: $:/core/modules/macros/list/listviews/classic.js
|
|
|
|
type: application/javascript
|
|
|
|
module-type: listview
|
|
|
|
|
|
|
|
Views the list as a linear sequence
|
|
|
|
|
|
|
|
\*/
|
|
|
|
(function(){
|
|
|
|
|
|
|
|
/*jslint node: true, browser: true */
|
|
|
|
/*global $tw: false */
|
|
|
|
"use strict";
|
|
|
|
|
|
|
|
function ClassicListView(listMacro) {
|
|
|
|
this.listMacro = listMacro;
|
|
|
|
};
|
|
|
|
|
2012-10-23 17:19:20 +00:00
|
|
|
ClassicListView.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;
|
|
|
|
// Animate the closure
|
2012-10-23 17:45:26 +00:00
|
|
|
targetElement.style[$tw.browser.transition] = "";
|
2012-10-23 17:19:20 +00:00
|
|
|
targetElement.style[$tw.browser.transformorigin] = "0% 0%";
|
|
|
|
targetElement.style[$tw.browser.transform] = "translateX(" + window.innerWidth + "px)";
|
|
|
|
targetElement.style.opacity = "0.0";
|
|
|
|
targetElement.style.height = "0px";
|
|
|
|
$tw.utils.forceLayout(targetElement);
|
2012-10-25 12:33:21 +00:00
|
|
|
targetElement.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
|
|
|
|
"opacity " + $tw.config.preferences.animationDurationMs + " ease-out, " +
|
|
|
|
"height " + $tw.config.preferences.animationDurationMs + " ease-in-out";
|
2012-10-23 17:19:20 +00:00
|
|
|
targetElement.style[$tw.browser.transform] = "translateX(0px)";
|
|
|
|
targetElement.style.opacity = "1.0";
|
|
|
|
targetElement.style.height = currHeight + "px";
|
|
|
|
};
|
|
|
|
|
|
|
|
ClassicListView.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.browser.transitionEnd,function(event) {
|
|
|
|
if(wrapperElement.parentNode) {
|
|
|
|
wrapperElement.parentNode.removeChild(wrapperElement);
|
|
|
|
}
|
|
|
|
},false);
|
|
|
|
// Animate the closure
|
2012-10-25 12:33:21 +00:00
|
|
|
wrapperElement.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
|
|
|
|
"opacity " + $tw.config.preferences.animationDurationMs + " ease-out, " +
|
|
|
|
"height " + $tw.config.preferences.animationDurationMs + " ease-in-out";
|
2012-10-23 17:19:20 +00:00
|
|
|
wrapperElement.style[$tw.browser.transformorigin] = "0% 0%";
|
|
|
|
wrapperElement.style[$tw.browser.transform] = "translateX(0px)";
|
|
|
|
wrapperElement.style.opacity = "1.0";
|
|
|
|
wrapperElement.style.height = currHeight + "px";
|
|
|
|
$tw.utils.forceLayout(wrapperElement);
|
2012-10-23 17:45:26 +00:00
|
|
|
wrapperElement.style[$tw.browser.transform] = "translateX(-" + window.innerWidth + "px)";
|
2012-10-23 17:19:20 +00:00
|
|
|
wrapperElement.style.opacity = "0.0";
|
|
|
|
wrapperElement.style.height = "0px";
|
|
|
|
// Returning true causes the DOM node not to be deleted
|
|
|
|
return true;
|
2012-10-23 16:13:47 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
exports["classic"] = ClassicListView;
|
|
|
|
|
|
|
|
})();
|