@bonhomme/bonnie-parallax - npm Package Compare versions

Comparing version 0.0.0-development to 0.1.0

dist/bonnie-parallax.cjs.js

@@ -16,3 +16,3 @@ 'use strict';
     /** @private */
-    this._el = options instanceof HTMLElement ? options : options.el;
+    this._el = options instanceof HTMLElement ? options : (options.el || document.body);
 
@@ -29,5 +29,6 @@ /** @private */
       size: 0,
-      precision: 4,
-      isHorizontal: false,
-      isBasedOnCurrent: true,
+      precision: options.precision || 4,
+      isHorizontal: (options.isHorizontal === true),
+      isBasedOnCurrent: options.isBasedOnCurrent !== false,
+      hiddenClass: options.hiddenClass || 'u-hidden',
       units: {
@@ -57,6 +58,7 @@ size: 'height',
   set current(value) {
+    if (this._vars.current === value) return;
     this._vars.current = value;
     if (this._vars.isResizing) return;
 
-    this.render();
+    this._update();
   }
@@ -67,6 +69,9 @@
    */
-  start() {
+  init() {
+    this._vars.isResizing = true;
+    this._resetCached();
     this._grabDom();
     this._getCache();
-    this.render();
+    this._update();
+    this._vars.isResizing = false;
   }
@@ -88,6 +93,4 @@
    */
-  setSize(width, height) {
-
-    debugger;
-
+  setViewPort(width, height) {
+    this._config.size = this._config.isHorizontal ? width : height;
     this._resize();
@@ -100,8 +103,3 @@ }
   render() {
-    var node = this._rules.head;
-
-    while (node) {
-      node = node.next;
-      node.data.render();
-    }
+    this._update();
   }
@@ -112,17 +110,2 @@
    */
-  reset() {
-    this._vars.isResizing = true;
-
-    this._resetCached();
-    this._grabDom();
-    this._getCache();
-
-    this._vars.isResizing = false;
-
-    this.render();
-  }
-
-  /**
-   *
-   */
   destroy() {
@@ -159,3 +142,3 @@ if (this._rules) {
     while (node) {
-      node.data.getCache();
+      node.data.getCache(this._vars.current);
       node = node.next;
@@ -187,2 +170,12 @@ }
 
+  /** @private */
+  _update() {
+    var node = this._rules.head;
+
+    while (node) {
+      node.data.render(this._vars.current);
+      node = node.next;
+    }
+  }
+
 }
@@ -199,2 +192,5 @@
 
+    this._getTransformVertival = this._getTransformVertival.bind(this);
+    this._getTransformHorizontal = this._getTransformHorizontal.bind(this);
+
     /** @private */
@@ -205,3 +201,3 @@ this._config = null;
     this._params = {
-      query: options.query,
+      query: options.query || '[data-prllx-item]',
       transformFn: this._getTransformVertival
@@ -236,3 +232,3 @@ };
 
-    current = this._config.basedOnCurrent ? current : 0;
+    current = this._config.isBasedOnCurrent ? current : 0;
 
@@ -385,2 +381,5 @@ var ln = this._vars.length;
     }
+    else if (value[ln - 1] === '%') {
+      return height * parseInt(value) / 100;
+    }
 
@@ -421,4 +420,5 @@ return height * parseInt(value) / 100;
   _updateItem(cache, result) {
+
     if (result.isVisible) {
-      cache.el.style.transform = this._params.tranformFn(result.value);
+      cache.el.style.transform = this._params.transformFn(result.value);
       if (!cache.state) {
@@ -439,3 +439,4 @@ cache.el.classList.remove(this._config.hiddenClass);
   _getTransformVertival(value) {
-    return `translate3d(0, ${value.toFixed(this._config.precision)}px, 0)`;
+    return `matrix(1,0,0,1, 0, ${value.toFixed(this._config.precision)})`;
+    // return `translate3d(0, ${value.toFixed(this._config.precision)}px, 0)`;
   }
@@ -445,3 +446,4 @@
   _getTransformHorizontal(value) {
-    return `translate3d(${value.toFixed(this._config.precision)}px, 0, 0)`;
+    return `matrix(1,0,0,1, ${value.toFixed(this._config.precision)}, 0)`;
+    // return `translate3d(${value.toFixed(this._config.precision)}px, 0, 0)`;
   }
@@ -448,0 +450,0 @@

dist/bonnie-parallax.umd.js

 /*!
-  * @bonhomme/bonnie-parallax 0.0.0-development
+  * @bonhomme/bonnie-parallax 0.1.0
   * Licensed under MIT, https://opensource.org/licenses/MIT/
-  * Please visit undefined for details.
+  * Please visit https://github.com/bonhommeparis/bonnie-parallax for details.
   */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@loupthibault/linkedlist")):"function"==typeof define&&define.amd?define(["exports","@loupthibault/linkedlist"],t):t((e=e||self)["bonnie-parallax"]={},e.LinkedList)}(this,function(e,t){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){for(var i=0;i<t.length;i++){var s=t[i];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(e,s.key,s)}}function a(e,t,i){return t&&s(e.prototype,t),i&&s(e,i),e}t=t&&t.hasOwnProperty("default")?t.default:t;var n=function(){function e(){var s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};i(this,e),this._el=s instanceof HTMLElement?s:s.el,this._vars={current:0,isResizing:!1},this._config={el:this._el,size:0,precision:4,isHorizontal:!1,isBasedOnCurrent:!0,units:{size:"height",start:"top",end:"bottom"}},this._rules=new t}return a(e,[{key:"start",value:function(){this._grabDom(),this._getCache(),this.render()}},{key:"addRule",value:function(e){e.init(this._config),this._rules.push(e)}},{key:"setSize",value:function(e,t){this._resize()}},{key:"render",value:function(){for(var e=this._rules.head;e;)(e=e.next).data.render()}},{key:"reset",value:function(){this._vars.isResizing=!0,this._resetCached(),this._grabDom(),this._getCache(),this._vars.isResizing=!1,this.render()}},{key:"destroy",value:function(){if(this._rules)for(;this._rules.length;)this._rules.shift().reset();this._el=null,this._config=null,this._rules=null}},{key:"_grabDom",value:function(){for(var e=this._rules.head;e;)e.data.grabDom(),e=e.next}},{key:"_getCache",value:function(){for(var e=this._rules.head;e;)e.data.getCache(),e=e.next}},{key:"_resetCached",value:function(){for(var e=this._rules.head;e;)e.data.reset(),e=e.next}},{key:"_resize",value:function(){this._vars.isResizing=!0,this._resetCached(),this._getCache(),this._vars.isResizing=!1}},{key:"el",get:function(){return this._el}},{key:"current",get:function(){return this._vars.current},set:function(e){this._vars.current=e,this._vars.isResizing||this.render()}}]),e}(),r=function(){function e(){var s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};i(this,e),this._cachedItems=new t,this._config=null,this._params={query:s.query,transformFn:this._getTransformVertival},this._vars={length:0},this._$={items:null}}return a(e,[{key:"init",value:function(e){this._config=e,this._config.isHorizontal&&(this._params.transformFn=this._getTransformHorizontal)}},{key:"grabDom",value:function(){this._$.items=Array.prototype.slice.call(this._config.el.querySelectorAll(this._params.query)),this._vars.length=this._$.items.length}},{key:"getCache",value:function(e){e=this._config.basedOnCurrent?e:0;for(var t=this._vars.length;--t>-1;)this._cachedItems.push(this._createCacheItem(this._$.items[t],e))}},{key:"reset",value:function(){for(;this._cachedItems.length;)this._resetCacheItem(this._cachedItems.shift())}},{key:"render",value:function(e){for(var t=this._cachedItems.head;t;)this._updateItem(t.data,this._calculateViewPort(t.data,e)),t=t.next}},{key:"destroy",value:function(){this.reset(),this._cachedItems=null,this._config=null}},{key:"_createCacheItem",value:function(e,t){var i={isBasedScrollTop:e.hasAttribute("data-scroll-top")||!0===e.dataset.scrollTop,isBasedOnParent:e.hasAttribute("data-based-on-parent"),invert:e.hasAttribute("data-invert")||!0===e.dataset.invert,speed:void 0!==e.dataset.speed?parseFloat(e.dataset.speed):1,deltaStart:e.dataset.deltaStart||0,deltaEnd:e.dataset.deltaEnd||0};this._checkParamsValidity(i);var s=i.isBasedOnParent?e.parentElement.getBoundingClientRect():e.getBoundingClientRect(),a=this._calculateObservedDatas(s,i,t),n=a.deltaStart,r=a.deltaTranslation;if(i.isBasedOnParent){var l=e.getBoundingClientRect(),o=e.getAttribute("data-based-on-parent"),u=parseInt((o-100)/o*100),h=i.invert?0:-u,c=i.invert?-u:0;n=l[this._config.units.size]*h/100,r=l[this._config.units.size]*c/100-n}return{el:e,width:s.width,height:s.height,speed:i.speed,isBasedScrollTop:i.isBasedScrollTop,observed:a,deltaStart:n,deltaTranslation:r,state:!0}}},{key:"_checkParamsValidity",value:function(e){var t=null;1===e.speed||0===e.deltaStart&&0===e.deltaStart||(t="Setting speed and deltaStart or deltaEnd can provide an unwanted effect"),e.isBasedOnParent&&1!==e.speed&&(t="If item is based on parent, speed should not be set"),null!==t&&console.warn("Parallax - "+t)}},{key:"_calculateObservedDatas",value:function(e,t,i){var s=e[this._config.units.size],a=this._getDelta(t.deltaStart,s),n=this._getDelta(t.deltaEnd,s),r=n-a,l=e[this._config.units.start]+i+a,o=e[this._config.units.end]+i+n-l;return{deltaStart:a,deltaEnd:n,deltaTranslation:r,startPosition:l,min:t.isBasedScrollTop?l:this._config.size,max:-o,fullHeight:o+this._config.size}}},{key:"_getDelta",value:function(e,t){if("string"!=typeof e)return e;var i=e.length;return"v"===e[i-1]?(e=parseFloat(e.substr(0,i-1)))/100*this._config.size:t*parseInt(e)/100}},{key:"_resetCacheItem",value:function(e){e.el.style.removeProperty("transform"),e.el.classList.remove(this._config.hiddenClass)}},{key:"_calculateViewPort",value:function(e,t){var i=e.speed,s=e.observed,a=(s.startPosition-t-s.min)/(s.max-s.min)*i;return{ratio:a,isVisible:a>=0&&a<=1,value:!0===e.isBasedScrollTop?e.deltaStart+e.deltaTranslation*a+t*(1-e.speed):e.deltaStart+e.deltaTranslation*a+(-s.fullHeight+s.fullHeight/i)*a}}},{key:"_updateItem",value:function(e,t){t.isVisible?(e.el.style.transform=this._params.tranformFn(t.value),e.state||(e.el.classList.remove(this._config.hiddenClass),e.state=!0)):(e.el.classList.add(this._config.hiddenClass),e.state=!1)}},{key:"_getTransformVertival",value:function(e){return"translate3d(0, ".concat(e.toFixed(this._config.precision),"px, 0)")}},{key:"_getTransformHorizontal",value:function(e){return"translate3d(".concat(e.toFixed(this._config.precision),"px, 0, 0)")}}]),e}();e.BasicRule=r,e.Parallax=n});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@loupthibault/linkedlist")):"function"==typeof define&&define.amd?define(["exports","@loupthibault/linkedlist"],e):e((t=t||self).bonnieParallax={},t.LinkedList)}(this,function(t,e){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){for(var i=0;i<e.length;i++){var s=e[i];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(t,s.key,s)}}function a(t,e,i){return e&&s(t.prototype,e),i&&s(t,i),t}e=e&&e.hasOwnProperty("default")?e.default:e;var n=function(){function t(){var s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};i(this,t),this._el=s instanceof HTMLElement?s:s.el||document.body,this._vars={current:0,isResizing:!1},this._config={el:this._el,size:0,precision:s.precision||4,isHorizontal:!0===s.isHorizontal,isBasedOnCurrent:!1!==s.isBasedOnCurrent,hiddenClass:s.hiddenClass||"u-hidden",units:{size:"height",start:"top",end:"bottom"}},this._rules=new e}return a(t,[{key:"init",value:function(){this._vars.isResizing=!0,this._resetCached(),this._grabDom(),this._getCache(),this._update(),this._vars.isResizing=!1}},{key:"addRule",value:function(t){t.init(this._config),this._rules.push(t)}},{key:"setViewPort",value:function(t,e){this._config.size=this._config.isHorizontal?t:e,this._resize()}},{key:"render",value:function(){this._update()}},{key:"destroy",value:function(){if(this._rules)for(;this._rules.length;)this._rules.shift().reset();this._el=null,this._config=null,this._rules=null}},{key:"_grabDom",value:function(){for(var t=this._rules.head;t;)t.data.grabDom(),t=t.next}},{key:"_getCache",value:function(){for(var t=this._rules.head;t;)t.data.getCache(this._vars.current),t=t.next}},{key:"_resetCached",value:function(){for(var t=this._rules.head;t;)t.data.reset(),t=t.next}},{key:"_resize",value:function(){this._vars.isResizing=!0,this._resetCached(),this._getCache(),this._vars.isResizing=!1}},{key:"_update",value:function(){for(var t=this._rules.head;t;)t.data.render(this._vars.current),t=t.next}},{key:"el",get:function(){return this._el}},{key:"current",get:function(){return this._vars.current},set:function(t){this._vars.current!==t&&(this._vars.current=t,this._vars.isResizing||this._update())}}]),t}(),r=function(){function t(){var s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};i(this,t),this._cachedItems=new e,this._getTransformVertival=this._getTransformVertival.bind(this),this._getTransformHorizontal=this._getTransformHorizontal.bind(this),this._config=null,this._params={query:s.query||"[data-prllx-item]",transformFn:this._getTransformVertival},this._vars={length:0},this._$={items:null}}return a(t,[{key:"init",value:function(t){this._config=t,this._config.isHorizontal&&(this._params.transformFn=this._getTransformHorizontal)}},{key:"grabDom",value:function(){this._$.items=Array.prototype.slice.call(this._config.el.querySelectorAll(this._params.query)),this._vars.length=this._$.items.length}},{key:"getCache",value:function(t){t=this._config.isBasedOnCurrent?t:0;for(var e=this._vars.length;--e>-1;)this._cachedItems.push(this._createCacheItem(this._$.items[e],t))}},{key:"reset",value:function(){for(;this._cachedItems.length;)this._resetCacheItem(this._cachedItems.shift())}},{key:"render",value:function(t){for(var e=this._cachedItems.head;e;)this._updateItem(e.data,this._calculateViewPort(e.data,t)),e=e.next}},{key:"destroy",value:function(){this.reset(),this._cachedItems=null,this._config=null}},{key:"_createCacheItem",value:function(t,e){var i={isBasedScrollTop:t.hasAttribute("data-scroll-top")||!0===t.dataset.scrollTop,isBasedOnParent:t.hasAttribute("data-based-on-parent"),invert:t.hasAttribute("data-invert")||!0===t.dataset.invert,speed:void 0!==t.dataset.speed?parseFloat(t.dataset.speed):1,deltaStart:t.dataset.deltaStart||0,deltaEnd:t.dataset.deltaEnd||0};this._checkParamsValidity(i);var s=i.isBasedOnParent?t.parentElement.getBoundingClientRect():t.getBoundingClientRect(),a=this._calculateObservedDatas(s,i,e),n=a.deltaStart,r=a.deltaTranslation;if(i.isBasedOnParent){var l=t.getBoundingClientRect(),o=t.getAttribute("data-based-on-parent"),u=parseInt((o-100)/o*100),h=i.invert?0:-u,d=i.invert?-u:0;n=l[this._config.units.size]*h/100,r=l[this._config.units.size]*d/100-n}return{el:t,width:s.width,height:s.height,speed:i.speed,isBasedScrollTop:i.isBasedScrollTop,observed:a,deltaStart:n,deltaTranslation:r,state:!0}}},{key:"_checkParamsValidity",value:function(t){var e=null;1===t.speed||0===t.deltaStart&&0===t.deltaStart||(e="Setting speed and deltaStart or deltaEnd can provide an unwanted effect"),t.isBasedOnParent&&1!==t.speed&&(e="If item is based on parent, speed should not be set"),null!==e&&console.warn("Parallax - "+e)}},{key:"_calculateObservedDatas",value:function(t,e,i){var s=t[this._config.units.size],a=this._getDelta(e.deltaStart,s),n=this._getDelta(e.deltaEnd,s),r=n-a,l=t[this._config.units.start]+i+a,o=t[this._config.units.end]+i+n-l;return{deltaStart:a,deltaEnd:n,deltaTranslation:r,startPosition:l,min:e.isBasedScrollTop?l:this._config.size,max:-o,fullHeight:o+this._config.size}}},{key:"_getDelta",value:function(t,e){if("string"!=typeof t)return t;var i=t.length;return"v"===t[i-1]?(t=parseFloat(t.substr(0,i-1)))/100*this._config.size:(t[i-1],e*parseInt(t)/100)}},{key:"_resetCacheItem",value:function(t){t.el.style.removeProperty("transform"),t.el.classList.remove(this._config.hiddenClass)}},{key:"_calculateViewPort",value:function(t,e){var i=t.speed,s=t.observed,a=(s.startPosition-e-s.min)/(s.max-s.min)*i;return{ratio:a,isVisible:a>=0&&a<=1,value:!0===t.isBasedScrollTop?t.deltaStart+t.deltaTranslation*a+e*(1-t.speed):t.deltaStart+t.deltaTranslation*a+(-s.fullHeight+s.fullHeight/i)*a}}},{key:"_updateItem",value:function(t,e){e.isVisible?(t.el.style.transform=this._params.transformFn(e.value),t.state||(t.el.classList.remove(this._config.hiddenClass),t.state=!0)):(t.el.classList.add(this._config.hiddenClass),t.state=!1)}},{key:"_getTransformVertival",value:function(t){return"matrix(1,0,0,1, 0, ".concat(t.toFixed(this._config.precision),")")}},{key:"_getTransformHorizontal",value:function(t){return"matrix(1,0,0,1, ".concat(t.toFixed(this._config.precision),", 0)")}}]),t}();t.BasicRule=r,t.Parallax=n});

