aw-front-helpers 2.5.11 → 2.5.13

package/.prettierrc.json

@@ -0,0 +1,15 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 2,
+    "useTabs": false,
+    "semi": true,
+    "singleQuote": true,
+    "bracketSpacing": true,
+    "singleAttributePerLine": false,
+    "bracketSameLine": false,
+    "editor.formatOnSave": false,
+    "editor.defaultFormatter": "<another formatter>",
+    "[javascript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    }
+}

package/bootstraper/Readme.md

@@ -21,8 +21,9 @@ BootstraperMaps.load('{googleKeyApi}', library[]).then( initMap ).catch(console.
   - visualization
 
 ## Youtube
+
 ```js
 import { BootstraperYoutube } from 'aw-front-helpers';
 
-BootstraperYoutube.load().then( initPlayer ).catch(console.error);
-```
+BootstraperYoutube.load().then(initPlayer).catch(console.error);
+```

package/bootstraper/index.js

@@ -1,4 +1,4 @@
 module.exports = {
   bootstraperMaps: require('./maps').default,
-  bootstraperYoutube: require('./youtube').default
-}
+  bootstraperYoutube: require('./youtube').default,
+};

package/bootstraper/maps.js

@@ -46,4 +46,4 @@ class bootstraperMaps {
     return this._promise;
   }
 }
-export default bootstraperMaps.getInstance();
+export default bootstraperMaps.getInstance();

package/bootstraper/youtube.js

@@ -43,4 +43,4 @@ class bootstraperYoutube {
     return this._promise;
   }
 }
-export default bootstraperYoutube.getInstance();
+export default bootstraperYoutube.getInstance();

package/classes/Readme.md

@@ -7,12 +7,13 @@
 </div>
 
 ## formControl
+
 Based on HTML5 basic options for inputs (required, type...).
 
 ```js
 import { FormControl } from 'aw-front-helpers';
 
-new FormControl(this._el, {options})
+new FormControl(this._el, { options });
 ```
 
 ## globalParallax
@@ -33,7 +34,7 @@ GParallax.start();
 ```js
 import { Nearby } from 'aw-front-helpers';
 
-new Nearby(this._el, {options});
+new Nearby(this._el, { options });
 ```
 
 ## sticky
@@ -41,7 +42,7 @@ new Nearby(this._el, {options});
 ```js
 import { Sticky } from 'aw-front-helpers';
 
-new Sticky({options});
+new Sticky({ options });
 ```
 
 - need to define `[data-attributes]`

package/classes/formControl.js

@@ -9,14 +9,28 @@ const defaultOptions = {
   classIsError: 'is-error',
   animateToFirstError: false,
   i18n: {
-    required: Translator ? Translator.trans('form_errors.pattern') : 'Ce champs est obligatoire',
-    same: Translator ? Translator.trans('form_errors.same') : 'Les champs ne correspondent pas.',
-    email: Translator ? Translator.trans('form_errors.email') : 'Merci de renseigner un email valide.',
-    empty: Translator ? Translator.trans('form_errors.empty') : 'Ce champs est obligatoire.',
-    checkbox: Translator ? Translator.trans('form_errors.checkbox') : 'Veuillez accepter les conditions.',
-    radio: Translator ? Translator.trans('form_errors.radio') : 'Veuillez sélectionner au moins un choix.',
-    pattern: Translator ? Translator.trans('form_errors.pattern') : 'La donnée saisie ne respecte pas les règles énoncées.',
-  }
+    required: window.Translator
+      ? window.Translator.trans('form_errors.pattern')
+      : 'Ce champs est obligatoire',
+    same: window.Translator
+      ? window.Translator.trans('form_errors.same')
+      : 'Les champs ne correspondent pas.',
+    email: window.Translator
+      ? window.Translator.trans('form_errors.email')
+      : 'Merci de renseigner un email valide.',
+    empty: window.Translator
+      ? window.Translator.trans('form_errors.empty')
+      : 'Ce champs est obligatoire.',
+    checkbox: window.Translator
+      ? window.Translator.trans('form_errors.checkbox')
+      : 'Veuillez accepter les conditions.',
+    radio: window.Translator
+      ? window.Translator.trans('form_errors.radio')
+      : 'Veuillez sélectionner au moins un choix.',
+    pattern: window.Translator
+      ? window.Translator.trans('form_errors.pattern')
+      : 'La donnée saisie ne respecte pas les règles énoncées.',
+  },
 };
 
 export default class FormControl {
@@ -47,7 +61,7 @@ export default class FormControl {
     /** @private */
     this._options = {
       ...defaultOptions,
-      ...options
+      ...options,
     };
 
     this._form.setAttribute('novalidate', 'novalidate');
@@ -59,7 +73,7 @@ export default class FormControl {
   set options(options) {
     this._options = {
       ...this._options,
-      options
+      options,
     };
   }
 
@@ -86,10 +100,10 @@ export default class FormControl {
   // -
   destroy() {
     this._form.removeEventListener('submit', this._onFormSubmit);
-    this._domForm.inputs.forEach(input => {
+    this._domForm.inputs.forEach((input) => {
       input.removeEventListener('keyup', this._onChange);
     });
-    this._domForm.choices.forEach(input => {
+    this._domForm.choices.forEach((input) => {
       input.removeEventListener('change', this._onChange);
     });
   }
@@ -107,24 +121,24 @@ export default class FormControl {
     if (parent === null) return;
     let error = parent.querySelector(`.${this._options.classErrorElement}`);
     parent.classList.add(this._options.classIsError);
-    const id = `error-${[...Array(6)].map(() => Math.floor(Math.random() * 16).toString(16)).join('')}`;
+    const id = `error-${[...Array(6)]
+      .map(() => Math.floor(Math.random() * 16).toString(16))
+      .join('')}`;
     if (!error) {
-      error = Object.assign(
-        document.createElement('p'), {
-          id,
-          className: this._options.classErrorElement,
-          innerHTML: message
+      error = Object.assign(document.createElement('p'), {
+        id,
+        className: this._options.classErrorElement,
+        innerHTML: message,
       });
       element.setAttribute('aria-describedby', id);
       parent.appendChild(error);
     } else {
       if (error.tagName === 'P') {
         if (message === error.innerHTML) return;
-        const newError = Object.assign(
-          document.createElement('ul'), {
-            id,
-            className: this._options.classErrorElement,
-            innerHTML: `<li>${error.innerHTML}</li>`
+        const newError = Object.assign(document.createElement('ul'), {
+          id,
+          className: this._options.classErrorElement,
+          innerHTML: `<li>${error.innerHTML}</li>`,
         });
         element.setAttribute('aria-describedby', id);
         parent.appendChild(newError);
@@ -169,8 +183,9 @@ export default class FormControl {
   // -
   /** @private */
   _formCreateBound() {
-    ['_onChange', '_onFormSubmit', 'onFormSubmit']
-      .forEach((fn) => this[fn] = this[fn].bind(this));
+    ['_onChange', '_onFormSubmit', 'onFormSubmit'].forEach(
+      (fn) => (this[fn] = this[fn].bind(this))
+    );
   }
 
   /** @private */
@@ -179,22 +194,28 @@ export default class FormControl {
       const group = el.closest(this._options.selectorGroup);
       if (group === null) return;
       group.classList.remove(this._options.classIsError);
-      const currentErrors = [...group.querySelectorAll(`.${this._options.classErrorElement}`)];
-      currentErrors.forEach(error => {
+      const currentErrors = [
+        ...group.querySelectorAll(`.${this._options.classErrorElement}`),
+      ];
+      currentErrors.forEach((error) => {
         error.classList.remove(this._options.classIsError);
         error.parentNode.removeChild(error);
       });
       el.removeAttribute('aria-describedby');
     } else {
-      const isErrors = [...this._form.querySelectorAll(`${this._options.classIsError}`)];
-      const currentErrors = [...this._form.querySelectorAll(`.${this._options.classErrorElement}`)];
-      currentErrors.forEach(error => {
+      const isErrors = [
+        ...this._form.querySelectorAll(`${this._options.classIsError}`),
+      ];
+      const currentErrors = [
+        ...this._form.querySelectorAll(`.${this._options.classErrorElement}`),
+      ];
+      currentErrors.forEach((error) => {
         error.parentNode.removeChild(error);
       });
-      isErrors.forEach(error => {
+      isErrors.forEach((error) => {
         error.classList.remove(this._options.classIsError);
       });
-      this._domForm.els.forEach( input => {
+      this._domForm.els.forEach((input) => {
         input.removeAttribute('aria-describedby');
       });
     }
@@ -211,7 +232,8 @@ export default class FormControl {
       invalid = true;
       const type = el.getAttribute('type');
       if (type === 'radio') this.setError(el, this._options.i18n.radio);
-      else if (type === 'checkbox') this.setError(el, this._options.i18n.checkbox);
+      else if (type === 'checkbox')
+        this.setError(el, this._options.i18n.checkbox);
       else if (type !== 'hidden') this.setError(el, this._options.i18n.empty);
     }
     if (!testEmail(el, this._form)) {
@@ -248,9 +270,12 @@ export default class FormControl {
       firstErrorElement.focus();
       if (this._options.animateToFirstError) {
         gsap.to(window, {
-          duration: .6,
-          scrollTo: (window.pageYOffset + firstErrorElement.getBoundingClientRect().top - 150)
-        })
+          duration: 0.6,
+          scrollTo:
+            window.scrollY +
+            firstErrorElement.getBoundingClientRect().top -
+            150,
+        });
       }
     }
     return isValid;
@@ -260,18 +285,26 @@ export default class FormControl {
   _formGrabDom() {
     /** @private */
     this._domForm = {};
-    this._domForm.inputs = [...this._form.querySelectorAll('input[type=text],input[type=number],input[type=password],input[type=hidden],input[type=search],input[type=email],input[type=tel],textarea')];
-    this._domForm.choices = [...this._form.querySelectorAll('select, input[type=radio],input[type=checkbox],input[type=file]')];
+    this._domForm.inputs = [
+      ...this._form.querySelectorAll(
+        'input[type=text],input[type=number],input[type=password],input[type=hidden],input[type=search],input[type=email],input[type=tel],textarea'
+      ),
+    ];
+    this._domForm.choices = [
+      ...this._form.querySelectorAll(
+        'select, input[type=radio],input[type=checkbox],input[type=file]'
+      ),
+    ];
     this._domForm.els = [...this._domForm.inputs, ...this._domForm.choices];
   }
 
   /** @private */
   _formAddEvents() {
     this._form.addEventListener('submit', this._onFormSubmit);
-    this._domForm.inputs.forEach(input => {
+    this._domForm.inputs.forEach((input) => {
       input.addEventListener('keyup', this._onChange);
     });
-    this._domForm.choices.forEach(input => {
+    this._domForm.choices.forEach((input) => {
       input.addEventListener('change', this._onChange);
     });
   }
@@ -289,7 +322,11 @@ export function testRequired(el, form) {
 
   const type = el.getAttribute('type');
   if (type === 'radio') {
-    const radios = [...form.querySelectorAll(`input[type="radio"][name="${el.getAttribute('name')}"]`)];
+    const radios = [
+      ...form.querySelectorAll(
+        `input[type="radio"][name="${el.getAttribute('name')}"]`
+      ),
+    ];
     for (let i = 0; i < radios.length; i++) {
       if (radios[i].checked) return true;
     }
@@ -319,7 +356,9 @@ export function testEmail(el, form) {
 export function testSame(el, form) {
   const hasSame = el.getAttribute('data-formvalidate-same');
   if (hasSame === null) return true;
-  const twinEl = form.querySelector(`[data-formvalidate-same=${el.getAttribute('data-formvalidate-same')}]`);
+  const twinEl = form.querySelector(
+    `[data-formvalidate-same=${el.getAttribute('data-formvalidate-same')}]`
+  );
   return twinEl.value === el.value;
 }
 
@@ -334,4 +373,4 @@ export function testPattern(el, form) {
   if (pattern === null || el.value === '') return true;
   const rgx = new RegExp(pattern);
   return rgx.test(el.value);
-}
+}

package/classes/globalParallax.js

@@ -4,7 +4,7 @@ import EventEmitter from 'events';
 // singleton
 let singleton = Symbol();
 let singletonEnforcer = Symbol();
-const SIMPLE_REFENCE = .5;
+const SIMPLE_REFENCE = 0.5;
 const TABLET_WIDTH = 768;
 
 class GParallax extends EventEmitter {
@@ -36,7 +36,7 @@ class GParallax extends EventEmitter {
       height: 0,
       width: 0,
       scrollY: 0,
-      ease: 1
+      ease: 1,
     };
 
     this._onGrab();
@@ -53,9 +53,11 @@ class GParallax extends EventEmitter {
   _onResize() {
     this._isResizing = true;
 
-    this._vars.scrollY = window.pageYOffset;
-    this._vars.width = document.documentElement.clientWidth || window.innerWidth;
-    this._vars.height = document.documentElement.clientHeight || window.innerHeight;
+    this._vars.scrollY = window.scrollY;
+    this._vars.width =
+      document.documentElement.clientWidth || window.innerWidth;
+    this._vars.height =
+      document.documentElement.clientHeight || window.innerHeight;
 
     this._resetItemsCached();
     this._resetBgCached();
@@ -66,7 +68,7 @@ class GParallax extends EventEmitter {
   }
 
   _onScroll() {
-    this._vars.scrollY = window.pageYOffset;
+    this._vars.scrollY = window.scrollY;
     window.requestAnimationFrame(this._update);
   }
 
@@ -78,11 +80,17 @@ class GParallax extends EventEmitter {
   }
 
   _onGrab() {
-    const items = Array.prototype.slice.call(document.body.querySelectorAll('[data-prllx-item]', 0));
-    const itemsSimple = Array.prototype.slice.call(document.body.querySelectorAll('[data-prllx-aw]', 0));
+    const items = Array.prototype.slice.call(
+      document.body.querySelectorAll('[data-prllx-item]', 0)
+    );
+    const itemsSimple = Array.prototype.slice.call(
+      document.body.querySelectorAll('[data-prllx-aw]', 0)
+    );
 
     this._domItems = [...items, ...itemsSimple];
-    this._domBgItems = Array.prototype.slice.call(document.body.querySelectorAll('[data-prllx-bg]', 0));
+    this._domBgItems = Array.prototype.slice.call(
+      document.body.querySelectorAll('[data-prllx-bg]', 0)
+    );
 
     const countImage = this._domItems.length;
     let imgCount = 0;
@@ -105,8 +113,13 @@ class GParallax extends EventEmitter {
   // -
 
   _createBound() {
-    ['_onResize', '_onScroll', '_calculateViewport', '_update', '_onGrab']
-      .forEach((fn) => this[fn] = this[fn].bind(this));
+    [
+      '_onResize',
+      '_onScroll',
+      '_calculateViewport',
+      '_update',
+      '_onGrab',
+    ].forEach((fn) => (this[fn] = this[fn].bind(this)));
   }
 
   _addListeners() {
@@ -127,7 +140,8 @@ class GParallax extends EventEmitter {
       el.style.transform =
         el.style['-moz-transform'] =
         el.style['-ms-transform'] =
-        el.style['-webkit-transform'] = `translate3d(0, 0, 0)`;
+        el.style['-webkit-transform'] =
+          `translate3d(0, 0, 0)`;
       el.classList.remove('u-hidden');
     });
   }
@@ -137,7 +151,8 @@ class GParallax extends EventEmitter {
       el.style.transform =
         el.style['-moz-transform'] =
         el.style['-ms-transform'] =
-        el.style['-webkit-transform'] = `translate3d(0, 0, 0)`;
+        el.style['-webkit-transform'] =
+          `translate3d(0, 0, 0)`;
       el.style.height = '100%';
       el.style.top = '0%';
     });
@@ -146,12 +161,14 @@ class GParallax extends EventEmitter {
   _getCache() {
     this._cachedItems = [];
     this._cachedBackgrounds = [];
-    this._domItems.forEach((el) => { this._cachedItems.push(this._createCacheItem(el)); });
+    this._domItems.forEach((el) => {
+      this._cachedItems.push(this._createCacheItem(el));
+    });
     this._domBgItems.forEach((el) => {
       const cache = this._createCacheItem(el);
-      let delta = (cache.deltaEnd - cache.deltaStart) * 100 / 2;
-      let top = (cache.deltaStart * 100 / 2).toFixed(0);
-      (delta < 0) && (delta = -delta, top = -top);
+      let delta = ((cache.deltaEnd - cache.deltaStart) * 100) / 2;
+      let top = ((cache.deltaStart * 100) / 2).toFixed(0);
+      delta < 0 && ((delta = -delta), (top = -top));
       const height = 100 + delta;
       cache.el.style.height = `${height}%`;
       cache.el.style.top = `${top}%`;
@@ -161,7 +178,9 @@ class GParallax extends EventEmitter {
 
   _getCacheForSpecialCases() {
     this._cachedSpecialCases = [];
-    this._specialCases.forEach((el) => { this._cachedSpecialCases.push(this._createCacheItem(el)); });
+    this._specialCases.forEach((el) => {
+      this._cachedSpecialCases.push(this._createCacheItem(el));
+    });
   }
 
   _createCacheItem(domEl) {
@@ -176,8 +195,8 @@ class GParallax extends EventEmitter {
       deltaStart: domEl.getAttribute('data-delta-start') || 0,
       deltaEnd: domEl.getAttribute('data-delta-end') || 0,
       invert: domEl.hasAttribute('data-invert') || false,
-      state: true
-    }
+      state: true,
+    };
 
     const elSimple = domEl.getAttribute('data-prllx-aw');
     if (elSimple !== null) {
@@ -202,7 +221,10 @@ class GParallax extends EventEmitter {
         cacheItem.el.style.transform =
           cacheItem.el.style['-moz-transform'] =
           cacheItem.el.style['-ms-transform'] =
-          cacheItem.el.style['-webkit-transform'] = testo.type === 'hz' ? `translate3d(${testo.value}px, 0, 0)` : `translate3d(0, ${testo.value}px, 0)`;
+          cacheItem.el.style['-webkit-transform'] =
+            testo.type === 'hz'
+              ? `translate3d(${testo.value}px, 0, 0)`
+              : `translate3d(0, ${testo.value}px, 0)`;
       } else if (cacheItem.state) {
         cacheItem.el.classList.add('u-hidden');
       }
@@ -219,7 +241,8 @@ class GParallax extends EventEmitter {
         cacheItem.el.style.transform =
           cacheItem.el.style['-moz-transform'] =
           cacheItem.el.style['-ms-transform'] =
-          cacheItem.el.style['-webkit-transform'] = `translate3d(0, ${testo.value}px, 0)`;
+          cacheItem.el.style['-webkit-transform'] =
+            `translate3d(0, ${testo.value}px, 0)`;
       }
     });
   }
@@ -238,25 +261,25 @@ class GParallax extends EventEmitter {
     const fullHeight = hh + this._vars.height;
 
     const scrollY = this._vars.scrollY;
-    const itemScrollY = (top - scrollY);
+    const itemScrollY = top - scrollY;
 
     const min = this._vars.height;
 
-    const max = - hh;
-    const ratio = (itemScrollY - min) / (max - min) * speed;
+    const max = -hh;
+    const ratio = ((itemScrollY - min) / (max - min)) * speed;
 
-    const value = (deltaStart + delta * ratio) + (- fullHeight + fullHeight / speed) * ratio;
+    const value =
+      deltaStart + delta * ratio + (-fullHeight + fullHeight / speed) * ratio;
     const isVisible = ratio > -1 && ratio < 2;
 
     return { isVisible: isVisible, value: value.toFixed(2) };
   }
 
   _calculateBgViewport(cache) {
-
     const speed = cache.speed;
 
-    const deltaStart = cache.height * cache.deltaStart / 2;
-    const deltaEnd = cache.height * cache.deltaEnd / 2;
+    const deltaStart = (cache.height * cache.deltaStart) / 2;
+    const deltaEnd = (cache.height * cache.deltaEnd) / 2;
     const delta = deltaEnd - deltaStart;
 
     const top = cache.top;
@@ -264,14 +287,14 @@ class GParallax extends EventEmitter {
     const hh = bottom - top;
 
     const scrollY = this._vars.scrollY;
-    const itemScrollY = (top - scrollY);
+    const itemScrollY = top - scrollY;
 
     const min = this._vars.height;
-    const max = - hh;
+    const max = -hh;
 
     const ratio = (itemScrollY - min) / (max - min);
     const isVisible = ratio > -1 && ratio < 2;
-    const value = cache.invert ? (scrollY * speed) : (deltaStart + delta * ratio);
+    const value = cache.invert ? scrollY * speed : deltaStart + delta * ratio;
 
     return { isVisible: isVisible, value: value.toFixed(0) };
   }

package/classes/index.js

@@ -1,4 +1,4 @@
 module.exports.GParallax = require('./globalParallax').default;
 module.exports.Nearby = require('./nearby').default;
 module.exports.FormControl = require('./formControl').default;
-module.exports.Sticky = require('./sticky').default;
+module.exports.Sticky = require('./sticky').default;

package/classes/nearby.js

@@ -12,21 +12,26 @@
 /**
  * Distance between two points P1 (x1,y1) and P2 (x2,y2).
  */
-const distancePoints = (x1, y1, x2, y2) => Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
+const distancePoints = (x1, y1, x2, y2) =>
+  Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
 
 // from http://www.quirksmode.org/js/events_properties.html#position
 const getMousePos = (e) => {
-  var posx = 0, posy = 0;
+  var posx = 0,
+    posy = 0;
   if (!e) var e = window.event;
   if (e.pageX || e.pageY) {
     posx = e.pageX;
     posy = e.pageY;
+  } else if (e.clientX || e.clientY) {
+    posx =
+      e.clientX +
+      document.body.scrollLeft +
+      document.documentElement.scrollLeft;
+    posy =
+      e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
   }
-  else if (e.clientX || e.clientY) {
-    posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
-    posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
-  }
-  return { x: posx, y: posy }
+  return { x: posx, y: posy };
 };
 
 export default class Nearby {
@@ -36,33 +41,44 @@ export default class Nearby {
     this.init();
   }
   init() {
-    this.mousemoveFn = (ev) => requestAnimationFrame(() => {
-      const mousepos = getMousePos(ev);
-      const docScrolls = { left: document.body.scrollLeft + document.documentElement.scrollLeft, top: document.body.scrollTop + document.documentElement.scrollTop };
-      const elRect = this.DOM.el.getBoundingClientRect();
-      const elCoords = {
-        x1: elRect.left + docScrolls.left, x2: elRect.width + elRect.left + docScrolls.left,
-        y1: elRect.top + docScrolls.top, y2: elRect.height + elRect.top + docScrolls.top
-      };
-      const closestPoint = { x: mousepos.x, y: mousepos.y };
+    this.mousemoveFn = (ev) =>
+      requestAnimationFrame(() => {
+        const mousepos = getMousePos(ev);
+        const docScrolls = {
+          left: document.body.scrollLeft + document.documentElement.scrollLeft,
+          top: document.body.scrollTop + document.documentElement.scrollTop,
+        };
+        const elRect = this.DOM.el.getBoundingClientRect();
+        const elCoords = {
+          x1: elRect.left + docScrolls.left,
+          x2: elRect.width + elRect.left + docScrolls.left,
+          y1: elRect.top + docScrolls.top,
+          y2: elRect.height + elRect.top + docScrolls.top,
+        };
+        const closestPoint = { x: mousepos.x, y: mousepos.y };
 
-      if (mousepos.x < elCoords.x1) {
-        closestPoint.x = elCoords.x1;
-      }
-      else if (mousepos.x > elCoords.x2) {
-        closestPoint.x = elCoords.x2;
-      }
-      if (mousepos.y < elCoords.y1) {
-        closestPoint.y = elCoords.y1;
-      }
-      else if (mousepos.y > elCoords.y2) {
-        closestPoint.y = elCoords.y2;
-      }
-      if (this.options.onProgress) {
-        this.options.onProgress(distancePoints(mousepos.x, mousepos.y, closestPoint.x, closestPoint.y))
-      }
-    });
+        if (mousepos.x < elCoords.x1) {
+          closestPoint.x = elCoords.x1;
+        } else if (mousepos.x > elCoords.x2) {
+          closestPoint.x = elCoords.x2;
+        }
+        if (mousepos.y < elCoords.y1) {
+          closestPoint.y = elCoords.y1;
+        } else if (mousepos.y > elCoords.y2) {
+          closestPoint.y = elCoords.y2;
+        }
+        if (this.options.onProgress) {
+          this.options.onProgress(
+            distancePoints(
+              mousepos.x,
+              mousepos.y,
+              closestPoint.x,
+              closestPoint.y
+            )
+          );
+        }
+      });
 
     window.addEventListener('mousemove', this.mousemoveFn);
   }
-}
+}