mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-12-25 09:30:28 +00:00
Better programmatic CSS handling
This commit is contained in:
Jeremy Ruston
parent
495f208aa4
commit
7c76ec02c2
@ -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);
|
||||
};
|
||||
|
||||
@ -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;
|
||||
};
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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<styles.length; t++) {
|
||||
for(var styleName in styles[t]) {
|
||||
element.style[$tw.utils.convertStyleNameToPropertyName(styleName)] = styles[t][styleName];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
@ -29,28 +33,53 @@ Converts a standard CSS property name into the local browser-specific equivalent
|
||||
|
||||
var styleNameCache = {}; // We'll cache the style name conversions
|
||||
|
||||
exports.convertStyleName = function(styleName) {
|
||||
exports.convertStyleNameToPropertyName = function(styleName) {
|
||||
// Return from the cache if we can
|
||||
if(styleNameCache[styleName]) {
|
||||
return styleNameCache[styleName];
|
||||
}
|
||||
// Convert it by first removing any hyphens
|
||||
var newStyleName = $tw.utils.unHyphenateCss(styleName);
|
||||
var propertyName = $tw.utils.unHyphenateCss(styleName);
|
||||
// Then check if it needs a prefix
|
||||
if(document.body.style[newStyleName] === undefined) {
|
||||
if(document.body.style[propertyName] === undefined) {
|
||||
var prefixes = ["O","MS","Moz","webkit"];
|
||||
for(var t=0; t<prefixes.length; t++) {
|
||||
var prefixedName = prefixes[t] + newStyleName.substr(0,1).toUpperCase() + newStyleName.substr(1);
|
||||
var prefixedName = prefixes[t] + propertyName.substr(0,1).toUpperCase() + propertyName.substr(1);
|
||||
if(document.body.style[prefixedName] !== undefined) {
|
||||
newStyleName = prefixedName;
|
||||
propertyName = prefixedName;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Put it in the cache too
|
||||
styleNameCache[styleName] = newStyleName
|
||||
return newStyleName;
|
||||
}
|
||||
styleNameCache[styleName] = propertyName
|
||||
return propertyName;
|
||||
};
|
||||
|
||||
/*
|
||||
Converts a JS format CSS property name back into the dashed form used in CSS declarations. For example:
|
||||
"backgroundColor" --> "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);
|
||||
}
|
||||
|
||||
})();
|
||||
|
||||
@ -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
|
||||
*/
|
||||
|
||||
Loading…
Reference in New Issue
Block a user