kopia lustrzana https://github.com/miklobit/TiddlyWiki5
Added simple insertion and deletion animations to cecily view
rodzic
1b589fe1be
commit
f2460a3744
|
@ -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;
|
||||||
|
|
|
@ -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">>
|
||||||
}}}
|
}}}
|
||||||
|
|
Ładowanie…
Reference in New Issue