Merge pull request #2 from gibbok/dev_gibbok_issue_1

Dev gibbok issue 1
gibbok · May 7, 2017 · 4f72e23 · 4f72e23
2 parents 38a8013 + 225c566
commit 4f72e23
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 57 deletions.
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@ Use this tool to move your interactive animations from stylesheets to JavaScript
 
 ## Great! So how do I use it?
 
-- Install keyframes-tool using `npm install keyframes-tool` or adding it in your `package.json` as: `"devDependencies": { "keyframes-tool": "^1.0.2" }` and run `npm install`.
+- Install keyframes-tool using `npm install keyframes-tool` or adding it in your `package.json` as: `"devDependencies": { "keyframes-tool": "^1.0.3" }` and run `npm install`.
 - Run command line in your keyframes-tool directory and enter `node keyframes-tool ./input.css ./output.json`,
 where as first argument `./input.css` is the CSS source file to process and the second argument `./output.json` is the destination file with the converted result.
 Paths should be relative to `keyframes-tool.js` file location.
@@ -44,42 +44,50 @@ Output file `output.json`:
 
 ```json
 {
-  "flash": [
-    {
-      "opacity": "1",
-      "offset": "0"
-    },
-    {
-      "opacity": "0",
-      "offset": "0.25"
-    },
-    {
-      "opacity": "1",
-      "offset": "0.5"
-    },
-    {
-      "opacity": "0",
-      "offset": "0.75"
-    },
-    {
-      "opacity": "1",
-      "offset": "1"
-    }
-  ],
-  "pulse": [
-    {
-      "transform": "scale3d(1, 1, 1)",
-      "offset": "0"
-    },
-    {
-      "transform": "scale3d(1.05, 1.05, 1.05)",
-      "offset": "0.5"
-    },
-    {
-      "transform": "scale3d(1, 1, 1)",
-      "offset": "1"
-    }
-  ]
+    "flash": [
+        {
+            "opacity": "1",
+            "offset": "0",
+            "easing": "ease"
+        },
+        {
+            "opacity": "0",
+            "offset": "0.25",
+            "easing": "ease"
+        },
+        {
+            "opacity": "1",
+            "offset": "0.5",
+            "easing": "ease"
+        },
+        {
+            "opacity": "0",
+            "offset": "0.75",
+            "easing": "ease"
+        },
+        {
+            "opacity": "1",
+            "offset": "1",
+            "easing": "ease"
+        }
+    ],
+    "pulse": [
+        {
+            "transform": "scale3d(1, 1, 1)",
+            "offset": "0",
+            "easing": "ease"
+        },
+        {
+            "transform": "scale3d(1.05, 1.05, 1.05)",
+            "offset": "0.5",
+            "easing": "ease"
+        },
+        {
+            "transform": "scale3d(1, 1, 1)",
+            "offset": "1",
+            "easing": "ease"
+        }
+    ]
 }
 ```
 - Use the result as embedded data in your JavaScript as [shown in this example](http://codepen.io/gibbok/pen/ENpqZO), alternatively you could load the JSON data using Ajax.
diff --git a/keyframes-tool.js b/keyframes-tool.js
@@ -11,11 +11,11 @@ let fileIn,
 /**
  * Check software requirements.
  */
-let prerequisiteCheck = () => {
+let checkPrerequisites = () => {
     return new Promise((fulfill, reject) => {
         try {
             // check node version
-            let getNodeVersion = (strVersion) => {
+            let getNodeVersion = strVersion => {
                 let numberPattern = /\d+/g;
                 return numVersion = Number(strVersion.match(numberPattern).join(''))
             },
@@ -33,7 +33,7 @@ let prerequisiteCheck = () => {
 };
 
 /**
- * Get arguments passed Node.js using terminal.
+ * Get arguments passed by Node.js from terminal.
  */
 let getNodeArguments = () => {
     return new Promise((fulfill, reject) => {
@@ -79,9 +79,9 @@ let readInputFile = () => {
 }
 
 /**
- * Parse content of CSS input file and creates an AST tree.
+ * Parse content of CSS input file and create an AST tree.
  */
-let parse = (data) => {
+let parse = data => {
     return new Promise((fulfill, reject) => {
         try {
             let parsedData = css.parse(data.toString(), { silent: false });
@@ -95,7 +95,7 @@ let parse = (data) => {
 /**
  * Validate AST tree content.
  */
-let validate = (data) => {
+let validate = data => {
     return new Promise((fulfill, reject) => {
         try {
             let isStylesheet = data.type === 'stylesheet',
@@ -123,9 +123,9 @@ let validate = (data) => {
 /**
  * Process AST tree content and a new data structure valid for Web Animation API KeyframeEffect.
  * The following code uses Ramda.js for traversing a complex AST tree,
- * an alternative version is visible at http://codepen.io/gibbok/pen/PbRrxp
+ * an alternative and simplified version is visible at http://codepen.io/gibbok/pen/PbRrxp
  */
-let processAST = (data) => {
+let processAST = data => {
     return new Promise((fulfill, reject) => {
         try {
             let processKeyframe = (vals, declarations) => [
@@ -171,7 +171,7 @@ let processAST = (data) => {
                 // get only object whose `type` property is `keyframes`
                 R.filter(R.propEq('type', 'keyframes')),
                 // map each item in `keyframes` collection
-                // to an object {name: keyframe.name, content: [contentOfkeyframes] }
+                // to an object `{name: keyframe.name, content: [contentOfkeyframes] }`
                 R.map((keyframe) => ({
                     name: keyframe.name,
                     content: getContentOfKeyframes(keyframe.keyframes)
@@ -188,19 +188,31 @@ let processAST = (data) => {
             let orderByOffset = R.map(R.pipe(R.sortBy(R.prop('offset'))));
 
             // convert hyphenated properties to camelCase
-            let convertToCamelCase = (data) => {
+            let convertToCamelCase = data => {
                 let mapKeys = R.curry((fn, obj) =>
                     R.fromPairs(R.map(R.adjust(fn, 0), R.toPairs(obj)))
                 ),
                     camelCase = (str) => str.replace(/[-_]([a-z])/g, (m) => m[1].toUpperCase())
                 return R.map(R.map(mapKeys(camelCase)), data)
             };
 
+            // convert `animationTimingFunction` to `easing` for compatibility with web animations api
+            // and assign `easing` default value to `ease` when `animation-timing-function` from css file is not provided
+            let convertToEasing = data => {
+                const convert = data => {
+                    const ease = R.prop('animationTimingFunction', data) || 'ease';
+                    return R.dissoc('animationTimingFunction', R.assoc('easing', ease, data));
+                };
+                let result = R.map(R.map(convert))(data);
+                return result;
+            };
+
             // process
             let process = R.pipe(
                 transformAST,
                 orderByOffset,
-                convertToCamelCase
+                convertToCamelCase,
+                convertToEasing
             );
             let result = process(data);
             fulfill(result);
@@ -213,7 +225,7 @@ let processAST = (data) => {
 /**
  * Write JSON output file.
  */
-let writeOutputFile = (data) => {
+let writeOutputFile = data => {
     return new Promise((fulfill, reject) => {
         data = JSON.stringify(data);
         fs.writeFile(fileOut, data, (err) => {
@@ -230,21 +242,21 @@ let writeOutputFile = (data) => {
  * Initiate conversion process.
  */
 let init = () => {
-    prerequisiteCheck().then(() => {
+    checkPrerequisites().then(() => {
         return getNodeArguments();
     }).then(() => {
         return readInputFile();
-    }).then((data) => {
+    }).then(data => {
         return parse(data);
-    }).then((data) => {
+    }).then(data => {
         return validate(data);
-    }).then((data) => {
+    }).then(data => {
         return processAST(data);
-    }).then((data) => {
+    }).then(data => {
         return writeOutputFile(data);
-    }).then((data) => {
+    }).then(data => {
         console.log('success: file created at: ' + fileOut);
-    }).catch(function (err) {
+    }).catch(err => {
         console.log('error: ' + err);
     });
 };

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "keyframes-tool",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Keyframes-tool is a NodeJs command line tool which convert CSS Animations to a keyframes object suitable for Web Animations API.",
   "main": "keyframes-tool.js",
   "keywords": [