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

Fix up closing tiddlers in the zoomin listview

Browse Source 
One for @giffmex
This commit is contained in:
Jeremy Ruston 2013-08-26 14:48:05 +01:00
parent 20f06e8eec
commit 06599bcfc6
1 changed files with 66 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
core/modules/widgets/list/listviews/zoomin.js
View File

@ -16,7 +16,7 @@ var ZoominListView = function(listWidget) {
this.listWidget = listWidget;
this.storyNode = this.listWidget.renderer.domNode;
// Set the current tiddler
this.currentTiddler = this.listWidget.children[0];
this.currentTiddler = this.listWidget.children[0].domNode;
// Make all the tiddlers position absolute, and hide all but the first one
this.storyNode.style.position = "relative";
for(var t=0; t<this.storyNode.children.length; t++) {
@ -68,6 +68,67 @@ ZoominListView.prototype.insert = function(index) {
]);
};
/*
Visualise navigating back to the previous tiddler
storyElement: story element being closed
*/
ZoominListView.prototype.remove = function(index) {
var listElementNode = this.listWidget.children[index],
targetElement = listElementNode.domNode;
// Set up the tiddler that is being closed
$tw.utils.setStyle(targetElement,[
{position: "absolute"},
{display: "block"},
{transformOrigin: "50% 50%"},
{transform: "translateX(0px) translateY(0px) scale(1)"},
{transition: "none"},
{zIndex: "0"}
]);
// We'll move back to the previous or next element in the story
var toElement = this.storyNode.children[index - 1];
if(!toElement) {
toElement = this.storyNode.children[index + 1];
}
// Set up the tiddler we're moving back in
if(toElement) {
$tw.utils.setStyle(toElement,[
{position: "absolute"},
{display: "block"},
{transformOrigin: "50% 50%"},
{transform: "translateX(0px) translateY(0px) scale(10)"},
{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in, opacity " + $tw.config.preferences.animationDurationMs + " ease-in"},
{opacity: "0"},
{zIndex: "500"}
]);
this.currentTiddler = toElement;
}
// Animate them both
// Force layout
$tw.utils.forceLayout(this.storyNode);
// First, the tiddler we're closing
$tw.utils.setStyle(targetElement,[
{transformOrigin: "50% 50%"},
{transform: "translateX(0px) translateY(0px) scale(0.1)"},
{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in, opacity " + $tw.config.preferences.animationDurationMs + " ease-in"},
{opacity: "0"},
{zIndex: "0"}
]);
setTimeout(function() {
// Delete the DOM node when the transition is over
if(targetElement.parentNode) {
targetElement.parentNode.removeChild(targetElement);
}
},$tw.config.preferences.animationDuration);
// Now the tiddler we're going back to
if(toElement) {
$tw.utils.setStyle(toElement,[
{transform: "translateX(0px) translateY(0px) scale(1)"},
{opacity: "1"}
]);
}
return true; // Indicate that we'll delete the DOM node
};
ZoominListView.prototype.navigateTo = function(historyInfo) {
var listElementIndex = this.listWidget.findListElementByTitle(0,historyInfo.title);
if(listElementIndex === undefined) {
@ -108,7 +169,7 @@ ZoominListView.prototype.navigateTo = function(historyInfo) {
// Apply the ending transitions with a timeout to ensure that the previously applied transformations are applied first
var self = this,
prevCurrentTiddler = this.currentTiddler;
this.currentTiddler = listElementNode;
this.currentTiddler = targetElement;
// Transform the target tiddler to its natural size
$tw.utils.setStyle(targetElement,[
{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in, opacity " + $tw.config.preferences.animationDurationMs + " ease-in"},
@ -117,11 +178,11 @@ ZoominListView.prototype.navigateTo = function(historyInfo) {
{zIndex: "500"},
]);
// Transform the previous tiddler out of the way and then hide it
if(prevCurrentTiddler && prevCurrentTiddler !== listElementNode) {
if(prevCurrentTiddler && prevCurrentTiddler !== targetElement) {
var scale = zoomBounds.width / sourceBounds.width;
x = zoomBounds.left - targetBounds.left - (sourceBounds.left - targetBounds.left) * scale;
y = zoomBounds.top - targetBounds.top - (sourceBounds.top - targetBounds.top) * scale;
$tw.utils.setStyle(prevCurrentTiddler.domNode,[
$tw.utils.setStyle(prevCurrentTiddler,[
{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in, opacity " + $tw.config.preferences.animationDurationMs + " ease-in"},
{opacity: "0.0"},
{transformOrigin: "0 0"},
@ -131,7 +192,7 @@ ZoominListView.prototype.navigateTo = function(historyInfo) {
// Hide the tiddler when the transition has finished
setTimeout(function() {
if(self.currentTiddler !== prevCurrentTiddler) {
prevCurrentTiddler.domNode.style.display = "none";
prevCurrentTiddler.style.display = "none";
}
},$tw.config.preferences.animationDuration);
}