2012-10-24 21:15:57 +00:00
|
|
|
/*\
|
|
|
|
title: $:/core/modules/macros/list/listviews/cecily.js
|
|
|
|
type: application/javascript
|
|
|
|
module-type: listview
|
|
|
|
|
|
|
|
Views the list through a 2D map
|
|
|
|
|
|
|
|
\*/
|
|
|
|
(function(){
|
|
|
|
|
|
|
|
/*jslint node: true, browser: true */
|
|
|
|
/*global $tw: false */
|
|
|
|
"use strict";
|
|
|
|
|
|
|
|
function CecilyListView(listMacro) {
|
|
|
|
// The list macro we're attached to
|
|
|
|
this.listMacro = listMacro;
|
|
|
|
// Prepare the list frame
|
|
|
|
var listFrameDomNode = this.listMacro.listFrame.domNode
|
|
|
|
listFrameDomNode.style.position = "relative";
|
|
|
|
listFrameDomNode.style.width = "100%"; // TODO: This isn't the best way to set the width and height
|
|
|
|
listFrameDomNode.style.height = "400px";
|
|
|
|
// Prepare the nozzle for dispensing new tiddlers onto the map
|
|
|
|
this.newTiddlerPosition = {x: 0, y: 0};
|
|
|
|
// Position the initial list entries on the map
|
|
|
|
this.loadMap();
|
|
|
|
for(var t=0; t<listFrameDomNode.children.length; t++) {
|
|
|
|
var title = this.listMacro.listFrame.children[t].listElementInfo.title,
|
|
|
|
domNode = listFrameDomNode.children[t];
|
|
|
|
this.positionTiddler(title,domNode);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
CecilyListView.prototype.getMapTiddlerTitle = function() {
|
|
|
|
return this.listMacro.params.map || "$:/TiddlerMap";
|
|
|
|
};
|
|
|
|
|
|
|
|
CecilyListView.prototype.loadMap = function() {
|
|
|
|
this.map = this.listMacro.wiki.getTiddlerData(this.getMapTiddlerTitle(),{positions: []});
|
|
|
|
};
|
|
|
|
|
|
|
|
CecilyListView.prototype.saveMap = function() {
|
|
|
|
this.listMacro.wiki.setTiddlerData(this.getMapTiddlerTitle(),this.map);
|
|
|
|
};
|
|
|
|
|
|
|
|
// Get the position of a particular tiddler
|
|
|
|
CecilyListView.prototype.lookupTiddlerInMap = function(title,domNode) {
|
|
|
|
// First try looking it up in the map
|
|
|
|
if(this.map.positions[title]) {
|
|
|
|
return this.map.positions[title];
|
|
|
|
}
|
|
|
|
// If the tiddler wasn't in the map we'll have to compute it
|
|
|
|
var newPosition;
|
|
|
|
switch(this.map.positionNew) {
|
2012-10-25 21:20:27 +00:00
|
|
|
default: // "right"
|
2012-10-24 21:15:57 +00:00
|
|
|
newPosition = {
|
|
|
|
x: this.newTiddlerPosition.x,
|
|
|
|
y: this.newTiddlerPosition.y,
|
|
|
|
w: 300,
|
|
|
|
h: 300
|
|
|
|
};
|
2012-10-26 09:28:32 +00:00
|
|
|
this.newTiddlerPosition.x += 320;
|
2012-10-24 21:15:57 +00:00
|
|
|
break;
|
|
|
|
}
|
|
|
|
// Return the position
|
|
|
|
return newPosition || {
|
|
|
|
x: 0,
|
|
|
|
y: 0,
|
|
|
|
w: 300,
|
|
|
|
h: 300
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
CecilyListView.prototype.positionTiddler = function(title,domNode) {
|
2012-10-26 09:28:32 +00:00
|
|
|
var pos = this.lookupTiddlerInMap(title,domNode),
|
|
|
|
scale = pos.w/domNode.offsetWidth;
|
2012-10-24 21:15:57 +00:00
|
|
|
domNode.style.position = "absolute";
|
2012-10-26 09:28:32 +00:00
|
|
|
$tw.utils.setStyle(domNode,[
|
|
|
|
{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
|
|
|
|
{transformOrigin: "0% 0%"},
|
|
|
|
{transform: "scale(" + scale + ") translateX(" + pos.x + "px) translateY(" + pos.y + "px)"}
|
|
|
|
]);
|
2012-10-24 21:15:57 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
CecilyListView.prototype.insert = function(index) {
|
|
|
|
var listElementNode = this.listMacro.listFrame.children[index],
|
|
|
|
targetElement = listElementNode.domNode;
|
|
|
|
// Animate the insertion
|
2012-10-25 21:20:27 +00:00
|
|
|
$tw.utils.setStyle(targetElement,[
|
|
|
|
{transition: ""},
|
|
|
|
{transformOrigin: "0% 0%"},
|
|
|
|
{opacity: "0.0"}
|
|
|
|
]);
|
2012-10-24 21:15:57 +00:00
|
|
|
$tw.utils.forceLayout(targetElement);
|
2012-10-25 21:20:27 +00:00
|
|
|
$tw.utils.setStyle(targetElement,[
|
|
|
|
{transition: "opacity " + $tw.config.preferences.animationDurationMs + " ease-out"},
|
|
|
|
{opacity: "1.0"}
|
|
|
|
]);
|
2012-10-24 21:15:57 +00:00
|
|
|
// Position the dom node
|
|
|
|
this.positionTiddler(listElementNode.listElementInfo.title,targetElement);
|
|
|
|
};
|
|
|
|
|
|
|
|
exports["cecily"] = CecilyListView;
|
|
|
|
|
|
|
|
})();
|