cupertino-pane - npm Package Compare versions

Comparing version 1.1.34 to 1.1.37

dist/cupertino-pane.d.ts

@@ -13,2 +13,3 @@ export declare class CupertinoPane {
     private contentScrollTop;
+    private disableDragEvents;
     private breaks;
@@ -32,6 +33,2 @@ private brs;
     }): void;
-    moveToBreak(val: any): any;
-    hide(): any;
-    isHidden(): (boolean | null);
-    currentBreak(): (string | null);
     private checkOpacityAttr;
@@ -55,5 +52,2 @@ private checkOverflowAttr;
     private touchEnd;
-    destroy(conf?: {
-        animate: boolean;
-    }): any;
     private swipeNextPoint;
@@ -66,2 +60,20 @@ /************************************
     detachEvents(): void;
+    /************************************
+     * Public user methods
+     */
+    /**
+     * Disable pane drag events
+     */
+    disableDrag(): void;
+    /**
+     * Enable pane drag events
+     */
+    enableDrag(): void;
+    moveToBreak(val: any): any;
+    hide(): any;
+    isHidden(): (boolean | null);
+    currentBreak(): (string | null);
+    destroy(conf?: {
+        animate: boolean;
+    }): any;
 }

dist/cupertino-pane.esm.bundle.js

 /**
- * Cupertino Pane 1.1.34
+ * Cupertino Pane 1.1.37
  * Multiplatform slide-over pane
@@ -10,3 +10,3 @@ * https://github.com/roman-rr/cupertino-pane/
  *
- * Released on: April 23, 2020
+ * Released on: April 25, 2020
  */
@@ -182,2 +182,3 @@
         this.pointerDown = false;
+        this.disableDragEvents = false;
         this.breaks = {};
@@ -443,66 +444,2 @@ this.brs = [];
     }
