Merge branch 'prefix-csshook-140'

from pull-request 60 * prefix-csshook-140: feat(cssHooks) : apply for css prefix feat(cssHooks) : apply for css prefix feat(cssHooks) : apply for css prefix Reviewed-by: 전용우 <[email protected]> Reviewed-by: 김희재 <[email protected]>
soonsuweb · May 15, 2015 · 29976c6 · 29976c6
2 parents c2eec19 + 2ad8ca3
commit 29976c6
Show file tree

Hide file tree

Showing 4 changed files with 202 additions and 1 deletion.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -30,7 +30,7 @@ module.exports = function(grunt) {
         }
       },
       build: {
-        src: ["src/polyfill/**/*.js", "src/module.js", "src/eg.js", "src/customEvent/*.js", "src/class.js", "src/component.js", "src/movableCoord.js", "src/flicking.js", "src/*.js" ],
+        src: ["src/polyfill/**/*.js", "src/module.js", "src/hook/**/*.js", "src/eg.js", "src/customEvent/*.js", "src/class.js", "src/component.js", "src/movableCoord.js", "src/flicking.js", "src/*.js" ],
         dest: "dist/<%=pkg.outputname%>.js"
       }
     },

diff --git a/src/hook/cssPrefix.js b/src/hook/cssPrefix.js
@@ -0,0 +1,61 @@
+eg.module("cssPrefix",[jQuery, document],function($, doc){
+    /**
+     * Apply css prefix cssHooks
+     * @ko css prefix cssHooks 적용
+     *
+     * @namespace cssPrefix
+     * @group hook
+     *
+     * @example
+     * $("#ID").css("transform", "translate('10px', '10px');
+     * $("#ID").css("Transform", "translate('10px', '10px');
+     * $("#ID").css("webkitTransform", "translate('10px', '10px');
+     * $("#ID").css("transform");
+     * $("#ID").css("webkitTransform");
+     */
+
+    if ( !$.cssHooks ) {
+      throw( new Error( "jQuery 1.4.3+ is needed for this plugin to work" ) );
+    }
+
+    // run in jQuery 1.8.x below
+    if ( $.fn && $.fn.jquery && $.fn.jquery.replace(/[.]/, "") >= "18" ) {
+        return;
+    }
+
+    var cssPrefixes = [ "Webkit", "Moz" , "O" , "ms" ],
+        acts = ["transitionProperty" , "transitionDuration" , "transition", "transform", "transitionTimingFunction"];
+
+    var vendorPrefix = (function() {
+        var bodyStyle = doc.body.style;
+        for ( var i = 0, len = cssPrefixes.length ; i < len ; i++ ) {
+            if( cssPrefixes[i]+"Transition" in bodyStyle ){
+                return cssPrefixes[i];
+            }
+        }
+    })();
+
+    var setCssHooks = function( prop ) {
+        var upperProp = prop.charAt(0).toUpperCase() + prop.slice(1),
+            vendorProp = vendorPrefix + upperProp;
+
+        $.cssHooks[upperProp] = $.cssHooks[vendorPrefix.toLowerCase() + upperProp] = $.cssHooks[prop] = {
+            get: function( elem ){
+                return $.css( elem, vendorProp );
+            },
+            set: function( elem, value ){
+                elem.style[vendorProp] = value;
+            }
+        };
+    };
+
+    for( var n = 0, actsLen = acts.length ; n < actsLen ; n++ ){
+        setCssHooks(acts[n]);
+    }
+
+    return {
+       vendorPrefix : vendorPrefix,
+       setCssHooks: setCssHooks
+    };
+
+});
diff --git a/test/cssPrefix.test.html b/test/cssPrefix.test.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi"> -->
+
+<link rel="stylesheet" href="../bower_components/qunit/qunit/qunit.css">
+<!-- user css start -->
+<style>
+</style>
+<!-- user css end -->
+<script src="../bower_components/qunit/qunit/qunit.js"></script>
+<!-- <script src="../bower_components/jquery/jquery.js"></script> -->
+<script src="../bower_components/jquery/jquery.js"></script>
+</head>
+<body>
+ <h1 id="qunit-header">cssPrefix Test</h1>
+ <h2 id="qunit-banner"></h2>
+ <div id="qunit-testrunner-toolbar"></div>
+ <h2 id="qunit-userAgent"></h2>
+ <ol id="qunit-tests"></ol>
+ <div id="qunit-fixture">
+    <!-- UI content Start -->
+     <div id="prefixId"></id>
+    <!-- UI content End -->
+ </div>
+
+<!-- user script files start -->
+<script src="lib/sinon/fake_timers.js"></script>
+<script src="lib/module.js"></script>
+<script src="../src/eg.js"></script>
+<script src="../src/hook/cssPrefix.js"></script>
+<!-- user script files end -->
+
+<!-- test script files start -->
+<script src="js/cssPrefix.test.js"></script>
+<!-- test script files end -->
+</body>
+</html>
diff --git a/test/js/cssPrefix.test.js b/test/js/cssPrefix.test.js
@@ -0,0 +1,101 @@
+
+var cssPrefixes = [ "Webkit", "Moz" , "O" , "ms" ];
+
+module("cssPrefix", {
+  setup : function() {
+
+    this.fakeDocument = {
+        body : {
+            style : {}
+        }
+    }
+
+    jQuery.cssHooks = {};
+  },
+  teardown : function() {
+  }
+});
+
+
+test("When is not jQuery.cssHooks", function() {
+    // Given
+    delete jQuery.cssHooks;
+    var method = null;
+
+    try{
+        method = eg._invoke("cssPrefix",[jQuery, null]);
+    }catch(e){
+        method = false;
+    }
+
+    // When
+
+    //Then
+    equal(method, false);
+});
+
+cssPrefixes.forEach(function(v,i) {
+    test("vendor check : "+ v, function() {
+        // Given
+        jQuery.cssHooks = {};
+        this.fakeDocument.body.style[v+"Transition"] = "";
+        var method = eg._invoke("cssPrefix",[jQuery, this.fakeDocument]);
+
+        // When
+
+        //Then
+        equal(method.vendorPrefix, v);
+    });
+});
+
+cssPrefixes.forEach(function(v,i) {
+    test("css propertie in jQuery.cssHooks : "+ v, function() {
+        // Given
+        this.fakeDocument.body.style[v+"Transition"] = "";
+        var method = eg._invoke("cssPrefix",[jQuery, this.fakeDocument]);
+        var checkPropertie = v.toLowerCase() + "Transform";
+
+        // When
+
+        //Then
+        equal( checkPropertie in jQuery.cssHooks, true);
+    });
+});
+
+
+test("transform property set/get", function() {
+    // Given
+    var method = eg._invoke("cssPrefix",[jQuery, document]);
+
+    // When
+    $("#prefixId").css("transform", "translate(100px, 0px)");
+
+    //Then
+    var returnValue = jQuery("#prefixId").css("transform");
+    equal(returnValue , "matrix(1, 0, 0, 1, 100, 0)");
+});
+
+
+test("Transform property set/get", function() {
+    // Given
+    var method = eg._invoke("cssPrefix",[jQuery, document]);
+
+    // When
+    $("#prefixId").css("Transform", "translate(300px, 0px)");
+
+    //Then
+    var returnValue = jQuery("#prefixId").css("Transform");
+    equal(returnValue , "matrix(1, 0, 0, 1, 300, 0)");
+});
+
+test("webkitTransform property set/get", function() {
+    // Given
+    var method = eg._invoke("cssPrefix",[jQuery, document]);
+
+    // When
+    $("#prefixId").css("webkitTransform", "translate(200px, 0px)");
+
+    //Then
+    var returnValue = jQuery("#prefixId").css("webkitTransform");
+    equal(returnValue , "matrix(1, 0, 0, 1, 200, 0)");
+});