mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-07-08 04:54:23 +00:00
Code Issues Releases Wiki Activity

Added simple insertion and deletion animations to cecily view

Browse Source
This commit is contained in:
Jeremy Ruston 2012-10-27 19:30:16 +01:00
parent 1b589fe1be
commit f2460a3744
2 changed files with 30 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
core/modules/macros/list/listviews/cecily.js
View File

@ -27,6 +27,7 @@ function CecilyListView(listMacro) {
for(var t=0; t<listFrameDomNode.children.length; t++) { for(var t=0; t<listFrameDomNode.children.length; t++) {
var title = this.listMacro.listFrame.children[t].listElementInfo.title, var title = this.listMacro.listFrame.children[t].listElementInfo.title,
domNode = listFrameDomNode.children[t]; domNode = listFrameDomNode.children[t];
domNode.style.position = "absolute";
this.positionTiddler(title,domNode); this.positionTiddler(title,domNode);
} }
}; };
@ -63,12 +64,7 @@ CecilyListView.prototype.lookupTiddlerInMap = function(title,domNode) {
break; break;
} }
// A default position // A default position
newPosition = newPosition || { newPosition = newPosition || {x: 0,y: 0,w: 100,h: 100};
x: 0,
y: 0,
w: 100,
h: 100
};
// Save the position back to the map // Save the position back to the map
this.map.positions[title] = newPosition; this.map.positions[title] = newPosition;
this.saveMap(); this.saveMap();
@ -78,31 +74,48 @@ CecilyListView.prototype.lookupTiddlerInMap = function(title,domNode) {
CecilyListView.prototype.positionTiddler = function(title,domNode) { CecilyListView.prototype.positionTiddler = function(title,domNode) {
var pos = this.lookupTiddlerInMap(title,domNode), var pos = this.lookupTiddlerInMap(title,domNode),
scale = pos.w/domNode.offsetWidth; scale = pos.w/domNode.offsetWidth;
domNode.style.position = "absolute";
$tw.utils.setStyle(domNode,[ $tw.utils.setStyle(domNode,[
{transition: ""},
{transformOrigin: "0% 0%"}, {transformOrigin: "0% 0%"},
{transform: "translateX(" + pos.x + "px) translateY(" + pos.y + "px) scale(" + scale + ")"} {transform: "translateX(" + pos.x + "px) translateY(" + pos.y + "px) scale(" + scale + ")"}
]); ]);
$tw.utils.forceLayout(domNode);
$tw.utils.setStyle(domNode,[
{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out, opacity " + $tw.config.preferences.animationDurationMs + " ease-out"}
]);
}; };
CecilyListView.prototype.insert = function(index) { CecilyListView.prototype.insert = function(index) {
var listElementNode = this.listMacro.listFrame.children[index], var listElementNode = this.listMacro.listFrame.children[index],
targetElement = listElementNode.domNode; targetElement = listElementNode.domNode;
// Animate the insertion targetElement.style.position = "absolute";
$tw.utils.setStyle(targetElement,[ $tw.utils.setStyle(targetElement,[
{transition: ""},
{opacity: "0.0"} {opacity: "0.0"}
]); ]);
this.positionTiddler(listElementNode.listElementInfo.title,targetElement);
$tw.utils.forceLayout(targetElement);
$tw.utils.setStyle(targetElement,[
{transition: "opacity " + $tw.config.preferences.animationDurationMs + " ease-out"},
{opacity: "1.0"}
]);
};
CecilyListView.prototype.remove = function(index) {
var listElementNode = this.listMacro.listFrame.children[index],
targetElement = listElementNode.domNode;
// 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 " + $tw.config.preferences.animationDurationMs + " ease-out"},
{opacity: "1.0"}
]);
$tw.utils.forceLayout(targetElement); $tw.utils.forceLayout(targetElement);
$tw.utils.setStyle(targetElement,[ $tw.utils.setStyle(targetElement,[
{opacity: "1.0"} {opacity: "0.0"}
]); ]);
// Position the dom node // Returning true causes the DOM node not to be deleted
this.positionTiddler(listElementNode.listElementInfo.title,targetElement); return true;
}; };
exports["cecily"] = CecilyListView; exports["cecily"] = CecilyListView;

2
tw5.com/tiddlers/samples/CecilyView.tid
View File

@ -3,5 +3,5 @@ title: CecilyView
"Cecily" provides a customisable ZoomableUserInterface to your tiddlers. "Cecily" provides a customisable ZoomableUserInterface to your tiddlers.
{{mediumCecily{ {{mediumCecily{
<<list filter:"[list[$:/StoryList]]" template:"CecilyTemplate" listview:cecily itemClass:"tw-cecily-tiddler-frame">> <<list filter:"[list[$:/StoryList]]" history:"$:/HistoryList" template:"CecilyTemplate" listview:cecily itemClass:"tw-cecily-tiddler-frame">>
}}} }}}