-    moveToBreak(val) {
-        if (!this.isPanePresented()) {
-            console.warn(`Cupertino Pane: Present pane before call moveToBreak()`);
-            return null;
-        }
-        if (!this.settings.breaks[val].enabled) {
-            console.warn('Cupertino Pane: %s breakpoint disabled', val);
-            return;
-        }
-        this.checkOpacityAttr(this.breaks[val]);
-        this.checkOverflowAttr(this.breaks[val]);
-        if (this.settings.backdrop) {
-            this.backdropEl.style.backgroundColor = 'rgba(0,0,0,.4)';
-            this.backdropEl.style.display = 'block';
-        }
-        this.currentBreakpoint = this.breaks[val];
-        this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
-        this.paneEl.style.transform = `translateY(${this.breaks[val]}px)`;
-        let initTransitionEv = this.paneEl.addEventListener('transitionend', (t) => {
-            this.paneEl.style.transition = `initial`;
-            initTransitionEv = undefined;
-        });
-    }
-    hide() {
-        if (!this.isPanePresented()) {
-            console.warn(`Cupertino Pane: Present pane before call hide()`);
-            return null;
-        }
-        this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
-        this.paneEl.style.transform = `translateY(${this.screen_height}px)`;
-        if (this.settings.backdrop) {
-            this.backdropEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
-            this.backdropEl.style.backgroundColor = 'rgba(0,0,0,.0)';
-        }
-        let initTransitionEv = this.paneEl.addEventListener('transitionend', (t) => {
-            this.paneEl.style.transition = `initial`;
-            if (this.settings.backdrop) {
-                this.backdropEl.style.transition = `initial`;
-                this.backdropEl.style.display = `none`;
-            }
-            initTransitionEv = undefined;
-        });
-    }
-    isHidden() {
-        if (!this.isPanePresented()) {
-            console.warn(`Cupertino Pane: Present pane before call isHidden()`);
-            return null;
-        }
-        return this.paneEl.style.transform === `translateY(${this.screen_height}px)`;
-    }
-    currentBreak() {
-        if (!this.isPanePresented()) {
-            console.warn(`Cupertino Pane: Present pane before call currentBreak()`);
-            return null;
-        }
-        if (this.breaks['top'] === this.currentBreakpoint)
-            return 'top';
-        if (this.breaks['middle'] === this.currentBreakpoint)
-            return 'middle';
-        if (this.breaks['bottom'] === this.currentBreakpoint)
-            return 'bottom';
-        return null;
-    }
-    ;
     checkOpacityAttr(val) {
@@ -531,2 +468,6 @@ let attrElements = document.querySelectorAll(`${this.selector} [hide-on-bottom]`);
     touchStart(t) {
+        // Event emitter
+        this.settings.onDragStart(t);
+        if (this.disableDragEvents)
+            return;
         const targetTouch = t.type === 'touchstart' && t.targetTouches && (t.targetTouches[0] || t.changedTouches[0]);
@@ -536,4 +477,2 @@ const screenY = t.type === 'touchstart' ? targetTouch.screenY : t.screenY;
             this.pointerDown = true;
-        // Event emitter
-        this.settings.onDragStart();
         this.startP = screenY;
@@ -547,2 +486,6 @@ this.steps.push(this.startP);
     touchMove(t) {
+        // Event emitter
+        this.settings.onDrag(t);
+        if (this.disableDragEvents)
+            return;
         // Handle desktop/mobile events
@@ -553,4 +496,2 @@ const targetTouch = t.type === 'touchmove' && t.targetTouches && (t.targetTouches[0] || t.changedTouches[0]);
             return;
-        // Event emitter
-        this.settings.onDrag();
         const translateYRegex = /\.*translateY\((.*)px\)/i;
@@ -589,2 +530,4 @@ const p = parseFloat(translateYRegex.exec(this.paneEl.style.transform)[1]);
     touchEnd(t) {
+        if (this.disableDragEvents)
+            return;
         const targetTouch = t.type === 'touchmove' && t.targetTouches && (t.targetTouches[0] || t.changedTouches[0]);
@@ -633,34 +576,2 @@ const screenY = t.type === 'touchmove' ? targetTouch.screenY : t.screenY;
     }
-    destroy(conf = { animate: false }) {
-        if (!this.isPanePresented()) {
-            console.warn(`Cupertino Pane: Present pane before call destroy()`);
-            return null;
-        }
-        // Emit event
-        this.settings.onWillDismiss();
-        const resets = () => {
-            this.parentEl.appendChild(this.contentEl);
-            this.parentEl.removeChild(this.wrapperEl);
-            /****** Detach Events *******/
-            this.detachEvents();
-            // Reset vars
-            this.currentBreakpoint = this.breaks[this.settings.initialBreak];
-            // Reset styles
-            this.contentEl.style.display = 'none';
-            this.paneEl.style.transform = 'initial';
-            // Emit event
-            this.settings.onDidDismiss();
-        };
-        if (conf.animate) {
-            this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
-            this.paneEl.style.transform = `translateY(${this.screen_height}px)`;
-            if (this.settings.backdrop) {
-                this.backdropEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
-                this.backdropEl.style.backgroundColor = 'rgba(0,0,0,.0)';
-            }
-            this.paneEl.addEventListener('transitionend', () => resets());
-            return;
-        }
-        resets();
-    }
     attachEvents() {
@@ -714,2 +625,113 @@ // Touch Events
     }
+    /************************************
+     * Public user methods
+     */
+    /**
+     * Disable pane drag events
+     */
+    disableDrag() {
+        this.disableDragEvents = true;
+    }
+    /**
+     * Enable pane drag events
+     */
+    enableDrag() {
+        this.disableDragEvents = false;
+    }
+    moveToBreak(val) {
+        if (!this.isPanePresented()) {
+            console.warn(`Cupertino Pane: Present pane before call moveToBreak()`);
+            return null;
+        }
+        if (!this.settings.breaks[val].enabled) {
+            console.warn('Cupertino Pane: %s breakpoint disabled', val);
+            return;
+        }
+        this.checkOpacityAttr(this.breaks[val]);
+        this.checkOverflowAttr(this.breaks[val]);
+        if (this.settings.backdrop) {
+            this.backdropEl.style.backgroundColor = 'rgba(0,0,0,.4)';
+            this.backdropEl.style.display = 'block';
+        }
+        this.currentBreakpoint = this.breaks[val];
+        this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
+        this.paneEl.style.transform = `translateY(${this.breaks[val]}px)`;
+        let initTransitionEv = this.paneEl.addEventListener('transitionend', (t) => {
+            this.paneEl.style.transition = `initial`;
+            initTransitionEv = undefined;
+        });
+    }
+    hide() {
+        if (!this.isPanePresented()) {
+            console.warn(`Cupertino Pane: Present pane before call hide()`);
+            return null;
+        }
+        this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
+        this.paneEl.style.transform = `translateY(${this.screen_height}px)`;
+        if (this.settings.backdrop) {
+            this.backdropEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
+            this.backdropEl.style.backgroundColor = 'rgba(0,0,0,.0)';
+        }
+        let initTransitionEv = this.paneEl.addEventListener('transitionend', (t) => {
+            this.paneEl.style.transition = `initial`;
+            if (this.settings.backdrop) {
+                this.backdropEl.style.transition = `initial`;
+                this.backdropEl.style.display = `none`;
+            }
+            initTransitionEv = undefined;
+        });
+    }
+    isHidden() {
+        if (!this.isPanePresented()) {
+            console.warn(`Cupertino Pane: Present pane before call isHidden()`);
+            return null;
+        }
+        return this.paneEl.style.transform === `translateY(${this.screen_height}px)`;
+    }
+    currentBreak() {
+        if (!this.isPanePresented()) {
+            console.warn(`Cupertino Pane: Present pane before call currentBreak()`);
+            return null;
+        }
+        if (this.breaks['top'] === this.currentBreakpoint)
+            return 'top';
+        if (this.breaks['middle'] === this.currentBreakpoint)
+            return 'middle';
+        if (this.breaks['bottom'] === this.currentBreakpoint)
+            return 'bottom';
+        return null;
+    }
+    ;
+    destroy(conf = { animate: false }) {
+        if (!this.isPanePresented()) {
+            console.warn(`Cupertino Pane: Present pane before call destroy()`);
+            return null;
+        }
+        // Emit event
+        this.settings.onWillDismiss();
+        const resets = () => {
+            this.parentEl.appendChild(this.contentEl);
+            this.parentEl.removeChild(this.wrapperEl);
+            /****** Detach Events *******/
+            this.detachEvents();
+            // Reset vars
+            this.currentBreakpoint = this.breaks[this.settings.initialBreak];
+            // Reset styles
+            this.contentEl.style.display = 'none';
+            this.paneEl.style.transform = 'initial';
+            // Emit event
+            this.settings.onDidDismiss();
+        };
+        if (conf.animate) {
+            this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
+            this.paneEl.style.transform = `translateY(${this.screen_height}px)`;
+            if (this.settings.backdrop) {
+                this.backdropEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
+                this.backdropEl.style.backgroundColor = 'rgba(0,0,0,.0)';
+            }
+            this.paneEl.addEventListener('transitionend', () => resets());
+            return;
+        }
+        resets();
+    }
 }
@@ -716,0 +738,0 @@

dist/cupertino-pane.js

 /**
- * Cupertino Pane 1.1.34
+ * Cupertino Pane 1.1.37
  * Multiplatform slide-over pane
@@ -10,3 +10,3 @@ * https://github.com/roman-rr/cupertino-pane/
  *
- * Released on: April 23, 2020
+ * Released on: April 25, 2020
  */
@@ -186,2 +186,3 @@
         this.pointerDown = false;
+        this.disableDragEvents = false;
         this.breaks = {};
@@ -447,66 +448,2 @@ this.brs = [];
     }
-    moveToBreak(val) {
-        if (!this.isPanePresented()) {
-            console.warn(`Cupertino Pane: Present pane before call moveToBreak()`);
-            return null;
-        }
-        if (!this.settings.breaks[val].enabled) {
-            console.warn('Cupertino Pane: %s breakpoint disabled', val);
-            return;
-        }
-        this.checkOpacityAttr(this.breaks[val]);
-        this.checkOverflowAttr(this.breaks[val]);
-        if (this.settings.backdrop) {
-            this.backdropEl.style.backgroundColor = 'rgba(0,0,0,.4)';
-            this.backdropEl.style.display = 'block';
-        }
-        this.currentBreakpoint = this.breaks[val];
-        this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
-        this.paneEl.style.transform = `translateY(${this.breaks[val]}px)`;
-        let initTransitionEv = this.paneEl.addEventListener('transitionend', (t) => {
-            this.paneEl.style.transition = `initial`;
-            initTransitionEv = undefined;
-        });
-    }
-    hide() {
-        if (!this.isPanePresented()) {
-            console.warn(`Cupertino Pane: Present pane before call hide()`);
-            return null;
-        }
-        this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
-        this.paneEl.style.transform = `translateY(${this.screen_height}px)`;
-        if (this.settings.backdrop) {
-            this.backdropEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
-            this.backdropEl.style.backgroundColor = 'rgba(0,0,0,.0)';
-        }
-        let initTransitionEv = this.paneEl.addEventListener('transitionend', (t) => {
-            this.paneEl.style.transition = `initial`;
-            if (this.settings.backdrop) {
-                this.backdropEl.style.transition = `initial`;
-                this.backdropEl.style.display = `none`;
-            }
-            initTransitionEv = undefined;
-        });
-    }
-    isHidden() {
-        if (!this.isPanePresented()) {
-            console.warn(`Cupertino Pane: Present pane before call isHidden()`);
-            return null;
-        }
-        return this.paneEl.style.transform === `translateY(${this.screen_height}px)`;
-    }
-    currentBreak() {
-        if (!this.isPanePresented()) {
-            console.warn(`Cupertino Pane: Present pane before call currentBreak()`);
-            return null;
-        }
-        if (this.breaks['top'] === this.currentBreakpoint)
-            return 'top';
-        if (this.breaks['middle'] === this.currentBreakpoint)
-            return 'middle';
-        if (this.breaks['bottom'] === this.currentBreakpoint)
-            return 'bottom';
-        return null;
-    }
-    ;
     checkOpacityAttr(val) {
@@ -535,2 +472,6 @@ let attrElements = document.querySelectorAll(`${this.selector} [hide-on-bottom]`);
     touchStart(t) {
+        // Event emitter
+        this.settings.onDragStart(t);
+        if (this.disableDragEvents)
+            return;
         const targetTouch = t.type === 'touchstart' && t.targetTouches && (t.targetTouches[0] || t.changedTouches[0]);
@@ -540,4 +481,2 @@ const screenY = t.type === 'touchstart' ? targetTouch.screenY : t.screenY;
             this.pointerDown = true;
-        // Event emitter
-        this.settings.onDragStart();
         this.startP = screenY;
@@ -551,2 +490,6 @@ this.steps.push(this.startP);
     touchMove(t) {
+        // Event emitter
+        this.settings.onDrag(t);
+        if (this.disableDragEvents)
+            return;
         // Handle desktop/mobile events
@@ -557,4 +500,2 @@ const targetTouch = t.type === 'touchmove' && t.targetTouches && (t.targetTouches[0] || t.changedTouches[0]);
             return;
-        // Event emitter
-        this.settings.onDrag();
         const translateYRegex = /\.*translateY\((.*)px\)/i;
@@ -593,2 +534,4 @@ const p = parseFloat(translateYRegex.exec(this.paneEl.style.transform)[1]);
     touchEnd(t) {
+        if (this.disableDragEvents)
+            return;
         const targetTouch = t.type === 'touchmove' && t.targetTouches && (t.targetTouches[0] || t.changedTouches[0]);
@@ -637,34 +580,2 @@ const screenY = t.type === 'touchmove' ? targetTouch.screenY : t.screenY;
     }
-    destroy(conf = { animate: false }) {
-        if (!this.isPanePresented()) {
-            console.warn(`Cupertino Pane: Present pane before call destroy()`);
-            return null;
-        }
-        // Emit event
-        this.settings.onWillDismiss();
-        const resets = () => {
-            this.parentEl.appendChild(this.contentEl);
-            this.parentEl.removeChild(this.wrapperEl);
-            /****** Detach Events *******/
-            this.detachEvents();
-            // Reset vars
-            this.currentBreakpoint = this.breaks[this.settings.initialBreak];
-            // Reset styles
-            this.contentEl.style.display = 'none';
-            this.paneEl.style.transform = 'initial';
-            // Emit event
-            this.settings.onDidDismiss();
-        };
-        if (conf.animate) {
-            this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
-            this.paneEl.style.transform = `translateY(${this.screen_height}px)`;
-            if (this.settings.backdrop) {
-                this.backdropEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
-                this.backdropEl.style.backgroundColor = 'rgba(0,0,0,.0)';
-            }
-            this.paneEl.addEventListener('transitionend', () => resets());
-            return;
-        }
-        resets();
-    }
     attachEvents() {
@@ -718,2 +629,113 @@ // Touch Events
     }
+    /************************************
+     * Public user methods
+     */
+    /**
+     * Disable pane drag events
+     */
+    disableDrag() {
+        this.disableDragEvents = true;
+    }
+    /**
+     * Enable pane drag events
+     */
+    enableDrag() {
+        this.disableDragEvents = false;
+    }
+    moveToBreak(val) {
+        if (!this.isPanePresented()) {
+            console.warn(`Cupertino Pane: Present pane before call moveToBreak()`);
+            return null;
+        }
+        if (!this.settings.breaks[val].enabled) {
+            console.warn('Cupertino Pane: %s breakpoint disabled', val);
+            return;
+        }
+        this.checkOpacityAttr(this.breaks[val]);
+        this.checkOverflowAttr(this.breaks[val]);
+        if (this.settings.backdrop) {
+            this.backdropEl.style.backgroundColor = 'rgba(0,0,0,.4)';
+            this.backdropEl.style.display = 'block';
+        }
+        this.currentBreakpoint = this.breaks[val];
+        this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
+        this.paneEl.style.transform = `translateY(${this.breaks[val]}px)`;
+        let initTransitionEv = this.paneEl.addEventListener('transitionend', (t) => {
+            this.paneEl.style.transition = `initial`;
+            initTransitionEv = undefined;
+        });
+    }
+    hide() {
+        if (!this.isPanePresented()) {
+            console.warn(`Cupertino Pane: Present pane before call hide()`);
+            return null;
+        }
+        this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
+        this.paneEl.style.transform = `translateY(${this.screen_height}px)`;
+        if (this.settings.backdrop) {
+            this.backdropEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
+            this.backdropEl.style.backgroundColor = 'rgba(0,0,0,.0)';
+        }
+        let initTransitionEv = this.paneEl.addEventListener('transitionend', (t) => {
+            this.paneEl.style.transition = `initial`;
+            if (this.settings.backdrop) {
+                this.backdropEl.style.transition = `initial`;
+                this.backdropEl.style.display = `none`;
+            }
+            initTransitionEv = undefined;
+        });
+    }
+    isHidden() {
+        if (!this.isPanePresented()) {
+            console.warn(`Cupertino Pane: Present pane before call isHidden()`);
+            return null;
+        }
+        return this.paneEl.style.transform === `translateY(${this.screen_height}px)`;
+    }
+    currentBreak() {
+        if (!this.isPanePresented()) {
+            console.warn(`Cupertino Pane: Present pane before call currentBreak()`);
+            return null;
+        }
+        if (this.breaks['top'] === this.currentBreakpoint)
+            return 'top';
+        if (this.breaks['middle'] === this.currentBreakpoint)
+            return 'middle';
+        if (this.breaks['bottom'] === this.currentBreakpoint)
+            return 'bottom';
+        return null;
+    }
+    ;
+    destroy(conf = { animate: false }) {
+        if (!this.isPanePresented()) {
+            console.warn(`Cupertino Pane: Present pane before call destroy()`);
+            return null;
+        }
+        // Emit event
+        this.settings.onWillDismiss();
+        const resets = () => {
+            this.parentEl.appendChild(this.contentEl);
+            this.parentEl.removeChild(this.wrapperEl);
+            /****** Detach Events *******/
+            this.detachEvents();
+            // Reset vars
+            this.currentBreakpoint = this.breaks[this.settings.initialBreak];
+            // Reset styles
+            this.contentEl.style.display = 'none';
+            this.paneEl.style.transform = 'initial';
+            // Emit event
+            this.settings.onDidDismiss();
+        };
+        if (conf.animate) {
+            this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
+            this.paneEl.style.transform = `translateY(${this.screen_height}px)`;
+            if (this.settings.backdrop) {
+                this.backdropEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
+                this.backdropEl.style.backgroundColor = 'rgba(0,0,0,.0)';
+            }
+            this.paneEl.addEventListener('transitionend', () => resets());
+            return;
+        }
+        resets();
+    }
 }
@@ -720,0 +742,0 @@

dist/cupertino-pane.min.js

 /**
- * Cupertino Pane 1.1.34
+ * Cupertino Pane 1.1.37
  * Multiplatform slide-over pane
@@ -10,6 +10,6 @@ * https://github.com/roman-rr/cupertino-pane/
  *
- * Released on: April 23, 2020
+ * Released on: April 25, 2020
  */
 
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});class Support{static get touch(){return window.Modernizr&&!0===window.Modernizr.touch||!!(window.navigator.maxTouchPoints>0||"ontouchstart"in window||window.DocumentTouch&&document instanceof window.DocumentTouch)}static get observer(){return"MutationObserver"in window||"WebkitMutationObserver"in window}static get passiveListener(){let t=!1;try{const e=Object.defineProperty({},"passive",{get(){t=!0}});window.addEventListener("testPassiveListener",null,e)}catch(t){}return t}static get gestures(){return"ongesturestart"in window}static pointerEvents(){}}class Device{constructor(){this.ios=!1,this.android=!1,this.androidChrome=!1,this.desktop=!1,this.iphone=!1,this.ipod=!1,this.ipad=!1,this.edge=!1,this.ie=!1,this.firefox=!1,this.macos=!1,this.windows=!1,this.cordova=!(!window.cordova&&!window.phonegap),this.phonegap=!(!window.cordova&&!window.phonegap),this.electron=!1;const t=window.navigator.platform,e=window.navigator.userAgent,s=window.screen.width,i=window.screen.height;let n=e.match(/(Android);?[\s\/]+([\d.]+)?/),o=e.match(/(iPad).*OS\s([\d_]+)/),r=e.match(/(iPod)(.*OS\s([\d_]+))?/),a=!this.ipad&&e.match(/(iPhone\sOS|iOS)\s([\d_]+)/),h=e.indexOf("MSIE ")>=0||e.indexOf("Trident/")>=0,l=e.indexOf("Edge/")>=0,p=e.indexOf("Gecko/")>=0&&e.indexOf("Firefox/")>=0,c="Win32"===t,d=e.toLowerCase().indexOf("electron")>=0,u="MacIntel"===t;!o&&u&&Support.touch&&(1024===s&&1366===i||834===s&&1194===i||834===s&&1112===i||768===s&&1024===i)&&(o=e.match(/(Version)\/([\d.]+)/),u=!1),this.ie=h,this.edge=l,this.firefox=p,n&&!c&&(this.os="android",this.osVersion=n[2],this.android=!0,this.androidChrome=e.toLowerCase().indexOf("chrome")>=0),(o||a||r)&&(this.os="ios",this.ios=!0),a&&!r&&(this.osVersion=a[2].replace(/_/g,"."),this.iphone=!0),o&&(this.osVersion=o[2].replace(/_/g,"."),this.ipad=!0),r&&(this.osVersion=r[3]?r[3].replace(/_/g,"."):null,this.ipod=!0),this.ios&&this.osVersion&&e.indexOf("Version/")>=0&&"10"===this.osVersion.split(".")[0]&&(this.osVersion=e.toLowerCase().split("version/")[1].split(" ")[0]),this.webView=!(!(a||o||r)||!e.match(/.*AppleWebKit(?!.*Safari)/i)&&!window.navigator.standalone)||window.matchMedia&&window.matchMedia("(display-mode: standalone)").matches,this.webview=this.webView,this.standalone=this.webView,this.desktop=!(this.ios||this.android)||d,this.desktop&&(this.electron=d,this.macos=u,this.windows=c,this.macos&&(this.os="macos"),this.windows&&(this.os="windows")),this.pixelRatio=window.devicePixelRatio||1}}class CupertinoPane{constructor(t,e={}){if(this.selector=t,this.settings={initialBreak:"middle",parentElement:null,backdrop:!1,backdropTransparent:!1,animationType:"ease",animationDuration:300,darkMode:!1,bottomClose:!1,freeMode:!1,buttonClose:!0,topperOverflow:!0,topperOverflowOffset:0,showDraggable:!0,clickBottomOpen:!0,simulateTouch:!0,passiveListeners:!0,breaks:{},onDidDismiss:()=>{},onWillDismiss:()=>{},onDidPresent:()=>{},onWillPresent:()=>{},onDragStart:()=>{},onDrag:()=>{},onBackdropTap:()=>{}},this.defaultBreaksConf={top:{enabled:!0,offset:window.screen.height-47.25},middle:{enabled:!0,offset:300},bottom:{enabled:!0,offset:100}},this.screen_height=window.screen.height,this.steps=[],this.pointerDown=!1,this.breaks={},this.brs=[],this.device=new Device,this.swipeNextPoint=(t,e,s)=>{if(this.currentBreakpoint===this.breaks.top){if(t>e){if(this.settings.breaks.middle.enabled)return this.breaks.middle;if(this.settings.breaks.bottom.enabled)return this.breaks.bottom}return this.breaks.top}if(this.currentBreakpoint===this.breaks.middle)return t<-e&&this.settings.breaks.top.enabled?this.breaks.top:t>e&&this.settings.breaks.bottom.enabled?this.breaks.bottom:this.breaks.middle;if(this.currentBreakpoint===this.breaks.bottom){if(t<-e){if(this.settings.breaks.middle.enabled)return this.breaks.middle;if(this.settings.breaks.top.enabled)return this.breaks.top}return this.breaks.bottom}return s},this.touchEvents=(()=>{const t=["touchstart","touchmove","touchend","touchcancel"];let e=["mousedown","mousemove","mouseup"];Support.pointerEvents&&(e=["pointerdown","pointermove","pointerup"]);const s={start:t[0],move:t[1],end:t[2],cancel:t[3]},i={start:e[0],move:e[1],end:e[2]};return Support.touch||!this.settings.simulateTouch?s:i})(),!document.querySelector(this.selector))return console.error("Cupertino Pane: wrong selector specified",this.selector),void delete this.el;this.el=document.querySelector(this.selector),this.el.style.display="none",this.settings=Object.assign(Object.assign({},this.settings),e),this.settings.parentElement?this.settings.parentElement=document.querySelector(this.settings.parentElement):this.settings.parentElement=this.el.parentElement}drawElements(){this.parentEl=this.settings.parentElement,this.wrapperEl=document.createElement("div"),this.wrapperEl.className="cupertino-pane-wrapper "+this.el.className,this.wrapperEl.style.position="absolute",this.wrapperEl.style.top="0",this.wrapperEl.style.left="0",this.paneEl=document.createElement("div"),this.paneEl.className="pane",this.paneEl.style.position="fixed",this.paneEl.style.zIndex="11",this.paneEl.style.width="100%",this.paneEl.style.height="100%",this.paneEl.style.background="#ffffff",this.paneEl.style.borderTopLeftRadius="20px",this.paneEl.style.borderTopRightRadius="20px",this.paneEl.style.boxShadow="0 4px 16px rgba(0,0,0,.12)",this.paneEl.style.overflow="hidden",this.paneEl.style.transform=`translateY(${this.breaks[this.settings.initialBreak]}px)`,this.draggableEl=document.createElement("div"),this.draggableEl.className="draggable",this.draggableEl.style.padding="5px",this.moveEl=document.createElement("div"),this.moveEl.className="move",this.moveEl.style.margin="0 auto",this.moveEl.style.height="5px",this.moveEl.style.background="#c0c0c0",this.moveEl.style.width="36px",this.moveEl.style.borderRadius="4px",this.contentEl=this.el,this.contentEl.style.display="",this.contentEl.style.transition=`opacity ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.contentEl.style.overflowX="hidden",this.backdropEl=document.createElement("div"),this.backdropEl.className="backdrop",this.backdropEl.style.overflow="hidden",this.backdropEl.style.position="fixed",this.backdropEl.style.width="100%",this.backdropEl.style.bottom="0",this.backdropEl.style.right="0",this.backdropEl.style.left="0",this.backdropEl.style.top="0",this.backdropEl.style.backgroundColor="rgba(0,0,0,.4)",this.backdropEl.style.display="block",this.backdropEl.style.zIndex="10",this.backdropEl.style.opacity=this.settings.backdropTransparent?"0":"1",this.closeEl=document.createElement("div"),this.closeEl.className="close-button",this.closeEl.style.width="26px",this.closeEl.style.height="26px",this.closeEl.style.position="absolute",this.closeEl.style.background="#ebebeb",this.closeEl.style.top="16px",this.closeEl.style.right="20px",this.closeEl.style.borderRadius="100%"}present(t={animate:!1}){if(!this.el)return;if(this.isPanePresented())return void this.moveToBreak(this.settings.initialBreak);if(this.settings.onWillPresent(),this.breaks={top:this.screen_height,middle:this.screen_height,bottom:this.screen_height},["top","middle","bottom"].forEach(t=>{this.settings.breaks[t]||(this.settings.breaks[t]=this.defaultBreaksConf[t]),this.settings.breaks[t]&&this.settings.breaks[t].enabled&&this.settings.breaks[t].offset&&(this.breaks[t]-=this.settings.breaks[t].offset)}),this.settings.breaks[this.settings.initialBreak].enabled||console.warn("Cupertino Pane: Please set initialBreak for enabled breakpoint"),this.settings.breaks.middle.offset>=this.settings.breaks.top.offset&&console.warn("Cupertino Pane: Please set middle offset lower than top offset"),this.settings.breaks.middle.offset<=this.settings.breaks.bottom.offset&&console.warn("Cupertino Pane: Please set bottom offset lower than middle offset"),this.currentBreakpoint=this.breaks[this.settings.initialBreak],this.drawElements(),this.parentEl.appendChild(this.wrapperEl),this.wrapperEl.appendChild(this.paneEl),this.paneEl.appendChild(this.draggableEl),this.paneEl.appendChild(this.contentEl),this.draggableEl.appendChild(this.moveEl),t.animate){this.paneEl.style.transform=`translateY(${this.screen_height}px)`,this.paneEl.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,setTimeout(()=>{this.paneEl.style.transform=`translateY(${this.breaks[this.settings.initialBreak]}px)`},50);let t=this.paneEl.addEventListener("transitionend",e=>{this.paneEl.style.transition="initial",t=void 0,this.settings.onDidPresent()})}else this.settings.onDidPresent();if(this.settings.backdrop&&(this.wrapperEl.appendChild(this.backdropEl),this.backdropEl.addEventListener("click",t=>this.settings.onBackdropTap())),this.settings.showDraggable||(this.draggableEl.style.opacity="0"),this.settings.darkMode&&(this.paneEl.style.background="#1c1c1d",this.paneEl.style.color="#ffffff",this.moveEl.style.background="#5a5a5e"),this.settings.buttonClose){this.paneEl.appendChild(this.closeEl),this.closeEl.addEventListener("click",t=>this.destroy({animate:!0}));let t="#7a7a7e";this.settings.darkMode&&(this.closeEl.style.background="#424246",t="#a8a7ae"),this.closeEl.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">\n          <path fill="${t}" d="M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z"/>\n        </svg>`}this.settings.bottomClose&&(this.settings.breaks.bottom.enabled=!0),this.brs=[],["top","middle","bottom"].forEach(t=>{this.settings.breaks[t].enabled&&this.brs.push(this.breaks[t])}),this.topper=this.brs.reduce((t,e)=>Math.abs(e)<Math.abs(t)?e:t),this.bottomer=this.brs.reduce((t,e)=>Math.abs(e)>Math.abs(t)?e:t);let e=document.querySelectorAll(this.selector+" [overflow-y]");!e.length||e.length>1?this.overflowEl=this.contentEl:this.overflowEl=e[0],this.overflowEl.style.height=this.screen_height-this.breaks.top-51-this.settings.topperOverflowOffset+"px",this.checkOpacityAttr(this.currentBreakpoint),this.checkOverflowAttr(this.currentBreakpoint),this.attachEvents()}moveToBreak(t){if(!this.isPanePresented())return console.warn("Cupertino Pane: Present pane before call moveToBreak()"),null;if(!this.settings.breaks[t].enabled)return void console.warn("Cupertino Pane: %s breakpoint disabled",t);this.checkOpacityAttr(this.breaks[t]),this.checkOverflowAttr(this.breaks[t]),this.settings.backdrop&&(this.backdropEl.style.backgroundColor="rgba(0,0,0,.4)",this.backdropEl.style.display="block"),this.currentBreakpoint=this.breaks[t],this.paneEl.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.paneEl.style.transform=`translateY(${this.breaks[t]}px)`;let e=this.paneEl.addEventListener("transitionend",t=>{this.paneEl.style.transition="initial",e=void 0})}hide(){if(!this.isPanePresented())return console.warn("Cupertino Pane: Present pane before call hide()"),null;this.paneEl.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.paneEl.style.transform=`translateY(${this.screen_height}px)`,this.settings.backdrop&&(this.backdropEl.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.backdropEl.style.backgroundColor="rgba(0,0,0,.0)");let t=this.paneEl.addEventListener("transitionend",e=>{this.paneEl.style.transition="initial",this.settings.backdrop&&(this.backdropEl.style.transition="initial",this.backdropEl.style.display="none"),t=void 0})}isHidden(){return this.isPanePresented()?this.paneEl.style.transform===`translateY(${this.screen_height}px)`:(console.warn("Cupertino Pane: Present pane before call isHidden()"),null)}currentBreak(){return this.isPanePresented()?this.breaks.top===this.currentBreakpoint?"top":this.breaks.middle===this.currentBreakpoint?"middle":this.breaks.bottom===this.currentBreakpoint?"bottom":null:(console.warn("Cupertino Pane: Present pane before call currentBreak()"),null)}checkOpacityAttr(t){let e=document.querySelectorAll(this.selector+" [hide-on-bottom]");e.length&&e.forEach(e=>{e.style.transition=`opacity ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,e.style.opacity=t>=this.breaks.bottom?"0":"1"})}checkOverflowAttr(t){this.settings.topperOverflow&&(this.overflowEl.style.overflowY=t<=this.topper?"auto":"hidden")}isPanePresented(){return!!document.querySelector(".cupertino-pane-wrapper "+this.selector)}touchStart(t){const e="touchstart"===t.type&&t.targetTouches&&(t.targetTouches[0]||t.changedTouches[0]),s="touchstart"===t.type?e.screenY:t.screenY;"pointerdown"===t.type&&(this.pointerDown=!0),this.settings.onDragStart(),this.startP=s,this.steps.push(this.startP)}touchMove(t){const e="touchmove"===t.type&&t.targetTouches&&(t.targetTouches[0]||t.changedTouches[0]),s="touchmove"===t.type?e.screenY:t.screenY;if("pointermove"===t.type&&!this.pointerDown)return;this.settings.onDrag();const i=s,n=parseFloat(/\.*translateY\((.*)px\)/i.exec(this.paneEl.style.transform)[1])+(i-this.steps[this.steps.length-1]);"auto"===this.overflowEl.style.overflowY&&(this.overflowEl.addEventListener("scroll",t=>{this.contentScrollTop=t.target.scrollTop}),n>this.topper&&this.contentScrollTop>0||n<=this.topper)||n<=this.topper||this.settings.freeMode&&!this.settings.bottomClose&&n>=this.bottomer||(this.checkOpacityAttr(n),this.checkOverflowAttr(n),this.paneEl.style.transition="initial",this.paneEl.style.transform=`translateY(${n}px)`,this.steps.push(i))}touchEnd(t){const e="touchmove"===t.type&&t.targetTouches&&(t.targetTouches[0]||t.changedTouches[0]);"touchmove"===t.type?e.screenY:t.screenY;"pointerup"===t.type&&(this.pointerDown=!1);const s=parseFloat(/\.*translateY\((.*)px\)/i.exec(this.paneEl.style.transform)[1]);let i=this.brs.reduce((t,e)=>Math.abs(e-s)<Math.abs(t-s)?e:t);const n=this.steps[this.steps.length-1]-this.steps[this.steps.length-2],o=window.hasOwnProperty("cordova")?4:3;if(Math.abs(n)>=o&&(i=this.swipeNextPoint(n,o,i)),this.settings.clickBottomOpen&&this.currentBreakpoint===this.breaks.bottom&&isNaN(n)&&(i=this.settings.breaks.middle.enabled?this.breaks.middle:this.settings.breaks.top.enabled?this.breaks.top:this.breaks.bottom),this.steps=[],this.currentBreakpoint=i,this.checkOpacityAttr(this.currentBreakpoint),this.checkOverflowAttr(this.currentBreakpoint),this.settings.bottomClose&&i===this.breaks.bottom)this.destroy({animate:!0});else if(!this.settings.freeMode){this.paneEl.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.paneEl.style.transform=`translateY(${i}px)`;let t=this.paneEl.addEventListener("transitionend",()=>{this.paneEl.style.transition="initial",t=void 0})}}destroy(t={animate:!1}){if(!this.isPanePresented())return console.warn("Cupertino Pane: Present pane before call destroy()"),null;this.settings.onWillDismiss();const e=()=>{this.parentEl.appendChild(this.contentEl),this.parentEl.removeChild(this.wrapperEl),this.detachEvents(),this.currentBreakpoint=this.breaks[this.settings.initialBreak],this.contentEl.style.display="none",this.paneEl.style.transform="initial",this.settings.onDidDismiss()};if(t.animate)return this.paneEl.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.paneEl.style.transform=`translateY(${this.screen_height}px)`,this.settings.backdrop&&(this.backdropEl.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.backdropEl.style.backgroundColor="rgba(0,0,0,.0)"),void this.paneEl.addEventListener("transitionend",()=>e());e()}attachEvents(){if(!Support.touch&&Support.pointerEvents)this.paneEl.addEventListener(this.touchEvents.start,t=>this.touchStart(t),!1),this.paneEl.addEventListener(this.touchEvents.move,t=>this.touchMove(t),!1),this.paneEl.addEventListener(this.touchEvents.end,t=>this.touchEnd(t),!1);else{if(Support.touch){const t=!("touchstart"!==this.touchEvents.start||!Support.passiveListener||!this.settings.passiveListeners)&&{passive:!0,capture:!1};this.paneEl.addEventListener(this.touchEvents.start,t=>this.touchStart(t),t),this.paneEl.addEventListener(this.touchEvents.move,t=>this.touchMove(t),!!Support.passiveListener&&{passive:!1,capture:!1}),this.paneEl.addEventListener(this.touchEvents.end,t=>this.touchEnd(t),t),this.touchEvents.cancel&&this.paneEl.addEventListener(this.touchEvents.cancel,t=>this.touchEnd(t),t)}(this.settings.simulateTouch&&!this.device.ios&&!this.device.android||this.settings.simulateTouch&&!Support.touch&&this.device.ios)&&(this.paneEl.addEventListener("mousedown",t=>this.touchStart(t),!1),this.paneEl.addEventListener("mousemove",t=>this.touchMove(t),!1),this.paneEl.addEventListener("mouseup",t=>this.touchEnd(t),!1))}}detachEvents(){if(!Support.touch&&Support.pointerEvents)this.paneEl.removeEventListener(this.touchEvents.start,t=>this.touchStart(t),!1),this.paneEl.removeEventListener(this.touchEvents.move,t=>this.touchMove(t),!1),this.paneEl.removeEventListener(this.touchEvents.end,t=>this.touchEnd(t),!1);else{if(Support.touch){const t=!("onTouchStart"!==this.touchEvents.start||!Support.passiveListener||!this.settings.passiveListeners)&&{passive:!0,capture:!1};this.paneEl.removeEventListener(this.touchEvents.start,t=>this.touchStart(t),t),this.paneEl.removeEventListener(this.touchEvents.move,t=>this.touchMove(t),!1),this.paneEl.removeEventListener(this.touchEvents.end,t=>this.touchEnd(t),t),this.touchEvents.cancel&&this.paneEl.removeEventListener(this.touchEvents.cancel,t=>this.touchEnd(t),t)}(this.settings.simulateTouch&&!this.device.ios&&!this.device.android||this.settings.simulateTouch&&!Support.touch&&this.device.ios)&&(this.paneEl.removeEventListener("mousedown",t=>this.touchStart(t),!1),this.paneEl.removeEventListener("mousemove",t=>this.touchMove(t),!1),this.paneEl.removeEventListener("mouseup",t=>this.touchEnd(t),!1))}}}exports.CupertinoPane=CupertinoPane;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});class Support{static get touch(){return window.Modernizr&&!0===window.Modernizr.touch||!!(window.navigator.maxTouchPoints>0||"ontouchstart"in window||window.DocumentTouch&&document instanceof window.DocumentTouch)}static get observer(){return"MutationObserver"in window||"WebkitMutationObserver"in window}static get passiveListener(){let t=!1;try{const e=Object.defineProperty({},"passive",{get(){t=!0}});window.addEventListener("testPassiveListener",null,e)}catch(t){}return t}static get gestures(){return"ongesturestart"in window}static pointerEvents(){}}class Device{constructor(){this.ios=!1,this.android=!1,this.androidChrome=!1,this.desktop=!1,this.iphone=!1,this.ipod=!1,this.ipad=!1,this.edge=!1,this.ie=!1,this.firefox=!1,this.macos=!1,this.windows=!1,this.cordova=!(!window.cordova&&!window.phonegap),this.phonegap=!(!window.cordova&&!window.phonegap),this.electron=!1;const t=window.navigator.platform,e=window.navigator.userAgent,s=window.screen.width,i=window.screen.height;let n=e.match(/(Android);?[\s\/]+([\d.]+)?/),o=e.match(/(iPad).*OS\s([\d_]+)/),r=e.match(/(iPod)(.*OS\s([\d_]+))?/),a=!this.ipad&&e.match(/(iPhone\sOS|iOS)\s([\d_]+)/),h=e.indexOf("MSIE ")>=0||e.indexOf("Trident/")>=0,l=e.indexOf("Edge/")>=0,p=e.indexOf("Gecko/")>=0&&e.indexOf("Firefox/")>=0,d="Win32"===t,c=e.toLowerCase().indexOf("electron")>=0,u="MacIntel"===t;!o&&u&&Support.touch&&(1024===s&&1366===i||834===s&&1194===i||834===s&&1112===i||768===s&&1024===i)&&(o=e.match(/(Version)\/([\d.]+)/),u=!1),this.ie=h,this.edge=l,this.firefox=p,n&&!d&&(this.os="android",this.osVersion=n[2],this.android=!0,this.androidChrome=e.toLowerCase().indexOf("chrome")>=0),(o||a||r)&&(this.os="ios",this.ios=!0),a&&!r&&(this.osVersion=a[2].replace(/_/g,"."),this.iphone=!0),o&&(this.osVersion=o[2].replace(/_/g,"."),this.ipad=!0),r&&(this.osVersion=r[3]?r[3].replace(/_/g,"."):null,this.ipod=!0),this.ios&&this.osVersion&&e.indexOf("Version/")>=0&&"10"===this.osVersion.split(".")[0]&&(this.osVersion=e.toLowerCase().split("version/")[1].split(" ")[0]),this.webView=!(!(a||o||r)||!e.match(/.*AppleWebKit(?!.*Safari)/i)&&!window.navigator.standalone)||window.matchMedia&&window.matchMedia("(display-mode: standalone)").matches,this.webview=this.webView,this.standalone=this.webView,this.desktop=!(this.ios||this.android)||c,this.desktop&&(this.electron=c,this.macos=u,this.windows=d,this.macos&&(this.os="macos"),this.windows&&(this.os="windows")),this.pixelRatio=window.devicePixelRatio||1}}class CupertinoPane{constructor(t,e={}){if(this.selector=t,this.settings={initialBreak:"middle",parentElement:null,backdrop:!1,backdropTransparent:!1,animationType:"ease",animationDuration:300,darkMode:!1,bottomClose:!1,freeMode:!1,buttonClose:!0,topperOverflow:!0,topperOverflowOffset:0,showDraggable:!0,clickBottomOpen:!0,simulateTouch:!0,passiveListeners:!0,breaks:{},onDidDismiss:()=>{},onWillDismiss:()=>{},onDidPresent:()=>{},onWillPresent:()=>{},onDragStart:()=>{},onDrag:()=>{},onBackdropTap:()=>{}},this.defaultBreaksConf={top:{enabled:!0,offset:window.screen.height-47.25},middle:{enabled:!0,offset:300},bottom:{enabled:!0,offset:100}},this.screen_height=window.screen.height,this.steps=[],this.pointerDown=!1,this.disableDragEvents=!1,this.breaks={},this.brs=[],this.device=new Device,this.swipeNextPoint=(t,e,s)=>{if(this.currentBreakpoint===this.breaks.top){if(t>e){if(this.settings.breaks.middle.enabled)return this.breaks.middle;if(this.settings.breaks.bottom.enabled)return this.breaks.bottom}return this.breaks.top}if(this.currentBreakpoint===this.breaks.middle)return t<-e&&this.settings.breaks.top.enabled?this.breaks.top:t>e&&this.settings.breaks.bottom.enabled?this.breaks.bottom:this.breaks.middle;if(this.currentBreakpoint===this.breaks.bottom){if(t<-e){if(this.settings.breaks.middle.enabled)return this.breaks.middle;if(this.settings.breaks.top.enabled)return this.breaks.top}return this.breaks.bottom}return s},this.touchEvents=(()=>{const t=["touchstart","touchmove","touchend","touchcancel"];let e=["mousedown","mousemove","mouseup"];Support.pointerEvents&&(e=["pointerdown","pointermove","pointerup"]);const s={start:t[0],move:t[1],end:t[2],cancel:t[3]},i={start:e[0],move:e[1],end:e[2]};return Support.touch||!this.settings.simulateTouch?s:i})(),!document.querySelector(this.selector))return console.error("Cupertino Pane: wrong selector specified",this.selector),void delete this.el;this.el=document.querySelector(this.selector),this.el.style.display="none",this.settings=Object.assign(Object.assign({},this.settings),e),this.settings.parentElement?this.settings.parentElement=document.querySelector(this.settings.parentElement):this.settings.parentElement=this.el.parentElement}drawElements(){this.parentEl=this.settings.parentElement,this.wrapperEl=document.createElement("div"),this.wrapperEl.className="cupertino-pane-wrapper "+this.el.className,this.wrapperEl.style.position="absolute",this.wrapperEl.style.top="0",this.wrapperEl.style.left="0",this.paneEl=document.createElement("div"),this.paneEl.className="pane",this.paneEl.style.position="fixed",this.paneEl.style.zIndex="11",this.paneEl.style.width="100%",this.paneEl.style.height="100%",this.paneEl.style.background="#ffffff",this.paneEl.style.borderTopLeftRadius="20px",this.paneEl.style.borderTopRightRadius="20px",this.paneEl.style.boxShadow="0 4px 16px rgba(0,0,0,.12)",this.paneEl.style.overflow="hidden",this.paneEl.style.transform=`translateY(${this.breaks[this.settings.initialBreak]}px)`,this.draggableEl=document.createElement("div"),this.draggableEl.className="draggable",this.draggableEl.style.padding="5px",this.moveEl=document.createElement("div"),this.moveEl.className="move",this.moveEl.style.margin="0 auto",this.moveEl.style.height="5px",this.moveEl.style.background="#c0c0c0",this.moveEl.style.width="36px",this.moveEl.style.borderRadius="4px",this.contentEl=this.el,this.contentEl.style.display="",this.contentEl.style.transition=`opacity ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.contentEl.style.overflowX="hidden",this.backdropEl=document.createElement("div"),this.backdropEl.className="backdrop",this.backdropEl.style.overflow="hidden",this.backdropEl.style.position="fixed",this.backdropEl.style.width="100%",this.backdropEl.style.bottom="0",this.backdropEl.style.right="0",this.backdropEl.style.left="0",this.backdropEl.style.top="0",this.backdropEl.style.backgroundColor="rgba(0,0,0,.4)",this.backdropEl.style.display="block",this.backdropEl.style.zIndex="10",this.backdropEl.style.opacity=this.settings.backdropTransparent?"0":"1",this.closeEl=document.createElement("div"),this.closeEl.className="close-button",this.closeEl.style.width="26px",this.closeEl.style.height="26px",this.closeEl.style.position="absolute",this.closeEl.style.background="#ebebeb",this.closeEl.style.top="16px",this.closeEl.style.right="20px",this.closeEl.style.borderRadius="100%"}present(t={animate:!1}){if(!this.el)return;if(this.isPanePresented())return void this.moveToBreak(this.settings.initialBreak);if(this.settings.onWillPresent(),this.breaks={top:this.screen_height,middle:this.screen_height,bottom:this.screen_height},["top","middle","bottom"].forEach(t=>{this.settings.breaks[t]||(this.settings.breaks[t]=this.defaultBreaksConf[t]),this.settings.breaks[t]&&this.settings.breaks[t].enabled&&this.settings.breaks[t].offset&&(this.breaks[t]-=this.settings.breaks[t].offset)}),this.settings.breaks[this.settings.initialBreak].enabled||console.warn("Cupertino Pane: Please set initialBreak for enabled breakpoint"),this.settings.breaks.middle.offset>=this.settings.breaks.top.offset&&console.warn("Cupertino Pane: Please set middle offset lower than top offset"),this.settings.breaks.middle.offset<=this.settings.breaks.bottom.offset&&console.warn("Cupertino Pane: Please set bottom offset lower than middle offset"),this.currentBreakpoint=this.breaks[this.settings.initialBreak],this.drawElements(),this.parentEl.appendChild(this.wrapperEl),this.wrapperEl.appendChild(this.paneEl),this.paneEl.appendChild(this.draggableEl),this.paneEl.appendChild(this.contentEl),this.draggableEl.appendChild(this.moveEl),t.animate){this.paneEl.style.transform=`translateY(${this.screen_height}px)`,this.paneEl.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,setTimeout(()=>{this.paneEl.style.transform=`translateY(${this.breaks[this.settings.initialBreak]}px)`},50);let t=this.paneEl.addEventListener("transitionend",e=>{this.paneEl.style.transition="initial",t=void 0,this.settings.onDidPresent()})}else this.settings.onDidPresent();if(this.settings.backdrop&&(this.wrapperEl.appendChild(this.backdropEl),this.backdropEl.addEventListener("click",t=>this.settings.onBackdropTap())),this.settings.showDraggable||(this.draggableEl.style.opacity="0"),this.settings.darkMode&&(this.paneEl.style.background="#1c1c1d",this.paneEl.style.color="#ffffff",this.moveEl.style.background="#5a5a5e"),this.settings.buttonClose){this.paneEl.appendChild(this.closeEl),this.closeEl.addEventListener("click",t=>this.destroy({animate:!0}));let t="#7a7a7e";this.settings.darkMode&&(this.closeEl.style.background="#424246",t="#a8a7ae"),this.closeEl.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">\n          <path fill="${t}" d="M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z"/>\n        </svg>`}this.settings.bottomClose&&(this.settings.breaks.bottom.enabled=!0),this.brs=[],["top","middle","bottom"].forEach(t=>{this.settings.breaks[t].enabled&&this.brs.push(this.breaks[t])}),this.topper=this.brs.reduce((t,e)=>Math.abs(e)<Math.abs(t)?e:t),this.bottomer=this.brs.reduce((t,e)=>Math.abs(e)>Math.abs(t)?e:t);let e=document.querySelectorAll(this.selector+" [overflow-y]");!e.length||e.length>1?this.overflowEl=this.contentEl:this.overflowEl=e[0],this.overflowEl.style.height=this.screen_height-this.breaks.top-51-this.settings.topperOverflowOffset+"px",this.checkOpacityAttr(this.currentBreakpoint),this.checkOverflowAttr(this.currentBreakpoint),this.attachEvents()}checkOpacityAttr(t){let e=document.querySelectorAll(this.selector+" [hide-on-bottom]");e.length&&e.forEach(e=>{e.style.transition=`opacity ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,e.style.opacity=t>=this.breaks.bottom?"0":"1"})}checkOverflowAttr(t){this.settings.topperOverflow&&(this.overflowEl.style.overflowY=t<=this.topper?"auto":"hidden")}isPanePresented(){return!!document.querySelector(".cupertino-pane-wrapper "+this.selector)}touchStart(t){if(this.settings.onDragStart(t),this.disableDragEvents)return;const e="touchstart"===t.type&&t.targetTouches&&(t.targetTouches[0]||t.changedTouches[0]),s="touchstart"===t.type?e.screenY:t.screenY;"pointerdown"===t.type&&(this.pointerDown=!0),this.startP=s,this.steps.push(this.startP)}touchMove(t){if(this.settings.onDrag(t),this.disableDragEvents)return;const e="touchmove"===t.type&&t.targetTouches&&(t.targetTouches[0]||t.changedTouches[0]),s="touchmove"===t.type?e.screenY:t.screenY;if("pointermove"===t.type&&!this.pointerDown)return;const i=s,n=parseFloat(/\.*translateY\((.*)px\)/i.exec(this.paneEl.style.transform)[1])+(i-this.steps[this.steps.length-1]);"auto"===this.overflowEl.style.overflowY&&(this.overflowEl.addEventListener("scroll",t=>{this.contentScrollTop=t.target.scrollTop}),n>this.topper&&this.contentScrollTop>0||n<=this.topper)||n<=this.topper||this.settings.freeMode&&!this.settings.bottomClose&&n>=this.bottomer||(this.checkOpacityAttr(n),this.checkOverflowAttr(n),this.paneEl.style.transition="initial",this.paneEl.style.transform=`translateY(${n}px)`,this.steps.push(i))}touchEnd(t){if(this.disableDragEvents)return;const e="touchmove"===t.type&&t.targetTouches&&(t.targetTouches[0]||t.changedTouches[0]);"touchmove"===t.type?e.screenY:t.screenY;"pointerup"===t.type&&(this.pointerDown=!1);const s=parseFloat(/\.*translateY\((.*)px\)/i.exec(this.paneEl.style.transform)[1]);let i=this.brs.reduce((t,e)=>Math.abs(e-s)<Math.abs(t-s)?e:t);const n=this.steps[this.steps.length-1]-this.steps[this.steps.length-2],o=window.hasOwnProperty("cordova")?4:3;if(Math.abs(n)>=o&&(i=this.swipeNextPoint(n,o,i)),this.settings.clickBottomOpen&&this.currentBreakpoint===this.breaks.bottom&&isNaN(n)&&(i=this.settings.breaks.middle.enabled?this.breaks.middle:this.settings.breaks.top.enabled?this.breaks.top:this.breaks.bottom),this.steps=[],this.currentBreakpoint=i,this.checkOpacityAttr(this.currentBreakpoint),this.checkOverflowAttr(this.currentBreakpoint),this.settings.bottomClose&&i===this.breaks.bottom)this.destroy({animate:!0});else if(!this.settings.freeMode){this.paneEl.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.paneEl.style.transform=`translateY(${i}px)`;let t=this.paneEl.addEventListener("transitionend",()=>{this.paneEl.style.transition="initial",t=void 0})}}attachEvents(){if(!Support.touch&&Support.pointerEvents)this.paneEl.addEventListener(this.touchEvents.start,t=>this.touchStart(t),!1),this.paneEl.addEventListener(this.touchEvents.move,t=>this.touchMove(t),!1),this.paneEl.addEventListener(this.touchEvents.end,t=>this.touchEnd(t),!1);else{if(Support.touch){const t=!("touchstart"!==this.touchEvents.start||!Support.passiveListener||!this.settings.passiveListeners)&&{passive:!0,capture:!1};this.paneEl.addEventListener(this.touchEvents.start,t=>this.touchStart(t),t),this.paneEl.addEventListener(this.touchEvents.move,t=>this.touchMove(t),!!Support.passiveListener&&{passive:!1,capture:!1}),this.paneEl.addEventListener(this.touchEvents.end,t=>this.touchEnd(t),t),this.touchEvents.cancel&&this.paneEl.addEventListener(this.touchEvents.cancel,t=>this.touchEnd(t),t)}(this.settings.simulateTouch&&!this.device.ios&&!this.device.android||this.settings.simulateTouch&&!Support.touch&&this.device.ios)&&(this.paneEl.addEventListener("mousedown",t=>this.touchStart(t),!1),this.paneEl.addEventListener("mousemove",t=>this.touchMove(t),!1),this.paneEl.addEventListener("mouseup",t=>this.touchEnd(t),!1))}}detachEvents(){if(!Support.touch&&Support.pointerEvents)this.paneEl.removeEventListener(this.touchEvents.start,t=>this.touchStart(t),!1),this.paneEl.removeEventListener(this.touchEvents.move,t=>this.touchMove(t),!1),this.paneEl.removeEventListener(this.touchEvents.end,t=>this.touchEnd(t),!1);else{if(Support.touch){const t=!("onTouchStart"!==this.touchEvents.start||!Support.passiveListener||!this.settings.passiveListeners)&&{passive:!0,capture:!1};this.paneEl.removeEventListener(this.touchEvents.start,t=>this.touchStart(t),t),this.paneEl.removeEventListener(this.touchEvents.move,t=>this.touchMove(t),!1),this.paneEl.removeEventListener(this.touchEvents.end,t=>this.touchEnd(t),t),this.touchEvents.cancel&&this.paneEl.removeEventListener(this.touchEvents.cancel,t=>this.touchEnd(t),t)}(this.settings.simulateTouch&&!this.device.ios&&!this.device.android||this.settings.simulateTouch&&!Support.touch&&this.device.ios)&&(this.paneEl.removeEventListener("mousedown",t=>this.touchStart(t),!1),this.paneEl.removeEventListener("mousemove",t=>this.touchMove(t),!1),this.paneEl.removeEventListener("mouseup",t=>this.touchEnd(t),!1))}}disableDrag(){this.disableDragEvents=!0}enableDrag(){this.disableDragEvents=!1}moveToBreak(t){if(!this.isPanePresented())return console.warn("Cupertino Pane: Present pane before call moveToBreak()"),null;if(!this.settings.breaks[t].enabled)return void console.warn("Cupertino Pane: %s breakpoint disabled",t);this.checkOpacityAttr(this.breaks[t]),this.checkOverflowAttr(this.breaks[t]),this.settings.backdrop&&(this.backdropEl.style.backgroundColor="rgba(0,0,0,.4)",this.backdropEl.style.display="block"),this.currentBreakpoint=this.breaks[t],this.paneEl.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.paneEl.style.transform=`translateY(${this.breaks[t]}px)`;let e=this.paneEl.addEventListener("transitionend",t=>{this.paneEl.style.transition="initial",e=void 0})}hide(){if(!this.isPanePresented())return console.warn("Cupertino Pane: Present pane before call hide()"),null;this.paneEl.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.paneEl.style.transform=`translateY(${this.screen_height}px)`,this.settings.backdrop&&(this.backdropEl.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.backdropEl.style.backgroundColor="rgba(0,0,0,.0)");let t=this.paneEl.addEventListener("transitionend",e=>{this.paneEl.style.transition="initial",this.settings.backdrop&&(this.backdropEl.style.transition="initial",this.backdropEl.style.display="none"),t=void 0})}isHidden(){return this.isPanePresented()?this.paneEl.style.transform===`translateY(${this.screen_height}px)`:(console.warn("Cupertino Pane: Present pane before call isHidden()"),null)}currentBreak(){return this.isPanePresented()?this.breaks.top===this.currentBreakpoint?"top":this.breaks.middle===this.currentBreakpoint?"middle":this.breaks.bottom===this.currentBreakpoint?"bottom":null:(console.warn("Cupertino Pane: Present pane before call currentBreak()"),null)}destroy(t={animate:!1}){if(!this.isPanePresented())return console.warn("Cupertino Pane: Present pane before call destroy()"),null;this.settings.onWillDismiss();const e=()=>{this.parentEl.appendChild(this.contentEl),this.parentEl.removeChild(this.wrapperEl),this.detachEvents(),this.currentBreakpoint=this.breaks[this.settings.initialBreak],this.contentEl.style.display="none",this.paneEl.style.transform="initial",this.settings.onDidDismiss()};if(t.animate)return this.paneEl.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.paneEl.style.transform=`translateY(${this.screen_height}px)`,this.settings.backdrop&&(this.backdropEl.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.backdropEl.style.backgroundColor="rgba(0,0,0,.0)"),void this.paneEl.addEventListener("transitionend",()=>e());e()}}exports.CupertinoPane=CupertinoPane;
 //# sourceMappingURL=cupertino-pane.min.js.map

gulp/gulpfile.js

 /* eslint no-console: ["error", { allow: ["log"] }] */
 const gulp = require('gulp');
+const connect = require('gulp-connect');
+const gopen = require('gulp-open');
 const fs = require('fs');
@@ -39,2 +41,23 @@ const path = require('path');
 
-gulp.task('build', gulp.series(['clean', 'js', 'prod-source-sourcemap-fix-paths']));
+gulp.task('build', gulp.series(['clean', 'js', 'prod-source-sourcemap-fix-paths']));
+
+gulp.task('watch', () => {
+  gulp.watch('./src/**/**/*.ts', gulp.series('js'));
+});
+
+gulp.task('connect', () => {
+  connect.server({
+    root: ['./'],
+    livereload: true,
+    host: '0.0.0.0',
+    port: '3000',
+  });
+});
+
+gulp.task('open', () => {
+  gulp.src('./playground/index.html').pipe(gopen({ uri: 'http://localhost:3000/playground/' }));
+});
+
+gulp.task('server', gulp.parallel(['watch', 'connect', 'open']));
+
+gulp.task('default', gulp.series('server'));

package.json

 {
   "name": "cupertino-pane",
   "description": "Multiplatform slide-over pane",
-  "version": "1.1.34",
+  "version": "1.1.37",
   "author": "Roman Antonov (roman-rr)",
@@ -14,3 +14,4 @@ "homepage": "https://github.com/roman-rr/cupertino-pane/",
     "build": "gulp build",
-    "tslint": "tslint src/**/*.ts"
+    "tslint": "tslint src/**/*.ts",
+    "dev": "gulp build && gulp server"
   },
@@ -21,2 +22,4 @@ "devDependencies": {
     "gulp": "^4.0.2",
+    "gulp-connect": "^5.7.0",
+    "gulp-open": "^3.0.1",
     "rollup": "^1.27.5",
@@ -23,0 +26,0 @@ "rollup-plugin-typescript2": "0.26.0",

README.md

@@ -216,2 +216,12 @@ <!-- https://github.com/ai/nanoid - cover -->
 ```
+### disableDrag()
+Method disable any drag actions for pane
+```javascript
+myPane.disableDrag();
+```
+### enableDrag()
+Method enable any drag actions for pane
+```javascript
+myPane.enableDrag();
+```
 
@@ -238,3 +248,3 @@ ## Attributes
 ## Future Goals
-- Tests envieronment
+- Playground (livereload, build ionic app, live demo)
 - Hardware accelerated drag&drop actions
@@ -241,0 +251,0 @@ - 3D effect (ion-modal example)

src/cupertino-pane.ts

@@ -46,2 +46,3 @@ import { Support } from './support';
   private contentScrollTop: number;
+  private disableDragEvents: boolean = false;
 
@@ -292,78 +293,2 @@ private breaks: {} = {}
 
-  public moveToBreak(val) {
-    if (!this.isPanePresented()) {
-      console.warn(`Cupertino Pane: Present pane before call moveToBreak()`);
-      return null;
-    }
-
-    if (!this.settings.breaks[val].enabled) {
-      console.warn('Cupertino Pane: %s breakpoint disabled', val);
-      return;
-    }
-
-    this.checkOpacityAttr(this.breaks[val]);
-    this.checkOverflowAttr(this.breaks[val]);
-
-    if (this.settings.backdrop) {
-      this.backdropEl.style.backgroundColor = 'rgba(0,0,0,.4)';
-      this.backdropEl.style.display = 'block';
-    }
-
-    this.currentBreakpoint = this.breaks[val];
-    
-    this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
-    this.paneEl.style.transform = `translateY(${this.breaks[val]}px)`;
-    let initTransitionEv = this.paneEl.addEventListener('transitionend', (t) => {
-      this.paneEl.style.transition = `initial`;
-      initTransitionEv = undefined;
-    });
-  }
-
-  public hide() {
-    if (!this.isPanePresented()) {
-      console.warn(`Cupertino Pane: Present pane before call hide()`);
-      return null;
-    }
-
-    this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
-    this.paneEl.style.transform = `translateY(${this.screen_height}px)`;
-
-    if (this.settings.backdrop) {
-      this.backdropEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
-      this.backdropEl.style.backgroundColor = 'rgba(0,0,0,.0)';
-    }
-
-    let initTransitionEv = this.paneEl.addEventListener('transitionend', (t) => {
-      this.paneEl.style.transition = `initial`;
-
-      if (this.settings.backdrop) {
-        this.backdropEl.style.transition = `initial`;
-        this.backdropEl.style.display = `none`;
-      }
-
-      initTransitionEv = undefined;
-    });
-  }
-
-  public isHidden(): (boolean|null) {
-    if (!this.isPanePresented()) {
-      console.warn(`Cupertino Pane: Present pane before call isHidden()`);
-      return null;
-    }
-    
-    return this.paneEl.style.transform === `translateY(${this.screen_height}px)`;
-  }
-
-  public currentBreak(): (string|null) {
-    if (!this.isPanePresented()) {
-      console.warn(`Cupertino Pane: Present pane before call currentBreak()`);
-      return null;
-    }
-
-    if (this.breaks['top'] === this.currentBreakpoint) return 'top';
-    if (this.breaks['middle'] === this.currentBreakpoint) return 'middle';
-    if (this.breaks['bottom'] === this.currentBreakpoint) return 'bottom';
-    return null;
-  };
-
   private checkOpacityAttr(val) {
@@ -393,2 +318,7 @@ let attrElements = document.querySelectorAll(`${this.selector} [hide-on-bottom]`);
   private touchStart(t) {
+    // Event emitter
+    this.settings.onDragStart(t as CustomEvent);
+
+    if (this.disableDragEvents) return;
+
     const targetTouch = t.type === 'touchstart' && t.targetTouches && (t.targetTouches[0] || t.changedTouches[0]);
@@ -398,4 +328,2 @@ const screenY = t.type === 'touchstart' ? targetTouch.screenY : t.screenY;
 
-    // Event emitter
-    this.settings.onDragStart();
     this.startP = screenY;
@@ -405,3 +333,3 @@ this.steps.push(this.startP);
 
-  /**
+  /** 
    * Touch Move Event
@@ -411,2 +339,7 @@ * @param t
   private touchMove(t) {
+    // Event emitter
+    this.settings.onDrag(t as CustomEvent);
+
+    if (this.disableDragEvents) return;
+
     // Handle desktop/mobile events
@@ -417,5 +350,2 @@ const targetTouch = t.type === 'touchmove' && t.targetTouches && (t.targetTouches[0] || t.changedTouches[0]);
 
-    // Event emitter
-    this.settings.onDrag();
-
     const translateYRegex = /\.*translateY\((.*)px\)/i;
@@ -459,2 +389,4 @@ const p = parseFloat(translateYRegex.exec(this.paneEl.style.transform)[1]);
   private touchEnd(t) {
+    if (this.disableDragEvents) return;
+
     const targetTouch = t.type === 'touchmove' && t.targetTouches && (t.targetTouches[0] || t.changedTouches[0]);
@@ -511,45 +443,2 @@ const screenY = t.type === 'touchmove' ? targetTouch.screenY : t.screenY;
 
-  public destroy(conf: {animate: boolean} = {animate: false}) {
-    if (!this.isPanePresented()) {
-      console.warn(`Cupertino Pane: Present pane before call destroy()`);
-      return null;
-    }
-
-      // Emit event
-      this.settings.onWillDismiss();
-
-      const resets = () => {
-        this.parentEl.appendChild(this.contentEl);
-        this.parentEl.removeChild(this.wrapperEl);
-        
-        /****** Detach Events *******/
-        this.detachEvents();
-        
-        // Reset vars
-        this.currentBreakpoint = this.breaks[this.settings.initialBreak];
-
-        // Reset styles
-        this.contentEl.style.display = 'none';
-        this.paneEl.style.transform = 'initial';
-
-        // Emit event
-        this.settings.onDidDismiss();
-      };
-
-      if (conf.animate) {
-        this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
-        this.paneEl.style.transform = `translateY(${this.screen_height}px)`;
-
-        if (this.settings.backdrop) {
-          this.backdropEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
-          this.backdropEl.style.backgroundColor = 'rgba(0,0,0,.0)';
-        }
-
-        this.paneEl.addEventListener('transitionend', () => resets());
-        return;
-      } 
-
-      resets();
-  }
-
   private swipeNextPoint = (diff, maxDiff, closest) => {
@@ -661,2 +550,139 @@ if (this.currentBreakpoint === this.breaks['top']) {
 
+  /************************************
+   * Public user methods
+   */
+
+  /**
+   * Disable pane drag events
+   */
+  public disableDrag(): void {
+    this.disableDragEvents = true;
+  }
+
+  /**
+   * Enable pane drag events
+   */  
+  public enableDrag(): void {
+    this.disableDragEvents = false;
+  }
+
+  public moveToBreak(val) {
+    if (!this.isPanePresented()) {
+      console.warn(`Cupertino Pane: Present pane before call moveToBreak()`);
+      return null;
+    }
+
+    if (!this.settings.breaks[val].enabled) {
+      console.warn('Cupertino Pane: %s breakpoint disabled', val);
+      return;
+    }
+
+    this.checkOpacityAttr(this.breaks[val]);
+    this.checkOverflowAttr(this.breaks[val]);
+
+    if (this.settings.backdrop) {
+      this.backdropEl.style.backgroundColor = 'rgba(0,0,0,.4)';
+      this.backdropEl.style.display = 'block';
+    }
+
+    this.currentBreakpoint = this.breaks[val];
+    
+    this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
+    this.paneEl.style.transform = `translateY(${this.breaks[val]}px)`;
+    let initTransitionEv = this.paneEl.addEventListener('transitionend', (t) => {
+      this.paneEl.style.transition = `initial`;
+      initTransitionEv = undefined;
+    });
+  }
+
+  public hide() {
+    if (!this.isPanePresented()) {
+      console.warn(`Cupertino Pane: Present pane before call hide()`);
+      return null;
+    }
+
+    this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
+    this.paneEl.style.transform = `translateY(${this.screen_height}px)`;
+
+    if (this.settings.backdrop) {
+      this.backdropEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
+      this.backdropEl.style.backgroundColor = 'rgba(0,0,0,.0)';
+    }
+
+    let initTransitionEv = this.paneEl.addEventListener('transitionend', (t) => {
+      this.paneEl.style.transition = `initial`;
+
+      if (this.settings.backdrop) {
+        this.backdropEl.style.transition = `initial`;
+        this.backdropEl.style.display = `none`;
+      }
+
+      initTransitionEv = undefined;
+    });
+  }
+
+  public isHidden(): (boolean|null) {
+    if (!this.isPanePresented()) {
+      console.warn(`Cupertino Pane: Present pane before call isHidden()`);
+      return null;
+    }
+    
+    return this.paneEl.style.transform === `translateY(${this.screen_height}px)`;
+  }
+
+  public currentBreak(): (string|null) {
+    if (!this.isPanePresented()) {
+      console.warn(`Cupertino Pane: Present pane before call currentBreak()`);
+      return null;
+    }
+
+    if (this.breaks['top'] === this.currentBreakpoint) return 'top';
+    if (this.breaks['middle'] === this.currentBreakpoint) return 'middle';
+    if (this.breaks['bottom'] === this.currentBreakpoint) return 'bottom';
+    return null;
+  };
+
+  public destroy(conf: {animate: boolean} = {animate: false}) {
+    if (!this.isPanePresented()) {
+      console.warn(`Cupertino Pane: Present pane before call destroy()`);
+      return null;
+    }
+
+      // Emit event
+      this.settings.onWillDismiss();
+
+      const resets = () => {
+        this.parentEl.appendChild(this.contentEl);
+        this.parentEl.removeChild(this.wrapperEl);
+        
+        /****** Detach Events *******/
+        this.detachEvents();
+        
+        // Reset vars
+        this.currentBreakpoint = this.breaks[this.settings.initialBreak];
+
+        // Reset styles
+        this.contentEl.style.display = 'none';
+        this.paneEl.style.transform = 'initial';
+
+        // Emit event
+        this.settings.onDidDismiss();
+      };
+
+      if (conf.animate) {
+        this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
+        this.paneEl.style.transform = `translateY(${this.screen_height}px)`;
+
+        if (this.settings.backdrop) {
+          this.backdropEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
+          this.backdropEl.style.backgroundColor = 'rgba(0,0,0,.0)';
+        }
+
+        this.paneEl.addEventListener('transitionend', () => resets());
+        return;
+      } 
+
+      resets();
+  }
+
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

9957993

increased by0.06%

Number of package files

26

increased by4%

Lines of code

2660

increased by3.62%

Number of lines in readme file

284

increased by3.65%

Worsened metrics

Dev dependency count

11

increased by22.22%

No dependency changes