package.json

 {
   "name": "@bonhomme/bonnie-parallax",
-  "version": "0.0.0-development",
+  "version": "0.1.0",
   "description": "A Javascript parallax manager",
+  "homepage": "https://github.com/bonhommeparis/bonnie-parallax",
   "main": "dist/bonnie-parallax.cjs.js",
@@ -11,3 +12,2 @@ "module": "dist/bonnie-parallax.esm.js",
     "dev": "rollup -c -w",
-    "test": "node test/test.js",
     "prepare": "npm run build"
@@ -31,3 +31,4 @@ },
   "files": [
-    "lib"
+    "dist",
+    "src"
   ],
@@ -34,0 +35,0 @@ "dependencies": {

README.md

@@ -1,11 +0,113 @@
-# bonnie-parallax
+# 🐢 bonnie-parallax
 
 A Javascript library.
 
-<!-- [![License: MIT](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/loupthibault/linkedlist/blob/master/LICENSE) -->
+[![License: MIT](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/bonhommeparis/bonnie-parallax/blob/master/LICENSE)
 
+
 ## Getting started
 
+### Install
+
+#### NPM
+
+```sh
+npm i @bonhomme/bonnie-parallax
+```
+
+#### Browser
+
+```html
+<script type="text/javascript" src="https://unpkg.com/@loupthibault/linkedlist@0.1.0/dist/linkedlist.umd.js"></script>
+<script type="text/javascript" src="https://unpkg.com/@bonhommeparis/bonnie-parallax@0.1.0/dist/linkedlist.umd.js"></script>
+```
+
+### Usage
+
+```js
+
+// For install via npm
+import {Parallax, BasicRule} from '@bonhomme/bonnie-parallax';
+
+/**
+ * // For install via browser
+ * var Parallax = window.bonnieParallax.Parallax;
+ * var BasicRule = window.bonnieParallax.BasicRule;
+ */
+ 
+
+const parallax = new Parallax({
+  el: document.body
+});
+
+parallax.addRule(new BasicRule({
+  query: '[data-prllx-item]'
+}));
+
+const render = () => {
+  parallax.current = document.scrollingElement.scrollTop;
+  requestAnimationFrame(render);
+};
+
+parallax.init();
+parallax.setViewPort(window.innerWidth, window.innerHeight);
+requestAnimationFrame(render);
+
+```
+
+```html
+...
+<div data-prllx-item data-speed='0.9'></div>
+<div data-prllx-item data-delta-start='10%'></div>
+<div data-prllx-item data-delta-end='-10v'></div>
+...
+```
+
+#### Browser
+
+```js
+
+var Parallax = window.
+```
+
+
+## Parallax
+
+### Options
+
+| Name    | Type            | Default Value   | Description |
+|---------|-----------------|-----------------|-------------|
+| `el`      | HTMLElement     | document.body   |             |
+| `isHorizontal` | Boolean    | false           |  |
+| `hiddenClass` | string | 'u-hidden' | |
+| `precision` | Number | 4 | |
+| `isBasedOnCurrent` | Boolean | true | |    
+
+### Getters/Setters
+
+#### `parallax.el [Read-Only]`
+
+#### `parallax.current`
+
+### Methods
+
+#### `parallax.init()`
+
+#### `parallax.addRule(rule)`
+
+#### `parallax.setViewPort(width, height)`
+
+#### `parallax.render()`
+
+#### `parallax.destroy()`
+
+## Basic Rule
+
+### Constructor
+
+
+### Attributes
+
 ## License
 
 [MIT](LICENSE).

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

41945

increased by50.01%

Number of package files

9

increased by28.57%

Lines of code

1055

increased by50.07%

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

114

increased by850%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes