Merge branch 'source' into mojs-next

xavierfoucrier · xavierfoucrier · commit 2f6239ab5288 · 2021-03-24T22:20:52.000+01:00
diff --git a/LICENSE.md b/LICENSE.md
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Sandstedt
+Copyright (c) 2021 Jonas Sandstedt, Xavier Foucrier
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -62,10 +62,10 @@ module.exports = {
             title: 'Modules',
             collapsable: false,
             children: [
-              '/api/html/',
-              '/api/shape/',
-              '/api/shape-swirl/',
-              '/api/burst/',
+              '/api/modules/html/',
+              '/api/modules/shape/',
+              '/api/modules/shape-swirl/',
+              '/api/modules/burst/',
             ]
           },
           {
diff --git a/docs/.vuepress/styles/index.styl b/docs/.vuepress/styles/index.styl
@@ -229,6 +229,10 @@ blockquote {
   margin: 0
 }
 
+// MoJs curve editor
+._curve-editor_10g8s_3 {
+  z-index: 200 !important;
+}
 
 // Some helpclasses
 :root {
diff --git a/docs/api/README.md b/docs/api/README.md
@@ -8,10 +8,10 @@ sidebarDepth: 0
 ---
 
 ## Modules
-- [Html](html/README.md)
-- [Shape](shape/README.md)
-- [ShapeSwirl](shape-swirl/README.md)
-- [Burst](burst/README.md)
+- [Html](modules/html/README.md)
+- [Shape](modules/shape/README.md)
+- [ShapeSwirl](modules/shape-swirl/README.md)
+- [Burst](modules/burst/README.md)
 - MotionPath *(soon)*
 - Spriter *(soon)*
 - Radial Spring *(soon)*
diff --git a/docs/api/modules/burst/README.md b/docs/api/modules/burst/README.md
@@ -1,11 +1,11 @@
 # Burst
 
 - [CodePen Example](https://codepen.io/sol0mka/pen/JKWKVR?editors=0010)
-- [ShapeSwirl API](../shape-swirl.md)
-- [Stagger Strings API](../syntax/stagger.md)
-- [Property Maps API](../syntax/property-maps.md)
-- [Tween API](../tweens/tween.md)
-- [Timeline API](../tweens/timeline.md)
+- [ShapeSwirl API](/api/modules/shape-swirl/)
+- [Stagger Strings API](/api/utils/stagger.md)
+- [Property Maps API](/api/syntax/property-maps.md)
+- [Tween API](/api/tweens/tween.md)
+- [Timeline API](/api/tweens/timeline.md)
 
 Full API reference:
 
@@ -164,8 +164,8 @@ const burst = new mojs.Burst({
 ```
 
 - [CodePen Example](https://codepen.io/sol0mka/pen/JKWKVR?editors=0010)
-- [ShapeSwirl API](../shape-swirl.md)
-- [Stagger Strings API](../syntax/stagger.md)
-- [Property Maps API](../syntax/property-maps.md)
-- [Tween API](../tweens/tween.md)
-- [Timeline API](../tweens/timeline.md)
+- [ShapeSwirl API](/api/modules/shape-swirl/)
+- [Stagger Strings API](/api/utils/stagger.md)
+- [Property Maps API](/api/syntax/property-maps.md)
+- [Tween API](/api/tweens/tween.md)
+- [Timeline API](/api/tweens/timeline.md)
diff --git a/docs/api/modules/html/README.md b/docs/api/modules/html/README.md
@@ -5,14 +5,14 @@
 ## References:
 
 - [CodePen Example](https://codepen.io/sol0mka/pen/b8831849500f0d5cd0ab5691ebe17873?editors=0010)
-- [Tween API](../tweens/tween.md)
+- [Tween API](/api/tweens/tween.md)
 
 ## Contents:
 
-  - [Full API Reference](#full-api-reference)
-  - [Other CSS properties](#other-css-properties)
-  - [Teach mojs with customProperties](#teach-mojs-with-customproperties)
-  - [Independent deltas](#independent-deltas)
+- [Full API Reference](#full-api-reference)
+- [Other CSS properties](#other-css-properties)
+- [Teach mojs with customProperties](#teach-mojs-with-customproperties)
+- [Independent deltas](#independent-deltas)
 
 ## Full API Reference:
 
@@ -198,48 +198,56 @@ Other `CSS` properties would be inferred automatically, please set them in `came
 
 ```javascript
 const html = new mojs.Html({
-  el: '#js-el',
-  borderColor: { 'cyan': '#FA3204' },
-  borderWidth: { 2: 12 }
+  el: "#js-el",
+  borderColor: { cyan: "#FA3204" },
+  borderWidth: { 2: 12 },
 });
 ```
 
-- [CodePen Example](https://codepen.io/sol0mka/pen/14bcdfac6a89b918ac0292b35c0f156e?editors=0010)
+- [CodePen Example](https://codepen.io/sandstedt/pen/vYyazRm)
 
 ### Teach mojs with customProperties
 
 If property doesn't work as expected you can teach `mojs` with a `customProperties` definition:
 
 ```javascript
 const html = new mojs.Html({
-  el: '#js-el',
+  el: "#js-el",
   customProperties: {
     originY: 50,
     anotherCustomProp: 0,
-    draw (el, props) {
-      el.style['transformOrigin'] = `50% ${props.originY}%`;
-    }
-  }
+    draw(el, props) {
+      el.style["transformOrigin"] = `50% ${props.originY}%`;
+    },
+  },
 });
 ```
 
 `customProperties` object should have
-  - list of custom properties names with their `default` value (`originY: 50, anotherCustomProp: 0`).
-  - `draw` function that will be responsible for rendering that custom properties. It will be called on each animation frame and will be provided with `el` and `props` object that contain current states for all custom properties (`props.originY, props.anotherCustomProp`). Feel free to apply that state to the `el` any way that works for you.
+
+- list of custom properties names with their `default` value (`originY: 50, anotherCustomProp: 0`).
+- `draw` function that will be responsible for rendering that custom properties. It will be called on each animation frame and will be provided with `el` and `props` object that contain current states for all custom properties (`props.originY, props.anotherCustomProp`). Feel free to apply that state to the `el` any way that works for you.
 
 All custom properties are expected to be plain `numbers`, you can define `units` in the `draw` function.
 
-- [CodePen Example](https://codepen.io/sol0mka/pen/08ed252eed451c270e49882b08cbbd41?editors=0010)
+- [CodePen Example](https://codepen.io/sandstedt/pen/LYbMqqN?editors=0010)
 
 ### Independent deltas
 
 All `delta` values of the `Html` module could have entire set of `Tween` properties and can be animated individually:
 
 ```javascript
 const html = new mojs.Html({
-  el: '#js-el',
-  x: { 200: 0, delay: 200, duration: 2000, easing: 'cubic.in' },
-  y: { 0: 200, duration: 2000, easing: 'cubic.out', onComplete () { /* ... */ } }
+  el: "#js-el",
+  x: { 200: 0, delay: 200, duration: 2000, easing: "cubic.in" },
+  y: {
+    0: 200,
+    duration: 2000,
+    easing: "cubic.out",
+    onComplete() {
+      /* ... */
+    },
+  },
 });
 ```
 
@@ -249,4 +257,4 @@ This makes `mojs` animations ultimately flexible.
 
 References:
 
-- [Tween API](../tweens/tween.md)
+- [Tween API](/api/tweens/tween.md)
diff --git a/docs/api/modules/shape-swirl/README.md b/docs/api/modules/shape-swirl/README.md
@@ -1,8 +1,8 @@
 # ShapeSwirl
 
 - [CodePen Example](https://codepen.io/sol0mka/pen/pbebwQ?editors=0010)
-- [Shape API](../shape/README.md)
-- [Tween API](../tweens/tween.md)
+- [Shape API](/api/modules/shape/README.md)
+- [Tween API](/api/tweens/tween.md)
 
 Full API reference:
 
@@ -94,5 +94,5 @@ const shapeSwirl = new mojs.ShapeSwirl({
 ```
 
 - [CodePen Example](https://codepen.io/sol0mka/pen/pbebwQ?editors=0010)
-- [Shape API](shape.md)
-- [Tween API](../tweens/tween.md)
+- [Shape API](/api/modules/shape/README.md)
+- [Tween API](/api/tweens/tween.md)
diff --git a/docs/api/modules/shape/README.md b/docs/api/modules/shape/README.md
@@ -1,7 +1,7 @@
 # Shape
 
 - [CodePen Example](https://codepen.io/sol0mka/pen/bbd4fe6c1ac8519c76bc18828844e2c3)
-- [Tween API](../tweens/tween.md)
+- [Tween API](/api/tweens/tween.md)
 
 Full API reference:
 
@@ -235,4 +235,4 @@ const shape = new mojs.Shape({
 ```
 
 - [CodePen Example](https://codepen.io/sol0mka/pen/bbd4fe6c1ac8519c76bc18828844e2c3)
-- [Tween API](./tweens/tween.md)
+- [Tween API](/api/tweens/tween.md)
diff --git a/docs/api/tweens/timeline.md b/docs/api/tweens/timeline.md
@@ -1,7 +1,7 @@
 # Timeline
 
 - [CodePen Example](https://codepen.io/sandstedt/pen/bGeMqzw?editors=0011)
-- [Tween API](tween.md)
+- [Tween API](/api/tweens/tween.md)
 
 `Timeline` inherits all properties, callbacks and public methods from `Tween`, the only difference between `Tween` and `Timeline` is that the later doesn't have the `duration` property - it gets calculated from durations/delays of children. Also `Timeline` add two public methods that can recieve children. Please check the Tween API for reference.
 
@@ -39,4 +39,4 @@ const timeline = new mojs.Timeline({
 ```
 
 - [CodePen Example](https://codepen.io/sandstedt/pen/bGeMqzw?editors=0011)
-- [Tween API](tween.md)
+- [Tween API](/api/tweens/tween.md)
diff --git a/docs/api/tweens/tween.md b/docs/api/tweens/tween.md
@@ -1,7 +1,7 @@
 # Tween
 
 - [CodePen Example](https://codepen.io/sandstedt/pen/ZEOoePr?editors=0011)
-- [Timeline](timeline.md)
+- [Timeline](/api/tweens/timeline.md)
 
 Full API reference:
 
@@ -136,4 +136,4 @@ const tween = new mojs.Tween({
 ```
 
 - [CodePen Example](https://codepen.io/sandstedt/pen/ZEOoePr?editors=0011)
-- [Timeline](timeline.md)
+- [Timeline](/api/tweens/timeline.md)
diff --git a/docs/api/utils/stagger.md b/docs/api/utils/stagger.md
@@ -1,4 +1,4 @@
-# stagger
+# Stagger
 
 References:
 
diff --git a/docs/tutorials/README.md b/docs/tutorials/README.md
@@ -14,3 +14,6 @@ sidebarDepth: 0
 ## Modules
 - [Shape & ShapeSwirl](./shape-swirl/)
 - [Burst](./burst/)
+
+## SSR
+- [Usage with React](./usage-with-react.md)
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json

Original file line number	Diff line number	Diff line change
`@@ -229,6 +229,10 @@ blockquote {`
`229`	`229`	`margin: 0`
`230`	`230`	`}`
`231`	`231`
	`232`	`+// MoJs curve editor`
	`233`	`+._curve-editor_10g8s_3 {`
	`234`	`+ z-index: 200 !important;`
	`235`	`+}`
`232`	`236`
`233`	`237`	`// Some helpclasses`
`234`	`238`	`:root {`