mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-12-24 17:10:29 +00:00
Better animations for the sideways list view
This commit is contained in:
parent
d39ad8fff9
commit
607cb49e6e
@ -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) {
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user