1
0
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 2012-10-25 22:20:27 +01:00
parent 495f208aa4
commit 7c76ec02c2
5 changed files with 94 additions and 51 deletions

View File

@ -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);
};

View File

@ -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, " +
$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";
targetElement.style[$tw.browser.transform] = "translateX(0px)";
targetElement.style.opacity = "1.0";
targetElement.style.height = currHeight + "px";
"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, " +
$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";
wrapperElement.style[$tw.browser.transformorigin] = "0% 0%";
wrapperElement.style[$tw.browser.transform] = "translateX(0px)";
wrapperElement.style.opacity = "1.0";
wrapperElement.style.height = currHeight + "px";
"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;
};

View File

@ -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);

View File

@ -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);
}
})();

View File

@ -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
*/