mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-24 02:27:19 +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++) {
var title = this.listMacro.listFrame.children[t].listElementInfo.title,
domNode = listFrameDomNode.children[t];
domNode.style.position = "absolute";
this.positionTiddler(title,domNode);
}
};
@ -63,12 +64,7 @@ CecilyListView.prototype.lookupTiddlerInMap = function(title,domNode) {
break;
}
// A default position
newPosition = newPosition || {
x: 0,
y: 0,
w: 100,
h: 100
};
newPosition = newPosition || {x: 0,y: 0,w: 100,h: 100};
// Save the position back to the map
this.map.positions[title] = newPosition;
this.saveMap();
@ -78,31 +74,48 @@ CecilyListView.prototype.lookupTiddlerInMap = function(title,domNode) {
CecilyListView.prototype.positionTiddler = function(title,domNode) {
var pos = this.lookupTiddlerInMap(title,domNode),
scale = pos.w/domNode.offsetWidth;
domNode.style.position = "absolute";
$tw.utils.setStyle(domNode,[
{transition: ""},
{transformOrigin: "0% 0%"},
{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) {
var listElementNode = this.listMacro.listFrame.children[index],
targetElement = listElementNode.domNode;
// Animate the insertion
targetElement.style.position = "absolute";
$tw.utils.setStyle(targetElement,[
{transition: ""},
{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.setStyle(targetElement,[
{opacity: "1.0"}
{opacity: "0.0"}
]);
// Position the dom node
this.positionTiddler(listElementNode.listElementInfo.title,targetElement);
// Returning true causes the DOM node not to be deleted
return true;
};
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.
{{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">>
}}}