mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-25 01:20:30 +00:00
Code Issues Releases Wiki Activity

Better animations for the sideways list view

Browse Source
This commit is contained in:
Jeremy Ruston 2012-10-28 09:51:19 +00:00
parent d39ad8fff9
commit 607cb49e6e
2 changed files with 30 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
core/modules/macros/list/listviews/classic.js
View File

@ -26,7 +26,7 @@ ClassicListView.prototype.navigateTo = function(historyInfo) {
{transformOrigin: "0% 0%"}, {transformOrigin: "0% 0%"},
{height: "auto"} {height: "auto"}
]); ]);
// Get the current height of the elmeent // Get the current height of the element
var currHeight = targetElement.offsetHeight; var currHeight = targetElement.offsetHeight;
// Compute the start and end positions of the target element // Compute the start and end positions of the target element
var srcRect = historyInfo.fromPageRect; var srcRect = historyInfo.fromPageRect;
@ -41,7 +41,6 @@ ClassicListView.prototype.navigateTo = function(historyInfo) {
bottom: scrollPos.y + srcRect.height bottom: scrollPos.y + srcRect.height
}; };
}; };
$tw.utils.forceLayout(targetElement);
var dstRect = $tw.utils.getBoundingPageRect(targetElement); var dstRect = $tw.utils.getBoundingPageRect(targetElement);
// Compute the transformations // Compute the transformations
var scale = srcRect.width / dstRect.width; var scale = srcRect.width / dstRect.width;
@ -67,7 +66,7 @@ $tw.utils.forceLayout(targetElement);
{height: currHeight + "px"} {height: currHeight + "px"}
]); ]);
// Scroll the target element into view // Scroll the target element into view
$tw.scroller.scrollIntoView(dstRect); //$tw.scroller.scrollIntoView(dstRect);
}; };
ClassicListView.prototype.insert = function(index) { ClassicListView.prototype.insert = function(index) {

80
core/modules/macros/list/listviews/sideways.js
View File

@ -19,14 +19,8 @@ function SidewaysListView(listMacro) {
SidewaysListView.prototype.navigateTo = function(historyInfo) { SidewaysListView.prototype.navigateTo = function(historyInfo) {
var listElementIndex = this.listMacro.findListElementByTitle(0,historyInfo.title), var listElementIndex = this.listMacro.findListElementByTitle(0,historyInfo.title),
listElementNode = this.listMacro.listFrame.children[listElementIndex], listElementNode = this.listMacro.listFrame.children[listElementIndex],
targetElement = listElementNode.domNode; targetElement = listElementNode.domNode,
// Remove any transform on the target element currWidth = targetElement.offsetWidth;
$tw.utils.setStyle(targetElement,[
{transition: "none"},
{transformOrigin: "0% 0%"},
{transform: "none"},
{height: "auto"}
]);
// Compute the start and end positions of the target element // Compute the start and end positions of the target element
var srcRect = historyInfo.fromPageRect; var srcRect = historyInfo.fromPageRect;
if(!srcRect) { if(!srcRect) {
@ -40,88 +34,70 @@ SidewaysListView.prototype.navigateTo = function(historyInfo) {
bottom: scrollPos.y + srcRect.height bottom: scrollPos.y + srcRect.height
}; };
}; };
$tw.utils.forceLayout(targetElement);
var dstRect = $tw.utils.getBoundingPageRect(targetElement); var dstRect = $tw.utils.getBoundingPageRect(targetElement);
// Compute the transformations // Compute the transformations
var scale = srcRect.width / dstRect.width; var scale = srcRect.width / dstRect.width;
// Position the target element over the source rectangle // Position the target element over the source rectangle
$tw.utils.setStyle(targetElement,[ $tw.utils.setStyle(targetElement,[
{transition: "none"}, {transition: "none"},
{transform: "translateX(" + (srcRect.left-dstRect.left) + "px) translateY(" + (srcRect.top-dstRect.top) + "px) scale(" + scale + ")"} {transform: "translateX(" + (srcRect.left-dstRect.left) + "px) translateY(" + (srcRect.top-dstRect.top) + "px) scale(" + scale + ")"},
{marginRight: (-currWidth) + "px"}
]); ]);
$tw.utils.forceLayout(targetElement); $tw.utils.forceLayout(targetElement);
// Transition the target element to its final resting place // Transition the target element to its final resting place
$tw.utils.setStyle(targetElement,[ $tw.utils.setStyle(targetElement,[
{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out, " + {transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
"opacity " + $tw.config.preferences.animationDurationMs + " ease-out"}, "opacity " + $tw.config.preferences.animationDurationMs + " ease-out, " +
{transform: "none"} "margin-right " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
{transform: "none"},
{marginRight: "0px"}
]); ]);
// Scroll the target element into view // Scroll the target element into view
$tw.scroller.scrollIntoView(dstRect); //$tw.scroller.scrollIntoView(dstRect);
}; };
SidewaysListView.prototype.insert = function(index) { SidewaysListView.prototype.insert = function(index) {
var listElementNode = this.listMacro.listFrame.children[index], var listElementNode = this.listMacro.listFrame.children[index],
targetElement = listElementNode.domNode; targetElement = listElementNode.domNode,
// Get the current height of the tiddler currWidth = targetElement.offsetWidth;
var currHeight = targetElement.offsetHeight;
// Reset the height once the transition is over
targetElement.addEventListener($tw.utils.convertEventName("transitionEnd"),function(event) {
$tw.utils.setStyle(targetElement,[
{transition: "none"},
{height: "auto"}
]);
},false);
// Set up the initial position of the element // Set up the initial position of the element
$tw.utils.setStyle(targetElement,[ $tw.utils.setStyle(targetElement,[
{transition: "none"}, {transition: "none"},
{transformOrigin: "0% 0%"},
{transform: "translateX(" + window.innerWidth + "px)"},
{opacity: "0.0"}, {opacity: "0.0"},
{height: "0px"} {marginRight: (-currWidth) + "px"}
]); ]);
$tw.utils.forceLayout(targetElement); $tw.utils.forceLayout(targetElement);
// Transition to the final position // Transition to the final position
$tw.utils.setStyle(targetElement,[ $tw.utils.setStyle(targetElement,[
{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out, " + {transition: "opacity " + $tw.config.preferences.animationDurationMs + " ease-out, " +
"opacity " + $tw.config.preferences.animationDurationMs + " ease-out, " + "margin-right " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
"height " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
{transform: "translateX(0px)"},
{opacity: "1.0"}, {opacity: "1.0"},
{height: currHeight + "px"} {marginRight: ""}
]); ]);
}; };
SidewaysListView.prototype.remove = function(index) { SidewaysListView.prototype.remove = function(index) {
var listElementNode = this.listMacro.listFrame.children[index], var listElementNode = this.listMacro.listFrame.children[index],
targetElement = listElementNode.domNode; targetElement = listElementNode.domNode,
// Get the current height of the tiddler currWidth = targetElement.offsetWidth;
var currHeight = targetElement.offsetHeight;
// Put a wrapper around the dom node we're closing
var wrapperElement = document.createElement("div");
targetElement.parentNode.insertBefore(wrapperElement,targetElement);
wrapperElement.appendChild(targetElement);
// Attach an event handler for the end of the transition // Attach an event handler for the end of the transition
wrapperElement.addEventListener($tw.utils.convertEventName("transitionEnd"),function(event) { targetElement.addEventListener($tw.utils.convertEventName("transitionEnd"),function(event) {
if(wrapperElement.parentNode) { if(targetElement.parentNode) {
wrapperElement.parentNode.removeChild(wrapperElement); targetElement.parentNode.removeChild(targetElement);
} }
},false); },false);
// Animate the closure // Animate the closure
$tw.utils.setStyle(wrapperElement,[ $tw.utils.setStyle(targetElement,[
{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out, " + {transition: ""},
"opacity " + $tw.config.preferences.animationDurationMs + " ease-out, " +
"height " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
{transformOrigin: "0% 0%"},
{transform: "translateX(0px)"},
{opacity: "1.0"}, {opacity: "1.0"},
{height: currHeight + "px"} {marginRight: "0px"}
]); ]);
$tw.utils.forceLayout(wrapperElement); $tw.utils.forceLayout(targetElement);
$tw.utils.setStyle(wrapperElement,[ $tw.utils.setStyle(targetElement,[
{transform: "translateX(-" + window.innerWidth + "px)"}, {transition: "opacity " + $tw.config.preferences.animationDurationMs + " ease-out, " +
"margin-right " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
{opacity: "0.0"}, {opacity: "0.0"},
{height: "0px"} {marginRight: (-currWidth) + "px"}
]); ]);
// Returning true causes the DOM node not to be deleted // Returning true causes the DOM node not to be deleted
return true; return true;