Merge branch 'master' into dev

Author: xavierfoucrier

.--eslintrc

@@ -1,3 +1,3 @@
 {
   "extends": "airbnb"
-}
+}

.babelrc

@@ -4,4 +4,4 @@
     'transform-runtime',
     ["transform-react-jsx", { "pragma":"h" }]
   ]
-}
+}

.editorconfig

@@ -0,0 +1,15 @@
+# top-most editorconfig file
+root = true
+
+# editor configuration
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+# preserve markdown line break
+[*.md]
+trim_trailing_whitespace = false

.gitattributes

@@ -1,3 +1,3 @@
 app/build/mojs-curve-editor.js merge=ours
 app/build/mojs-curve-editor.min.js merge=ours
-*.postcss.css.json merge=ours
+*.postcss.css.json merge=ours

.npmignore

@@ -0,0 +1,11 @@
+mockups/
+app/css/
+app/js/
+app/index.html
+.--eslintrc
+.babelrc
+.editorconfig
+.gitattributes
+bower.json
+webpack.config.babel.js
+webpack.config.js

LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Oleg Solomka
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

readme.md renamed to README.md

@@ -1,56 +1,50 @@
-# mojs curve editor
+# @mojs/curve-editor – [![npm](https://img.shields.io/npm/v/@mojs/curve-editor.svg)](https://www.npmjs.com/package/@mojs/curve-editor)
 
-<img width="444" src="https://github.com/legomushroom/mojs-curve-editor/blob/master/mockups/curve-editor.png?raw=true" alt="mojs-curve-editor" />
+GUI for live easing/property curves editing.
+
+![mojs-curve-editor](logo.png "mojs-curve-editor")
 
 `MojsCurveEditor` is a GUI plugin for interactive `custom easings`/`property curves` editing while crafting your animations. Part of `mojs` tools.
 
 ## Installation
 
-The `MojsCurveEditor` depends on `mojs >= 0.225.2`, tween autoupdates available for `mojs >= 0.276.2`. Please make sure you've linked [mojs](https://github.com/legomushroom/mojs) library first.
+The `MojsCurveEditor` depends on `mojs >= 0.225.2`, tween autoupdates available for `mojs >= 0.276.2`. Please make sure you've linked [mojs](https://github.com/mojs/mojs) library first.
 
