jQuery contract adjusted #4

- jQuery.ClipPath only argument is the path string
- backward compatibility with Object ensured
- devDependencies updated
- documentation updated

.yarnrc

@@ -0,0 +1 @@
+save-prefix false

README.md

@@ -15,6 +15,13 @@ With jQuery:
 ```javascript
 $('.target').ClipPath('5% 5%, 100% 0%, 100% 75%');
 ```
+> NOTE: for backward compatibility reasons, jquery implementation also accepts an object as an argument. In this case, a path property is expected. This alternative should be avoided since it is deprecated.
+
+```javascript
+// Using object instead string
+// @deprecated 
+$('.image').ClipPath({path: '5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%'}); 
+```
 
 Or can use html element's attribute to set clip points:
 ```html

example/jquery.html

@@ -15,12 +15,12 @@
 
   $(function(){
     console.log('Applying clip-path with jQuery');
-    $('.image').ClipPath({path: '5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%'});
+    $('.image').ClipPath('5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%');
     $('.image-2').ClipPath();
   });
 
   setTimeout(function() {
-    $('.image').ClipPath({path:'5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%'});
+    $('.image').ClipPath('5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%');
     console.log('Changed after some time...');
   }, 4000);
   </script>

package.json

@@ -1,6 +1,11 @@
 {
   "name": "clip-path",
   "version": "1.0.0",
+  "keywords": [
+    "jquery",
+    "polyfill",
+    "clip-path"
+  ],
   "description": "ClipPath",
   "main": "./dist/clippath.min.js",
   "scripts": {
@@ -20,12 +25,12 @@
   },
   "homepage": "https://github.com/AlfonsoFilho/ClipPath#readme",
   "devDependencies": {
-    "eslint": "3.19.0",
+    "eslint": "4.4.1",
     "gulp": "3.9.1",
     "gulp-rename": "1.2.2",
     "gulp-size": "2.1.0",
-    "gulp-uglify": "2.1.2",
-    "jest": "19.0.2",
+    "gulp-uglify": "3.0.0",
+    "jest": "20.0.4",
     "rimraf": "2.6.1",
     "through2": "2.0.3"
   },

src/clippath.js

@@ -113,11 +113,16 @@ ClipPath.applyClipPath = applyClipPath;
 
 if(typeof jQuery !== 'undefined') {
   (function($, _ClipPath){
-    $.fn.ClipPath = function(options) {
+    $.fn.ClipPath = function(pathStr) {
+
+      // pathStr can be an object due backward compatibility
+      // but pathStr must be a string
+      if(pathStr === Object(pathStr) && pathStr.path) {
+        pathStr = pathStr.path;
+      }
 
       return this.each(function() {
-        var path = $(this).attr('data-clip') || (options && options.path);
-        _ClipPath.applyClipPath(this, path);
+        _ClipPath.applyClipPath(this, $(this).attr('data-clip') || pathStr);
       });
 
     };