1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-12 19:20:27 +00:00
TiddlyWiki5/core/modules/utils/dom/browser.js
2012-11-06 17:21:56 +00:00

145 lines
4.5 KiB
JavaScript

/*\
title: $:/core/modules/utils/dom/browser.js
type: application/javascript
module-type: utils
Browser feature detection
\*/
(function(){
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
/*
Set style properties of an element
element: dom node
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];
}
}
};
/*
Converts a standard CSS property name into the local browser-specific equivalent. For example:
"background-color" --> "backgroundColor"
"transition" --> "webkitTransition"
*/
var styleNameCache = {}; // We'll cache the style name conversions
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 propertyName = $tw.utils.unHyphenateCss(styleName);
// Then check if it needs a prefix
if(document.body.style[propertyName] === undefined) {
var prefixes = ["O","MS","Moz","webkit"];
for(var t=0; t<prefixes.length; t++) {
var prefixedName = prefixes[t] + propertyName.substr(0,1).toUpperCase() + propertyName.substr(1);
if(document.body.style[prefixedName] !== undefined) {
propertyName = prefixedName;
break;
}
}
}
// Put it in the cache too
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:
"animationEnd" --> "webkitAnimationEnd"
*/
var eventNameCache = {}; // We'll cache the conversions
var eventNameMappings = {
"transitionEnd": {
correspondingCssProperty: "transition",
mappings: {
transition: "transitionend",
OTransition: "oTransitionEnd",
MSTransition: "msTransitionEnd",
MozTransition: "transitionend",
webkitTransition: "webkitTransitionEnd"
}
},
"animationEnd": {
correspondingCssProperty: "animation",
mappings: {
animation: "animationend",
OAnimation: "oAnimationEnd",
MSAnimation: "msAnimationEnd",
MozAnimation: "animationend",
webkitAnimation: "webkitAnimationEnd"
}
}
};
exports.convertEventName = function(eventName) {
if(eventNameCache[eventName]) {
return eventNameCache[eventName];
}
var newEventName = eventName,
mappings = eventNameMappings[eventName];
if(mappings) {
var convertedProperty = $tw.utils.convertStyleNameToPropertyName(mappings.correspondingCssProperty);
if(mappings.mappings[convertedProperty]) {
newEventName = mappings.mappings[convertedProperty];
}
}
// Put it in the cache too
eventNameCache[eventName] = newEventName;
return newEventName;
};
// Setup constants for the current browser
exports.getBrowserInfo = function(info) {
info.requestFullScreen = document.body.webkitRequestFullScreen !== undefined ? "webkitRequestFullScreen" :
document.body.mozRequestFullScreen !== undefined ? "mozRequestFullScreen" :
document.body.requestFullScreen !== undefined ? "requestFullScreen" : "";
info.cancelFullScreen = document.webkitCancelFullScreen !== undefined ? "webkitCancelFullScreen" :
document.mozCancelFullScreen !== undefined ? "mozCancelFullScreen" :
document.cancelFullScreen !== undefined ? "cancelFullScreen" : "";
info.isFullScreen = document.webkitIsFullScreen !== undefined ? "webkitIsFullScreen" :
document.mozFullScreen !== undefined ? "mozFullScreen" :
document.fullScreen !== undefined ? "fullScreen" : "";
};
})();