1
0

css.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450
  1. define([
  2. "./core",
  3. "./var/pnum",
  4. "./core/access",
  5. "./css/var/rmargin",
  6. "./css/var/rnumnonpx",
  7. "./css/var/cssExpand",
  8. "./css/var/isHidden",
  9. "./css/var/getStyles",
  10. "./css/curCSS",
  11. "./css/defaultDisplay",
  12. "./css/addGetHookIf",
  13. "./css/support",
  14. "./data/var/data_priv",
  15. "./core/init",
  16. "./css/swap",
  17. "./core/ready",
  18. "./selector" // contains
  19. ], function( jQuery, pnum, access, rmargin, rnumnonpx, cssExpand, isHidden,
  20. getStyles, curCSS, defaultDisplay, addGetHookIf, support, data_priv ) {
  21. var
  22. // Swappable if display is none or starts with table except "table", "table-cell", or "table-caption"
  23. // See here for display values: https://developer.mozilla.org/en-US/docs/CSS/display
  24. rdisplayswap = /^(none|table(?!-c[ea]).+)/,
  25. rnumsplit = new RegExp( "^(" + pnum + ")(.*)$", "i" ),
  26. rrelNum = new RegExp( "^([+-])=(" + pnum + ")", "i" ),
  27. cssShow = { position: "absolute", visibility: "hidden", display: "block" },
  28. cssNormalTransform = {
  29. letterSpacing: "0",
  30. fontWeight: "400"
  31. },
  32. cssPrefixes = [ "Webkit", "O", "Moz", "ms" ];
  33. // Return a css property mapped to a potentially vendor prefixed property
  34. function vendorPropName( style, name ) {
  35. // Shortcut for names that are not vendor prefixed
  36. if ( name in style ) {
  37. return name;
  38. }
  39. // Check for vendor prefixed names
  40. var capName = name[0].toUpperCase() + name.slice(1),
  41. origName = name,
  42. i = cssPrefixes.length;
  43. while ( i-- ) {
  44. name = cssPrefixes[ i ] + capName;
  45. if ( name in style ) {
  46. return name;
  47. }
  48. }
  49. return origName;
  50. }
  51. function setPositiveNumber( elem, value, subtract ) {
  52. var matches = rnumsplit.exec( value );
  53. return matches ?
  54. // Guard against undefined "subtract", e.g., when used as in cssHooks
  55. Math.max( 0, matches[ 1 ] - ( subtract || 0 ) ) + ( matches[ 2 ] || "px" ) :
  56. value;
  57. }
  58. function augmentWidthOrHeight( elem, name, extra, isBorderBox, styles ) {
  59. var i = extra === ( isBorderBox ? "border" : "content" ) ?
  60. // If we already have the right measurement, avoid augmentation
  61. 4 :
  62. // Otherwise initialize for horizontal or vertical properties
  63. name === "width" ? 1 : 0,
  64. val = 0;
  65. for ( ; i < 4; i += 2 ) {
  66. // Both box models exclude margin, so add it if we want it
  67. if ( extra === "margin" ) {
  68. val += jQuery.css( elem, extra + cssExpand[ i ], true, styles );
  69. }
  70. if ( isBorderBox ) {
  71. // border-box includes padding, so remove it if we want content
  72. if ( extra === "content" ) {
  73. val -= jQuery.css( elem, "padding" + cssExpand[ i ], true, styles );
  74. }
  75. // At this point, extra isn't border nor margin, so remove border
  76. if ( extra !== "margin" ) {
  77. val -= jQuery.css( elem, "border" + cssExpand[ i ] + "Width", true, styles );
  78. }
  79. } else {
  80. // At this point, extra isn't content, so add padding
  81. val += jQuery.css( elem, "padding" + cssExpand[ i ], true, styles );
  82. // At this point, extra isn't content nor padding, so add border
  83. if ( extra !== "padding" ) {
  84. val += jQuery.css( elem, "border" + cssExpand[ i ] + "Width", true, styles );
  85. }
  86. }
  87. }
  88. return val;
  89. }
  90. function getWidthOrHeight( elem, name, extra ) {
  91. // Start with offset property, which is equivalent to the border-box value
  92. var valueIsBorderBox = true,
  93. val = name === "width" ? elem.offsetWidth : elem.offsetHeight,
  94. styles = getStyles( elem ),
  95. isBorderBox = jQuery.css( elem, "boxSizing", false, styles ) === "border-box";
  96. // Some non-html elements return undefined for offsetWidth, so check for null/undefined
  97. // svg - https://bugzilla.mozilla.org/show_bug.cgi?id=649285
  98. // MathML - https://bugzilla.mozilla.org/show_bug.cgi?id=491668
  99. if ( val <= 0 || val == null ) {
  100. // Fall back to computed then uncomputed css if necessary
  101. val = curCSS( elem, name, styles );
  102. if ( val < 0 || val == null ) {
  103. val = elem.style[ name ];
  104. }
  105. // Computed unit is not pixels. Stop here and return.
  106. if ( rnumnonpx.test(val) ) {
  107. return val;
  108. }
  109. // Check for style in case a browser which returns unreliable values
  110. // for getComputedStyle silently falls back to the reliable elem.style
  111. valueIsBorderBox = isBorderBox &&
  112. ( support.boxSizingReliable() || val === elem.style[ name ] );
  113. // Normalize "", auto, and prepare for extra
  114. val = parseFloat( val ) || 0;
  115. }
  116. // Use the active box-sizing model to add/subtract irrelevant styles
  117. return ( val +
  118. augmentWidthOrHeight(
  119. elem,
  120. name,
  121. extra || ( isBorderBox ? "border" : "content" ),
  122. valueIsBorderBox,
  123. styles
  124. )
  125. ) + "px";
  126. }
  127. function showHide( elements, show ) {
  128. var display, elem, hidden,
  129. values = [],
  130. index = 0,
  131. length = elements.length;
  132. for ( ; index < length; index++ ) {
  133. elem = elements[ index ];
  134. if ( !elem.style ) {
  135. continue;
  136. }
  137. values[ index ] = data_priv.get( elem, "olddisplay" );
  138. display = elem.style.display;
  139. if ( show ) {
  140. // Reset the inline display of this element to learn if it is
  141. // being hidden by cascaded rules or not
  142. if ( !values[ index ] && display === "none" ) {
  143. elem.style.display = "";
  144. }
  145. // Set elements which have been overridden with display: none
  146. // in a stylesheet to whatever the default browser style is
  147. // for such an element
  148. if ( elem.style.display === "" && isHidden( elem ) ) {
  149. values[ index ] = data_priv.access( elem, "olddisplay", defaultDisplay(elem.nodeName) );
  150. }
  151. } else {
  152. hidden = isHidden( elem );
  153. if ( display !== "none" || !hidden ) {
  154. data_priv.set( elem, "olddisplay", hidden ? display : jQuery.css( elem, "display" ) );
  155. }
  156. }
  157. }
  158. // Set the display of most of the elements in a second loop
  159. // to avoid the constant reflow
  160. for ( index = 0; index < length; index++ ) {
  161. elem = elements[ index ];
  162. if ( !elem.style ) {
  163. continue;
  164. }
  165. if ( !show || elem.style.display === "none" || elem.style.display === "" ) {
  166. elem.style.display = show ? values[ index ] || "" : "none";
  167. }
  168. }
  169. return elements;
  170. }
  171. jQuery.extend({
  172. // Add in style property hooks for overriding the default
  173. // behavior of getting and setting a style property
  174. cssHooks: {
  175. opacity: {
  176. get: function( elem, computed ) {
  177. if ( computed ) {
  178. // We should always get a number back from opacity
  179. var ret = curCSS( elem, "opacity" );
  180. return ret === "" ? "1" : ret;
  181. }
  182. }
  183. }
  184. },
  185. // Don't automatically add "px" to these possibly-unitless properties
  186. cssNumber: {
  187. "columnCount": true,
  188. "fillOpacity": true,
  189. "flexGrow": true,
  190. "flexShrink": true,
  191. "fontWeight": true,
  192. "lineHeight": true,
  193. "opacity": true,
  194. "order": true,
  195. "orphans": true,
  196. "widows": true,
  197. "zIndex": true,
  198. "zoom": true
  199. },
  200. // Add in properties whose names you wish to fix before
  201. // setting or getting the value
  202. cssProps: {
  203. "float": "cssFloat"
  204. },
  205. // Get and set the style property on a DOM Node
  206. style: function( elem, name, value, extra ) {
  207. // Don't set styles on text and comment nodes
  208. if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 || !elem.style ) {
  209. return;
  210. }
  211. // Make sure that we're working with the right name
  212. var ret, type, hooks,
  213. origName = jQuery.camelCase( name ),
  214. style = elem.style;
  215. name = jQuery.cssProps[ origName ] || ( jQuery.cssProps[ origName ] = vendorPropName( style, origName ) );
  216. // Gets hook for the prefixed version, then unprefixed version
  217. hooks = jQuery.cssHooks[ name ] || jQuery.cssHooks[ origName ];
  218. // Check if we're setting a value
  219. if ( value !== undefined ) {
  220. type = typeof value;
  221. // Convert "+=" or "-=" to relative numbers (#7345)
  222. if ( type === "string" && (ret = rrelNum.exec( value )) ) {
  223. value = ( ret[1] + 1 ) * ret[2] + parseFloat( jQuery.css( elem, name ) );
  224. // Fixes bug #9237
  225. type = "number";
  226. }
  227. // Make sure that null and NaN values aren't set (#7116)
  228. if ( value == null || value !== value ) {
  229. return;
  230. }
  231. // If a number, add 'px' to the (except for certain CSS properties)
  232. if ( type === "number" && !jQuery.cssNumber[ origName ] ) {
  233. value += "px";
  234. }
  235. // Support: IE9-11+
  236. // background-* props affect original clone's values
  237. if ( !support.clearCloneStyle && value === "" && name.indexOf( "background" ) === 0 ) {
  238. style[ name ] = "inherit";
  239. }
  240. // If a hook was provided, use that value, otherwise just set the specified value
  241. if ( !hooks || !("set" in hooks) || (value = hooks.set( elem, value, extra )) !== undefined ) {
  242. style[ name ] = value;
  243. }
  244. } else {
  245. // If a hook was provided get the non-computed value from there
  246. if ( hooks && "get" in hooks && (ret = hooks.get( elem, false, extra )) !== undefined ) {
  247. return ret;
  248. }
  249. // Otherwise just get the value from the style object
  250. return style[ name ];
  251. }
  252. },
  253. css: function( elem, name, extra, styles ) {
  254. var val, num, hooks,
  255. origName = jQuery.camelCase( name );
  256. // Make sure that we're working with the right name
  257. name = jQuery.cssProps[ origName ] || ( jQuery.cssProps[ origName ] = vendorPropName( elem.style, origName ) );
  258. // Try prefixed name followed by the unprefixed name
  259. hooks = jQuery.cssHooks[ name ] || jQuery.cssHooks[ origName ];
  260. // If a hook was provided get the computed value from there
  261. if ( hooks && "get" in hooks ) {
  262. val = hooks.get( elem, true, extra );
  263. }
  264. // Otherwise, if a way to get the computed value exists, use that
  265. if ( val === undefined ) {
  266. val = curCSS( elem, name, styles );
  267. }
  268. // Convert "normal" to computed value
  269. if ( val === "normal" && name in cssNormalTransform ) {
  270. val = cssNormalTransform[ name ];
  271. }
  272. // Make numeric if forced or a qualifier was provided and val looks numeric
  273. if ( extra === "" || extra ) {
  274. num = parseFloat( val );
  275. return extra === true || jQuery.isNumeric( num ) ? num || 0 : val;
  276. }
  277. return val;
  278. }
  279. });
  280. jQuery.each([ "height", "width" ], function( i, name ) {
  281. jQuery.cssHooks[ name ] = {
  282. get: function( elem, computed, extra ) {
  283. if ( computed ) {
  284. // Certain elements can have dimension info if we invisibly show them
  285. // but it must have a current display style that would benefit
  286. return rdisplayswap.test( jQuery.css( elem, "display" ) ) && elem.offsetWidth === 0 ?
  287. jQuery.swap( elem, cssShow, function() {
  288. return getWidthOrHeight( elem, name, extra );
  289. }) :
  290. getWidthOrHeight( elem, name, extra );
  291. }
  292. },
  293. set: function( elem, value, extra ) {
  294. var styles = extra && getStyles( elem );
  295. return setPositiveNumber( elem, value, extra ?
  296. augmentWidthOrHeight(
  297. elem,
  298. name,
  299. extra,
  300. jQuery.css( elem, "boxSizing", false, styles ) === "border-box",
  301. styles
  302. ) : 0
  303. );
  304. }
  305. };
  306. });
  307. // Support: Android 2.3
  308. jQuery.cssHooks.marginRight = addGetHookIf( support.reliableMarginRight,
  309. function( elem, computed ) {
  310. if ( computed ) {
  311. return jQuery.swap( elem, { "display": "inline-block" },
  312. curCSS, [ elem, "marginRight" ] );
  313. }
  314. }
  315. );
  316. // These hooks are used by animate to expand properties
  317. jQuery.each({
  318. margin: "",
  319. padding: "",
  320. border: "Width"
  321. }, function( prefix, suffix ) {
  322. jQuery.cssHooks[ prefix + suffix ] = {
  323. expand: function( value ) {
  324. var i = 0,
  325. expanded = {},
  326. // Assumes a single number if not a string
  327. parts = typeof value === "string" ? value.split(" ") : [ value ];
  328. for ( ; i < 4; i++ ) {
  329. expanded[ prefix + cssExpand[ i ] + suffix ] =
  330. parts[ i ] || parts[ i - 2 ] || parts[ 0 ];
  331. }
  332. return expanded;
  333. }
  334. };
  335. if ( !rmargin.test( prefix ) ) {
  336. jQuery.cssHooks[ prefix + suffix ].set = setPositiveNumber;
  337. }
  338. });
  339. jQuery.fn.extend({
  340. css: function( name, value ) {
  341. return access( this, function( elem, name, value ) {
  342. var styles, len,
  343. map = {},
  344. i = 0;
  345. if ( jQuery.isArray( name ) ) {
  346. styles = getStyles( elem );
  347. len = name.length;
  348. for ( ; i < len; i++ ) {
  349. map[ name[ i ] ] = jQuery.css( elem, name[ i ], false, styles );
  350. }
  351. return map;
  352. }
  353. return value !== undefined ?
  354. jQuery.style( elem, name, value ) :
  355. jQuery.css( elem, name );
  356. }, name, value, arguments.length > 1 );
  357. },
  358. show: function() {
  359. return showHide( this, true );
  360. },
  361. hide: function() {
  362. return showHide( this );
  363. },
  364. toggle: function( state ) {
  365. if ( typeof state === "boolean" ) {
  366. return state ? this.show() : this.hide();
  367. }
  368. return this.each(function() {
  369. if ( isHidden( this ) ) {
  370. jQuery( this ).show();
  371. } else {
  372. jQuery( this ).hide();
  373. }
  374. });
  375. }
  376. });
  377. return jQuery;
  378. });