Dashboard sipadu mbip
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

dom-style-ie-debug.js 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313
  1. /*
  2. Copyright (c) 2010, Yahoo! Inc. All rights reserved.
  3. Code licensed under the BSD License:
  4. http://developer.yahoo.com/yui/license.html
  5. version: 3.4.0
  6. build: nightly
  7. */
  8. YUI.add('dom-style-ie', function(Y) {
  9. (function(Y) {
  10. var HAS_LAYOUT = 'hasLayout',
  11. PX = 'px',
  12. FILTER = 'filter',
  13. FILTERS = 'filters',
  14. OPACITY = 'opacity',
  15. AUTO = 'auto',
  16. BORDER_WIDTH = 'borderWidth',
  17. BORDER_TOP_WIDTH = 'borderTopWidth',
  18. BORDER_RIGHT_WIDTH = 'borderRightWidth',
  19. BORDER_BOTTOM_WIDTH = 'borderBottomWidth',
  20. BORDER_LEFT_WIDTH = 'borderLeftWidth',
  21. WIDTH = 'width',
  22. HEIGHT = 'height',
  23. TRANSPARENT = 'transparent',
  24. VISIBLE = 'visible',
  25. GET_COMPUTED_STYLE = 'getComputedStyle',
  26. UNDEFINED = undefined,
  27. documentElement = Y.config.doc.documentElement,
  28. testFeature = Y.Features.test,
  29. addFeature = Y.Features.add,
  30. // TODO: unit-less lineHeight (e.g. 1.22)
  31. re_unit = /^(\d[.\d]*)+(em|ex|px|gd|rem|vw|vh|vm|ch|mm|cm|in|pt|pc|deg|rad|ms|s|hz|khz|%){1}?/i,
  32. isIE8 = (Y.UA.ie >= 8),
  33. _getStyleObj = function(node) {
  34. return node.currentStyle || node.style;
  35. },
  36. ComputedStyle = {
  37. CUSTOM_STYLES: {},
  38. get: function(el, property) {
  39. var value = '',
  40. current;
  41. if (el) {
  42. current = _getStyleObj(el)[property];
  43. if (property === OPACITY && Y.DOM.CUSTOM_STYLES[OPACITY]) {
  44. value = Y.DOM.CUSTOM_STYLES[OPACITY].get(el);
  45. } else if (!current || (current.indexOf && current.indexOf(PX) > -1)) { // no need to convert
  46. value = current;
  47. } else if (Y.DOM.IE.COMPUTED[property]) { // use compute function
  48. value = Y.DOM.IE.COMPUTED[property](el, property);
  49. } else if (re_unit.test(current)) { // convert to pixel
  50. value = ComputedStyle.getPixel(el, property) + PX;
  51. } else {
  52. value = current;
  53. }
  54. }
  55. return value;
  56. },
  57. sizeOffsets: {
  58. width: ['Left', 'Right'],
  59. height: ['Top', 'Bottom'],
  60. top: ['Top'],
  61. bottom: ['Bottom']
  62. },
  63. getOffset: function(el, prop) {
  64. var current = _getStyleObj(el)[prop], // value of "width", "top", etc.
  65. capped = prop.charAt(0).toUpperCase() + prop.substr(1), // "Width", "Top", etc.
  66. offset = 'offset' + capped, // "offsetWidth", "offsetTop", etc.
  67. pixel = 'pixel' + capped, // "pixelWidth", "pixelTop", etc.
  68. sizeOffsets = ComputedStyle.sizeOffsets[prop],
  69. mode = el.ownerDocument.compatMode,
  70. value = '';
  71. // IE pixelWidth incorrect for percent
  72. // manually compute by subtracting padding and border from offset size
  73. // NOTE: clientWidth/Height (size minus border) is 0 when current === AUTO so offsetHeight is used
  74. // reverting to auto from auto causes position stacking issues (old impl)
  75. if (current === AUTO || current.indexOf('%') > -1) {
  76. value = el['offset' + capped];
  77. if (mode !== 'BackCompat') {
  78. if (sizeOffsets[0]) {
  79. value -= ComputedStyle.getPixel(el, 'padding' + sizeOffsets[0]);
  80. value -= ComputedStyle.getBorderWidth(el, 'border' + sizeOffsets[0] + 'Width', 1);
  81. }
  82. if (sizeOffsets[1]) {
  83. value -= ComputedStyle.getPixel(el, 'padding' + sizeOffsets[1]);
  84. value -= ComputedStyle.getBorderWidth(el, 'border' + sizeOffsets[1] + 'Width', 1);
  85. }
  86. }
  87. } else { // use style.pixelWidth, etc. to convert to pixels
  88. // need to map style.width to currentStyle (no currentStyle.pixelWidth)
  89. if (!el.style[pixel] && !el.style[prop]) {
  90. el.style[prop] = current;
  91. }
  92. value = el.style[pixel];
  93. }
  94. return value + PX;
  95. },
  96. borderMap: {
  97. thin: (isIE8) ? '1px' : '2px',
  98. medium: (isIE8) ? '3px': '4px',
  99. thick: (isIE8) ? '5px' : '6px'
  100. },
  101. getBorderWidth: function(el, property, omitUnit) {
  102. var unit = omitUnit ? '' : PX,
  103. current = el.currentStyle[property];
  104. if (current.indexOf(PX) < 0) { // look up keywords if a border exists
  105. if (ComputedStyle.borderMap[current] &&
  106. el.currentStyle.borderStyle !== 'none') {
  107. current = ComputedStyle.borderMap[current];
  108. } else { // otherwise no border (default is "medium")
  109. current = 0;
  110. }
  111. }
  112. return (omitUnit) ? parseFloat(current) : current;
  113. },
  114. getPixel: function(node, att) {
  115. // use pixelRight to convert to px
  116. var val = null,
  117. style = _getStyleObj(node),
  118. styleRight = style.right,
  119. current = style[att];
  120. node.style.right = current;
  121. val = node.style.pixelRight;
  122. node.style.right = styleRight; // revert
  123. return val;
  124. },
  125. getMargin: function(node, att) {
  126. var val,
  127. style = _getStyleObj(node);
  128. if (style[att] == AUTO) {
  129. val = 0;
  130. } else {
  131. val = ComputedStyle.getPixel(node, att);
  132. }
  133. return val + PX;
  134. },
  135. getVisibility: function(node, att) {
  136. var current;
  137. while ( (current = node.currentStyle) && current[att] == 'inherit') { // NOTE: assignment in test
  138. node = node.parentNode;
  139. }
  140. return (current) ? current[att] : VISIBLE;
  141. },
  142. getColor: function(node, att) {
  143. var current = _getStyleObj(node)[att];
  144. if (!current || current === TRANSPARENT) {
  145. Y.DOM.elementByAxis(node, 'parentNode', null, function(parent) {
  146. current = _getStyleObj(parent)[att];
  147. if (current && current !== TRANSPARENT) {
  148. node = parent;
  149. return true;
  150. }
  151. });
  152. }
  153. return Y.Color.toRGB(current);
  154. },
  155. getBorderColor: function(node, att) {
  156. var current = _getStyleObj(node),
  157. val = current[att] || current.color;
  158. return Y.Color.toRGB(Y.Color.toHex(val));
  159. }
  160. },
  161. //fontSize: getPixelFont,
  162. IEComputed = {};
  163. addFeature('style', 'computedStyle', {
  164. test: function() {
  165. return 'getComputedStyle' in Y.config.win;
  166. }
  167. });
  168. addFeature('style', 'opacity', {
  169. test: function() {
  170. return 'opacity' in documentElement.style;
  171. }
  172. });
  173. addFeature('style', 'filter', {
  174. test: function() {
  175. return 'filters' in documentElement;
  176. }
  177. });
  178. // use alpha filter for IE opacity
  179. if (!testFeature('style', 'opacity') && testFeature('style', 'filter')) {
  180. Y.DOM.CUSTOM_STYLES[OPACITY] = {
  181. get: function(node) {
  182. var val = 100;
  183. try { // will error if no DXImageTransform
  184. val = node[FILTERS]['DXImageTransform.Microsoft.Alpha'][OPACITY];
  185. } catch(e) {
  186. try { // make sure its in the document
  187. val = node[FILTERS]('alpha')[OPACITY];
  188. } catch(err) {
  189. Y.log('getStyle: IE opacity filter not found; returning 1', 'warn', 'dom-style');
  190. }
  191. }
  192. return val / 100;
  193. },
  194. set: function(node, val, style) {
  195. var current,
  196. styleObj = _getStyleObj(node),
  197. currentFilter = styleObj[FILTER];
  198. style = style || node.style;
  199. if (val === '') { // normalize inline style behavior
  200. current = (OPACITY in styleObj) ? styleObj[OPACITY] : 1; // revert to original opacity
  201. val = current;
  202. }
  203. if (typeof currentFilter == 'string') { // in case not appended
  204. style[FILTER] = currentFilter.replace(/alpha([^)]*\))/gi, '') +
  205. ((val < 1) ? 'alpha(' + OPACITY + '=' + val * 100 + ')' : '');
  206. if (!style[FILTER]) {
  207. style.removeAttribute(FILTER);
  208. }
  209. if (!styleObj[HAS_LAYOUT]) {
  210. style.zoom = 1; // needs layout
  211. }
  212. }
  213. }
  214. };
  215. }
  216. try {
  217. Y.config.doc.createElement('div').style.height = '-1px';
  218. } catch(e) { // IE throws error on invalid style set; trap common cases
  219. Y.DOM.CUSTOM_STYLES.height = {
  220. set: function(node, val, style) {
  221. var floatVal = parseFloat(val);
  222. if (floatVal >= 0 || val === 'auto' || val === '') {
  223. style.height = val;
  224. } else {
  225. Y.log('invalid style value for height: ' + val, 'warn', 'dom-style');
  226. }
  227. }
  228. };
  229. Y.DOM.CUSTOM_STYLES.width = {
  230. set: function(node, val, style) {
  231. var floatVal = parseFloat(val);
  232. if (floatVal >= 0 || val === 'auto' || val === '') {
  233. style.width = val;
  234. } else {
  235. Y.log('invalid style value for width: ' + val, 'warn', 'dom-style');
  236. }
  237. }
  238. };
  239. }
  240. if (!testFeature('style', 'computedStyle')) {
  241. // TODO: top, right, bottom, left
  242. IEComputed[WIDTH] = IEComputed[HEIGHT] = ComputedStyle.getOffset;
  243. IEComputed.color = IEComputed.backgroundColor = ComputedStyle.getColor;
  244. IEComputed[BORDER_WIDTH] = IEComputed[BORDER_TOP_WIDTH] = IEComputed[BORDER_RIGHT_WIDTH] =
  245. IEComputed[BORDER_BOTTOM_WIDTH] = IEComputed[BORDER_LEFT_WIDTH] =
  246. ComputedStyle.getBorderWidth;
  247. IEComputed.marginTop = IEComputed.marginRight = IEComputed.marginBottom =
  248. IEComputed.marginLeft = ComputedStyle.getMargin;
  249. IEComputed.visibility = ComputedStyle.getVisibility;
  250. IEComputed.borderColor = IEComputed.borderTopColor =
  251. IEComputed.borderRightColor = IEComputed.borderBottomColor =
  252. IEComputed.borderLeftColor = ComputedStyle.getBorderColor;
  253. Y.DOM[GET_COMPUTED_STYLE] = ComputedStyle.get;
  254. Y.namespace('DOM.IE');
  255. Y.DOM.IE.COMPUTED = IEComputed;
  256. Y.DOM.IE.ComputedStyle = ComputedStyle;
  257. }
  258. })(Y);
  259. }, '3.4.0' ,{requires:['dom-style']});