vevet 2.0.1-dev.2 → 2.0.1-dev.7

package/build/es/components/dragger/Dragger.js

@@ -4,13 +4,27 @@ import { Component } from '../../base/Component';
  * Drag & Swipe events. An abstract class
  */
 export class Dragger extends Component {
+    constructor(initialProp, init = true) {
+        super(initialProp, false);
+        // get container
+        this._container = selectOne(this.prop.container);
+        if (!isElement(this._container) && !isWindow(this._container)) {
+            throw new Error('No container');
+        }
+        // set default vars
+        this._runtimeEvents = [];
+        this._isDragging = false;
+        this._pointerID = null;
+        this._coords = { x: 0, y: 0 };
+        this._prevCoords = { x: 0, y: 0 };
+        this._startCoords = { x: 0, y: 0 };
+        // initialize the class
+        if (init) {
+            this.init();
+        }
+    }
     _getDefaultProp() {
-        return {
-            ...super._getDefaultProp(),
-            container: `#${this.prefix}`,
-            usePassive: false,
-            enabled: true,
-        };
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { container: `#${this.prefix}`, usePassive: false, enabled: true });
     }
     get prefix() {
         return `${this._app.prefix}dragger`;
@@ -21,59 +35,24 @@ export class Dragger extends Component {
     get container() {
         return this._container;
     }
-    _container;
-    /**
-     * Runtime events
-     */
-    _runtimeEvents;
     /**
      * If is dragging at the moment
      */
     get isDragging() {
         return this._isDragging;
     }
-    _isDragging;
-    /**
-     * Current pointer id
-     */
-    _pointerID;
     /**
      * Current coordinates relative to the Window
      */
     get coords() {
         return this._coords;
     }
-    _coords;
-    /**
-     * Last coordinates relative to the window
-     */
-    _prevCoords;
     /**
      * Coordinates on drag start
      */
     get startCoords() {
         return this._startCoords;
     }
-    _startCoords;
-    constructor(initialProp, init = true) {
-        super(initialProp, false);
-        // get container
-        this._container = selectOne(this.prop.container);
-        if (!isElement(this._container) && !isWindow(this._container)) {
-            throw new Error('No container');
-        }
-        // set default vars
-        this._runtimeEvents = [];
-        this._isDragging = false;
-        this._pointerID = null;
-        this._coords = { x: 0, y: 0 };
-        this._prevCoords = { x: 0, y: 0 };
-        this._startCoords = { x: 0, y: 0 };
-        // initialize the class
-        if (init) {
-            this.init();
-        }
-    }
     /**
      * Set component events
      */

package/build/es/components/dragger/DraggerDirection.js

@@ -4,10 +4,7 @@ import { Dragger } from './Dragger';
  */
 export class DraggerDirection extends Dragger {
     _getDefaultProp() {
-        return {
-            ...super._getDefaultProp(),
-            min: 75,
-        };
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { min: 75 });
     }
     /**
      * Event on drag end

package/build/es/components/loading/Preloader.js

@@ -6,12 +6,31 @@ import timeoutCallback from '../../utils/common/timeoutCallback';
  * A page preloader
  */
 export class Preloader extends Component {
+    constructor(initialProp, init = true) {
+        super(initialProp, false);
+        // get preloader container
+        if (this.prop.container) {
+            const container = selectOne(this.prop.container);
+            if (container instanceof HTMLElement) {
+                this._container = container;
+            }
+        }
+        // add classes
+        if (this._container) {
+            this._container.classList.add(this.prefix);
+        }
+        // set default vars
+        this._startTime = +new Date();
+        this._endTime = Infinity;
+        this._toBeHidden = false;
+        this._isHidden = false;
+        // initialize the class
+        if (init) {
+            this.init();
+        }
+    }
     _getDefaultProp() {
-        return {
-            ...super._getDefaultProp(),
-            container: `#${this.prefix}`,
-            hide: 250,
-        };
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { container: `#${this.prefix}`, hide: 250 });
     }
     get prefix() {
         return `${this._app.prefix}preloader`;
@@ -22,65 +41,30 @@ export class Preloader extends Component {
     get container() {
         return this._container;
     }
-    _container;
     /**
      * Preloader start time
      */
     get startTime() {
         return this._startTime;
     }
-    _startTime;
     /**
      * Preloader end time
      */
     get endTime() {
         return this._endTime;
     }
-    _endTime;
     /**
      * Total time of page loading before the preloader is to be hidden
      */
     get totalTime() {
         return this._endTime - this._startTime;
     }
-    /**
-     * If the preloader is to be hidden
-     */
-    _toBeHidden;
     /**
      * If the preloader is hidden
      */
     get isHidden() {
         return this._isHidden;
     }
-    _isHidden;
-    /**
-     * Loading event
-     */
-    _pageLoadEvent;
-    constructor(initialProp, init = true) {
-        super(initialProp, false);
-        // get preloader container
-        if (this.prop.container) {
-            const container = selectOne(this.prop.container);
-            if (container instanceof HTMLElement) {
-                this._container = container;
-            }
-        }
-        // add classes
-        if (this._container) {
-            this._container.classList.add(this.prefix);
-        }
-        // set default vars
-        this._startTime = +new Date();
-        this._endTime = Infinity;
-        this._toBeHidden = false;
-        this._isHidden = false;
-        // initialize the class
-        if (init) {
-            this.init();
-        }
-    }
     _setEvents() {
         super._setEvents();
         this._onLoaded().then(() => {
@@ -173,7 +157,8 @@ export class Preloader extends Component {
      * Destroy the module
      */
     _destroy() {
+        var _a;
         super._destroy();
-        this._pageLoadEvent?.remove();
+        (_a = this._pageLoadEvent) === null || _a === void 0 ? void 0 : _a.remove();
     }
 }

package/build/es/components/loading/ProgressPreloader.js

@@ -8,20 +8,29 @@ import { Timeline } from '../timeline/Timeline';
  * A page preloader with smooth progress calculation
  */
 export class ProgressPreloader extends Preloader {
+    constructor(initialProp, init = true) {
+        super(initialProp, false);
+        // set default vars
+        this._imgs = [];
+        this._videos = [];
+        this._customResources = [];
+        this._resourcesTotal = 1 + this.prop.resources;
+        this._resourcesLoaded = 0;
+        this._progress = 0;
+        // initialize the class
+        if (init) {
+            this.init();
+        }
+    }
     _getDefaultProp() {
-        return {
-            ...super._getDefaultProp(),
-            resources: 0,
-            loaders: {
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { resources: 0, loaders: {
                 img: true,
                 video: true,
                 custom: '.js-preload',
-            },
-            calc: {
+            }, calc: {
                 lerp: 0.1,
                 forceEnd: 500,
-            },
-        };
+            } });
     }
     /**
      * Image resources
@@ -29,35 +38,30 @@ export class ProgressPreloader extends Preloader {
     get imgs() {
         return this._imgs;
     }
-    _imgs;
     /**
      * Video resources
      */
     get videos() {
         return this._videos;
     }
-    _videos;
     /**
      * Custom resources
      */
     get customResources() {
         return this._customResources;
     }
-    _customResources;
     /**
      * Quantity of resources to be preloader
      */
     get resourcesTotal() {
         return this._resourcesTotal;
     }
-    _resourcesTotal;
     /**
      * Quantity of resources been already loaded
      */
     get resourcesLoaded() {
         return this._resourcesLoaded;
     }
-    _resourcesLoaded;
     /**
      * Progress of resources loaded
      */
@@ -74,29 +78,6 @@ export class ProgressPreloader extends Preloader {
         this._progress = val;
         this._handleProgress();
     }
-    _progress;
-    /**
-     * Animation progress. For smooth progress calculation
-     */
-    _animationFrame;
-    /**
-     * A timeline to finish progress animation
-     */
-    _endTimeline;
-    constructor(initialProp, init = true) {
-        super(initialProp, false);
-        // set default vars
-        this._imgs = [];
-        this._videos = [];
-        this._customResources = [];
-        this._resourcesTotal = 1 + this.prop.resources;
-        this._resourcesLoaded = 0;
-        this._progress = 0;
-        // initialize the class
-        if (init) {
-            this.init();
-        }
-    }
     _constructor() {
         super._constructor();
         this._getResources();

package/build/es/components/page/Page.js

@@ -8,55 +8,36 @@ import { Component } from '../../base/Component';
  * and vice versa.
  */
 export class Page extends Component {
-    /**
-     * If the page is created
-     */
-    _created;
+    constructor(initialProp, init = true) {
+        super(initialProp, false);
+        // set default vars
+        this._created = false;
+        this._shown = false;
+        this._hidden = false;
+        this._destroyed = false;
+        this._viaAJAX = false;
+        // initialize the class
+        if (init) {
+            this.init();
+        }
+    }
     get created() {
         return this._created;
     }
-    /**
-     * If the page is shown
-     */
-    _shown;
     get shown() {
         return this._shown;
     }
-    /**
-     * If the page is hidden
-     */
-    _hidden;
     get hidden() {
         return this._hidden;
     }
-    /**
-     * If the page was loaded through AJAX
-     */
-    _viaAJAX;
     get viaAJAX() {
         return this._viaAJAX;
     }
     get pageClassName() {
         return `${this._app.prefix}page-${this.prop.name}`;
     }
-    constructor(initialProp, init = true) {
-        super(initialProp, false);
-        // set default vars
-        this._created = false;
-        this._shown = false;
-        this._hidden = false;
-        this._destroyed = false;
-        this._viaAJAX = false;
-        // initialize the class
-        if (init) {
-            this.init();
-        }
-    }
     _getDefaultProp() {
-        return {
-            ...super._getDefaultProp(),
-            name: 'home',
-        };
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { name: 'home' });
     }
     /**
      * Create the page.

package/build/es/components/scroll/plugins/SmoothScrollDragPlugin.js

@@ -5,23 +5,15 @@ const draggingClassName = 'is-dragging';
  * A class for Plugins.
  */
 export class SmoothScrollDragPlugin extends Plugin {
+    constructor(initialProp) {
+        super(initialProp);
+        this._dragger = undefined;
+        this._componentEvents = [];
+        this._currentLerp = false;
+    }
     _getDefaultProp() {
-        return {
-            ...super._getDefaultProp(),
-            enabled: true,
-            speed: 1,
-            lerp: false,
-            reverseDir: false,
-        };
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { enabled: true, speed: 1, lerp: false, reverseDir: false, stopPropagation: false });
     }
-    /**
-     * Dragger component
-     */
-    _dragger;
-    /**
-     * Component events
-     */
-    _componentEvents;
     /**
      * If is dragging at the moment
      */
@@ -31,15 +23,6 @@ export class SmoothScrollDragPlugin extends Plugin {
         }
         return false;
     }
-    /**
-     * Current lerp of SmoothScroll
-     */
-    _currentLerp;
-    constructor(initialProp) {
-        super(initialProp);
-        this._componentEvents = [];
-        this._currentLerp = false;
-    }
     _constructor() {
         super._constructor();
         this._toggleDragger();
@@ -71,10 +54,13 @@ export class SmoothScrollDragPlugin extends Plugin {
             container: component.outer,
         });
         this._dragger.addCallback('start', this._handleDragStart.bind(this));
-        this._dragger.addCallback('move', this._handleDragMove.bind(this));
+        this._dragger.addCallback('move', (data) => {
+            this._handleDragMove(data);
+        });
         this._dragger.addCallback('end', this._handleDragEnd.bind(this));
         this._componentEvents.push(component.addCallback('wheel', () => {
-            this._dragger?.cancel();
+            var _a;
+            (_a = this._dragger) === null || _a === void 0 ? void 0 : _a.cancel();
         }));
     }
     /**
@@ -99,9 +85,10 @@ export class SmoothScrollDragPlugin extends Plugin {
         if (!component.prop.enabled) {
             return;
         }
-        // set classes
-        component.outer.classList.add(draggingClassName);
-        component.container.classList.add(draggingClassName);
+        // check scrollable area
+        if (component.maxScrollableWidth <= 0 && component.maxScrollableHeight <= 0) {
+            return;
+        }
         // change lerp
         const { lerp } = this.prop;
         if (typeof lerp !== 'boolean') {
@@ -112,6 +99,8 @@ export class SmoothScrollDragPlugin extends Plugin {
                 },
             });
         }
+        // launch events
+        this._callbacks.tbt('start', false);
     }
     /**
      * Callback on dragging move
@@ -121,6 +110,28 @@ export class SmoothScrollDragPlugin extends Plugin {
         if (!component.prop.enabled) {
             return;
         }
+        // check scrollable area
+        if (component.maxScrollableWidth <= 0 && component.maxScrollableHeight <= 0) {
+            return;
+        }
+        const { evt } = data;
+        // get difference between coordinates and decide
+        // if we need to stop propagation
+        const { stopPropagation } = this.prop;
+        if (stopPropagation) {
+            if (!evt.cancelable) {
+                return;
+            }
+            const diffX = Math.abs(data.coords.x - data.start.x);
+            const diffY = Math.abs(data.coords.y - data.start.y);
+            if (((diffX > stopPropagation.threshold) && stopPropagation.dir === 'x')
+                || ((diffY > stopPropagation.threshold) && stopPropagation.dir === 'y')) {
+                if (evt.cancelable) {
+                    evt.preventDefault();
+                    evt.stopPropagation();
+                }
+            }
+        }
         const { speed, reverseDir } = this.prop;
         // get coordinates
         const x = data.step.x * speed;
@@ -128,6 +139,11 @@ export class SmoothScrollDragPlugin extends Plugin {
         // update scroll values
         component.targetLeft -= !reverseDir ? x : y;
         component.targetTop -= !reverseDir ? y : x;
+        // set classes
+        component.outer.classList.add(draggingClassName);
+        component.container.classList.add(draggingClassName);
+        // launch events
+        this._callbacks.tbt('move', false);
     }
     /**
      * Callback on dragging end
@@ -146,6 +162,8 @@ export class SmoothScrollDragPlugin extends Plugin {
             });
             this._currentLerp = false;
         }
+        // launch events
+        this._callbacks.tbt('end', false);
     }
     /**
      * Destroy the plugin

package/build/es/components/scroll/plugins/SmoothScrollKeyboardPlugin.js

@@ -33,6 +33,15 @@ export class SmoothScrollKeyboardPlugin extends Plugin {
                 return;
             }
         }
+        // check if the scroll container is in viewport
+        const { viewport } = this._app;
+        const bounding = component.outer.getBoundingClientRect();
+        if (!(bounding.left < viewport.width
+            && bounding.right > 0
+            && bounding.top < viewport.height
+            && bounding.bottom > 0)) {
+            return;
+        }
         // update scroll values
         const scrollIterator = 40;
         switch (e.keyCode) {

package/build/es/components/scroll/scrollable/ScrollEventsBase.js

@@ -4,16 +4,23 @@ import { Component } from '../../../base/Component';
  * A base for scroll event components
  */
 export class ScrollEventsBase extends Component {
+    constructor(initialProp, init = true) {
+        super(initialProp, false);
+        // get scroll container
+        if (typeof this.prop.container === 'string') {
+            this._scrollContainer = selectOne(this.prop.container);
+        }
+        else {
+            this._scrollContainer = this.prop.container;
+        }
+        // initialize the class
+        if (init) {
+            this.init();
+        }
+    }
     _getDefaultProp() {
-        return {
-            ...super._getDefaultProp(),
-            container: window,
-        };
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { container: window });
     }
-    /**
-     * Scroll container
-     */
-    _scrollContainer;
     get scrollContainer() {
         return this._scrollContainer;
     }
@@ -69,18 +76,4 @@ export class ScrollEventsBase extends Component {
             height: this._app.viewport.height,
         };
     }
-    constructor(initialProp, init = true) {
-        super(initialProp, false);
-        // get scroll container
-        if (typeof this.prop.container === 'string') {
-            this._scrollContainer = selectOne(this.prop.container);
-        }
-        else {
-            this._scrollContainer = this.prop.container;
-        }
-        // initialize the class
-        if (init) {
-            this.init();
-        }
-    }
 }

package/build/es/components/scroll/scrollable/ScrollView.js

@@ -8,35 +8,10 @@ import timeoutCallback from '../../../utils/common/timeoutCallback';
  * Elements into viewport
  */
 export class ScrollView extends ScrollEventsBase {
-    get prefix() {
-        return `${this._app.prefix}scroll-view`;
-    }
-    _getDefaultProp() {
-        return {
-            ...super._getDefaultProp(),
-            container: window,
-            elements: `.${this.prefix}__el`,
-            threshold: 0.9,
-            states: 'in',
-            classToToggle: 'viewed',
-            useDelay: false,
-            useIntersectionObserver: true,
-        };
-    }
-    /**
-     * Scroll event
-     */
-    _scrollEvent;
-    /**
-     * Intersection observer
-     */
-    _intersectionObserver;
-    /**
-     * If first start
-     */
-    _firstStart;
     constructor(initialProp, init = true) {
         super(initialProp, false);
+        this._scrollEvent = undefined;
+        this._intersectionObserver = undefined;
         this._firstStart = true;
         // get view elements
         this.updateElements();
@@ -45,6 +20,12 @@ export class ScrollView extends ScrollEventsBase {
             this.init();
         }
     }
+    get prefix() {
+        return `${this._app.prefix}scroll-view`;
+    }
+    _getDefaultProp() {
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { container: window, elements: `.${this.prefix}__el`, threshold: 0.9, states: 'in', classToToggle: 'viewed', useDelay: false, useIntersectionObserver: true });
+    }
     init() {
         super.init();
         this.seekBounding();
@@ -91,7 +72,8 @@ export class ScrollView extends ScrollEventsBase {
             // add elements
             if (this.elements) {
                 this.elements.forEach((el) => {
-                    this._intersectionObserver?.observe(el);
+                    var _a;
+                    (_a = this._intersectionObserver) === null || _a === void 0 ? void 0 : _a.observe(el);
                 });
             }
         }
@@ -115,7 +97,6 @@ export class ScrollView extends ScrollEventsBase {
             this._intersectionObserver = undefined;
         }
     }
-    _elements;
     /**
      * Element to seek
      */