mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-12-12 19:20:27 +00:00
145 lines
4.5 KiB
JavaScript
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" : "";
|
|
};
|
|
|
|
})();
|