Source: hook/cssPrefix.js

  1. /**
  2. * Copyright (c) 2015 NAVER Corp.
  3. * egjs projects are licensed under the MIT license
  4. */
  5. eg.module("cssPrefix", ["jQuery", document], function($, doc) {
  6. "use strict";
  7. /**
  8. * Enables to add CSS vendor prefixes when you use some jQuery version(1.4.3 ~ 1.8.x) that does not support them.
  9. * @ko css에 vender prefix를 자동으로 추가하는 cssHooks이다. 지원하지 않는 jQuery 1.4.3 ~ 1.8.x에서만 활성화 된다.
  10. *
  11. * @name jQuery#cssPrefix
  12. * @method
  13. *
  14. * @support {"ie": "10+", "ch" : "latest", "ff" : "latest", "sf" : "latest", "edge" : "latest", "ios" : "7+", "an" : "2.1+ (except 3.x)"}
  15. * @example
  16. * $("#ID").css("transform", "translate('10px', '10px');
  17. * $("#ID").css("Transform", "translate('10px', '10px');
  18. * $("#ID").css("webkitTransform", "translate('10px', '10px');
  19. * $("#ID").css("transform");
  20. * $("#ID").css("webkitTransform");
  21. */
  22. if (!$.cssHooks) {
  23. throw (new Error("jQuery 1.4.3+ is needed for this plugin to work"));
  24. }
  25. // run in jQuery 1.8.x below
  26. var matchTest = ($.fn.jquery.match(/^\d\.\d+/) || [])[0];
  27. if (!matchTest || +matchTest.replace(/\D/, "") >= 18) {
  28. return;
  29. }
  30. var cssPrefixes = [ "Webkit", "Moz", "O", "ms" ];
  31. var acts = ["transitionProperty", "transitionDuration", "transition",
  32. "transform", "transitionTimingFunction"];
  33. var vendorPrefix = (function() {
  34. var bodyStyle = (doc.head || doc.getElementsByTagName("head")[0]).style;
  35. for (var i = 0, len = cssPrefixes.length ; i < len ; i++) {
  36. if (cssPrefixes[i] + "Transition" in bodyStyle) {
  37. return cssPrefixes[i];
  38. }
  39. }
  40. })();
  41. // ie7, 8 - transform and transition are not supported
  42. // ie9 - transition not supported
  43. if (!vendorPrefix) {
  44. return;
  45. }
  46. // If "ms" using "Ms" property in the get function
  47. var setCssHooks = function(prop) {
  48. var upperProp = prop.charAt(0).toUpperCase() + prop.slice(1);
  49. var vendorProp = vendorPrefix + upperProp;
  50. var getVendorProp = vendorPrefix === "ms" ? "Ms" + upperProp : vendorProp;
  51. $.cssHooks[upperProp] =
  52. $.cssHooks[vendorPrefix.toLowerCase() + upperProp] =
  53. $.cssHooks[prop] = {
  54. get: function(elem, computed) {
  55. return computed ? $.css(elem, getVendorProp) : elem.style[vendorProp];
  56. },
  57. set: function(elem, value) {
  58. elem.style[vendorProp] = value;
  59. }
  60. };
  61. };
  62. for (var n = 0, actsLen = acts.length; n < actsLen; n++) {
  63. setCssHooks(acts[n]);
  64. }
  65. return {
  66. vendorPrefix: vendorPrefix,
  67. setCssHooks: setCssHooks
  68. };
  69. });
comments powered by Disqus