-[CDN](https://www.jsdelivr.com/)(pending approval):
+```console
+# cdn
+<script src="https://cdn.jsdelivr.net/npm/@mojs/curve-editor"></script>
 
-```
-<script src="//cdn.jsdelivr.net/mojs-curve-editor/latest/mojs-curve-editor.min.js"></script>
+# npm
+[sudo] npm install @mojs/curve-editor
 ```
 
-[NPM](https://www.npmjs.com/):
-
-```
-[sudo] npm install mojs-curve-editor
-```
-
-[Bower](http://bower.io/):
-
-```
-bower install mojs-curve-editor
-```
-
-Import `MojsCurveEditor` constructor to your code (depends on your environment) :
+Import `MojsCurveEditor` constructor to your code, depending on your environment:
 
 ```javascript
 const MojsCurveEditor = require('mojs-curve-editor').default;
+
 // or
-import MojsCurveEditor from 'mojs-curve-editor';
+import MojsCurveEditor from '@mojs/curve-editor';
 ```
 
-If you installed it with script link - you should have `MojsCurveEditor` global.
+> If you installed it with script link - you should have `MojsCurveEditor` global
 
 ## Usage
 
 Construct `MojsCurveEditor` with the next options:
 
 ```javascript
   const mojsCurve = new MojsCurveEditor({
-    // Name of the Curve you are working on. The name is used to
+
+    // name of the Curve you are working on. The name is used to
     // identify record in `localStorage` to restore the state from
     // when page gets reloaded, so please specify unique names if
     // you use more than one editor on the same page.
-    name:         'bounce curve'
+    name: 'bounce curve'
   });
 ```
 
-After that you can "connect" the curve with your `mojs` modules by passing a "sample" of the curve to the `easing` property of the modules like this:
+After that you can "connect" the curve with your `mojs` modules by passing a "sample" of the curve to the `easing` property of the module, like this:
 
 ```javascript
   const mojsCurve = new MojsCurveEditor();
@@ -68,8 +62,8 @@ After that you can "connect" the curve with your `mojs` modules by passing a "sa
   // or as `property curve`
 
   const html = new mojs.Html({
-    el:     '#js-el',
-    x:      { 100: 100, curve: mojsCurve.getEasing() }
+    el: '#js-el',
+    x: { 0: 100, curve: mojsCurve.getEasing() }
   });
 
 ```
@@ -81,23 +75,20 @@ If you use `mojs>0.276.5` the state of the modules with the curve `sample` will
 The `getEasing` function receives options hash:
 
 ```javascript
-  // ...
   easing: mojsCurve.getEasing({
-    // `transform` function that pipes thru the current value
+    // `transform` function that pipes through the current value
     // of the curve so you can transform it
     transform: (k) => { return k; }
   });
-  // ...
 
 ```
 
 After you are happy with the curve you made, you need to change the `sample`(`mojsCurve.getEasing()` calls) with actual path data which you can get by clicking on the `code` button (<img width="32" style="margin-bottom: -10px" src="https://github.com/legomushroom/mojs-curve-editor/blob/master/mockups/code-button.png?raw=true" alt="code button" />):
 
 ```javascript
   const html = new mojs.Html({
-    el:     '#js-el',
-    // after the change
-    x:      { 0: 100, easing: 'M0, 100 C0, 100 19.8984745544779, 40.10152544552211 30, 30 C40.1015254455221, 19.89847455447789 80, 45 80, 45 C80, 45 100, 0 100, 0 ' }
+    el: '#js-el',
+    x: { 0: 100, easing: 'M0, 100 C0, 100 19.8984745544779, 40.10152544552211 30, 30 C40.1015254455221, 19.89847455447789 80, 45 80, 45 C80, 45 100, 0 100, 0 ' }
   });
 ```
 
@@ -108,15 +99,19 @@ Constructor accepts the next options:
 ```javascript
 const curveEditor = new MojsCurveEditor({
   // name of the curve editor
-  name:         'bounce curve'
+  name: 'bounce curve'
+
   // if should preserve state on page reloads
-  isSaveState:  true,
+  isSaveState: true,
+
   // start path - will be loaded on initialization of the curve,
   // e.g. before any user modifications were made. Path of 'M0, 100 L100, 0' is set by default.
-  startPath:  'M0, 100 L100, 0',
+  startPath: 'M0, 100 L100, 0',
+
   // callback on path change, accepts path string
-  onChange:     function (path) {}
-  // if should hide when minimized - useful when you try to embed the
+  onChange: function (path) {},
+
+  // if should hide when minimized - useful when you try to embed
   isHiddenOnMin: false
 });
 ```
@@ -125,13 +120,17 @@ const curveEditor = new MojsCurveEditor({
 
 ```javascript
 curveEditor
-  // gets `easing function` of the curve
+
+  // get `easing function` of the curve
   .getEasing()
-  // maximizes the curve editor
+
+  // maximize the curve editor
   .maximize()
-  // minimizes the curve editor
+
+  // minimize the curve editor
   .minimize()
-  // toggles `maximize/minimize` methods regarding editor's state
+
+  // toggle `maximize/minimize` methods regarding editor's state
   .toggleSize();
 ```
 
@@ -142,7 +141,7 @@ curveEditor
 - `alt + d`  - `delete` selected point(s)
 - [3 times] `alt + \`  - `reset` curve
 
-`Please note:` all shortcuts work only for active editor - it should have `orange mojs logo indicator` at bottom left.
+> All shortcuts work only for active editor - it should have **orange mojs logo indicator** at bottom left.
 
 ## Development
 
@@ -165,15 +164,3 @@ webpack
 ```
 
 Please make sure you started a `feature branch` with the `feature name` (better from the `dev` branch) before making changes.
-
-## License
-
-(The MIT License)
-
-Copyright (c) Oleg Solomka [@LegoMushroom](https://twitter.com/legomushroom) [[email protected]](mailto:[email protected])
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

app/css/blocks/code-panel.postcss.css

@@ -14,7 +14,7 @@
   /*height:         0;*/
   /*transition:     height .2s ease-out;*/
   /*transform:      scale(0); */
-  
+
   &__inner {
     border-radius:  calc( 6 * $PX ) calc( 6 * $PX ) 0 0;
     background:     rgba( 61, 27, 60, 1 );

app/css/blocks/little-handle.postcss.css

@@ -6,8 +6,8 @@
   top:      50%;
   width:    0;
   height:   0;
-  
-  $size: 6;  
+
+  $size: 6;
   &__point {
     position:     absolute;
     z-index:      1;

app/css/blocks/point-controls.postcss.css

@@ -3,15 +3,15 @@
 
 .point-controls {
   display:      none;
-  
+
   &.is-show {
     display:    block;
   }
-  
+
   [data-component="icon-button"] {
     $width: 3;
     $height: 2.5*$width;
-    
+
     &:after {
       content:        '';
       position:       absolute;
@@ -26,10 +26,10 @@
       margin-top:     calc( -($height/2)*$PX );
       display:        none;
     }
-    
+
     &[class*="is-checked"] {
       &:after {
-        display:      block; 
+        display:      block;
       }
     }
   }