PageRenderTime 93ms CodeModel.GetById 24ms RepoModel.GetById 0ms app.codeStats 1ms

/ajax/libs/dojo/1.9.7/dom-style.js.uncompressed.js

https://gitlab.com/Mirros/cdnjs
JavaScript | 329 lines | 149 code | 19 blank | 161 comment | 54 complexity | 30990f6642881ee51b19dec5e33769cc MD5 | raw file
  1. define("dojo/dom-style", ["./sniff", "./dom"], function(has, dom){
  2. // module:
  3. // dojo/dom-style
  4. // =============================
  5. // Style Functions
  6. // =============================
  7. // getComputedStyle drives most of the style code.
  8. // Wherever possible, reuse the returned object.
  9. //
  10. // API functions below that need to access computed styles accept an
  11. // optional computedStyle parameter.
  12. // If this parameter is omitted, the functions will call getComputedStyle themselves.
  13. // This way, calling code can access computedStyle once, and then pass the reference to
  14. // multiple API functions.
  15. // Although we normally eschew argument validation at this
  16. // level, here we test argument 'node' for (duck)type,
  17. // by testing nodeType, ecause 'document' is the 'parentNode' of 'body'
  18. // it is frequently sent to this function even
  19. // though it is not Element.
  20. var getComputedStyle, style = {
  21. // summary:
  22. // This module defines the core dojo DOM style API.
  23. };
  24. if(has("webkit")){
  25. getComputedStyle = function(/*DomNode*/ node){
  26. var s;
  27. if(node.nodeType == 1){
  28. var dv = node.ownerDocument.defaultView;
  29. s = dv.getComputedStyle(node, null);
  30. if(!s && node.style){
  31. node.style.display = "";
  32. s = dv.getComputedStyle(node, null);
  33. }
  34. }
  35. return s || {};
  36. };
  37. }else if(has("ie") && (has("ie") < 9 || has("quirks"))){
  38. getComputedStyle = function(node){
  39. // IE (as of 7) doesn't expose Element like sane browsers
  40. // currentStyle can be null on IE8!
  41. return node.nodeType == 1 /* ELEMENT_NODE*/ && node.currentStyle ? node.currentStyle : {};
  42. };
  43. }else{
  44. getComputedStyle = function(node){
  45. return node.nodeType == 1 /* ELEMENT_NODE*/ ?
  46. node.ownerDocument.defaultView.getComputedStyle(node, null) : {};
  47. };
  48. }
  49. style.getComputedStyle = getComputedStyle;
  50. /*=====
  51. style.getComputedStyle = function(node){
  52. // summary:
  53. // Returns a "computed style" object.
  54. //
  55. // description:
  56. // Gets a "computed style" object which can be used to gather
  57. // information about the current state of the rendered node.
  58. //
  59. // Note that this may behave differently on different browsers.
  60. // Values may have different formats and value encodings across
  61. // browsers.
  62. //
  63. // Note also that this method is expensive. Wherever possible,
  64. // reuse the returned object.
  65. //
  66. // Use the dojo/dom-style.get() method for more consistent (pixelized)
  67. // return values.
  68. //
  69. // node: DOMNode
  70. // A reference to a DOM node. Does NOT support taking an
  71. // ID string for speed reasons.
  72. // example:
  73. // | require(["dojo/dom-style", "dojo/dom"], function(domStyle, dom){
  74. // | domStyle.getComputedStyle(dom.byId('foo')).borderWidth;
  75. // | });
  76. //
  77. // example:
  78. // Reusing the returned object, avoiding multiple lookups:
  79. // | require(["dojo/dom-style", "dojo/dom"], function(domStyle, dom){
  80. // | var cs = domStyle.getComputedStyle(dom.byId("someNode"));
  81. // | var w = cs.width, h = cs.height;
  82. // | });
  83. return; // CSS2Properties
  84. };
  85. =====*/
  86. var toPixel;
  87. if(!has("ie")){
  88. toPixel = function(element, value){
  89. // style values can be floats, client code may want
  90. // to round for integer pixels.
  91. return parseFloat(value) || 0;
  92. };
  93. }else{
  94. toPixel = function(element, avalue){
  95. if(!avalue){ return 0; }
  96. // on IE7, medium is usually 4 pixels
  97. if(avalue == "medium"){ return 4; }
  98. // style values can be floats, client code may
  99. // want to round this value for integer pixels.
  100. if(avalue.slice && avalue.slice(-2) == 'px'){ return parseFloat(avalue); }
  101. var s = element.style, rs = element.runtimeStyle, cs = element.currentStyle,
  102. sLeft = s.left, rsLeft = rs.left;
  103. rs.left = cs.left;
  104. try{
  105. // 'avalue' may be incompatible with style.left, which can cause IE to throw
  106. // this has been observed for border widths using "thin", "medium", "thick" constants
  107. // those particular constants could be trapped by a lookup
  108. // but perhaps there are more
  109. s.left = avalue;
  110. avalue = s.pixelLeft;
  111. }catch(e){
  112. avalue = 0;
  113. }
  114. s.left = sLeft;
  115. rs.left = rsLeft;
  116. return avalue;
  117. };
  118. }
  119. style.toPixelValue = toPixel;
  120. /*=====
  121. style.toPixelValue = function(node, value){
  122. // summary:
  123. // converts style value to pixels on IE or return a numeric value.
  124. // node: DOMNode
  125. // value: String
  126. // returns: Number
  127. };
  128. =====*/
  129. // FIXME: there opacity quirks on FF that we haven't ported over. Hrm.
  130. var astr = "DXImageTransform.Microsoft.Alpha";
  131. var af = function(n, f){
  132. try{
  133. return n.filters.item(astr);
  134. }catch(e){
  135. return f ? {} : null;
  136. }
  137. };
  138. var _getOpacity =
  139. has("ie") < 9 || (has("ie") < 10 && has("quirks")) ? function(node){
  140. try{
  141. return af(node).Opacity / 100; // Number
  142. }catch(e){
  143. return 1; // Number
  144. }
  145. } :
  146. function(node){
  147. return getComputedStyle(node).opacity;
  148. };
  149. var _setOpacity =
  150. has("ie") < 9 || (has("ie") < 10 && has("quirks")) ? function(/*DomNode*/ node, /*Number*/ opacity){
  151. if(opacity === ""){ opacity = 1; }
  152. var ov = opacity * 100, fullyOpaque = opacity === 1;
  153. // on IE7 Alpha(Filter opacity=100) makes text look fuzzy so disable it altogether (bug #2661),
  154. // but still update the opacity value so we can get a correct reading if it is read later:
  155. // af(node, 1).Enabled = !fullyOpaque;
  156. if(fullyOpaque){
  157. node.style.zoom = "";
  158. if(af(node)){
  159. node.style.filter = node.style.filter.replace(
  160. new RegExp("\\s*progid:" + astr + "\\([^\\)]+?\\)", "i"), "");
  161. }
  162. }else{
  163. node.style.zoom = 1;
  164. if(af(node)){
  165. af(node, 1).Opacity = ov;
  166. }else{
  167. node.style.filter += " progid:" + astr + "(Opacity=" + ov + ")";
  168. }
  169. af(node, 1).Enabled = true;
  170. }
  171. if(node.tagName.toLowerCase() == "tr"){
  172. for(var td = node.firstChild; td; td = td.nextSibling){
  173. if(td.tagName.toLowerCase() == "td"){
  174. _setOpacity(td, opacity);
  175. }
  176. }
  177. }
  178. return opacity;
  179. } :
  180. function(node, opacity){
  181. return node.style.opacity = opacity;
  182. };
  183. var _pixelNamesCache = {
  184. left: true, top: true
  185. };
  186. var _pixelRegExp = /margin|padding|width|height|max|min|offset/; // |border
  187. function _toStyleValue(node, type, value){
  188. //TODO: should we really be doing string case conversion here? Should we cache it? Need to profile!
  189. type = type.toLowerCase();
  190. if(has("ie") || has("trident")){
  191. if(value == "auto"){
  192. if(type == "height"){ return node.offsetHeight; }
  193. if(type == "width"){ return node.offsetWidth; }
  194. }
  195. if(type == "fontweight"){
  196. switch(value){
  197. case 700: return "bold";
  198. case 400:
  199. default: return "normal";
  200. }
  201. }
  202. }
  203. if(!(type in _pixelNamesCache)){
  204. _pixelNamesCache[type] = _pixelRegExp.test(type);
  205. }
  206. return _pixelNamesCache[type] ? toPixel(node, value) : value;
  207. }
  208. var _floatAliases = {cssFloat: 1, styleFloat: 1, "float": 1};
  209. // public API
  210. style.get = function getStyle(/*DOMNode|String*/ node, /*String?*/ name){
  211. // summary:
  212. // Accesses styles on a node.
  213. // description:
  214. // Getting the style value uses the computed style for the node, so the value
  215. // will be a calculated value, not just the immediate node.style value.
  216. // Also when getting values, use specific style names,
  217. // like "borderBottomWidth" instead of "border" since compound values like
  218. // "border" are not necessarily reflected as expected.
  219. // If you want to get node dimensions, use `dojo/dom-geometry.getMarginBox()`,
  220. // `dojo/dom-geometry.getContentBox()` or `dojo/dom-geometry.getPosition()`.
  221. // node: DOMNode|String
  222. // id or reference to node to get style for
  223. // name: String?
  224. // the style property to get
  225. // example:
  226. // Passing only an ID or node returns the computed style object of
  227. // the node:
  228. // | require(["dojo/dom-style", "dojo/dom"], function(domStyle, dom){
  229. // | domStyle.get("thinger");
  230. // | });
  231. // example:
  232. // Passing a node and a style property returns the current
  233. // normalized, computed value for that property:
  234. // | require(["dojo/dom-style", "dojo/dom"], function(domStyle, dom){
  235. // | domStyle.get("thinger", "opacity"); // 1 by default
  236. // | });
  237. var n = dom.byId(node), l = arguments.length, op = (name == "opacity");
  238. if(l == 2 && op){
  239. return _getOpacity(n);
  240. }
  241. name = _floatAliases[name] ? "cssFloat" in n.style ? "cssFloat" : "styleFloat" : name;
  242. var s = style.getComputedStyle(n);
  243. return (l == 1) ? s : _toStyleValue(n, name, s[name] || n.style[name]); /* CSS2Properties||String||Number */
  244. };
  245. style.set = function setStyle(/*DOMNode|String*/ node, /*String|Object*/ name, /*String?*/ value){
  246. // summary:
  247. // Sets styles on a node.
  248. // node: DOMNode|String
  249. // id or reference to node to set style for
  250. // name: String|Object
  251. // the style property to set in DOM-accessor format
  252. // ("borderWidth", not "border-width") or an object with key/value
  253. // pairs suitable for setting each property.
  254. // value: String?
  255. // If passed, sets value on the node for style, handling
  256. // cross-browser concerns. When setting a pixel value,
  257. // be sure to include "px" in the value. For instance, top: "200px".
  258. // Otherwise, in some cases, some browsers will not apply the style.
  259. //
  260. // example:
  261. // Passing a node, a style property, and a value changes the
  262. // current display of the node and returns the new computed value
  263. // | require(["dojo/dom-style"], function(domStyle){
  264. // | domStyle.set("thinger", "opacity", 0.5); // == 0.5
  265. // | });
  266. //
  267. // example:
  268. // Passing a node, an object-style style property sets each of the values in turn and returns the computed style object of the node:
  269. // | require(["dojo/dom-style"], function(domStyle){
  270. // | domStyle.set("thinger", {
  271. // | "opacity": 0.5,
  272. // | "border": "3px solid black",
  273. // | "height": "300px"
  274. // | });
  275. // | });
  276. //
  277. // example:
  278. // When the CSS style property is hyphenated, the JavaScript property is camelCased.
  279. // font-size becomes fontSize, and so on.
  280. // | require(["dojo/dom-style", "dojo/dom"], function(domStyle, dom){
  281. // | domStyle.set("thinger",{
  282. // | fontSize:"14pt",
  283. // | letterSpacing:"1.2em"
  284. // | });
  285. // | });
  286. //
  287. // example:
  288. // dojo/NodeList implements .style() using the same syntax, omitting the "node" parameter, calling
  289. // dojo/dom-style.get() on every element of the list. See: `dojo/query` and `dojo/NodeList`
  290. // | require(["dojo/dom-style", "dojo/query", "dojo/NodeList-dom"],
  291. // | function(domStyle, query){
  292. // | query(".someClassName").style("visibility","hidden");
  293. // | // or
  294. // | query("#baz > div").style({
  295. // | opacity:0.75,
  296. // | fontSize:"13pt"
  297. // | });
  298. // | });
  299. var n = dom.byId(node), l = arguments.length, op = (name == "opacity");
  300. name = _floatAliases[name] ? "cssFloat" in n.style ? "cssFloat" : "styleFloat" : name;
  301. if(l == 3){
  302. return op ? _setOpacity(n, value) : n.style[name] = value; // Number
  303. }
  304. for(var x in name){
  305. style.set(node, x, name[x]);
  306. }
  307. return style.getComputedStyle(n);
  308. };
  309. return style;
  310. });