Merge pull request #129 from alexfoxy/dev

Merge 2.0.3 release
alexfoxy · Dec 28, 2020 · 607c580 · 607c580
2 parents bdf8c18 + 9f2a396
commit 607c580
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 31 deletions.
diff --git a/README.md b/README.md
@@ -107,7 +107,7 @@ To implement lax you need to create at least one _driver_, to provide values for
 The easiest way to get started is to use presets via html classes. For example: 
 
 ```html
-<div class="lax lax_preset_fadeIn-50-100 lax_preset_spin"></div>
+<div class="lax lax_preset_fadeIn:50:100 lax_preset_spin"></div>
 ```
 
 Multiple presets can be chained together and they can be customised to suit your needs. Use the [preset explorer](https://alexfox.dev/lax.js/preset-explorer) to explore effects and see a simple example [here](https://alexfox.dev/lax.js/html-inline).
@@ -177,6 +177,19 @@ Add static CSS to each element, for example:
 }
 ```
 
+#### `onUpdate: (driverValues: Object, domElement: DomElement) => void`
+A method called every frame with the current driverValues and domElement. This could be used to toggle classes on an element or set innerHTML. See it in action [here](https://alexfox.dev/lax.js/examples/on-update).
+
+The driver values are formatted as follows:
+```js
+{
+  scrollY: [  // Driver name
+    100,      // Driver value
+    0         // Driver inertia
+  ]
+}
+```
+
 # Going deeper
 
 ## Custom animations
@@ -206,7 +219,7 @@ The name of the driver you want to use as a source of values to map to your anim
 ### CSS property
 The name of the CSS property you want to animate, for example `opacity` or `rotate`. See a list of supported properties [here](#css-properties).
 
-> Some css properties, for example `box-shadow`, require a custom function to build the style string. To do this use the [cssFn](#cssfn-value-number--string) element option.
+> Some CSS properties, for example `box-shadow`, require a custom function to build the style string. To do this use the [cssFn](#cssfn-value-number--string) element option.
 
 ### Value maps
 The value maps are used to interpolate the driver value and output a value for your CSS property. For example:
@@ -270,20 +283,7 @@ Use in combination with `inertia`. If set to `absolute` the inertia value will a
 Define the unit to be appended to the end of the value, for example 
 For example `px` `deg`
 
-#### `onUpdate: (driverValues: Object, domElement: DomElement) => void`
-A method called every frame with the current driverValues and domElement. This could be used to toggle classes on an element or set innerHTML. See it in action [here](https://alexfox.dev/lax.js/examples/on-update).
-
-The driver values are formatted as follows:
-```js
-{
-  scrollY: [  // Drivr name
-    100,      // Driver value
-    0         // Driver inertia
-  ]
-}
-```
-
-#### `cssFn: (value: number) => string`
+#### `cssFn: (value: number, domElement: DomElement) => number | string`
 Some CSS properties require more complex strings as values. For example, `box-shadow` has multiple values that could be modified by a lax animation.
 
 ```javascript
@@ -293,6 +293,9 @@ Some CSS properties require more complex strings as values. For example, `box-sh
 };
 ```
 
+#### `easing: string`
+See a list of available values [here](#supported-easings).
+
 ## Optimising performance
 Lax.js has been designed to be performant but there are a few things to bare in mind when creating your websites.
 - Smaller elements perform better. 

diff --git a/docs/examples/html-inline.html b/docs/examples/html-inline.html
@@ -37,5 +37,5 @@
 </style>
 
 <body>
-  <div class="square lax lax_preset_spin-400-360 lax_preset_flipX"></div>
+  <div class="square lax lax_preset_spin:400:360 lax_preset_flipX"></div>
 </body>
diff --git a/docs/lib/lax.min.js b/docs/lib/lax.min.js
diff --git a/docs/preset-explorer.html b/docs/preset-explorer.html
@@ -153,7 +153,7 @@
 
         enabledPresets.forEach((presetName) => {
           const control = controlData[presetName]
-          const controlStr = control ? "-" + control.map(c => c.value).join("-") : ''
+          const controlStr = control ? ":" + control.map(c => c.value).join(":") : ''
           const settingString = `${presetName}${controlStr}`
           presets.push(settingString)
         })

diff --git a/lib/lax.js b/lib/lax.js
@@ -1,5 +1,9 @@
 "use strict";
 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -12,10 +16,6 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 (function () {
   var inOutMap = function inOutMap() {
     var y = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 30;
@@ -314,6 +314,15 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
       });
       flattenedStyles.transform = "translate3d(".concat(translate3dValues.translateX, "px, ").concat(translate3dValues.translateY, "px, ").concat(translate3dValues.translateZ, "px) ").concat(flattenedStyles.transform);
       return flattenedStyles;
+    } // https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY#Notes
+
+
+    function getScrollPosition() {
+      var supportPageOffset = window.pageXOffset !== undefined;
+      var isCSS1Compat = (document.compatMode || '') === 'CSS1Compat';
+      var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
+      var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
+      return [y, x];
     }
 
     function parseValue(val, _ref, index) {
@@ -330,8 +339,12 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
       var pageWidth = document.body.scrollWidth;
       var screenWidth = window.innerWidth;
       var screenHeight = window.innerHeight;
-      var scrollTop = window.scrollY;
-      var scrollLeft = window.scrollX;
+
+      var _getScrollPosition = getScrollPosition(),
+          _getScrollPosition2 = _slicedToArray(_getScrollPosition, 2),
+          scrollTop = _getScrollPosition2[0],
+          scrollLeft = _getScrollPosition2[1];
+
       var left = x + scrollLeft;
       var right = left + width;
       var top = y + scrollTop;
@@ -366,7 +379,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
         var value = _this.lastValue;
 
         if (frame % _this.frameStep === 0) {
-          value = _this.getValueFn();
+          value = _this.getValueFn(frame);
         }
 
         if (_this.inertiaEnabled) {
@@ -386,7 +399,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
       Object.keys(options).forEach(function (key) {
         _this[key] = options[key];
       });
-      this.lastValue = this.getValueFn();
+      this.lastValue = this.getValueFn(0);
     };
 
     var LaxElement = function LaxElement(selector, laxInstance, domElement, transformsData) {
@@ -478,7 +491,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
           var _styleBindings$preset = styleBindings.presets,
               presets = _styleBindings$preset === void 0 ? [] : _styleBindings$preset;
           presets.forEach(function (presetString) {
-            var _presetString$split = presetString.split("-"),
+            var _presetString$split = presetString.split(":"),
                 _presetString$split2 = _slicedToArray(_presetString$split, 3),
                 presetName = _presetString$split2[0],
                 y = _presetString$split2[1],