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-11-03 12:34:36 +00:00
|
|
|
var listFrame = this.listMacro.listFrame,
|
|
|
|
listFrameDomNode = listFrame.domNode;
|
|
|
|
$tw.utils.setStyle(listFrameDomNode,[
|
|
|
|
{perspective: 50000},
|
|
|
|
]);
|
2012-10-25 21:20:27 +00:00
|
|
|
}
|
2012-10-23 16:13:47 +00:00
|
|
|
|
2012-10-26 21:12:40 +00:00
|
|
|
ClassicListView.prototype.navigateTo = function(historyInfo) {
|
|
|
|
var listElementIndex = this.listMacro.findListElementByTitle(0,historyInfo.title),
|
2012-10-26 16:19:34 +00:00
|
|
|
listElementNode = this.listMacro.listFrame.children[listElementIndex],
|
|
|
|
targetElement = listElementNode.domNode;
|
2012-10-28 09:51:19 +00:00
|
|
|
// Get the current height of the element
|
2012-10-28 09:30:45 +00:00
|
|
|
var currHeight = targetElement.offsetHeight;
|
2012-10-26 21:12:40 +00:00
|
|
|
// Compute the start and end positions of the target element
|
|
|
|
var srcRect = historyInfo.fromPageRect;
|
|
|
|
if(!srcRect) {
|
2012-11-03 12:34:36 +00:00
|
|
|
srcRect = {left: 0, top: 0, width: window.innerWidth, height: window.innerHeight};
|
2012-10-26 21:12:40 +00:00
|
|
|
};
|
2012-11-03 12:34:36 +00:00
|
|
|
var dstRect = targetElement.getBoundingClientRect();
|
|
|
|
// $tw.sprite.fly(srcRect,dstRect,{
|
|
|
|
// text: "Flying along at the speed of pixels\n\n\nBoo",
|
|
|
|
// style: "background:red;"
|
|
|
|
// });
|
2012-10-26 16:19:34 +00:00
|
|
|
// Scroll the target element into view
|
2012-11-03 12:34:36 +00:00
|
|
|
// $tw.scroller.scrollIntoView(dstRect);
|
2012-10-26 16:19:34 +00:00
|
|
|
};
|
|
|
|
|
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
|
2012-11-03 12:34:36 +00:00
|
|
|
var currHeight = targetElement.offsetHeight + parseInt(window.getComputedStyle(targetElement).marginTop,10);
|
|
|
|
// Reset the margin once the transition is over
|
2012-10-26 21:12:40 +00:00
|
|
|
targetElement.addEventListener($tw.utils.convertEventName("transitionEnd"),function(event) {
|
|
|
|
$tw.utils.setStyle(targetElement,[
|
|
|
|
{transition: "none"},
|
2012-11-03 12:34:36 +00:00
|
|
|
{marginBottom: "auto"}
|
2012-10-26 21:12:40 +00:00
|
|
|
]);
|
|
|
|
},false);
|
|
|
|
// Set up the initial position of the element
|
2012-10-25 21:20:27 +00:00
|
|
|
$tw.utils.setStyle(targetElement,[
|
2012-10-26 21:12:40 +00:00
|
|
|
{transition: "none"},
|
2012-11-03 12:34:36 +00:00
|
|
|
{marginBottom: (-currHeight) + "px"},
|
|
|
|
{opacity: "0.0"}
|
2012-10-25 21:20:27 +00:00
|
|
|
]);
|
2012-10-23 17:19:20 +00:00
|
|
|
$tw.utils.forceLayout(targetElement);
|
2012-10-26 21:12:40 +00:00
|
|
|
// Transition to the final position
|
2012-10-25 21:20:27 +00:00
|
|
|
$tw.utils.setStyle(targetElement,[
|
2012-11-03 12:34:36 +00:00
|
|
|
{transition: "opacity " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
|
|
|
|
"margin-bottom " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
|
|
|
|
{transform: "rotateX(0deg)"},
|
|
|
|
{marginBottom: "0px"},
|
|
|
|
{opacity: "1.0"}
|
2012-10-25 21:20:27 +00:00
|
|
|
]);
|
2012-10-23 17:19:20 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
ClassicListView.prototype.remove = function(index) {
|
|
|
|
var listElementNode = this.listMacro.listFrame.children[index],
|
|
|
|
targetElement = listElementNode.domNode;
|
|
|
|
// Get the current height of the tiddler
|
2012-11-03 12:34:36 +00:00
|
|
|
var currWidth = targetElement.offsetWidth,
|
|
|
|
currHeight = targetElement.offsetHeight + parseInt(window.getComputedStyle(targetElement).marginTop,10);
|
2012-10-23 17:19:20 +00:00
|
|
|
// Attach an event handler for the end of the transition
|
2012-11-03 12:34:36 +00:00
|
|
|
targetElement.addEventListener($tw.utils.convertEventName("transitionEnd"),function(event) {
|
|
|
|
if(targetElement.parentNode) {
|
|
|
|
targetElement.parentNode.removeChild(targetElement);
|
2012-10-23 17:19:20 +00:00
|
|
|
}
|
|
|
|
},false);
|
|
|
|
// Animate the closure
|
2012-11-03 12:34:36 +00:00
|
|
|
$tw.utils.setStyle(targetElement,[
|
|
|
|
{transition: "none"},
|
2012-10-25 21:20:27 +00:00
|
|
|
{transform: "translateX(0px)"},
|
2012-11-03 12:34:36 +00:00
|
|
|
{marginBottom: "0px"},
|
|
|
|
{opacity: "1.0"}
|
2012-10-25 21:20:27 +00:00
|
|
|
]);
|
2012-11-03 12:34:36 +00:00
|
|
|
$tw.utils.forceLayout(targetElement);
|
|
|
|
$tw.utils.setStyle(targetElement,[
|
|
|
|
{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
|
|
|
|
"opacity " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
|
|
|
|
"margin-bottom " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
|
|
|
|
{transform: "translateX(" + currWidth + "px)"},
|
|
|
|
{marginBottom: (-currHeight) + "px"},
|
|
|
|
{opacity: "0.0"}
|
2012-10-25 21:20:27 +00:00
|
|
|
]);
|
2012-10-23 17:19:20 +00:00
|
|
|
// Returning true causes the DOM node not to be deleted
|
|
|
|
return true;
|
2012-10-23 16:13:47 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
exports["classic"] = ClassicListView;
|
|
|
|
|
|
|
|
})();
|