diff --git a/core/modules/macros/list/listviews/cecily.js b/core/modules/macros/list/listviews/cecily.js index 70bd2d535..7863b7e30 100644 --- a/core/modules/macros/list/listviews/cecily.js +++ b/core/modules/macros/list/listviews/cecily.js @@ -54,14 +54,14 @@ CecilyListView.prototype.lookupTiddlerInMap = function(title,domNode) { // If the tiddler wasn't in the map we'll have to compute it var newPosition; switch(this.map.positionNew) { - default: // "below" + default: // "right" newPosition = { x: this.newTiddlerPosition.x, y: this.newTiddlerPosition.y, w: 300, h: 300 }; - this.newTiddlerPosition.y += domNode.offsetHeight/2; + this.newTiddlerPosition.x += domNode.offsetWidth/2; break; } // Return the position @@ -83,12 +83,16 @@ CecilyListView.prototype.insert = function(index) { var listElementNode = this.listMacro.listFrame.children[index], targetElement = listElementNode.domNode; // Animate the insertion - targetElement.style[$tw.browser.transition] = ""; - targetElement.style[$tw.browser.transformorigin] = "0% 0%"; - targetElement.style.opacity = "0.0"; + $tw.utils.setStyle(targetElement,[ + {transition: ""}, + {transformOrigin: "0% 0%"}, + {opacity: "0.0"} + ]); $tw.utils.forceLayout(targetElement); - targetElement.style[$tw.browser.transition] = "opacity " + $tw.config.preferences.animationDurationMs + " ease-out"; - targetElement.style.opacity = "1.0"; + $tw.utils.setStyle(targetElement,[ + {transition: "opacity " + $tw.config.preferences.animationDurationMs + " ease-out"}, + {opacity: "1.0"} + ]); // Position the dom node this.positionTiddler(listElementNode.listElementInfo.title,targetElement); }; diff --git a/core/modules/macros/list/listviews/classic.js b/core/modules/macros/list/listviews/classic.js index 84deff15a..a82baa7d3 100644 --- a/core/modules/macros/list/listviews/classic.js +++ b/core/modules/macros/list/listviews/classic.js @@ -14,7 +14,7 @@ Views the list as a linear sequence function ClassicListView(listMacro) { this.listMacro = listMacro; -}; +} ClassicListView.prototype.insert = function(index) { var listElementNode = this.listMacro.listFrame.children[index], @@ -22,25 +22,23 @@ ClassicListView.prototype.insert = function(index) { // Get the current height of the tiddler var currHeight = targetElement.offsetHeight; // Animate the closure - // $tw.utils.setStyle(targetElement,[ - // {transition: ""}, - // {transformOrigin: "0% 0%"}, - // {transform: "translateX(" + window.innerWidth + "px)"}, - // {opacity: "0.0"}, - // {height: "0px"} - // ]); - targetElement.style[$tw.browser.transition] = ""; - targetElement.style[$tw.browser.transformorigin] = "0% 0%"; - targetElement.style[$tw.browser.transform] = "translateX(" + window.innerWidth + "px)"; - targetElement.style.opacity = "0.0"; - targetElement.style.height = "0px"; + $tw.utils.setStyle(targetElement,[ + {transition: ""}, + {transformOrigin: "0% 0%"}, + {transform: "translateX(" + window.innerWidth + "px)"}, + {opacity: "0.0"}, + {height: "0px"} + ]); $tw.utils.forceLayout(targetElement); - targetElement.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + $tw.config.preferences.animationDurationMs + " ease-in-out, " + - "opacity " + $tw.config.preferences.animationDurationMs + " ease-out, " + - "height " + $tw.config.preferences.animationDurationMs + " ease-in-out"; - targetElement.style[$tw.browser.transform] = "translateX(0px)"; - targetElement.style.opacity = "1.0"; - targetElement.style.height = currHeight + "px"; + $tw.utils.setStyle(targetElement,[ + {transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out, " + + "opacity " + $tw.config.preferences.animationDurationMs + " ease-out, " + + "height " + $tw.config.preferences.animationDurationMs + " ease-in-out"}, + {transform: "translateX(0px)"}, + {opacity: "1.0"}, + {height: currHeight + "px"} + ]); + }; ClassicListView.prototype.remove = function(index) { @@ -59,17 +57,21 @@ ClassicListView.prototype.remove = function(index) { } },false); // Animate the closure - wrapperElement.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + $tw.config.preferences.animationDurationMs + " ease-in-out, " + - "opacity " + $tw.config.preferences.animationDurationMs + " ease-out, " + - "height " + $tw.config.preferences.animationDurationMs + " ease-in-out"; - wrapperElement.style[$tw.browser.transformorigin] = "0% 0%"; - wrapperElement.style[$tw.browser.transform] = "translateX(0px)"; - wrapperElement.style.opacity = "1.0"; - wrapperElement.style.height = currHeight + "px"; + $tw.utils.setStyle(wrapperElement,[ + {transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out, " + + "opacity " + $tw.config.preferences.animationDurationMs + " ease-out, " + + "height " + $tw.config.preferences.animationDurationMs + " ease-in-out"}, + {transformOrigin: "0% 0%"}, + {transform: "translateX(0px)"}, + {opacity: "1.0"}, + {height: currHeight + "px"} + ]); $tw.utils.forceLayout(wrapperElement); - wrapperElement.style[$tw.browser.transform] = "translateX(-" + window.innerWidth + "px)"; - wrapperElement.style.opacity = "0.0"; - wrapperElement.style.height = "0px"; + $tw.utils.setStyle(wrapperElement,[ + {transform: "translateX(-" + window.innerWidth + "px)"}, + {opacity: "0.0"}, + {height: "0px"} + ]); // Returning true causes the DOM node not to be deleted return true; }; diff --git a/core/modules/startup.js b/core/modules/startup.js index 1a0468734..9c0ad3b7f 100644 --- a/core/modules/startup.js +++ b/core/modules/startup.js @@ -18,6 +18,9 @@ exports.startup = function() { $tw.modules.applyMethods("global",$tw); $tw.modules.applyMethods("config",$tw.config); $tw.modules.applyMethods("utils",$tw.utils); + if($tw.browser) { + $tw.utils.getBrowserInfo($tw.browser); + } $tw.version = $tw.utils.extractVersionInfo(); $tw.Tiddler.fieldModules = $tw.modules.getModulesByTypeAsHashmap("tiddlerfield"); $tw.modules.applyMethods("tiddlermethod",$tw.Tiddler.prototype); diff --git a/core/modules/utils/dom/browser.js b/core/modules/utils/dom/browser.js index 962ab6002..8d1118565 100644 --- a/core/modules/utils/dom/browser.js +++ b/core/modules/utils/dom/browser.js @@ -18,7 +18,11 @@ Set style properties of an element styles: ordered array of {name: value} pairs */ exports.setStyle = function(element,styles) { - + for(var t=0; t "background-color" + "webkitTransform" --> "-webkit-transform" +*/ +exports.convertPropertyNameToStyleName = function(propertyName) { + // Rehyphenate the name + var styleName = $tw.utils.hyphenateCss(propertyName); + // If there's a webkit prefix, add a dash (other browsers have uppercase prefixes, and so get the dash automatically) + if(styleName.indexOf("webkit") === 0) { + styleName = "-" + styleName; + } else if(styleName.indexOf("-m-s") === 0) { + styleName = "-ms" + styleName.substr(4); + } + return styleName; +}; + +/* +Round trip a stylename to a property name and back again. For example: + "transform" --> "webkitTransform" --> "-webkit-transform" +*/ +exports.roundTripPropertyName = function(propertyName) { + return $tw.utils.convertPropertyNameToStyleName($tw.utils.convertStyleNameToPropertyName(propertyName)); +}; /* Converts a standard event name into the local browser specific equivalent. For example: @@ -99,8 +128,8 @@ exports.convertEventName = function(eventName) { return newEventName; }; -// For backwards compatibility, this will all be removed -var getBrowserInfo = function(info) { +// Setup constants for the current browser +exports.getBrowserInfo = function(info) { info.prefix = document.body.style.webkitTransform !== undefined ? "webkit" : document.body.style.MozTransform !== undefined ? "Moz" : document.body.style.MSTransform !== undefined ? "MS" : @@ -133,8 +162,4 @@ var getBrowserInfo = function(info) { document.fullScreen !== undefined ? "fullScreen" : ""; }; -if($tw.browser) { - getBrowserInfo($tw.browser); -} - })(); diff --git a/core/modules/utils/utils.js b/core/modules/utils/utils.js index 7a9b0fe16..32cc60af1 100644 --- a/core/modules/utils/utils.js +++ b/core/modules/utils/utils.js @@ -278,6 +278,15 @@ exports.unHyphenateCss = function(propName) { }); }; +/* +Convert a camelcase CSS property name into a dashed one ("backgroundColor" --> "background-color") +*/ +exports.hyphenateCss = function(propName) { + return propName.replace(/([A-Z])/g, function(match0,match1) { + return "-" + match1.toLowerCase(); + }); +}; + /* Extract the version number from the meta tag or from the boot file */