clone/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/TiddlyWiki/TiddlyWiki5.git synced 2026-04-30 06:16:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updates to CecilyView and browser.js

Browse Source
This commit is contained in:
Jeremy Ruston
2012-10-26 10:28:32 +01:00
parent f418f5493e
commit 031e3b8b80
7 changed files with 41 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
core/modules/utils/dom/modal.js
View File

@@ -90,10 +90,15 @@ Modal.prototype.display = function(title) {
// Force layout and animate the modal message away
$tw.utils.forceLayout(modalBackdrop);
$tw.utils.forceLayout(modalWrapper);
modalBackdrop.style.opacity = 0;
modalWrapper.style[$tw.browser.transform] = "translateY(" + window.innerHeight + "px)";
$tw.utils.setStyle(modalBackdrop,[
{opacity: "0"}
]);
$tw.utils.setStyle(modalWrapper,[
{transform: "translateY(" + window.innerHeight + "px)"}
]);
// Set up an event for the transition end
modalWrapper.addEventListener($tw.browser.transitionEnd,function(event) {
console.log("Listening for ",$tw.utils.convertEventName("transitionEnd"))
modalWrapper.addEventListener($tw.utils.convertEventName("transitionEnd"),function(event) {
if(wrapper.parentNode) {
// Remove the modal message from the DOM
document.body.removeChild(wrapper);
@@ -104,20 +109,32 @@ Modal.prototype.display = function(title) {
return false;
},false);
// Set the initial styles for the message
modalBackdrop.style.opacity = 0;
modalWrapper.style[$tw.browser.transformorigin] = "0% 0%";
modalWrapper.style[$tw.browser.transform] = "translateY(" + (-window.innerHeight) + "px)";
$tw.utils.setStyle(modalBackdrop,[
{opacity: "0"}
]);
$tw.utils.setStyle(modalWrapper,[
{transformOrigin: "0% 0%"},
{transform: "translateY(" + (-window.innerHeight) + "px)"}
]);
// Put the message into the document
document.body.appendChild(wrapper);
// Set up animation for the styles
modalBackdrop.style[$tw.browser.transition] = "opacity " + d + " ease-out";
modalWrapper.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out";
$tw.utils.setStyle(modalBackdrop,[
{transition: "opacity " + d + " ease-out"}
]);
$tw.utils.setStyle(modalWrapper,[
{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
]);
// Force layout
$tw.utils.forceLayout(modalBackdrop);
$tw.utils.forceLayout(modalWrapper);
// Set final animated styles
modalBackdrop.style.opacity = 1;
modalWrapper.style[$tw.browser.transform] = "translateY(0px)";
$tw.utils.setStyle(modalBackdrop,[
{opacity: "1"}
]);
$tw.utils.setStyle(modalWrapper,[
{transform: "translateY(0px)"}
]);
};
exports.Modal = Modal;