Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

cupertino-pane

Package Overview
Dependencies
Maintainers
1
Versions
105
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

cupertino-pane - npm Package Compare versions

Comparing version 1.2.7 to 1.2.8

dist/cupertino-pane.esm.js
dist/cupertino-pane.esm.min.js
dist/cupertino-pane.esm.min.js.map
dist/types/breakpoints.d.ts
dist/types/cupertino-pane.d.ts
dist/types/device.d.ts
dist/types/events.d.ts
dist/types/index.d.ts
dist/types/models.d.ts
dist/types/public-api.d.ts
dist/types/settings.d.ts
dist/types/support.d.ts
dist/types/transitions.d.ts
dist/types/z-stack.d.ts
docs/images/notifications.gif
docs/images/z-stack.gif
src/index.ts
src/public-api.ts
src/transitions.ts
src/z-stack.ts

1

CHANGELOG.md

@@ -1,2 +0,1 @@

# Change Log

@@ -3,0 +2,0 @@ All notable changes to this project will be documented in this file.

4

CONTRIBUTING.md

@@ -22,3 +22,3 @@ # How to contribute

```sh
gulp server
npm run serve
```

@@ -28,3 +28,3 @@ ### 4. Changes & Build

# Make bundles
gulp build
npm run build
```

@@ -31,0 +31,0 @@ This will output the files into the dist directory.

29

dist/cupertino-pane.min.js
/**
* Cupertino Pane 1.2.7
* Cupertino Pane 1.2.8
* Multi-functional panes and boards for next generation progressive applications

@@ -10,21 +10,20 @@ * https://github.com/roman-rr/cupertino-pane/

*
* Released on: May 8, 2021
* Released on: December 6, 2021
*/
if(!exports)var exports={__esModule:!0};
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).CupertinoPane=e()}(this,(function(){"use strict";
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
function __awaiter(t,e,s,i){return new(s||(s=Promise))((function(n,r){function o(t){try{h(i.next(t))}catch(t){r(t)}}function a(t){try{h(i.throw(t))}catch(t){r(t)}}function h(t){var e;t.done?n(t.value):(e=t.value,e instanceof s?e:new s((function(t){t(e)}))).then(o,a)}h((i=i.apply(t,e||[])).next())}))}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 backdropFilter(){return CSS.supports("backdrop-filter","blur(0px)")||CSS.supports("-webkit-backdrop-filter","blur(0px)")}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 get pointerEvents(){return!!window.PointerEvent&&"maxTouchPoints"in window.navigator&&window.navigator.maxTouchPoints>0}}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,this.ionic=!!document.querySelector("ion-app");const t=window.navigator.platform,e=window.navigator.userAgent,s=window.screen.width,i=window.screen.height;let n=e.match(/(Android);?[\s\/]+([\d.]+)?/),r=e.match(/(iPad).*OS\s([\d_]+)/),o=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;!r&&u&&Support.touch&&(1024===s&&1366===i||834===s&&1194===i||834===s&&1112===i||768===s&&1024===i)&&(r=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),(r||a||o)&&(this.os="ios",this.ios=!0),a&&!o&&(this.osVersion=a[2].replace(/_/g,"."),this.iphone=!0),r&&(this.osVersion=r[2].replace(/_/g,"."),this.ipad=!0),o&&(this.osVersion=o[3]?o[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||r||o)||!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 Events{constructor(t,e,s,i){this.instance=t,this.settings=e,this.device=s,this.breakpoints=i,this.allowClick=!0,this.disableDragAngle=!1,this.pointerDown=!1,this.contentScrollTop=0,this.steps=[],this.inputBluredbyMove=!1,this.movedByKeyboard=!1,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})(),this.touchStartCb=t=>this.touchStart(t),this.touchMoveBackdropCb=t=>this.touchMoveBackdrop(t),this.touchMoveCb=t=>this.touchMove(t),this.touchEndCb=t=>this.touchEnd(t),this.onClickCb=t=>this.onClick(t),this.onKeyboardShowCb=t=>this.onKeyboardShow(t),this.onKeyboardHideCb=t=>this.onKeyboardHide(t),this.onWindowResizeCb=t=>this.onWindowResize(t)}attachAllEvents(){this.settings.dragBy?this.settings.dragBy.forEach(t=>{const e=document.querySelector(t);e&&this.eventListeners("addEventListener",e)}):this.eventListeners("addEventListener",this.instance.paneEl),this.settings.handleKeyboard&&this.device.cordova&&(window.addEventListener("keyboardWillShow",this.onKeyboardShowCb),window.addEventListener("keyboardWillHide",this.onKeyboardHideCb)),!this.settings.handleKeyboard&&this.device.cordova&&this.device.android&&window.addEventListener("keyboardWillHide",()=>{this.instance.parentEl.scrollTop=0,this.instance.parentEl.parentElement&&(this.instance.parentEl.parentElement.scrollTop=0,this.instance.parentEl.parentElement.parentElement&&(this.instance.parentEl.parentElement.parentElement.scrollTop=0))}),window.addEventListener("resize",this.onWindowResizeCb)}detachAllEvents(){this.settings.dragBy?this.settings.dragBy.forEach(t=>{const e=document.querySelector(t);e&&this.eventListeners("removeEventListener",e)}):this.eventListeners("removeEventListener",this.instance.paneEl),this.settings.handleKeyboard&&this.device.cordova&&(window.removeEventListener("keyboardWillShow",this.onKeyboardShowCb),window.removeEventListener("keyboardWillHide",this.onKeyboardHideCb)),window.removeEventListener("resize",this.onWindowResizeCb)}resetEvents(){this.detachAllEvents(),this.attachAllEvents()}eventListeners(t,e){var s,i,n;if(!Support.touch&&Support.pointerEvents)e[t](this.touchEvents.start,this.touchStartCb,!1),e[t](this.touchEvents.move,this.touchMoveCb,!1),e[t](this.touchEvents.end,this.touchEndCb,!1),null===(s=this.instance.backdropEl)||void 0===s||s[t](this.touchEvents.move,this.touchMoveBackdropCb,!1);else{if(Support.touch){const s=!("touchstart"!==this.touchEvents.start||!Support.passiveListener||!this.settings.passiveListeners)&&{passive:!0,capture:!1};e[t](this.touchEvents.start,this.touchStartCb,s),e[t](this.touchEvents.move,this.touchMoveCb,!!Support.passiveListener&&{passive:!1,capture:!1}),e[t](this.touchEvents.end,this.touchEndCb,s),null===(i=this.instance.backdropEl)||void 0===i||i[t](this.touchEvents.move,this.touchMoveBackdropCb,!!Support.passiveListener&&{passive:!1,capture:!1}),this.touchEvents.cancel&&e[t](this.touchEvents.cancel,this.touchEndCb,s)}(this.settings.simulateTouch&&!this.device.ios&&!this.device.android||this.settings.simulateTouch&&!Support.touch&&this.device.ios)&&(e[t]("mousedown",this.touchStartCb,!1),e[t]("mousemove",this.touchMoveCb,!1),e[t]("mouseup",this.touchEndCb,!1),null===(n=this.instance.backdropEl)||void 0===n||n[t]("mousemove",this.touchMoveBackdropCb,!1))}this.settings.preventClicks&&e[t]("click",this.onClickCb,!0)}touchStart(t){if(this.settings.onDragStart(t),this.allowClick=!0,this.instance.disableDragEvents)return;this.disableDragAngle=!1,this.instance.preventedDismiss=!1;const{clientY:e,clientX:s}=this.getEvetClientYX(t,"touchstart");this.startY=e,this.startX=s,"mousedown"===t.type&&(this.pointerDown=!0),this.contentScrollTop&&this.willScrolled(t)&&this.isDragScrollabe(t.path||t.composedPath())&&(this.startY+=this.contentScrollTop),this.steps.push({posY:this.startY,time:Date.now()})}touchMoveBackdrop(t){this.settings.touchMoveStopPropagation&&t.stopPropagation()}touchMove(t){var e;const{clientY:s,clientX:i,velocityY:n}=this.getEvetClientYX(t,"touchmove");if(t.delta=(null===(e=this.steps[0])||void 0===e?void 0:e.posY)-s,this.settings.onDrag(t),this.instance.disableDragEvents)return void(this.steps=[]);if(this.disableDragAngle)return;if(this.instance.preventedDismiss)return;if(this.settings.touchMoveStopPropagation&&t.stopPropagation(),"mousemove"===t.type&&!this.pointerDown)return;const r=s-this.steps[this.steps.length-1].posY;let o=this.instance.getPanelTransformY()+(this.steps.length<2?r*n:r);if(!this.isFormElement(t.target)||!this.isElementScrollable(t.target)){if(this.steps.length>2&&this.isFormElement(document.activeElement)&&!this.isFormElement(t.target)&&(document.activeElement.blur(),this.inputBluredbyMove=!0),this.settings.touchAngle){let t;const e=i-this.startX,n=s-this.startY;if(t=180*Math.atan2(Math.abs(n),Math.abs(e))/Math.PI,e*e+n*n>=25&&90-t>this.settings.touchAngle&&1===this.steps.length)return void(this.disableDragAngle=!0)}if(this.isDragScrollabe(t.path||t.composedPath())&&"auto"===this.instance.overflowEl.style.overflowY){if(this.instance.overflowEl.addEventListener("scroll",t=>{this.contentScrollTop=t.target.scrollTop}),this.settings.inverse&&this.willScrolled(t))return void(this.contentScrollTop=0);if(!this.settings.inverse&&(o>this.breakpoints.topper&&this.contentScrollTop>0||o<=this.breakpoints.topper))return}if(this.settings.inverse){if(o>=this.breakpoints.topper&&this.settings.upperThanTop){const t=this.instance.screen_height-this.instance.screenHeightOffset,e=(t-this.instance.getPanelTransformY())/(t-this.breakpoints.topper)/8;o=this.instance.getPanelTransformY()+r*e}if(!this.settings.upperThanTop&&o>=this.breakpoints.topper)return void(this.instance.paneEl.style.transform=`translateY(${this.breakpoints.topper}px) translateZ(0px)`)}else{if(!this.settings.upperThanTop&&o<=this.breakpoints.topper)return void(this.instance.paneEl.style.transform=`translateY(${this.breakpoints.topper}px) translateZ(0px)`);if(o<=this.breakpoints.topper&&this.settings.upperThanTop){const t=this.instance.screen_height-this.instance.screenHeightOffset,e=(t-this.instance.getPanelTransformY())/(t-this.breakpoints.topper)/8;o=this.instance.getPanelTransformY()+r*e}if(!this.settings.lowerThanBottom&&o>=this.breakpoints.bottomer)return this.instance.paneEl.style.transform=`translateY(${this.breakpoints.bottomer}px) translateZ(0px)`,void this.instance.checkOpacityAttr(o)}if(!this.instance.preventedDismiss&&this.instance.preventDismissEvent&&this.settings.bottomClose){let t=(-this.breakpoints.topper+this.breakpoints.topper-this.instance.getPanelTransformY())/this.breakpoints.topper/-8;if(o=this.instance.getPanelTransformY()+r*(.5-t),-1*(s-220-this.instance.screen_height)<=this.instance.screen_height-this.breakpoints.bottomer)return this.instance.preventedDismiss=!0,this.settings.onWillDismiss({prevented:!0}),void this.instance.moveToBreak(this.breakpoints.prevBreakpoint)}this.allowClick=!1,this.instance.checkOpacityAttr(o),this.instance.checkOverflowAttr(o),this.instance.doTransition({type:"move",translateY:o}),this.steps.push({posY:s,time:Date.now()})}}touchEnd(t){var e,s;if(this.instance.disableDragEvents)return;"mouseup"===t.type&&(this.pointerDown=!1);let i=this.breakpoints.getClosestBreakY();const n=(null===(e=this.steps[this.steps.length-1])||void 0===e?void 0:e.posY)-(null===(s=this.steps[this.steps.length-2])||void 0===s?void 0:s.posY),r=window.hasOwnProperty("cordova")?this.settings.fastSwipeSensivity+2:this.settings.fastSwipeSensivity;if(Math.abs(n)>=r&&(i=this.instance.swipeNextPoint(n,r,i),this.settings.fastSwipeClose&&this.breakpoints.currentBreakpoint<i))return void this.instance.destroy({animate:!0});let o=!1;this.isFormElement(document.activeElement)&&!this.isFormElement(t.target)&&2===this.steps.length&&(o=!0),this.steps=[],this.breakpoints.currentBreakpoint=i,this.settings.onDragEnd(t),isNaN(n)||o||(this.instance.checkOpacityAttr(this.breakpoints.currentBreakpoint),this.instance.checkOverflowAttr(this.breakpoints.currentBreakpoint),this.settings.bottomClose&&i===this.breakpoints.breaks.bottom?this.instance.destroy({animate:!0}):(this.instance.getPanelTransformY()===i&&this.settings.onTransitionEnd({target:this.instance.paneEl}),this.instance.doTransition({type:"end",translateY:i})))}onClick(t){if(this.allowClick){if(this.settings.clickBottomOpen&&this.breakpoints.breaks.bottom===this.instance.getPanelTransformY()){let t;this.settings.breaks.top.enabled&&(t="top"),this.settings.breaks.middle.enabled&&(t="middle"),this.instance.moveToBreak(t)}}else this.settings.preventClicks&&(t.preventDefault(),t.stopPropagation(),t.stopImmediatePropagation())}onKeyboardShow(t){if(!this.isPaneDescendant(document.activeElement))return;if(!this.isOnViewport())return;this.device.android&&setTimeout(()=>this.fixAndroidResize(),20),this.movedByKeyboard=!0,this.breakpoints.prevBreakpoint=Object.entries(this.breakpoints.breaks).find(t=>t[1]===this.instance.getPanelTransformY())[0];let e=this.settings.breaks[this.instance.currentBreak()].height+t.keyboardHeight;window.matchMedia("(orientation: landscape)").matches&&(e=this.instance.screen_height),e>this.instance.screen_height-80&&(e=this.instance.screen_height-80),e-50>=this.settings.breaks[this.instance.currentBreak()].height&&this.instance.moveToHeight(e),setTimeout(()=>{this.instance.setOverflowHeight(t.keyboardHeight-this.settings.topperOverflowOffset),this.instance.overflowEl.scrollTop=document.activeElement.offsetTop},300)}onKeyboardHide(t){this.movedByKeyboard&&this.isOnViewport()&&(this.device.android&&this.fixAndroidResize(),this.movedByKeyboard=!1,this.instance.setOverflowHeight(),this.inputBluredbyMove?this.inputBluredbyMove=!1:this.instance.isHidden()||this.instance.moveToBreak(this.breakpoints.prevBreakpoint))}onWindowResize(t){return __awaiter(this,void 0,void 0,(function*(){yield new Promise(t=>setTimeout(()=>t(!0),150)),this.instance.updateScreenHeights(),this.breakpoints.buildBreakpoints(JSON.parse(this.breakpoints.lockedBreakpoints))}))}getEvetClientYX(t,e){var s,i;const n=t.type===e&&t.targetTouches&&(t.targetTouches[0]||t.changedTouches[0]),r=t.type===e?n.clientY:t.clientY,o=t.type===e?n.clientX:t.clientX,a=Date.now()-((null===(s=this.steps[this.steps.length-1])||void 0===s?void 0:s.time)||0);return{clientY:r,clientX:o,velocityY:Math.abs(r-((null===(i=this.steps[this.steps.length-1])||void 0===i?void 0:i.posY)||0))/a}}fixAndroidResize(){if(!this.instance.paneEl)return;document.querySelector("ion-app");window.requestAnimationFrame(()=>{this.instance.wrapperEl.style.width="100%",this.instance.paneEl.style.position="absolute",window.requestAnimationFrame(()=>{this.instance.wrapperEl.style.width="unset",this.instance.paneEl.style.position="fixed"})})}isDragScrollabe(t){return!!t.find(t=>t===this.instance.overflowEl)}willScrolled(t){return!(!this.isElementScrollable(this.instance.overflowEl)||"hidden"===this.instance.overflowEl.style.overflow||!this.isDragScrollabe(t.path||t.composedPath()))}isPaneDescendant(t){let e=t.parentNode;for(;null!=e;){if(e==this.instance.paneEl)return!0;e=e.parentNode}return!1}isFormElement(t){return!!(t&&t.tagName&&["input","select","option","textarea","button","label"].includes(t.tagName.toLowerCase()))}isElementScrollable(t){return t.scrollHeight>t.clientHeight}isOnViewport(){return!this.instance.paneEl||0!==this.instance.paneEl.offsetWidth||0!==this.instance.paneEl.offsetHeight}}class Settings{constructor(){this.instance={initialBreak:"middle",inverse:!1,parentElement:null,followerElement:null,cssClass:null,fitHeight:!1,maxFitHeight:null,fitScreenHeight:!0,backdrop:!1,backdropOpacity:.4,animationType:"ease",animationDuration:300,dragBy:null,bottomOffset:0,bottomClose:!1,fastSwipeClose:!1,fastSwipeSensivity:3,freeMode:!1,buttonDestroy:!0,buttonClose:!0,topperOverflow:!0,topperOverflowOffset:0,lowerThanBottom:!0,upperThanTop:!1,showDraggable:!0,draggableOver:!1,clickBottomOpen:!0,preventClicks:!0,handleKeyboard:!0,simulateTouch:!0,passiveListeners:!0,touchMoveStopPropagation:!1,touchAngle:null,breaks:{},zStack:null,onDidDismiss:()=>{},onWillDismiss:()=>{},onDidPresent:()=>{},onWillPresent:()=>{},onDragStart:()=>{},onDrag:()=>{},onDragEnd:()=>{},onBackdropTap:()=>{},onTransitionStart:()=>{},onTransitionEnd:()=>{}}}}class Breakpoints{constructor(t,e){this.instance=t,this.settings=e,this.breaks={},this.calcHeightInProcess=!1,this.brs=[],this.defaultBreaksConf={top:{enabled:!0,height:window.innerHeight-47.25},middle:{enabled:!0,height:300},bottom:{enabled:!0,height:100}}}buildBreakpoints(t,e=0){var s,i,n,r,o;return __awaiter(this,void 0,void 0,(function*(){if(this.settings.bottomOffset=e||this.settings.bottomOffset,this.breaks={top:this.instance.screenHeightOffset,middle:this.instance.screenHeightOffset,bottom:this.instance.screenHeightOffset},this.settings.fitHeight){this.settings.fitScreenHeight=!1,this.settings.initialBreak="top",this.settings.topperOverflow=!1;let e=yield this.getPaneFitHeight();this.settings.maxFitHeight&&e>this.settings.maxFitHeight&&(e=this.settings.maxFitHeight,this.settings.topperOverflow=!0),(t={top:{enabled:!0,height:e},middle:{enabled:!1}}).top.bounce=null===(i=null===(s=this.settings.breaks)||void 0===s?void 0:s.top)||void 0===i?void 0:i.bounce,t.bottom=(null===(n=this.settings.breaks)||void 0===n?void 0:n.bottom)||{enabled:!0,height:0}}if(["top","middle","bottom"].forEach(e=>{var s;this.breaks[e]-=this.settings.bottomOffset,this.settings.breaks[e]||(this.settings.breaks[e]=this.defaultBreaksConf[e]),t&&t[e]&&(this.settings.breaks[e]=t[e]),this.settings.fitScreenHeight&&((null===(s=this.settings.breaks[e])||void 0===s?void 0:s.height)>this.instance.screen_height&&(this.settings.breaks[e].height=this.instance.screen_height-this.settings.bottomOffset),this.settings.breaks.top&&this.settings.breaks.middle&&this.settings.breaks.top.height-50<=this.settings.breaks.middle.height&&(this.settings.breaks.middle.enabled=!1,this.settings.initialBreak="top")),this.settings.fitHeight&&"top"===e&&(this.settings.breaks[e].height>this.instance.screen_height?(this.settings.breaks[e].height=this.instance.screen_height-2*this.settings.bottomOffset,this.settings.topperOverflow=!0):this.instance.overflowEl&&!this.settings.maxFitHeight&&(this.settings.topperOverflow=!1,this.instance.overflowEl.style.overflowY="hidden")),this.settings.breaks[e]&&this.settings.breaks[e].enabled&&this.settings.breaks[e].height&&(this.settings.inverse?this.breaks[e]=this.settings.breaks[e].height+this.settings.bottomOffset:this.breaks[e]-=this.settings.breaks[e].height)}),this.lockedBreakpoints||(this.lockedBreakpoints=JSON.stringify(this.settings.breaks)),this.instance.isPanePresented()||this.settings.breaks[this.settings.initialBreak].enabled||console.warn("Cupertino Pane: Please set initialBreak for enabled breakpoint"),this.settings.breaks.middle.height>=this.settings.breaks.top.height&&console.warn("Cupertino Pane: Please set middle height lower than top height"),this.settings.breaks.middle.height<=this.settings.breaks.bottom.height&&console.warn("Cupertino Pane: Please set bottom height lower than middle height"),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)=>e<t?e:t),this.bottomer=this.brs.reduce((t,e)=>Math.abs(e)>Math.abs(t)?e:t),this.settings.inverse&&(this.topper=this.bottomer),this.instance.isPanePresented()||(this.currentBreakpoint=this.breaks[this.settings.initialBreak],!this.settings.inverse||this.settings.breaks.bottom.enabled||this.settings.breaks.middle.enabled||(this.settings.topperOverflow=!1)),this.instance.isPanePresented()){if((null===(r=this.settings.breaks[this.prevBreakpoint])||void 0===r?void 0:r.enabled)&&this.instance.moveToBreak(this.prevBreakpoint),!(null===(o=this.settings.breaks[this.prevBreakpoint])||void 0===o?void 0:o.enabled)){let t=this.instance.swipeNextPoint(1,1,this.getClosestBreakY());const e=Object.entries(this.breaks).find(e=>e[1]===t);this.instance.moveToBreak(e[0])}this.instance.paneEl.style.top=this.settings.inverse?`-${this.bottomer-this.settings.bottomOffset}px`:"unset",this.instance.paneEl.style.height=this.instance.getPaneHeight()+"px",this.instance.scrollElementInit(),this.instance.checkOpacityAttr(this.currentBreakpoint),this.instance.checkOverflowAttr(this.currentBreakpoint)}}))}getCurrentBreakName(){return this.breaks.top===this.currentBreakpoint?"top":this.breaks.middle===this.currentBreakpoint?"middle":this.breaks.bottom===this.currentBreakpoint?"bottom":null}getPaneFitHeight(){return __awaiter(this,void 0,void 0,(function*(){this.calcHeightInProcess=!0;let t,e=this.instance.el.querySelectorAll("img");this.instance.el.style.height="unset",this.instance.rendered||(this.instance.el.style.visibility="hidden",this.instance.el.style.pointerEvents="none",this.instance.el.style.display="block",this.instance.wrapperEl.style.visibility="hidden",this.instance.wrapperEl.style.pointerEvents="none",this.instance.wrapperEl.style.display="block");let s=[];e.length&&(s=Array.from(e).map(t=>new Promise(e=>{t.complete&&t.naturalHeight?e(!0):t.onload=()=>e(!0)}))),s.push(new Promise(t=>setTimeout(()=>t(!0),this.instance.rendered?0:150))),yield Promise.all(s);let i=parseInt(document.defaultView.getComputedStyle(this.instance.el,"").getPropertyValue("height")),n=parseInt(document.defaultView.getComputedStyle(this.instance.el,"").getPropertyValue("margin-top"))+parseInt(document.defaultView.getComputedStyle(this.instance.el,"").getPropertyValue("margin-bottom")),r=parseInt(document.defaultView.getComputedStyle(this.instance.el.parentElement,"").getPropertyValue("padding-bottom"));return t=i+n,t+=this.instance.el.offsetTop,t+=r,this.instance.rendered||(this.instance.el.style.visibility="unset",this.instance.el.style.pointerEvents="unset",this.instance.el.style.display="none",this.instance.wrapperEl.style.visibility="unset",this.instance.wrapperEl.style.pointerEvents="unset",this.instance.wrapperEl.style.display="none"),this.calcHeightInProcess=!1,t}))}getClosestBreakY(){return this.brs.reduce((t,e)=>Math.abs(e-this.instance.getPanelTransformY())<Math.abs(t-this.instance.getPanelTransformY())?e:t)}}class CupertinoPane{constructor(t,e={}){this.selector=t,this.disableDragEvents=!1,this.preventDismissEvent=!1,this.preventedDismiss=!1,this.rendered=!1,this.settings=(new Settings).instance,this.device=new Device,this.zStackDefaults={pushElements:null,minPushHeight:null,cardYOffset:0,cardZScale:.93,cardContrast:.85,stackZAngle:160},this.swipeNextPoint=(t,e,s)=>{let i={},n={};if(this.settings.inverse?(i.top=this.breakpoints.breaks.bottom,i.middle=this.breakpoints.breaks.middle,i.bottom=this.breakpoints.breaks.top,n.top=Object.assign({},this.settings.breaks.bottom),n.middle=Object.assign({},this.settings.breaks.middle),n.bottom=Object.assign({},this.settings.breaks.top)):(i=Object.assign({},this.breakpoints.breaks),n=Object.assign({},this.settings.breaks)),this.breakpoints.currentBreakpoint===i.top){if(t>e){if(n.middle.enabled)return i.middle;if(n.bottom.enabled)return i.middle<s?s:i.bottom}return i.top}if(this.breakpoints.currentBreakpoint===i.middle)return t<-e&&n.top.enabled?i.top:t>e&&n.bottom.enabled?i.bottom:i.middle;if(this.breakpoints.currentBreakpoint===i.bottom){if(t<-e){if(n.middle.enabled)return i.middle>s?s:i.middle;if(n.top.enabled)return i.top}return i.bottom}return s},t instanceof HTMLElement?this.selector=t:this.selector=document.querySelector(t),this.selector?this.isPanePresented()?console.error("Cupertino Pane: specified selector or DOM element already in use",this.selector):(this.el=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,this.breakpoints=new Breakpoints(this,this.settings),this.events=new Events(this,this.settings,this.device,this.breakpoints)):console.warn("Cupertino Pane: wrong selector or DOM element specified",this.selector)}drawBaseElements(){this.parentEl=this.settings.parentElement,this.wrapperEl=document.createElement("div"),this.wrapperEl.classList.add("cupertino-pane-wrapper"),this.settings.inverse&&this.wrapperEl.classList.add("inverse"),this.settings.cssClass&&(this.wrapperEl.className+=" "+this.settings.cssClass);let t="";t+="\n .cupertino-pane-wrapper {\n display: none;\n position: absolute;\n top: 0;\n left: 0;\n }\n ",this.paneEl=document.createElement("div"),this.paneEl.style.transform=`translateY(${this.screenHeightOffset}px) translateZ(0px)`,this.paneEl.classList.add("pane"),t+="\n .cupertino-pane-wrapper .pane {\n position: fixed;\n z-index: 11;\n width: 100%;\n max-width: 500px;\n left: 0px;\n right: 0px;\n margin-left: auto;\n margin-right: auto;\n background: var(--cupertino-pane-background, #ffffff);\n color: var(--cupertino-pane-color, #333333);\n box-shadow: var(--cupertino-pane-shadow, 0 4px 16px rgba(0,0,0,.12));\n will-change: transform;\n padding-top: 15px; \n border-radius: var(--cupertino-pane-border-radius, 20px) \n var(--cupertino-pane-border-radius, 20px) \n 0 0;\n }\n .cupertino-pane-wrapper.inverse .pane {\n padding-bottom: 15px; \n border-radius: 0 0 20px 20px;\n border-radius: 0 0\n var(--cupertino-pane-border-radius, 20px) \n var(--cupertino-pane-border-radius, 20px);\n }\n ",this.draggableEl=document.createElement("div"),this.draggableEl.classList.add("draggable"),this.settings.draggableOver&&this.draggableEl.classList.add("over"),t+="\n .cupertino-pane-wrapper .draggable {\n padding: 5px;\n position: absolute;\n left: 0;\n right: 0;\n margin-left: auto;\n margin-right: auto;\n height: 30px;\n z-index: 12;\n top: 0;\n bottom: initial;\n }\n .cupertino-pane-wrapper .draggable.over {\n top: -30px;\n padding: 15px;\n }\n .cupertino-pane-wrapper.inverse .draggable {\n bottom: 0;\n top: initial;\n }\n .cupertino-pane-wrapper.inverse .draggable.over {\n bottom: -30px;\n top: initial;\n }\n ",this.moveEl=document.createElement("div"),this.moveEl.classList.add("move"),t+=`\n .cupertino-pane-wrapper .move {\n margin: 0 auto;\n height: 5px;\n background: var(--cupertino-pane-move-background, #c0c0c0);\n width: 36px;\n border-radius: 4px;\n }\n .cupertino-pane-wrapper .draggable.over .move {\n width: 70px; \n background: var(--cupertino-pane-move-background, rgba(225, 225, 225, 0.6));\n ${Support.backdropFilter?"\n backdrop-filter: saturate(180%) blur(20px);\n -webkit-backdrop-filter: saturate(180%) blur(20px);\n ":""}\n }\n .cupertino-pane-wrapper.inverse .move {\n margin-top: 15px;\n }\n .cupertino-pane-wrapper.inverse .draggable.over .move {\n margin-top: -5px;\n }\n `,this.destroyButtonEl=document.createElement("div"),this.destroyButtonEl.classList.add("destroy-button"),t+="\n .cupertino-pane-wrapper .destroy-button {\n width: 26px;\n height: 26px;\n position: absolute;\n background: var(--cupertino-pane-destroy-button-background, #ebebeb);\n fill: var(--cupertino-pane-icon-close-color, #7a7a7e);\n right: 20px;\n z-index: 14;\n border-radius: 100%;\n top: 16px;\n }\n ",this.contentEl=this.el,this.contentEl.style.transition=`opacity ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.contentEl.style.overflowX="hidden",t+="\n .cupertino-pane-wrapper .backdrop {\n overflow: hidden;\n position: fixed;\n width: 100%;\n bottom: 0;\n right: 0;\n left: 0;\n top: 0;\n display: none;\n z-index: 10;\n }\n ",this.addStyle(t),this.parentEl.appendChild(this.wrapperEl),this.wrapperEl.appendChild(this.paneEl),this.paneEl.appendChild(this.contentEl),this.settings.showDraggable&&(this.paneEl.appendChild(this.draggableEl),this.draggableEl.appendChild(this.moveEl))}present(t={animate:!1}){var e;return __awaiter(this,void 0,void 0,(function*(){if(this.el)if(this.isPanePresented()&&this.rendered)this.moveToBreak(this.settings.initialBreak);else{if(!this.isPanePresented()||this.rendered){if(this.settings.onWillPresent(),this.updateScreenHeights(),this.drawBaseElements(),yield this.setBreakpoints(),this.paneEl.style.height=this.getPaneHeight()+"px",this.settings.inverse&&(this.paneEl.style.top=`-${this.breakpoints.bottomer-this.settings.bottomOffset}px`),this.wrapperEl.style.display="block",this.contentEl.style.display="block",this.wrapperEl.classList.add("rendered"),this.rendered=!0,this.settings.followerElement){if(!document.querySelector(this.settings.followerElement))return void console.warn("Cupertino Pane: wrong follower element selector specified",this.settings.followerElement);this.followerEl=document.querySelector(this.settings.followerElement),this.followerEl.style.willChange="transform, border-radius",this.followerEl.style.transform="translateY(0px) translateZ(0px)",this.followerEl.style.transition=`all ${this.settings.animationDuration}ms ${this.getTimingFunction(null===(e=this.settings.breaks[this.currentBreak()])||void 0===e?void 0:e.bounce)} 0s`}return this.settings.zStack&&(this.setZstackConfig(this.settings.zStack),this.setPushMultiplicators()),this.settings.buttonClose&&this.settings.buttonDestroy&&!this.settings.inverse&&(this.paneEl.appendChild(this.destroyButtonEl),this.destroyButtonEl.addEventListener("click",t=>this.destroy({animate:!0,destroyButton:!0})),this.destroyButtonEl.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">\n <path 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.settings.freeMode&&(this.settings.lowerThanBottom=!1),this.settings.backdrop&&this.renderBackdrop(),this.checkOpacityAttr(this.breakpoints.currentBreakpoint),this.device.android&&(document.body.style.overscrollBehaviorY="none"),this.events.attachAllEvents(),t.animate?yield this.doTransition({type:"present",translateY:this.breakpoints.breaks[this.settings.initialBreak]}):(this.breakpoints.prevBreakpoint=this.settings.initialBreak,this.paneEl.style.transform=`translateY(${this.breakpoints.breaks[this.settings.initialBreak]}px) translateZ(0px)`,this.settings.backdrop&&(this.backdropEl.style.display="block"),this.settings.zStack&&this.settings.zStack.pushElements.forEach(t=>this.pushTransition(document.querySelector(t),this.breakpoints.breaks[this.settings.initialBreak],"unset")),this.settings.onDidPresent()),yield new Promise(t=>setTimeout(()=>t(!0),150)),this.scrollElementInit(),this.checkOverflowAttr(this.breakpoints.currentBreakpoint),this}console.warn("Cupertino Pane: specified selector or DOM element already in use",this.selector)}}))}getPaneHeight(){return this.settings.inverse?this.breakpoints.bottomer-this.settings.bottomOffset:this.screen_height-this.breakpoints.topper-this.settings.bottomOffset}updateScreenHeights(){this.settings.inverse?(this.screen_height=window.innerHeight,this.screenHeightOffset=0):(this.screen_height=window.innerHeight,this.screenHeightOffset=window.innerHeight)}scrollElementInit(){let t=this.el.querySelectorAll("[overflow-y]");!t.length||t.length>1?this.overflowEl=this.contentEl:(this.overflowEl=t[0],this.overflowEl.style.overflowX="hidden"),this.settings.topperOverflow&&(this.settings.upperThanTop&&console.warn('Cupertino Pane: "upperThanTop" allowed for disabled "topperOverflow"'),this.setOverflowHeight())}setOverflowHeight(t=0){this.settings.inverse?this.overflowEl.style.height=this.getPaneHeight()-30-this.settings.topperOverflowOffset-this.overflowEl.offsetTop+"px":this.overflowEl.style.height=this.getPaneHeight()-this.settings.topperOverflowOffset-this.overflowEl.offsetTop-t+"px"}checkOpacityAttr(t){let e=this.el.querySelectorAll("[hide-on-bottom]");e.length&&(this.settings.inverse||e.forEach(e=>{e.style.transition=`opacity ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,e.style.opacity=t>=this.breakpoints.breaks.bottom?"0":"1"}))}checkOverflowAttr(t){this.settings.topperOverflow&&this.overflowEl&&(this.settings.inverse?this.overflowEl.style.overflowY=t>=this.breakpoints.bottomer?"auto":"hidden":this.overflowEl.style.overflowY=t<=this.breakpoints.topper?"auto":"hidden")}isPanePresented(){let t=Array.from(document.querySelectorAll(".cupertino-pane-wrapper.rendered"));return!!t.length&&!!t.find(t=>t.contains(this.selector))}getTimingFunction(t){return t?"cubic-bezier(0.175, 0.885, 0.370, 1.120)":this.settings.animationType}isBackdropPresented(){return!!document.querySelector(".cupertino-pane-wrapper .backdrop")}renderBackdrop(){this.backdropEl=document.createElement("div"),this.backdropEl.classList.add("backdrop"),this.backdropEl.style.transition=`all ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.backdropEl.style.backgroundColor=`rgba(0,0,0, ${this.settings.backdropOpacity})`,this.wrapperEl.appendChild(this.backdropEl),this.backdropEl.addEventListener("click",t=>this.settings.onBackdropTap())}addStyle(t){if(document.querySelector("#cupertino-panes-internal"))return;const e=document.createElement("style");e.id="cupertino-panes-internal",t=t.replace(/\s\s+/g," "),e.textContent=t,document.head.prepend(e)}setPushMultiplicators(){this.settings.zStack.pushElements.forEach(t=>{let e=document.querySelector(t),s=this.getPushMulitplicator(e);s=s?s+1:1,e.style.setProperty("--push-multiplicator",""+s)})}clearPushMultiplicators(){for(let t=0;t<this.settings.zStack.pushElements.length;t++){let e=document.querySelector(this.settings.zStack.pushElements[t]),s=this.getPushMulitplicator(e);s-=1,s?e.style.setProperty("--push-multiplicator",""+s):e.style.removeProperty("--push-multiplicator")}}getPushMulitplicator(t){let e=t.style.getPropertyValue("--push-multiplicator");return parseInt(e)}setZstackConfig(t){this.settings.zStack=t?Object.assign(Object.assign({},this.zStackDefaults),t):null}backdrop(t={show:!0}){if(!this.isPanePresented())return console.warn("Cupertino Pane: Present pane before call backdrop()"),null;this.isBackdropPresented()||(this.renderBackdrop(),this.events.resetEvents());const e=()=>{this.backdropEl.style.transition="initial",this.backdropEl.style.display="none",this.backdropEl.removeEventListener("transitionend",e)};if(this.backdropEl.style.transition=`all ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.backdropEl.style.backgroundColor="rgba(0,0,0,.0)",t.show)this.backdropEl.style.display="block",setTimeout(()=>{this.backdropEl.style.backgroundColor=`rgba(0,0,0, ${this.settings.backdropOpacity})`},50);else{if("none"===this.backdropEl.style.display)return;this.backdropEl.addEventListener("transitionend",e)}}getPanelTransformY(){return parseFloat(/\.*translateY\((.*)px\)/i.exec(this.paneEl.style.transform)[1])}preventDismiss(t=!1){this.preventDismissEvent=t}disableDrag(){this.disableDragEvents=!0}enableDrag(){this.disableDragEvents=!1}setBreakpoints(t,e){return __awaiter(this,void 0,void 0,(function*(){!this.isPanePresented()||t?yield this.breakpoints.buildBreakpoints(t,e):console.warn("Cupertino Pane: Provide any breaks configuration")}))}calcFitHeight(){return __awaiter(this,void 0,void 0,(function*(){return this.wrapperEl&&this.el?this.breakpoints.calcHeightInProcess?(console.warn("Cupertino Pane: calcFitHeight() already in process"),null):void(yield this.breakpoints.buildBreakpoints(this.breakpoints.lockedBreakpoints)):null}))}moveToBreak(t){if(!this.isPanePresented())return console.warn("Cupertino Pane: Present pane before call moveToBreak()"),null;this.settings.breaks[t].enabled?(this.checkOpacityAttr(this.breakpoints.breaks[t]),this.checkOverflowAttr(this.breakpoints.breaks[t]),this.doTransition({type:"breakpoint",translateY:this.breakpoints.breaks[t]}),this.breakpoints.currentBreakpoint=this.breakpoints.breaks[t]):console.warn("Cupertino Pane: %s breakpoint disabled",t)}moveToHeight(t){if(!this.isPanePresented())return console.warn("Cupertino Pane: Present pane before call moveToHeight()"),null;let e=this.screenHeightOffset?this.screen_height-t:t;this.checkOpacityAttr(e),this.doTransition({type:"breakpoint",translateY:e})}hide(){return this.isPanePresented()?this.isHidden()?(console.warn("Cupertino Pane: Pane already hidden"),null):void this.doTransition({type:"hide",translateY:this.screenHeightOffset}):(console.warn("Cupertino Pane: Present pane before call hide()"),null)}isHidden(){return this.isPanePresented()?this.paneEl.style.transform===`translateY(${this.screenHeightOffset}px) translateZ(0px)`:(console.warn("Cupertino Pane: Present pane before call isHidden()"),null)}currentBreak(){return this.isPanePresented()?this.breakpoints.getCurrentBreakName():(console.warn("Cupertino Pane: Present pane before call currentBreak()"),null)}destroyResets(){this.parentEl.appendChild(this.contentEl),this.wrapperEl.remove(),this.events.detachAllEvents(),this.settings.zStack,delete this.rendered,delete this.breakpoints.prevBreakpoint,this.contentEl.style.display="none"}destroy(t={animate:!1,destroyButton:!1}){return __awaiter(this,void 0,void 0,(function*(){if(!this.isPanePresented())return console.warn("Cupertino Pane: Present pane before call destroy()"),null;this.preventDismissEvent?this.preventedDismiss||(this.settings.onWillDismiss({prevented:!0}),this.moveToBreak(this.breakpoints.prevBreakpoint)):(this.settings.onWillDismiss(),t.animate?yield this.doTransition({type:"destroy",translateY:this.screenHeightOffset,destroyButton:t.destroyButton}):(this.destroyResets(),this.settings.onDidDismiss({destroyButton:t.destroyButton})))}))}pushTransition(t,e,s){let i=this.settings.zStack.pushElements;t.style.transition=s,e=this.screenHeightOffset-e;const n=this.settings.zStack.minPushHeight?this.settings.zStack.minPushHeight:this.screenHeightOffset-this.breakpoints.bottomer,r=this.screenHeightOffset-this.breakpoints.topper;let o=this.getPushMulitplicator(t),a=Math.pow(this.settings.zStack.cardZScale,o),h=Math.pow(this.settings.zStack.cardZScale,o-1),l=6+this.settings.zStack.cardYOffset,p=l*o*-1,c=p+l,d=Math.pow(this.settings.zStack.cardContrast,o),u=Math.pow(this.settings.zStack.cardContrast,o-1);const g=(s,n,r,o)=>{let a=Math.pow(s,this.settings.zStack.stackZAngle/100);t.style.transform=`translateY(${n*(a/s)}px) scale(${s})`,t.style.borderRadius=o+"px",t.style.filter=`contrast(${r})`;let h=document.querySelector(i[i.length-1]);e||t.className!==h.className||this.clearPushMultiplicators()};if(e<=n)return void g(h,c,u,0);const b=(t,s)=>{let i=-1*(r*s-n*t);return i-=(t-s)*e,i/=n-r,i>s&&(i=s),i<t&&(i=t),i};g(b(a,h),b(p,c),b(d,u),-1*b(-10,0))}doTransition(t={}){return new Promise(e=>{var s;if("move"===t.type)return this.paneEl.style.transition="all 0ms linear 0ms",this.paneEl.style.transform=`translateY(${t.translateY}px) translateZ(0px)`,this.followerEl&&(this.followerEl.style.transition="all 0ms linear 0ms",this.followerEl.style.transform=`translateY(${t.translateY-this.breakpoints.breaks[this.settings.initialBreak]}px) translateZ(0px)`),this.settings.zStack&&this.settings.zStack.pushElements.forEach(t=>this.pushTransition(document.querySelector(t),this.getPanelTransformY(),"all 0ms linear 0ms")),e(!0);const i=()=>("destroy"===t.type&&this.destroyResets(),this.paneEl.style.transition="initial",this.followerEl&&(this.followerEl.style.transition="initial"),this.settings.backdrop&&("destroy"!==t.type&&"hide"!==t.type||(this.backdropEl.style.transition="initial",this.backdropEl.style.display="none")),"present"===t.type&&this.settings.onDidPresent(),"destroy"===t.type&&this.settings.onDidDismiss({destroyButton:t.destroyButton}),this.settings.onTransitionEnd({target:document.body.contains(this.paneEl)?this.paneEl:null}),this.paneEl.removeEventListener("transitionend",i),e(!0));if("breakpoint"===t.type||"end"===t.type||"present"===t.type||"hide"===t.type||"destroy"===t.type){if(this.settings.backdrop&&(this.isHidden()||"hide"===t.type||"destroy"===t.type||"present"===t.type)&&(this.backdropEl.style.backgroundColor="rgba(0,0,0,.0)",this.backdropEl.style.transition=`all ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,"hide"!==t.type&&"destroy"!==t.type&&(this.backdropEl.style.display="block",setTimeout(()=>{this.backdropEl.style.backgroundColor=`rgba(0,0,0, ${this.settings.backdropOpacity})`},50))),"end"===t.type&&this.settings.freeMode)return e(!0);const n=Object.entries(this.breakpoints.breaks).find(e=>e[1]===t.translateY);let r=n&&(null===(s=this.settings.breaks[n[0]])||void 0===s?void 0:s.bounce);const o=this.getTimingFunction(r);this.paneEl.style.transition=`transform ${this.settings.animationDuration}ms ${o} 0s`,this.followerEl&&(this.followerEl.style.transition=`transform ${this.settings.animationDuration}ms ${o} 0s`),this.settings.zStack&&setTimeout(()=>{this.settings.zStack.pushElements.forEach(e=>this.pushTransition(document.querySelector(e),t.translateY,`all ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`))},this.settings.zStack.cardYOffset&&"present"===t.type?50:0),setTimeout(()=>{this.settings.onTransitionStart({translateY:{new:t.translateY}}),this.paneEl.style.transform=`translateY(${t.translateY}px) translateZ(0px)`,this.followerEl&&(this.followerEl.style.transform=`translateY(${t.translateY-this.breakpoints.breaks[this.settings.initialBreak]}px) translateZ(0px)`)},"present"===t.type?50:0);let a=Object.entries(this.breakpoints.breaks).find(e=>e[1]===t.translateY);a&&(this.breakpoints.prevBreakpoint=a[0]),this.paneEl.addEventListener("transitionend",i)}})}}exports.CupertinoPane=CupertinoPane;
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */function t(t,e,s,i){return new(s||(s=Promise))((function(n,r){function o(t){try{h(i.next(t))}catch(t){r(t)}}function a(t){try{h(i.throw(t))}catch(t){r(t)}}function h(t){var e;t.done?n(t.value):(e=t.value,e instanceof s?e:new s((function(t){t(e)}))).then(o,a)}h((i=i.apply(t,e||[])).next())}))}class e{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 backdropFilter(){return CSS.supports("backdrop-filter","blur(0px)")||CSS.supports("-webkit-backdrop-filter","blur(0px)")}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 get pointerEvents(){return!!window.PointerEvent&&"maxTouchPoints"in window.navigator&&window.navigator.maxTouchPoints>0}}class s{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,this.ionic=!!document.querySelector("ion-app");const t=window.navigator.platform,s=window.navigator.userAgent,i=window.screen.width,n=window.screen.height;let r=s.match(/(Android);?[\s\/]+([\d.]+)?/),o=s.match(/(iPad).*OS\s([\d_]+)/),a=s.match(/(iPod)(.*OS\s([\d_]+))?/),h=!this.ipad&&s.match(/(iPhone\sOS|iOS)\s([\d_]+)/),l=s.indexOf("MSIE ")>=0||s.indexOf("Trident/")>=0,c=s.indexOf("Edge/")>=0,p=s.indexOf("Gecko/")>=0&&s.indexOf("Firefox/")>=0,d="Win32"===t,u=s.toLowerCase().indexOf("electron")>=0,g="MacIntel"===t;!o&&g&&e.touch&&(1024===i&&1366===n||834===i&&1194===n||834===i&&1112===n||768===i&&1024===n)&&(o=s.match(/(Version)\/([\d.]+)/),g=!1),this.ie=l,this.edge=c,this.firefox=p,r&&!d&&(this.os="android",this.osVersion=r[2],this.android=!0,this.androidChrome=s.toLowerCase().indexOf("chrome")>=0),(o||h||a)&&(this.os="ios",this.ios=!0),h&&!a&&(this.osVersion=h[2].replace(/_/g,"."),this.iphone=!0),o&&(this.osVersion=o[2].replace(/_/g,"."),this.ipad=!0),a&&(this.osVersion=a[3]?a[3].replace(/_/g,"."):null,this.ipod=!0),this.ios&&this.osVersion&&s.indexOf("Version/")>=0&&"10"===this.osVersion.split(".")[0]&&(this.osVersion=s.toLowerCase().split("version/")[1].split(" ")[0]),this.webView=!(!(h||o||a)||!s.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)||u,this.desktop&&(this.electron=u,this.macos=g,this.windows=d,this.macos&&(this.os="macos"),this.windows&&(this.os="windows")),this.pixelRatio=window.devicePixelRatio||1}}class i{constructor(t,s,i,n,r){this.instance=t,this.settings=s,this.device=i,this.breakpoints=n,this.transitions=r,this.allowClick=!0,this.disableDragAngle=!1,this.pointerDown=!1,this.contentScrollTop=0,this.steps=[],this.inputBluredbyMove=!1,this.keyboardVisible=!1,this.isScrolling=!1,this.touchEvents=(()=>{const t=["touchstart","touchmove","touchend","touchcancel"];let s=["mousedown","mousemove","mouseup"];e.pointerEvents&&(s=["pointerdown","pointermove","pointerup"]);const i={start:t[0],move:t[1],end:t[2],cancel:t[3]},n={start:s[0],move:s[1],end:s[2]};return e.touch||!this.settings.simulateTouch?i:n})(),this.touchStartCb=t=>this.touchStart(t),this.touchMoveBackdropCb=t=>this.touchMoveBackdrop(t),this.touchMoveCb=t=>this.touchMove(t),this.touchEndCb=t=>this.touchEnd(t),this.onScrollCb=t=>this.onScroll(t),this.onClickCb=t=>this.onClick(t),this.onKeyboardShowCb=t=>this.onKeyboardShow(t),this.onKeyboardWillHideCb=t=>this.onKeyboardWillHide(t),this.onWindowResizeCb=t=>this.onWindowResize(t)}attachAllEvents(){this.settings.dragBy?this.settings.dragBy.forEach((t=>{const e=document.querySelector(t);e&&this.eventListeners("addEventListener",e)})):this.eventListeners("addEventListener",this.instance.paneEl),this.settings.topperOverflow&&this.instance.overflowEl.addEventListener("scroll",this.onScrollCb),this.settings.handleKeyboard&&this.device.cordova&&(window.addEventListener("keyboardWillShow",this.onKeyboardShowCb),window.addEventListener("keyboardWillHide",this.onKeyboardWillHideCb)),!this.settings.handleKeyboard&&this.device.cordova&&this.device.android&&window.addEventListener("keyboardWillHide",(()=>{this.instance.parentEl.scrollTop=0,this.instance.parentEl.parentElement&&(this.instance.parentEl.parentElement.scrollTop=0,this.instance.parentEl.parentElement.parentElement&&(this.instance.parentEl.parentElement.parentElement.scrollTop=0))})),window.addEventListener("resize",this.onWindowResizeCb)}detachAllEvents(){this.settings.dragBy?this.settings.dragBy.forEach((t=>{const e=document.querySelector(t);e&&this.eventListeners("removeEventListener",e)})):this.eventListeners("removeEventListener",this.instance.paneEl),this.settings.topperOverflow&&this.instance.overflowEl.removeEventListener("scroll",this.onScrollCb),this.settings.handleKeyboard&&this.device.cordova&&(window.removeEventListener("keyboardWillShow",this.onKeyboardShowCb),window.removeEventListener("keyboardWillHide",this.onKeyboardWillHideCb)),window.removeEventListener("resize",this.onWindowResizeCb)}resetEvents(){this.detachAllEvents(),this.attachAllEvents()}eventListeners(t,s){var i,n,r;if(!e.touch&&e.pointerEvents)s[t](this.touchEvents.start,this.touchStartCb,!1),s[t](this.touchEvents.move,this.touchMoveCb,!1),s[t](this.touchEvents.end,this.touchEndCb,!1),null===(i=this.instance.backdropEl)||void 0===i||i[t](this.touchEvents.move,this.touchMoveBackdropCb,!1);else{if(e.touch){const i=!("touchstart"!==this.touchEvents.start||!e.passiveListener||!this.settings.passiveListeners)&&{passive:!0,capture:!1};s[t](this.touchEvents.start,this.touchStartCb,i),s[t](this.touchEvents.move,this.touchMoveCb,!!e.passiveListener&&{passive:!1,capture:!1}),s[t](this.touchEvents.end,this.touchEndCb,i),null===(n=this.instance.backdropEl)||void 0===n||n[t](this.touchEvents.move,this.touchMoveBackdropCb,!!e.passiveListener&&{passive:!1,capture:!1}),this.touchEvents.cancel&&s[t](this.touchEvents.cancel,this.touchEndCb,i)}(this.settings.simulateTouch&&!this.device.ios&&!this.device.android||this.settings.simulateTouch&&!e.touch&&this.device.ios)&&(s[t]("mousedown",this.touchStartCb,!1),s[t]("mousemove",this.touchMoveCb,!1),s[t]("mouseup",this.touchEndCb,!1),null===(r=this.instance.backdropEl)||void 0===r||r[t]("mousemove",this.touchMoveBackdropCb,!1))}this.settings.preventClicks&&s[t]("click",this.onClickCb,!0)}touchStart(t){if(this.settings.onDragStart(t),this.allowClick=!0,this.instance.disableDragEvents)return;this.disableDragAngle=!1,this.isScrolling=!1,this.instance.preventedDismiss=!1;const{clientY:e,clientX:s}=this.getEvetClientYX(t,"touchstart");this.startY=e,this.startX=s,"mousedown"===t.type&&(this.pointerDown=!0),this.contentScrollTop&&this.willScrolled(t)&&(this.startY+=this.contentScrollTop),this.steps.push({posY:this.startY,time:Date.now()})}touchMoveBackdrop(t){this.settings.touchMoveStopPropagation&&t.stopPropagation()}touchMove(t){var e;const{clientY:s,clientX:i,velocityY:n}=this.getEvetClientYX(t,"touchmove");if(t.delta=(null===(e=this.steps[0])||void 0===e?void 0:e.posY)-s,this.settings.onDrag(t),this.allowClick=!1,this.isFormElement(t.target)&&this.isElementScrollable(t.target))return;if(this.instance.disableDragEvents)return void(this.steps=[]);if(this.disableDragAngle)return;if(this.instance.preventedDismiss)return;if(this.settings.touchMoveStopPropagation&&t.stopPropagation(),"mousemove"===t.type&&!this.pointerDown)return;const r=s-this.steps[this.steps.length-1].posY;if(!Math.abs(r))return;let o=this.instance.getPanelTransformY()+r;if(this.steps.length<2){n<1&&(o=this.instance.getPanelTransformY()+r*n);let t=new WebKitCSSMatrix(window.getComputedStyle(this.instance.paneEl).transform).m42-this.instance.getPanelTransformY();Math.abs(t)&&(o+=t)}if(this.steps.length>2&&this.isFormElement(document.activeElement)&&!this.isFormElement(t.target)&&(document.activeElement.blur(),this.inputBluredbyMove=!0),this.settings.touchAngle&&!this.isScrolling){let t;const e=i-this.startX,n=s-this.startY;if(t=180*Math.atan2(Math.abs(n),Math.abs(e))/Math.PI,e*e+n*n>=25&&90-t>this.settings.touchAngle&&1===this.steps.length)return void(this.disableDragAngle=!0)}if("auto"===this.instance.overflowEl.style.overflowY){if(this.settings.inverse&&this.willScrolled(t))return void(this.contentScrollTop=0);if(!this.settings.inverse&&this.contentScrollTop>0)return}let a=this.handleTopperLowerPositions({clientX:i,clientY:s,newVal:o,diffY:r});if(a&&(o=a),this.instance.getPanelTransformY()!==o){if(!this.instance.preventedDismiss&&this.instance.preventDismissEvent&&this.settings.bottomClose){let t=(-this.breakpoints.topper+this.breakpoints.topper-this.instance.getPanelTransformY())/this.breakpoints.topper/-8;if(o=this.instance.getPanelTransformY()+r*(.5-t),-1*(s-220-this.instance.screen_height)<=this.instance.screen_height-this.breakpoints.bottomer)return this.instance.preventedDismiss=!0,this.settings.onWillDismiss({prevented:!0}),void this.instance.moveToBreak(this.breakpoints.prevBreakpoint)}this.instance.checkOpacityAttr(o),this.instance.checkOverflowAttr(o),this.transitions.doTransition({type:"move",translateY:o}),this.steps.push({posY:s,time:Date.now()})}}touchEnd(t){var e,s;if(this.instance.disableDragEvents)return;"mouseup"===t.type&&(this.pointerDown=!1);let i=this.breakpoints.getClosestBreakY();const n=(null===(e=this.steps[this.steps.length-1])||void 0===e?void 0:e.posY)-(null===(s=this.steps[this.steps.length-2])||void 0===s?void 0:s.posY),r=window.hasOwnProperty("cordova")?this.settings.fastSwipeSensivity+2:this.settings.fastSwipeSensivity;if(Math.abs(n)>=r&&(i=this.instance.swipeNextPoint(n,r,i),this.settings.fastSwipeClose&&this.breakpoints.currentBreakpoint<i))return void this.instance.destroy({animate:!0});let o=!1;this.isFormElement(document.activeElement)&&!this.isFormElement(t.target)&&2===this.steps.length&&(o=!0),this.steps=[],this.breakpoints.currentBreakpoint=i,this.settings.onDragEnd(t),this.allowClick||o||(this.instance.checkOpacityAttr(this.breakpoints.currentBreakpoint),this.instance.checkOverflowAttr(this.breakpoints.currentBreakpoint),this.settings.bottomClose&&i===this.breakpoints.breaks.bottom?this.instance.destroy({animate:!0}):(this.instance.getPanelTransformY()===i&&this.settings.onTransitionEnd({target:this.instance.paneEl}),this.transitions.doTransition({type:"end",translateY:i})))}onScroll(e){return t(this,void 0,void 0,(function*(){this.isScrolling=!0,this.contentScrollTop=e.target.scrollTop}))}onClick(t){if(this.allowClick){if(this.settings.clickBottomOpen&&this.breakpoints.breaks.bottom===this.instance.getPanelTransformY()){let t;this.settings.breaks.top.enabled&&(t="top"),this.settings.breaks.middle.enabled&&(t="middle"),this.instance.moveToBreak(t)}}else this.settings.preventClicks&&(t.preventDefault(),t.stopPropagation(),t.stopImmediatePropagation())}onKeyboardShow(t){if(this.keyboardVisible=!0,!this.isPaneDescendant(document.activeElement))return;if(!this.isOnViewport())return;this.device.android&&setTimeout((()=>this.fixAndroidResize()),20),this.breakpoints.prevBreakpoint=Object.entries(this.breakpoints.breaks).find((t=>t[1]===this.instance.getPanelTransformY()))[0];let e=this.settings.breaks[this.instance.currentBreak()].height+t.keyboardHeight;window.matchMedia("(orientation: landscape)").matches&&(e=this.instance.screen_height),e>this.instance.screen_height-80&&(e=this.instance.screen_height-80),e-50>=this.settings.breaks[this.instance.currentBreak()].height&&this.instance.moveToHeight(e)}onKeyboardWillHide(t){this.isOnViewport()&&(this.device.android&&this.fixAndroidResize(),this.inputBluredbyMove?this.inputBluredbyMove=!1:this.instance.isHidden()||this.instance.moveToBreak(this.breakpoints.prevBreakpoint))}onWindowResize(e){return t(this,void 0,void 0,(function*(){this.isFormElement(document.activeElement)||(this.isFormElement(document.activeElement)||!this.keyboardVisible?(yield new Promise((t=>setTimeout((()=>t(!0)),150))),this.instance.updateScreenHeights(),this.breakpoints.buildBreakpoints(JSON.parse(this.breakpoints.lockedBreakpoints))):this.keyboardVisible=!1)}))}handleTopperLowerPositions(t){if(!this.settings.inverse){if(!this.settings.upperThanTop&&t.newVal<=this.breakpoints.topper)return this.breakpoints.topper;if(this.settings.upperThanTop&&(t.newVal<=this.breakpoints.topper||this.startPointOverTop)){this.startPointOverTop||(this.startPointOverTop=t.clientY),this.startPointOverTop<t.clientY&&delete this.startPointOverTop;const e=this.instance.screen_height-this.instance.screenHeightOffset,s=(e-this.instance.getPanelTransformY())/(e-this.breakpoints.topper)/8;return this.instance.getPanelTransformY()+t.diffY*s}if(!this.settings.lowerThanBottom&&t.newVal>=this.breakpoints.bottomer)return this.breakpoints.bottomer}if(this.settings.inverse){if(this.settings.upperThanTop&&(t.newVal>=this.breakpoints.topper||this.startPointOverTop)){this.startPointOverTop||(this.startPointOverTop=t.clientY),this.startPointOverTop>t.clientY&&delete this.startPointOverTop;const e=this.instance.screen_height-this.instance.screenHeightOffset,s=(e-this.instance.getPanelTransformY())/(e-this.breakpoints.topper)/8;return this.instance.getPanelTransformY()+t.diffY*s}if(!this.settings.upperThanTop&&t.newVal>=this.breakpoints.topper)return this.breakpoints.topper}}getEvetClientYX(t,e){var s,i;const n=t.type===e&&t.targetTouches&&(t.targetTouches[0]||t.changedTouches[0]),r=t.type===e?n.clientY:t.clientY,o=t.type===e?n.clientX:t.clientX,a=Date.now()-((null===(s=this.steps[this.steps.length-1])||void 0===s?void 0:s.time)||0);return{clientY:r,clientX:o,velocityY:Math.abs(r-((null===(i=this.steps[this.steps.length-1])||void 0===i?void 0:i.posY)||0))/a}}fixAndroidResize(){this.instance.paneEl&&(document.querySelector("ion-app"),window.requestAnimationFrame((()=>{this.instance.wrapperEl.style.width="100%",this.instance.paneEl.style.position="absolute",window.requestAnimationFrame((()=>{this.instance.wrapperEl.style.width="unset",this.instance.paneEl.style.position="fixed"}))})))}willScrolled(t){return!(!this.isElementScrollable(this.instance.overflowEl)||"hidden"===this.instance.overflowEl.style.overflow)}isPaneDescendant(t){if(!t)return!1;let e=t.parentNode;for(;null!=e;){if(e==this.instance.paneEl)return!0;e=e.parentNode}return!1}isFormElement(t){return!!(t&&t.tagName&&["input","select","option","textarea","button","label"].includes(t.tagName.toLowerCase()))}isElementScrollable(t){return t.scrollHeight>t.clientHeight}isOnViewport(){return!this.instance.paneEl||0!==this.instance.paneEl.offsetWidth||0!==this.instance.paneEl.offsetHeight}}class n{constructor(){this.instance={initialBreak:"middle",inverse:!1,parentElement:null,followerElement:null,cssClass:null,fitHeight:!1,maxFitHeight:null,fitScreenHeight:!0,backdrop:!1,backdropOpacity:.4,animationType:"ease",animationDuration:300,dragBy:null,bottomOffset:0,bottomClose:!1,fastSwipeClose:!1,fastSwipeSensivity:3,freeMode:!1,buttonDestroy:!0,buttonClose:!0,topperOverflow:!0,topperOverflowOffset:0,lowerThanBottom:!0,upperThanTop:!1,showDraggable:!0,draggableOver:!1,clickBottomOpen:!0,preventClicks:!0,handleKeyboard:!0,simulateTouch:!0,passiveListeners:!0,touchMoveStopPropagation:!1,touchAngle:45,breaks:{},zStack:null,onDidDismiss:()=>{},onWillDismiss:()=>{},onDidPresent:()=>{},onWillPresent:()=>{},onDragStart:()=>{},onDrag:()=>{},onDragEnd:()=>{},onBackdropTap:()=>{},onTransitionStart:()=>{},onTransitionEnd:()=>{}}}}class r{constructor(t,e){this.instance=t,this.settings=e,this.breaks={},this.calcHeightInProcess=!1,this.brs=[],this.defaultBreaksConf={top:{enabled:!0,height:window.innerHeight-47.25},middle:{enabled:!0,height:300},bottom:{enabled:!0,height:100}}}buildBreakpoints(e,s=0){var i,n,r,o,a;return t(this,void 0,void 0,(function*(){if(this.settings.bottomOffset=s||this.settings.bottomOffset,this.breaks={top:this.instance.screenHeightOffset,middle:this.instance.screenHeightOffset,bottom:this.instance.screenHeightOffset},this.settings.fitHeight){this.settings.fitScreenHeight=!1,this.settings.initialBreak="top",this.settings.topperOverflow=!1;let t=yield this.getPaneFitHeight();this.settings.maxFitHeight&&t>this.settings.maxFitHeight&&(t=this.settings.maxFitHeight,this.settings.topperOverflow=!0),(e={top:{enabled:!0,height:t},middle:{enabled:!1}}).top.bounce=null===(n=null===(i=this.settings.breaks)||void 0===i?void 0:i.top)||void 0===n?void 0:n.bounce,e.bottom=(null===(r=this.settings.breaks)||void 0===r?void 0:r.bottom)||{enabled:!0,height:0}}if(["top","middle","bottom"].forEach((t=>{var s;this.breaks[t]-=this.settings.bottomOffset,this.settings.breaks[t]||(this.settings.breaks[t]=this.defaultBreaksConf[t]),e&&e[t]&&(this.settings.breaks[t]=e[t]),this.settings.fitScreenHeight&&((null===(s=this.settings.breaks[t])||void 0===s?void 0:s.height)>this.instance.screen_height&&(this.settings.breaks[t].height=this.instance.screen_height-this.settings.bottomOffset),this.settings.breaks.top&&this.settings.breaks.middle&&this.settings.breaks.top.height-50<=this.settings.breaks.middle.height&&(this.settings.breaks.middle.enabled=!1,this.settings.initialBreak="top")),this.settings.fitHeight&&"top"===t&&(this.settings.breaks[t].height>this.instance.screen_height?(this.settings.breaks[t].height=this.instance.screen_height-2*this.settings.bottomOffset,this.settings.topperOverflow=!0):this.instance.overflowEl&&!this.settings.maxFitHeight&&(this.settings.topperOverflow=!1,this.instance.overflowEl.style.overflowY="hidden")),this.settings.breaks[t]&&this.settings.breaks[t].enabled&&this.settings.breaks[t].height&&(this.settings.inverse?this.breaks[t]=this.settings.breaks[t].height+this.settings.bottomOffset:this.breaks[t]-=this.settings.breaks[t].height)})),this.lockedBreakpoints||(this.lockedBreakpoints=JSON.stringify(this.settings.breaks)),this.instance.isPanePresented()||this.settings.breaks[this.settings.initialBreak].enabled||console.warn("Cupertino Pane: Please set initialBreak for enabled breakpoint"),this.settings.breaks.middle.height>=this.settings.breaks.top.height&&console.warn("Cupertino Pane: Please set middle height lower than top height"),this.settings.breaks.middle.height<=this.settings.breaks.bottom.height&&console.warn("Cupertino Pane: Please set bottom height lower than middle height"),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)=>e<t?e:t)),this.bottomer=this.brs.reduce(((t,e)=>Math.abs(e)>Math.abs(t)?e:t)),this.settings.inverse&&(this.topper=this.bottomer),this.instance.isPanePresented()||(this.currentBreakpoint=this.breaks[this.settings.initialBreak],!this.settings.inverse||this.settings.breaks.bottom.enabled||this.settings.breaks.middle.enabled||(this.settings.topperOverflow=!1)),this.instance.isPanePresented()){if((null===(o=this.settings.breaks[this.prevBreakpoint])||void 0===o?void 0:o.enabled)&&(this.instance.isHidden()||this.instance.moveToBreak(this.prevBreakpoint,this.settings.inverse&&"move")),!(null===(a=this.settings.breaks[this.prevBreakpoint])||void 0===a?void 0:a.enabled)&&!this.instance.isHidden()){let t=this.instance.swipeNextPoint(1,1,this.getClosestBreakY());const e=Object.entries(this.breaks).find((e=>e[1]===t));this.instance.moveToBreak(e[0])}this.instance.paneEl.style.top=this.settings.inverse?`-${this.bottomer-this.settings.bottomOffset}px`:"unset",this.instance.paneEl.style.height=`${this.instance.getPaneHeight()}px`,this.instance.scrollElementInit(),this.instance.checkOpacityAttr(this.currentBreakpoint),this.instance.checkOverflowAttr(this.currentBreakpoint)}}))}getCurrentBreakName(){return this.breaks.top===this.currentBreakpoint?"top":this.breaks.middle===this.currentBreakpoint?"middle":this.breaks.bottom===this.currentBreakpoint?"bottom":null}getPaneFitHeight(){return t(this,void 0,void 0,(function*(){this.calcHeightInProcess=!0;let t,e=this.instance.el.querySelectorAll("img");this.instance.el.style.height="unset",this.instance.rendered||(this.instance.el.style.visibility="hidden",this.instance.el.style.pointerEvents="none",this.instance.el.style.display="block",this.instance.wrapperEl.style.visibility="hidden",this.instance.wrapperEl.style.pointerEvents="none",this.instance.wrapperEl.style.display="block");let s=[];e.length&&(s=Array.from(e).map((t=>new Promise((e=>{t.complete&&t.naturalHeight?e(!0):t.onload=()=>e(!0)}))))),s.push(new Promise((t=>setTimeout((()=>t(!0)),this.instance.rendered?0:150)))),yield Promise.all(s);let i=parseInt(document.defaultView.getComputedStyle(this.instance.el,"").getPropertyValue("height")),n=parseInt(document.defaultView.getComputedStyle(this.instance.el,"").getPropertyValue("margin-top"))+parseInt(document.defaultView.getComputedStyle(this.instance.el,"").getPropertyValue("margin-bottom")),r=parseInt(document.defaultView.getComputedStyle(this.instance.el.parentElement,"").getPropertyValue("padding-bottom"));return t=i+n,t+=this.instance.el.offsetTop,t+=r,this.instance.rendered||(this.instance.el.style.visibility="unset",this.instance.el.style.pointerEvents="unset",this.instance.el.style.display="none",this.instance.wrapperEl.style.visibility="unset",this.instance.wrapperEl.style.pointerEvents="unset",this.instance.wrapperEl.style.display="none"),this.calcHeightInProcess=!1,t}))}getClosestBreakY(){return this.brs.reduce(((t,e)=>Math.abs(e-this.instance.getPanelTransformY())<Math.abs(t-this.instance.getPanelTransformY())?e:t))}}class o{constructor(t,e,s,i){this.instance=t,this.settings=e,this.breakpoints=s,this.zStack=i}doTransition(e={}){return new Promise((s=>t(this,void 0,void 0,(function*(){var t;if("move"===e.type)return this.instance.paneEl.style.transition="all 0ms linear 0ms",this.instance.paneEl.style.transform=`translateY(${e.translateY}px) translateZ(0px)`,this.instance.followerEl&&(this.instance.followerEl.style.transition="all 0ms linear 0ms",this.instance.followerEl.style.transform=`translateY(${e.translateY-this.breakpoints.breaks[this.settings.initialBreak]}px) translateZ(0px)`),this.settings.zStack&&this.settings.zStack.pushElements.forEach((t=>this.zStack.pushTransition(document.querySelector(t),this.instance.getPanelTransformY(),"all 0ms linear 0ms"))),s(!0);const i=()=>("destroy"===e.type&&this.instance.destroyResets(),this.instance.paneEl.style.transition="initial",this.instance.followerEl&&(this.instance.followerEl.style.transition="initial"),this.settings.backdrop&&("destroy"!==e.type&&"hide"!==e.type||(this.instance.backdropEl.style.transition="initial",this.instance.backdropEl.style.display="none")),"present"===e.type&&this.settings.onDidPresent(),"destroy"===e.type&&this.settings.onDidDismiss({destroyButton:e.destroyButton}),this.settings.onTransitionEnd({target:document.body.contains(this.instance.paneEl)?this.instance.paneEl:null}),this.instance.paneEl.removeEventListener("transitionend",i),s(!0));if("breakpoint"===e.type||"end"===e.type||"present"===e.type||"hide"===e.type||"destroy"===e.type){if(this.settings.backdrop&&(this.instance.isHidden()||"hide"===e.type||"destroy"===e.type||"present"===e.type)&&(this.instance.backdropEl.style.backgroundColor="rgba(0,0,0,.0)",this.instance.backdropEl.style.transition=`all ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,"hide"!==e.type&&"destroy"!==e.type&&(this.instance.backdropEl.style.display="block",setTimeout((()=>{this.instance.backdropEl.style.backgroundColor=`rgba(0,0,0, ${this.settings.backdropOpacity})`}),50))),"end"===e.type&&this.settings.freeMode)return s(!0);const n=Object.entries(this.breakpoints.breaks).find((t=>t[1]===e.translateY));let r=n&&(null===(t=this.settings.breaks[n[0]])||void 0===t?void 0:t.bounce);this.instance.paneEl.style.transition=this.buildTransitionValue(r),this.instance.followerEl&&(this.instance.followerEl.style.transition=this.buildTransitionValue(r)),this.settings.zStack&&setTimeout((()=>{this.settings.zStack.pushElements.forEach((t=>this.zStack.pushTransition(document.querySelector(t),e.translateY,`all ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`)))}),this.settings.zStack.cardYOffset&&"present"===e.type?100:0),this.settings.onTransitionStart({translateY:{new:e.translateY}}),this.instance.paneEl.style.transform=`translateY(${e.translateY}px) translateZ(0px)`,this.instance.followerEl&&(this.instance.followerEl.style.transform=`translateY(${e.translateY-this.breakpoints.breaks[this.settings.initialBreak]}px) translateZ(0px)`);let o=Object.entries(this.breakpoints.breaks).find((t=>t[1]===e.translateY));o&&(this.breakpoints.prevBreakpoint=o[0]),this.instance.paneEl.addEventListener("transitionend",i)}}))))}buildTransitionValue(t){return t?"all 300ms cubic-bezier(.155,1.105,.295,1.12)":`all ${this.settings.animationDuration}ms ${this.settings.animationType}`}}class a{constructor(t,e,s){this.instance=t,this.settings=e,this.breakpoints=s,this.zStackDefaults={pushElements:null,minPushHeight:null,cardYOffset:0,cardZScale:.93,cardContrast:.85,stackZAngle:160}}pushTransition(t,e,s){let i=this.settings.zStack.pushElements;t.style.transition=s,e=this.instance.screenHeightOffset-e;const n=this.settings.zStack.minPushHeight?this.settings.zStack.minPushHeight:this.instance.screenHeightOffset-this.breakpoints.bottomer,r=this.instance.screenHeightOffset-this.breakpoints.topper;let o=this.getPushMulitplicator(t),a=Math.pow(this.settings.zStack.cardZScale,o),h=Math.pow(this.settings.zStack.cardZScale,o-1),l=6+this.settings.zStack.cardYOffset,c=l*o*-1,p=c+l,d=Math.pow(this.settings.zStack.cardContrast,o),u=Math.pow(this.settings.zStack.cardContrast,o-1);const g=(s,n,r,o)=>{let a=Math.pow(s,this.settings.zStack.stackZAngle/100);t.style.transform=`translateY(${n*(a/s)}px) scale(${s})`,t.style.borderRadius=`${o}px`,t.style.filter=`contrast(${r})`;let h=document.querySelector(i[i.length-1]);e||t.className!==h.className||this.clearPushMultiplicators()};if(e<=n)return void g(h,p,u,0);const b=(t,s)=>{let i=-1*(r*s-n*t);return i-=(t-s)*e,i/=n-r,i>s&&(i=s),i<t&&(i=t),i};g(b(a,h),b(c,p),b(d,u),-1*b(-10,0))}setPushMultiplicators(){this.settings.zStack.pushElements.forEach((t=>{let e=document.querySelector(t),s=this.getPushMulitplicator(e);s=s?s+1:1,e.style.setProperty("--push-multiplicator",`${s}`)}))}getPushMulitplicator(t){let e=t.style.getPropertyValue("--push-multiplicator");return parseInt(e)}clearPushMultiplicators(){for(let t=0;t<this.settings.zStack.pushElements.length;t++){let e=document.querySelector(this.settings.zStack.pushElements[t]),s=this.getPushMulitplicator(e);s-=1,s?e.style.setProperty("--push-multiplicator",`${s}`):e.style.removeProperty("--push-multiplicator")}}}return class{constructor(t,e={}){this.selector=t,this.disableDragEvents=!1,this.preventDismissEvent=!1,this.preventedDismiss=!1,this.rendered=!1,this.settings=(new n).instance,this.device=new s,this.swipeNextPoint=(t,e,s)=>{let i={},n={};if(this.settings.inverse?(i.top=this.breakpoints.breaks.bottom,i.middle=this.breakpoints.breaks.middle,i.bottom=this.breakpoints.breaks.top,n.top=Object.assign({},this.settings.breaks.bottom),n.middle=Object.assign({},this.settings.breaks.middle),n.bottom=Object.assign({},this.settings.breaks.top)):(i=Object.assign({},this.breakpoints.breaks),n=Object.assign({},this.settings.breaks)),this.breakpoints.currentBreakpoint===i.top){if(t>e){if(n.middle.enabled)return i.middle;if(n.bottom.enabled)return i.middle<s?s:i.bottom}return i.top}if(this.breakpoints.currentBreakpoint===i.middle)return t<-e&&n.top.enabled?i.top:t>e&&n.bottom.enabled?i.bottom:i.middle;if(this.breakpoints.currentBreakpoint===i.bottom){if(t<-e){if(n.middle.enabled)return i.middle>s?s:i.middle;if(n.top.enabled)return i.top}return i.bottom}return s},t instanceof HTMLElement?this.selector=t:this.selector=document.querySelector(t),this.selector?this.isPanePresented()?console.error("Cupertino Pane: specified selector or DOM element already in use",this.selector):(this.el=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,this.breakpoints=new r(this,this.settings),this.zStack=new a(this,this.settings,this.breakpoints),this.transitions=new o(this,this.settings,this.breakpoints,this.zStack),this.events=new i(this,this.settings,this.device,this.breakpoints,this.transitions)):console.warn("Cupertino Pane: wrong selector or DOM element specified",this.selector)}drawBaseElements(){this.parentEl=this.settings.parentElement,this.wrapperEl=document.createElement("div"),this.wrapperEl.classList.add("cupertino-pane-wrapper"),this.settings.inverse&&this.wrapperEl.classList.add("inverse"),this.settings.cssClass&&(this.wrapperEl.className+=` ${this.settings.cssClass}`);let t="";t+="\n .cupertino-pane-wrapper {\n display: none;\n position: absolute;\n top: 0;\n left: 0;\n }\n ",this.paneEl=document.createElement("div"),this.paneEl.style.transform=`translateY(${this.screenHeightOffset}px) translateZ(0px)`,this.paneEl.classList.add("pane"),t+="\n .cupertino-pane-wrapper .pane {\n position: fixed;\n z-index: 11;\n width: 100%;\n max-width: 500px;\n left: 0px;\n right: 0px;\n margin-left: auto;\n margin-right: auto;\n background: var(--cupertino-pane-background, #ffffff);\n color: var(--cupertino-pane-color, #333333);\n box-shadow: var(--cupertino-pane-shadow, 0 4px 16px rgba(0,0,0,.12));\n will-change: transform;\n padding-top: 15px; \n border-radius: var(--cupertino-pane-border-radius, 20px) \n var(--cupertino-pane-border-radius, 20px) \n 0 0;\n }\n .cupertino-pane-wrapper.inverse .pane {\n padding-bottom: 15px; \n border-radius: 0 0 20px 20px;\n border-radius: 0 0\n var(--cupertino-pane-border-radius, 20px) \n var(--cupertino-pane-border-radius, 20px);\n }\n ",this.draggableEl=document.createElement("div"),this.draggableEl.classList.add("draggable"),this.settings.draggableOver&&this.draggableEl.classList.add("over"),t+="\n .cupertino-pane-wrapper .draggable {\n padding: 5px;\n position: absolute;\n left: 0;\n right: 0;\n margin-left: auto;\n margin-right: auto;\n height: 30px;\n z-index: -1;\n top: 0;\n bottom: initial;\n }\n .cupertino-pane-wrapper .draggable.over {\n top: -30px;\n padding: 15px;\n }\n .cupertino-pane-wrapper.inverse .draggable {\n bottom: 0;\n top: initial;\n }\n .cupertino-pane-wrapper.inverse .draggable.over {\n bottom: -30px;\n top: initial;\n }\n ",this.moveEl=document.createElement("div"),this.moveEl.classList.add("move"),t+=`\n .cupertino-pane-wrapper .move {\n margin: 0 auto;\n height: 5px;\n background: var(--cupertino-pane-move-background, #c0c0c0);\n width: 36px;\n border-radius: 4px;\n }\n .cupertino-pane-wrapper .draggable.over .move {\n width: 70px; \n background: var(--cupertino-pane-move-background, rgba(225, 225, 225, 0.6));\n ${e.backdropFilter?"\n backdrop-filter: saturate(180%) blur(20px);\n -webkit-backdrop-filter: saturate(180%) blur(20px);\n ":""}\n }\n .cupertino-pane-wrapper.inverse .move {\n margin-top: 15px;\n }\n .cupertino-pane-wrapper.inverse .draggable.over .move {\n margin-top: -5px;\n }\n `,this.destroyButtonEl=document.createElement("div"),this.destroyButtonEl.classList.add("destroy-button"),t+="\n .cupertino-pane-wrapper .destroy-button {\n width: 26px;\n height: 26px;\n position: absolute;\n background: var(--cupertino-pane-destroy-button-background, #ebebeb);\n fill: var(--cupertino-pane-icon-close-color, #7a7a7e);\n right: 20px;\n z-index: 14;\n border-radius: 100%;\n top: 16px;\n }\n ",this.contentEl=this.el,this.contentEl.style.transition=`opacity ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.contentEl.style.overflowX="hidden",t+="\n .cupertino-pane-wrapper .backdrop {\n overflow: hidden;\n position: fixed;\n width: 100%;\n bottom: 0;\n right: 0;\n left: 0;\n top: 0;\n display: none;\n z-index: 10;\n }\n ",this.addStyle(t),this.parentEl.appendChild(this.wrapperEl),this.wrapperEl.appendChild(this.paneEl),this.paneEl.appendChild(this.contentEl),this.settings.showDraggable&&(this.paneEl.appendChild(this.draggableEl),this.draggableEl.appendChild(this.moveEl))}present(e={animate:!1}){var s;return t(this,void 0,void 0,(function*(){if(this.el&&document.body.contains(this.el))if(this.isPanePresented()&&this.rendered)this.moveToBreak(this.settings.initialBreak);else{if(!this.isPanePresented()||this.rendered){if(this.settings.onWillPresent(),this.updateScreenHeights(),this.drawBaseElements(),yield this.setBreakpoints(),this.paneEl.style.height=`${this.getPaneHeight()}px`,this.settings.inverse&&(this.paneEl.style.top=`-${this.breakpoints.bottomer-this.settings.bottomOffset}px`),this.wrapperEl.style.display="block",yield new Promise((t=>setTimeout(t,100))),this.contentEl.style.display="block",this.wrapperEl.classList.add("rendered"),this.rendered=!0,this.settings.followerElement){if(!document.querySelector(this.settings.followerElement))return void console.warn("Cupertino Pane: wrong follower element selector specified",this.settings.followerElement);this.followerEl=document.querySelector(this.settings.followerElement),this.followerEl.style.willChange="transform, border-radius",this.followerEl.style.transform="translateY(0px) translateZ(0px)",this.followerEl.style.transition=this.transitions.buildTransitionValue(null===(s=this.settings.breaks[this.currentBreak()])||void 0===s?void 0:s.bounce)}return this.settings.zStack&&(this.setZstackConfig(this.settings.zStack),this.zStack.setPushMultiplicators()),this.settings.buttonClose&&this.settings.buttonDestroy&&!this.settings.inverse&&(this.paneEl.appendChild(this.destroyButtonEl),this.destroyButtonEl.addEventListener("click",(t=>this.destroy({animate:!0,destroyButton:!0}))),this.destroyButtonEl.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">\n <path 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.settings.freeMode&&(this.settings.lowerThanBottom=!1),this.settings.backdrop&&this.renderBackdrop(),this.checkOpacityAttr(this.breakpoints.currentBreakpoint),this.device.android&&(document.body.style.overscrollBehaviorY="none"),e.animate?yield this.transitions.doTransition({type:"present",translateY:this.breakpoints.breaks[this.settings.initialBreak]}):(this.breakpoints.prevBreakpoint=this.settings.initialBreak,this.paneEl.style.transform=`translateY(${this.breakpoints.breaks[this.settings.initialBreak]}px) translateZ(0px)`,this.settings.backdrop&&(this.backdropEl.style.display="block"),this.settings.zStack&&this.settings.zStack.pushElements.forEach((t=>this.zStack.pushTransition(document.querySelector(t),this.breakpoints.breaks[this.settings.initialBreak],"unset"))),this.settings.onDidPresent()),yield new Promise((t=>setTimeout((()=>t(!0)),150))),this.scrollElementInit(),this.checkOverflowAttr(this.breakpoints.currentBreakpoint),this.events.attachAllEvents(),this}console.warn("Cupertino Pane: specified selector or DOM element already in use",this.selector)}else console.warn("Cupertino Pane: specified DOM element must be attached to the DOM")}))}getPaneHeight(){return this.settings.inverse?this.breakpoints.bottomer-this.settings.bottomOffset:this.screen_height-this.breakpoints.topper-this.settings.bottomOffset}updateScreenHeights(){this.settings.inverse?(this.screen_height=window.innerHeight,this.screenHeightOffset=0):(this.screen_height=window.innerHeight,this.screenHeightOffset=window.innerHeight)}scrollElementInit(){let t=this.el.querySelectorAll("[overflow-y]");!t.length||t.length>1?this.overflowEl=this.contentEl:(this.overflowEl=t[0],this.overflowEl.style.overflowX="hidden"),this.settings.topperOverflow&&(this.settings.upperThanTop&&console.warn('Cupertino Pane: "upperThanTop" allowed for disabled "topperOverflow"'),this.setOverflowHeight())}setOverflowHeight(t=0){this.settings.inverse?this.overflowEl.style.height=this.getPaneHeight()-30-this.settings.topperOverflowOffset-this.overflowEl.offsetTop+"px":this.overflowEl.style.height=this.getPaneHeight()-this.settings.topperOverflowOffset-this.overflowEl.offsetTop-t+"px"}checkOpacityAttr(t){let e=this.el.querySelectorAll("[hide-on-bottom]");e.length&&(this.settings.inverse||e.forEach((e=>{e.style.transition=`opacity ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,e.style.opacity=t>=this.breakpoints.breaks.bottom?"0":"1"})))}checkOverflowAttr(t){this.settings.topperOverflow&&this.overflowEl&&(this.settings.inverse?this.overflowEl.style.overflowY=t>=this.breakpoints.bottomer?"auto":"hidden":this.overflowEl.style.overflowY=t<=this.breakpoints.topper?"auto":"hidden")}isPanePresented(){let t=Array.from(document.querySelectorAll(".cupertino-pane-wrapper.rendered"));return!!t.length&&!!t.find((t=>t.contains(this.selector)))}isBackdropPresented(){return!!document.querySelector(".cupertino-pane-wrapper .backdrop")}renderBackdrop(){this.backdropEl=document.createElement("div"),this.backdropEl.classList.add("backdrop"),this.backdropEl.style.transition=`all ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.backdropEl.style.backgroundColor=`rgba(0,0,0, ${this.settings.backdropOpacity})`,this.wrapperEl.appendChild(this.backdropEl),this.backdropEl.addEventListener("click",(t=>this.settings.onBackdropTap()))}addStyle(t){if(document.querySelector("#cupertino-panes-internal"))return;const e=document.createElement("style");e.id="cupertino-panes-internal",t=t.replace(/\s\s+/g," "),e.textContent=t,document.head.prepend(e)}backdrop(t={show:!0}){if(!this.isPanePresented())return console.warn("Cupertino Pane: Present pane before call backdrop()"),null;this.isBackdropPresented()||(this.renderBackdrop(),this.events.resetEvents());const e=()=>{this.backdropEl.style.transition="initial",this.backdropEl.style.display="none",this.backdropEl.removeEventListener("transitionend",e)};if(this.backdropEl.style.transition=`all ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.backdropEl.style.backgroundColor="rgba(0,0,0,.0)",t.show)this.backdropEl.style.display="block",setTimeout((()=>{this.backdropEl.style.backgroundColor=`rgba(0,0,0, ${this.settings.backdropOpacity})`}),50);else{if("none"===this.backdropEl.style.display)return;this.backdropEl.addEventListener("transitionend",e)}}getPanelTransformY(){return parseFloat(/\.*translateY\((.*)px\)/i.exec(this.paneEl.style.transform)[1])}setZstackConfig(t){this.settings.zStack=t?Object.assign(Object.assign({},this.zStack.zStackDefaults),t):null}preventDismiss(t=!1){this.preventDismissEvent=t}disableDrag(){this.disableDragEvents=!0}enableDrag(){this.disableDragEvents=!1}setBreakpoints(e,s){return t(this,void 0,void 0,(function*(){!this.isPanePresented()||e?yield this.breakpoints.buildBreakpoints(e,s):console.warn("Cupertino Pane: Provide any breaks configuration")}))}calcFitHeight(){return t(this,void 0,void 0,(function*(){return this.wrapperEl&&this.el?this.breakpoints.calcHeightInProcess?(console.warn("Cupertino Pane: calcFitHeight() already in process"),null):void(yield this.breakpoints.buildBreakpoints(this.breakpoints.lockedBreakpoints)):null}))}moveToBreak(e,s="breakpoint"){return t(this,void 0,void 0,(function*(){return this.isPanePresented()?this.settings.breaks[e].enabled?(this.checkOpacityAttr(this.breakpoints.breaks[e]),this.checkOverflowAttr(this.breakpoints.breaks[e]),yield this.transitions.doTransition({type:s,translateY:this.breakpoints.breaks[e]}),this.breakpoints.currentBreakpoint=this.breakpoints.breaks[e],Promise.resolve(!0)):void console.warn("Cupertino Pane: %s breakpoint disabled",e):(console.warn("Cupertino Pane: Present pane before call moveToBreak()"),null)}))}moveToHeight(t){if(!this.isPanePresented())return console.warn("Cupertino Pane: Present pane before call moveToHeight()"),null;let e=this.screenHeightOffset?this.screen_height-t:t;this.checkOpacityAttr(e),this.transitions.doTransition({type:"breakpoint",translateY:e})}hide(){return this.isPanePresented()?this.isHidden()?(console.warn("Cupertino Pane: Pane already hidden"),null):void this.transitions.doTransition({type:"hide",translateY:this.screenHeightOffset}):(console.warn("Cupertino Pane: Present pane before call hide()"),null)}isHidden(){return this.isPanePresented()?this.paneEl.style.transform===`translateY(${this.screenHeightOffset}px) translateZ(0px)`:(console.warn("Cupertino Pane: Present pane before call isHidden()"),null)}currentBreak(){return this.isPanePresented()?this.breakpoints.getCurrentBreakName():(console.warn("Cupertino Pane: Present pane before call currentBreak()"),null)}destroy(e={animate:!1,destroyButton:!1}){return t(this,void 0,void 0,(function*(){if(!this.rendered)return console.warn("Cupertino Pane: Present pane before call destroy()"),null;this.preventDismissEvent?this.preventedDismiss||(this.settings.onWillDismiss({prevented:!0}),this.moveToBreak(this.breakpoints.prevBreakpoint)):(this.settings.onWillDismiss(),e.animate?yield this.transitions.doTransition({type:"destroy",translateY:this.screenHeightOffset,destroyButton:e.destroyButton}):(this.destroyResets(),this.settings.onDidDismiss({destroyButton:e.destroyButton})))}))}destroyResets(){this.parentEl.appendChild(this.contentEl),this.wrapperEl.remove(),this.events.detachAllEvents(),this.settings.zStack,delete this.rendered,delete this.breakpoints.prevBreakpoint,this.contentEl.style.display="none"}}}));
//# sourceMappingURL=cupertino-pane.min.js.map

147

gulp/build-js.js
/* eslint import/no-extraneous-dependencies: ["error", {"devDependencies": true}] */
/* eslint no-console: "off" */
const fs = require('fs');
const fs = require('fs-extra');
const rollup = require('rollup');
const Terser = require('terser');
const typescript = require('rollup-plugin-typescript2');
const replace = require('@rollup/plugin-replace');
const elapsed = require('elapsed-time-logger');
const chalk = require('chalk');
const banner = require('./banner.js');
const env = process.env.NODE_ENV;
function umd(cb) {
const env = process.env.NODE_ENV || 'prod';
async function buildEntry(format) {
const bundleName = 'CupertinoPane';
const isUMD = format === 'umd';
const isESM = format === 'esm';
const isProd = env === 'production';
const isDev = env === 'development';
const sourcemap = isProd && isUMD;
let filename = 'cupertino-pane';
const outputDir = 'dist';
if (isESM) filename += `.esm`;
rollup.rollup({
input: './src/cupertino-pane.ts',
plugins: [
typescript({clean:true})
],
}).then((bundle) => bundle.write({
format: 'cjs',
name: 'Cupertino Pane',
strict: true,
sourcemap: true,
exports: 'named',
sourcemapFile: `./${env === 'development' ? 'build' : 'dist'}/cupertino-pane.js.map`,
banner: `${banner} \n \n if (!exports) var exports = {\"__esModule\": true};`,
file: `./${env === 'development' ? 'build' : 'dist'}/cupertino-pane.js`,
})).then((bundle) => {
if (env === 'development') {
if (cb) cb();
return;
// Bundle
new Promise(async(resolve, reject) => {
let bundle = await rollup.rollup({
input: './src/index.ts',
plugins: [
replace({
delimiters: ['', ''],
preventAssignment: true,
'//EXPORT': isUMD ? `export default ${bundleName};` : `export { ${bundleName} }`
}),
typescript({
useTsconfigDeclarationDir: true,
cacheRoot: process.cwd() + `/.rpt2_cache/${filename}`,
})
],
});
bundle = await bundle.write({
name: bundleName,
format, banner, sourcemap,
strict: true,
exports: isUMD ? 'default' : 'named',
sourcemapFile: `./${outputDir}/${filename}.js.map`,
file: `./${outputDir}/${filename}.js`,
});
// Build types only once
if (isESM) {
let typings = await rollup.rollup({
input: './src/public-api.ts',
plugins: [
require("rollup-plugin-dts").default()
]
});
typings = await typings.write({
file: `${outputDir}/types/index.d.ts`,
format: "es"
});
}
if (isDev) {
return resolve();
};
const result = bundle.output[0];
const minified = Terser.minify(result.code, {
const { code, map } = await Terser.minify(result.code, {
sourceMap: {
content: env === 'development' ? result.map : undefined,
filename: env === 'development' ? undefined : 'cupertino-pane.min.js',
url: 'cupertino-pane.min.js.map',
content: sourcemap ? result.map : undefined,
filename: sourcemap ? `${filename}.min.js` : undefined,
url: `${filename}.min.js.map`,
},

@@ -42,54 +81,26 @@ output: {

},
}).catch((err) => {
console.error(`Terser failed on file ${filename}: ${err.toString()}`);
return reject();
});
fs.writeFileSync('./dist/cupertino-pane.min.js', minified.code);
fs.writeFileSync('./dist/cupertino-pane.min.js.map', minified.map);
await fs.writeFile(`./${outputDir}/${filename}.min.js`, code);
await fs.writeFile(`./${outputDir}/${filename}.min.js.map`, map);
cb();
}).catch((err) => {
if (cb) cb();
console.error(err.toString());
return resolve();
});
}
function es(cb) {
const env = process.env.NODE_ENV || 'prod';
// Bundle
rollup.rollup({
input: './src/cupertino-pane.ts',
plugins: [
typescript()
],
}).then((bundle) => bundle.write({
format: 'es',
name: 'Cupertino Pane',
strict: true,
sourcemap: true,
sourcemapFile: `./${env === 'development' ? 'build' : 'dist'}/cupertino-pane.esm.bundle.js.map`,
banner,
file: `./${env === 'development' ? 'build' : 'dist'}/cupertino-pane.esm.bundle.js`,
})).then(() => {
if (cb) cb();
}).catch((err) => {
if (cb) cb();
console.error(err.toString());
async function build() {
elapsed.start('bundles');
return Promise.all(
[
buildEntry('umd'),
buildEntry('esm')
]
).then(() => {
elapsed.end('bundles', chalk.green('\nRollup bundles build completed!'));
});
}
function build(cb) {
const expectCbs = 2;
let cbs = 0;
umd(() => {
cbs += 1;
if (cbs === expectCbs) cb();
});
es(() => {
cbs += 1;
if (cbs === expectCbs) cb();
});
}
module.exports = build;

8

gulp/gulpfile.js

@@ -8,10 +8,4 @@ /* eslint no-console: ["error", { allow: ["log"] }] */

const del = require('del');
const buildJs = require('./build-js.js');
// Clean
gulp.task('clean', (cb) => {
return del('dist/**', {force:true});
});
// js bundle

@@ -45,3 +39,3 @@ gulp.task('js', (cb) => {

gulp.task('build', gulp.series(['clean', 'js', 'prod-source-sourcemap-fix-paths']));
gulp.task('build', gulp.series(['js', 'prod-source-sourcemap-fix-paths']));

@@ -48,0 +42,0 @@ gulp.task('watch', () => {

30

package.json
{
"name": "cupertino-pane",
"description": "Multi-functional panes and boards for next generation progressive applications",
"version": "1.2.7",
"version": "1.2.8",
"author": "Roman Antonov (roman-rr)",

@@ -10,21 +10,27 @@ "homepage": "https://github.com/roman-rr/cupertino-pane/",

"main": "dist/cupertino-pane.min.js",
"module": "dist/cupertino-pane.esm.bundle.js",
"types": "dist/cupertino-pane.d.ts",
"module": "dist/cupertino-pane.esm.min.js",
"types": "dist/types/index.d.ts",
"scripts": {
"build": "gulp build",
"build": "rimraf dist && NODE_ENV=production gulp build",
"serve": "rimraf dist && NODE_ENV=development gulp build && gulp server",
"tslint": "tslint src/**/*.ts",
"dev": "gulp build && gulp server"
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
},
"devDependencies": {
"@rollup/plugin-replace": "^3.0.0",
"chalk": "^4.1.2",
"del": "^5.1.0",
"elapsed-time-logger": "^1.1.7",
"fs-extra": "^10.0.0",
"glob": "^7.1.6",
"gulp": "^4.0.2",
"gulp-connect": "^5.7.0",
"gulp-open": "^3.0.1",
"rollup": "2.28.2",
"rollup-plugin-typescript2": "0.27.3",
"terser": "^4.4.0",
"gulp": "4.0.2",
"gulp-connect": "5.7.0",
"gulp-open": "3.0.1",
"rollup": "2.58.0",
"rollup-plugin-dts": "^4.0.0",
"rollup-plugin-typescript2": "0.30.0",
"terser": "5.9.0",
"tslib": "^1.10.0",
"tslint": "^5.20.1",
"typescript": "^3.4.5"
"typescript": "^4.4.4"
},

@@ -31,0 +37,0 @@ "bugs": {

15

README.md
<p align="center">
<img alt="Cupertino Panes is multi-functional panes & boards with touch technologies" src="docs/logo/logo-1-mini.jpg" width="600" />
<!-- <img alt="Cupertino Panes is multi-functional panes & boards with touch technologies" src="docs/logo/logo-1-mini.jpg" width="600" /> -->
<img alt="Cupertino Panes is multi-functional panes & boards with touch technologies" src="docs/logo/logo-2-mini.png" width="600" />
</p>

@@ -79,6 +80,6 @@

<div style="display:flex;flex-wrap:wrap;">
<img src="https://github.com/roman-rr/cupertino-pane/blob/master/docs/images/maps.gif?raw=true" alt="Cupertino Pane - Roman Antonov" width="200px">
<img src="https://github.com/roman-rr/cupertino-pane/blob/master/docs/images/bulletin.gif?raw=true" alt="Cupertino Pane - Roman Antonov" width="200px">
<img src="https://github.com/roman-rr/cupertino-pane/blob/master/docs/images/overflow.gif?raw=true" alt="Cupertino Pane - Roman Antonov" width="200px">
<img src="https://github.com/roman-rr/cupertino-pane/blob/master/docs/images/starbucks.gif?raw=true" alt="Cupertino Pane - Roman Antonov" width="200px">
<img src="docs/images/bulletin.gif?raw=true" alt="Cupertino Pane - Roman Antonov" width="200px">
<img src="docs/images/overflow.gif?raw=true" alt="Cupertino Pane - Roman Antonov" width="200px">
<img src="docs/images/notifications.gif?raw=true" alt="Cupertino Pane - Roman Antonov" width="200px">
<img src="docs/images/z-stack.gif?raw=true" alt="Cupertino Pane - Roman Antonov" width="200px">
</div>

@@ -203,3 +204,3 @@

| **upperThanTop** | `boolean` | false | Allow user to drag pane upper than maximum top position. Useful with bulletin style without overflow-y |
| **touchAngle** | `number` | null | Allowable angle (in degrees) to trigger touch move |
| **touchAngle** | `number` | 45 | Allowable angle (in degrees) to trigger drag gestures |
| **buttonDestroy** | `boolean` | true | Determinate whetever close button will render or not |

@@ -425,3 +426,5 @@ | **bottomOffset** | `number` | 0 | Margin bottom for pane from screen bottom point |

Commit Message Format [angular commit format](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#-commit-message-format)
## License
Licensed under the MIT License. [View license](/LICENSE).

28

src/breakpoints.ts

@@ -1,6 +0,6 @@

import { CupertinoPane, CupertinoSettings } from './cupertino-pane';
import { PaneBreaks } from './models';
import { CupertinoPane } from './cupertino-pane';
import { PaneBreaks, CupertinoSettings } from './models';
/**
* Breakpoints builde
* Breakpoints builder
*/

@@ -167,17 +167,25 @@

if (this.settings.breaks[this.prevBreakpoint]?.enabled) {
this.instance.moveToBreak(this.prevBreakpoint);
if (!this.instance.isHidden()) {
// Move to any if removed
this.instance.moveToBreak(
this.prevBreakpoint,
this.settings.inverse && 'move'
);
}
}
// Move to any if removed
if (!this.settings.breaks[this.prevBreakpoint]?.enabled) {
let nextY = this.instance.swipeNextPoint(1, 1, this.getClosestBreakY());
const nextBreak = Object.entries(this.breaks).find(val => val[1] === nextY);
this.instance.moveToBreak(nextBreak[0]);
if (!this.instance.isHidden()) {
let nextY = this.instance.swipeNextPoint(1, 1, this.getClosestBreakY());
const nextBreak = Object.entries(this.breaks).find(val => val[1] === nextY);
this.instance.moveToBreak(nextBreak[0]);
}
}
// Re-calc height and top
// Re-calc top
this.instance.paneEl.style.top = this.settings.inverse
? `-${this.bottomer - this.settings.bottomOffset}px` : `unset`;
// Re-calc height
// TODO: with transition
this.instance.paneEl.style.height = `${this.instance.getPaneHeight()}px`;
this.instance.scrollElementInit();

@@ -184,0 +192,0 @@ this.instance.checkOpacityAttr(this.currentBreakpoint);

345

src/cupertino-pane.ts
import { Support } from './support';
import { Device } from './device';
import { Events } from './events';
import { PaneSettings, PaneBreaks, ZStackSettings } from './models';
import { CupertinoSettings, PaneBreaks, ZStackSettings } from './models';
import { Settings } from './settings';
import { Breakpoints } from './breakpoints';
export type CupertinoSettings = Partial<PaneSettings>;
import { Transitions } from './transitions';
import { ZStack } from './z-stack';

@@ -24,6 +25,6 @@ export class CupertinoPane {

public backdropEl: HTMLDivElement;
public followerEl: HTMLElement;
private draggableEl: HTMLDivElement;
private moveEl: HTMLDivElement;
private destroyButtonEl: HTMLDivElement;
private followerEl: HTMLElement;

@@ -34,12 +35,5 @@ private settings: CupertinoSettings = (new Settings()).instance;

private breakpoints: Breakpoints;
private transitions: Transitions;
private zStack: ZStack;
private zStackDefaults: ZStackSettings = {
pushElements: null,
minPushHeight: null,
cardYOffset: 0,
cardZScale: 0.93,
cardContrast: 0.85,
stackZAngle: 160,
};
constructor(private selector: (string | HTMLElement),

@@ -79,3 +73,5 @@ conf: CupertinoSettings = {}) {

this.breakpoints = new Breakpoints(this, this.settings);
this.events = new Events(this, this.settings, this.device, this.breakpoints);
this.zStack = new ZStack(this, this.settings, this.breakpoints);
this.transitions = new Transitions(this, this.settings, this.breakpoints, this.zStack);
this.events = new Events(this, this.settings, this.device, this.breakpoints, this.transitions);
}

@@ -153,3 +149,3 @@

height: 30px;
z-index: 12;
z-index: -1;
top: 0;

@@ -250,3 +246,6 @@ bottom: initial;

async present(conf: {animate: boolean} = {animate: false}): Promise<CupertinoPane> {
if (!this.el) return;
if (!this.el || !document.body.contains(this.el)) {
console.warn('Cupertino Pane: specified DOM element must be attached to the DOM');
return;
}

@@ -279,3 +278,7 @@ // Pane already exist and was rendered

// Show elements
// For some reason need timeout after show wrapper to make
// initial transition works
// TODO: timeout -> intersectionObserver + fix zStack
this.wrapperEl.style.display = 'block';
await new Promise(resolve => setTimeout(resolve, 100));
this.contentEl.style.display = 'block';

@@ -296,3 +299,3 @@ this.wrapperEl.classList.add('rendered');

this.followerEl.style.transform = `translateY(0px) translateZ(0px)`;
this.followerEl.style.transition = `all ${this.settings.animationDuration}ms ${this.getTimingFunction(this.settings.breaks[this.currentBreak()]?.bounce)} 0s`;
this.followerEl.style.transition = this.transitions.buildTransitionValue(this.settings.breaks[this.currentBreak()]?.bounce);
}

@@ -303,5 +306,5 @@

this.setZstackConfig(this.settings.zStack);
this.setPushMultiplicators();
}
this.zStack.setPushMultiplicators();
}
if ((this.settings.buttonClose && this.settings.buttonDestroy) && !this.settings.inverse) {

@@ -334,8 +337,5 @@ this.paneEl.appendChild(this.destroyButtonEl);

/****** Attach Events *******/
this.events.attachAllEvents();
/****** Animation & Transition ******/
if (conf.animate) {
await this.doTransition({type: 'present', translateY: this.breakpoints.breaks[this.settings.initialBreak]});
await this.transitions.doTransition({type: 'present', translateY: this.breakpoints.breaks[this.settings.initialBreak]});
} else {

@@ -350,3 +350,3 @@ // No initial transitions

this.settings.zStack.pushElements.forEach(item =>
this.pushTransition(
this.zStack.pushTransition(
document.querySelector(item),

@@ -366,2 +366,5 @@ this.breakpoints.breaks[this.settings.initialBreak], 'unset'

/****** Attach Events *******/
this.events.attachAllEvents();
return this;

@@ -443,2 +446,3 @@ }

// TODO: replace with body.contains()
public isPanePresented():boolean {

@@ -506,9 +510,2 @@ // Check through all presented panes

/**
* Private Utils methods
*/
private getTimingFunction(bounce) {
return bounce ? 'cubic-bezier(0.175, 0.885, 0.370, 1.120)' : this.settings.animationType;
}
private isBackdropPresented() {

@@ -540,36 +537,2 @@ return document.querySelector(`.cupertino-pane-wrapper .backdrop`)

};
// Z-Stack: Pushed elements multiplicators
private setPushMultiplicators(): void {
this.settings.zStack.pushElements.forEach((item) => {
let pushElement: HTMLElement = document.querySelector(item);
let multiplicator = this.getPushMulitplicator(pushElement);
multiplicator = multiplicator ? multiplicator + 1 : 1;
pushElement.style.setProperty('--push-multiplicator', `${multiplicator}`);
});
}
private clearPushMultiplicators(): void {
for (let i = 0; i < this.settings.zStack.pushElements.length; i++) {
let pushElement: HTMLElement = document.querySelector(
this.settings.zStack.pushElements[i]
);
let multiplicator = this.getPushMulitplicator(pushElement);
multiplicator -= 1;
if (multiplicator) {
pushElement.style.setProperty('--push-multiplicator', `${multiplicator}`);
} else {
pushElement.style.removeProperty('--push-multiplicator');
}
}
}
private getPushMulitplicator(el: HTMLElement): number {
let multiplicator: (string | number) = el.style.getPropertyValue('--push-multiplicator');
return parseInt(multiplicator);
}
public setZstackConfig(zStack: ZStackSettings): void {
this.settings.zStack = zStack ? {...this.zStackDefaults, ...zStack} : null;;
}

@@ -623,2 +586,7 @@ /**

public setZstackConfig(zStack: ZStackSettings): void {
// Allow user to reset config
this.settings.zStack = zStack ? {...this.zStack.zStackDefaults, ...zStack} : null;
}
/**

@@ -671,3 +639,3 @@ * Prevent dismiss event

public moveToBreak(val: string) {
public async moveToBreak(val: string, type: string = 'breakpoint'): Promise<true> {
if (!this.isPanePresented()) {

@@ -685,4 +653,5 @@ console.warn(`Cupertino Pane: Present pane before call moveToBreak()`);

this.checkOverflowAttr(this.breakpoints.breaks[val]);
this.doTransition({type: 'breakpoint', translateY: this.breakpoints.breaks[val]});
await this.transitions.doTransition({type, translateY: this.breakpoints.breaks[val]});
this.breakpoints.currentBreakpoint = this.breakpoints.breaks[val];
return Promise.resolve(true);
}

@@ -698,3 +667,3 @@

this.checkOpacityAttr(translateY);
this.doTransition({type: 'breakpoint', translateY });
this.transitions.doTransition({type: 'breakpoint', translateY });
}

@@ -713,3 +682,3 @@

this.doTransition({type: 'hide', translateY: this.screenHeightOffset});
this.transitions.doTransition({type: 'hide', translateY: this.screenHeightOffset});
}

@@ -735,22 +704,2 @@

private destroyResets(): void {
this.parentEl.appendChild(this.contentEl);
this.wrapperEl.remove();
/****** Detach Events *******/
this.events.detachAllEvents();
// Clear pushed elements
if (this.settings.zStack) {
// this.clearPushMultiplicators();
}
// Reset vars
delete this.rendered;
delete this.breakpoints.prevBreakpoint;
// Reset styles
this.contentEl.style.display = 'none';
}
public async destroy(conf: {

@@ -764,3 +713,5 @@ animate: boolean,

if (!this.isPanePresented()) {
// Experimentally allow to destroy, even if not currently in DOM,
// instead of this.isPanePresented() check with rendered (#163 issue)
if (!this.rendered) {
console.warn(`Cupertino Pane: Present pane before call destroy()`);

@@ -785,3 +736,3 @@ return null;

if (conf.animate) {
await this.doTransition({type: 'destroy', translateY: this.screenHeightOffset, destroyButton: conf.destroyButton});
await this.transitions.doTransition({type: 'destroy', translateY: this.screenHeightOffset, destroyButton: conf.destroyButton});
} else {

@@ -794,204 +745,22 @@ this.destroyResets();

private pushTransition(pushElement: HTMLElement, newPaneY: number, transition: string) {
let zStack = this.settings.zStack.pushElements;
pushElement.style.transition = transition;
newPaneY = this.screenHeightOffset - newPaneY;
const topHeight = this.settings.zStack.minPushHeight
? this.settings.zStack.minPushHeight : this.screenHeightOffset - this.breakpoints.bottomer;
const minHeight = this.screenHeightOffset - this.breakpoints.topper;
public destroyResets(): void {
this.parentEl.appendChild(this.contentEl);
this.wrapperEl.remove();
/****** Detach Events *******/
this.events.detachAllEvents();
// Math calculations
let multiplicator = this.getPushMulitplicator(pushElement);
let scaleNew = Math.pow(this.settings.zStack.cardZScale, multiplicator);
let scaleNormal = Math.pow(this.settings.zStack.cardZScale, multiplicator - 1);
let pushY = 6 + this.settings.zStack.cardYOffset; // 6 is iOS style offset for z-stacks
let yNew = -1 * (pushY * multiplicator);
let yNormal = (yNew + pushY);
let contrastNew = Math.pow(this.settings.zStack.cardContrast, multiplicator);
let contrastNormal = Math.pow(this.settings.zStack.cardContrast, multiplicator - 1);
// Clear pushed elements
if (this.settings.zStack) {
// this.clearPushMultiplicators();
}
// Accumulated styles from each pusher to pushed
const setStyles = (scale, y, contrast, border) => {
let exponentAngle = Math.pow(scale, this.settings.zStack.stackZAngle / 100);
pushElement.style.transform = `translateY(${y * (exponentAngle/scale)}px) scale(${scale})`;
pushElement.style.borderRadius = `${border}px`;
pushElement.style.filter = `contrast(${contrast})`;
// Reset vars
delete this.rendered;
delete this.breakpoints.prevBreakpoint;
// When destroy transition and last item moved we reduce multiplicators
let lastPushed = document.querySelector(zStack[zStack.length - 1]);
if (!newPaneY && pushElement.className === lastPushed.className) {
this.clearPushMultiplicators();
}
};
// Pusher cleared or pane destroyed
if (newPaneY <= topHeight) {
// defaults
setStyles(
scaleNormal, // scale
yNormal, // transformY
contrastNormal, // contrast
0 // border
);
return;
}
// Pusher drag/move
const getXbyY = (min, max) => {
let val = (minHeight * max - topHeight * min) * -1;
val -= (min - max) * newPaneY;
val /= (topHeight - minHeight);
if (val > max) val = max;
if (val < min) val = min;
return val;
};
setStyles(
getXbyY(scaleNew, scaleNormal),
getXbyY(yNew, yNormal),
getXbyY(contrastNew, contrastNormal),
getXbyY(-10, 0) * -1,
);
// Reset styles
this.contentEl.style.display = 'none';
}
/***********************************
* Transitions handler
*/
public doTransition(params:any = {}): Promise<true> {
return new Promise((resolve) => {
// touchmove simple event
if (params.type === 'move') {
this.paneEl.style.transition = 'all 0ms linear 0ms';
this.paneEl.style.transform = `translateY(${params.translateY}px) translateZ(0px)`;
// Bind for follower same transitions
if (this.followerEl) {
this.followerEl.style.transition = 'all 0ms linear 0ms';
this.followerEl.style.transform = `translateY(${params.translateY - this.breakpoints.breaks[this.settings.initialBreak]}px) translateZ(0px)`;
}
// Push transition for each element
if (this.settings.zStack) {
this.settings.zStack.pushElements.forEach(item =>
this.pushTransition(
document.querySelector(item),
this.getPanelTransformY(), 'all 0ms linear 0ms'
)
);
}
return resolve(true);
}
// Transition end
const transitionEnd = () => {
if (params.type === 'destroy') {
this.destroyResets();
}
this.paneEl.style.transition = `initial`;
// Bind for follower same transitions
if (this.followerEl) {
this.followerEl.style.transition = `initial`;
}
// Backdrop
if (this.settings.backdrop) {
if (params.type === 'destroy' || params.type === 'hide') {
this.backdropEl.style.transition = `initial`;
this.backdropEl.style.display = `none`;
}
}
// Emit event
if (params.type === 'present') {
this.settings.onDidPresent();
}
if (params.type === 'destroy') {
this.settings.onDidDismiss({destroyButton: params.destroyButton} as any);
}
this.settings.onTransitionEnd({target: document.body.contains(this.paneEl) ? this.paneEl : null});
// Remove listener
this.paneEl.removeEventListener('transitionend', transitionEnd);
return resolve(true);
};
// MoveToBreak, Touchend, Present, Hide, Destroy events
if (params.type === 'breakpoint'
|| params.type === 'end'
|| params.type === 'present'
|| params.type === 'hide'
|| params.type === 'destroy') {
// backdrop
if (this.settings.backdrop) {
if (this.isHidden()
|| params.type === 'hide'
|| params.type === 'destroy'
|| params.type === 'present') {
this.backdropEl.style.backgroundColor = 'rgba(0,0,0,.0)';
this.backdropEl.style.transition = `all ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
if (params.type !== 'hide' && params.type !== 'destroy') {
this.backdropEl.style.display = 'block';
setTimeout(() => {
this.backdropEl.style.backgroundColor = `rgba(0,0,0, ${this.settings.backdropOpacity})`;
}, 50);
}
}
}
// freemode
if (params.type === 'end' && this.settings.freeMode) return resolve(true);
// Get timing function && push for next
const nextBreak = Object.entries(this.breakpoints.breaks).find(
val => val[1] === params.translateY
);
let bounce = nextBreak && this.settings.breaks[nextBreak[0]]?.bounce;
const timingForNext = this.getTimingFunction(bounce);
// style
this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${timingForNext} 0s`;
// Bind for follower same transitions
if (this.followerEl) {
this.followerEl.style.transition = `transform ${this.settings.animationDuration}ms ${timingForNext} 0s`;
}
// Push transition
if (this.settings.zStack) {
// Reason of timeout is to hide empty space when present pane and push element
// we should start push after pushMinHeight but for present
// transition we can't calculate where pane Y is.
setTimeout(() => {
this.settings.zStack.pushElements.forEach(item =>
this.pushTransition(
document.querySelector(item),
params.translateY,
`all ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`
)
);
}, (this.settings.zStack.cardYOffset && params.type === 'present') ? 50 : 0);
}
// Main transitions
setTimeout(() => {
// Emit event
this.settings.onTransitionStart({translateY: {new: params.translateY}});
this.paneEl.style.transform = `translateY(${params.translateY}px) translateZ(0px)`;
// Bind for follower same transitions
if (this.followerEl) {
this.followerEl.style.transform = `translateY(${params.translateY - this.breakpoints.breaks[this.settings.initialBreak]}px) translateZ(0px)`;
}
}, params.type === 'present' ? 50 : 0);
let getNextBreakpoint = Object.entries(this.breakpoints.breaks).find(val => val[1] === params.translateY);
if (getNextBreakpoint) {
this.breakpoints.prevBreakpoint = getNextBreakpoint[0];
}
this.paneEl.addEventListener('transitionend', transitionEnd);
}
});
}
}

291

src/events.ts

@@ -1,5 +0,7 @@

import { CupertinoPane, CupertinoSettings } from 'cupertino-pane';
import { CupertinoPane } from './cupertino-pane';
import { CupertinoSettings } from './models';
import { Device } from './device';
import { Support } from './support';
import { Breakpoints } from './breakpoints';
import { Transitions } from './transitions';

@@ -21,9 +23,12 @@ /**

private inputBluredbyMove: boolean = false;
private movedByKeyboard: boolean = false;
private keyboardVisible: boolean = false;
private isScrolling: boolean = false;
private startPointOverTop: number;
constructor(private instance: CupertinoPane,
private settings: CupertinoSettings,
private settings: CupertinoSettings,
private device: Device,
private breakpoints: Breakpoints) {
private breakpoints: Breakpoints,
private transitions: Transitions) {
}

@@ -41,6 +46,11 @@

// scroll events for overflowEl
if (this.settings.topperOverflow) {
this.instance.overflowEl.addEventListener('scroll', this.onScrollCb);
}
// Handle keyboard events for cordova
if (this.settings.handleKeyboard && this.device.cordova) {
window.addEventListener('keyboardWillShow', this.onKeyboardShowCb);
window.addEventListener('keyboardWillHide', this.onKeyboardHideCb);
window.addEventListener('keyboardWillHide', this.onKeyboardWillHideCb);
}

@@ -77,6 +87,11 @@

// scroll events for overflowEl
if (this.settings.topperOverflow) {
this.instance.overflowEl.removeEventListener('scroll', this.onScrollCb);
}
// Handle keyboard events for cordova
if (this.settings.handleKeyboard && this.device.cordova) {
window.removeEventListener('keyboardWillShow', this.onKeyboardShowCb);
window.removeEventListener('keyboardWillHide', this.onKeyboardHideCb);
window.removeEventListener('keyboardWillHide', this.onKeyboardWillHideCb);
}

@@ -159,3 +174,3 @@

private touchStart(t) {
// Liam the best :)
// Event emitter

@@ -172,2 +187,5 @@ this.settings.onDragStart(t as CustomEvent);

// Not scrolling event by default -> on scroll will true
this.isScrolling = false;
// Allow pereventDismiss by default

@@ -184,5 +202,3 @@ this.instance.preventedDismiss = false;

// increase to scrolled value
if (this.contentScrollTop
&& this.willScrolled(t)
&& this.isDragScrollabe(t.path || t.composedPath())) {
if (this.contentScrollTop && this.willScrolled(t)) {
this.startY += this.contentScrollTop;

@@ -216,3 +232,12 @@ }

this.settings.onDrag(t);
// Disallow accidentaly clicks while slide gestures
this.allowClick = false;
// textarea scrollbar
if (this.isFormElement(t.target)
&& this.isElementScrollable(t.target)) {
return;
}
if (this.instance.disableDragEvents) {

@@ -231,15 +256,30 @@ this.steps = [];

if(t.type === 'mousemove' && !this.pointerDown) return;
// Delta
const diffY = clientY - this.steps[this.steps.length - 1].posY;
// Patch for 'touchmove' first start slowly events with velocity
let newVal = this.instance.getPanelTransformY()
+ ((this.steps.length < 2) ? (diffY * velocityY) : diffY);
// textarea scrollbar
if (this.isFormElement(t.target)
&& this.isElementScrollable(t.target)) {
// No Y changes
if (!Math.abs(diffY)) {
return;
}
let newVal = this.instance.getPanelTransformY() + diffY;
// First event after touchmove only
if (this.steps.length < 2) {
// Patch for 'touchmove' first event
// when start slowly events with small velocity
if (velocityY < 1) {
newVal = this.instance.getPanelTransformY() + (diffY * velocityY);
}
// Move while transition patch next transitions
let computedTranslateY = new WebKitCSSMatrix(
window.getComputedStyle(this.instance.paneEl).transform
).m42;
let transitionYDiff = computedTranslateY - this.instance.getPanelTransformY();
if (Math.abs(transitionYDiff)) {
newVal += transitionYDiff;
}
}
// Detect if input was blured

@@ -256,4 +296,6 @@ // TODO: Check that blured from pane child instance

// Touch angle
// Only for initial gesture
if (this.settings.touchAngle) {
// Only for initial gesture with 1 touchstart step
// Only not for scrolling events (scrolling already checked for angle)
if (this.settings.touchAngle
&& !this.isScrolling) {
let touchAngle;

@@ -272,8 +314,3 @@ const diffX = clientX - this.startX;

// Not allow move panel with positive overflow scroll
if (this.isDragScrollabe(t.path || t.composedPath())
&& this.instance.overflowEl.style.overflowY === 'auto') {
this.instance.overflowEl.addEventListener('scroll', (s: any) => {
this.contentScrollTop = s.target.scrollTop;
});
if (this.instance.overflowEl.style.overflowY === 'auto') {
if (this.settings.inverse && this.willScrolled(t)) {

@@ -285,50 +322,19 @@ this.contentScrollTop = 0;

// Scrolled -> Disable drag
if (!this.settings.inverse) {
if ((newVal > this.breakpoints.topper && this.contentScrollTop > 0)
|| (newVal <= this.breakpoints.topper)) {
return;
}
}
}
// Non-inverse (normal) gestures
if (!this.settings.inverse) {
// Disallow drag topper than top point
if (!this.settings.upperThanTop
&& (newVal <= this.breakpoints.topper)) {
this.instance.paneEl.style.transform = `translateY(${this.breakpoints.topper}px) translateZ(0px)`;
if (!this.settings.inverse && this.contentScrollTop > 0) {
return;
}
}
// Allow drag topper than top point
if (newVal <= this.breakpoints.topper
&& this.settings.upperThanTop) {
const screenDelta = this.instance.screen_height - this.instance.screenHeightOffset;
const differKoef = (screenDelta - this.instance.getPanelTransformY()) / (screenDelta - this.breakpoints.topper) / 8;
newVal = this.instance.getPanelTransformY() + (diffY * differKoef);
}
// Topper-top/Lower-bottom recognizers
let forceNewVal = this.handleTopperLowerPositions({
clientX, clientY,
newVal, diffY
});
if (forceNewVal) {
newVal = forceNewVal;
}
// Disallow drag lower then bottom
if (!this.settings.lowerThanBottom
&& newVal >= this.breakpoints.bottomer) {
this.instance.paneEl.style.transform = `translateY(${this.breakpoints.bottomer}px) translateZ(0px)`;
this.instance.checkOpacityAttr(newVal);
return;
}
} else {
// Inverse gestures
// Allow drag topper than top point
if (newVal >= this.breakpoints.topper
&& this.settings.upperThanTop) {
const screenDelta = this.instance.screen_height - this.instance.screenHeightOffset;
const differKoef = (screenDelta - this.instance.getPanelTransformY()) / (screenDelta - this.breakpoints.topper) / 8;
newVal = this.instance.getPanelTransformY() + (diffY * differKoef);
}
// Disallow drag topper than top point
if (!this.settings.upperThanTop
&& (newVal >= this.breakpoints.topper)) {
this.instance.paneEl.style.transform = `translateY(${this.breakpoints.topper}px) translateZ(0px)`;
return;
}
// No changes Y
if (this.instance.getPanelTransformY() === newVal) {
return;
}

@@ -352,8 +358,5 @@

// Disallow accidentaly clicks while slide gestures
this.allowClick = false;
this.instance.checkOpacityAttr(newVal);
this.instance.checkOverflowAttr(newVal);
this.instance.doTransition({type: 'move', translateY: newVal});
this.transitions.doTransition({type: 'move', translateY: newVal});
this.steps.push({posY: clientY, time: Date.now()});

@@ -375,3 +378,3 @@ }

// Swipe - next (if differ > 10)
const diff = this.steps[this.steps.length - 1]?.posY - this.steps[this.steps.length - 2]?.posY;
const diff = this.steps[this.steps.length - 1]?.posY - this.steps[this.steps.length - 2]?.posY;
// Set sensivity lower for web

@@ -407,4 +410,5 @@ const swipeNextSensivity = window.hasOwnProperty('cordova')

// tap event
if (isNaN(diff) || blurTapEvent) {
// touchend with allowClick === tapped event (no move triggered)
// skip next functions
if (this.allowClick || blurTapEvent) {
return;

@@ -427,3 +431,3 @@ }

this.instance.doTransition({type: 'end', translateY: closest});
this.transitions.doTransition({type: 'end', translateY: closest});
}

@@ -435,2 +439,12 @@

*/
public onScrollCb = (t) => this.onScroll(t);
private async onScroll(t) {
this.isScrolling = true;
this.contentScrollTop = t.target.scrollTop;
}
/**
* Click Event
* @param t
*/
public onClickCb = (t) => this.onClick(t);

@@ -469,2 +483,4 @@ private onClick(t) {

private onKeyboardShow(e) {
this.keyboardVisible = true;
// focud element not inside pane

@@ -484,3 +500,2 @@ if (!this.isPaneDescendant(document.activeElement)) {

this.movedByKeyboard = true;
this.breakpoints.prevBreakpoint = Object.entries(this.breakpoints.breaks).find(val => val[1] === this.instance.getPanelTransformY())[0];

@@ -503,10 +518,3 @@ let newHeight = this.settings.breaks[this.instance.currentBreak()].height + e.keyboardHeight;

this.instance.moveToHeight(newHeight);
}
// Remove offset because on new height no offsets needs
// Timeout await for keyboard presented
setTimeout(() => {
this.instance.setOverflowHeight(e.keyboardHeight - this.settings.topperOverflowOffset);
this.instance.overflowEl.scrollTop = (<any>document.activeElement).offsetTop;
}, 300);
}
}

@@ -518,9 +526,4 @@

*/
public onKeyboardHideCb = (e) => this.onKeyboardHide(e);
private onKeyboardHide(e) {
// Move back
if (!this.movedByKeyboard) {
return;
}
public onKeyboardWillHideCb = (e) => this.onKeyboardWillHide(e);
private onKeyboardWillHide(e) {
// pane not visible on viewport

@@ -535,6 +538,2 @@ if (!this.isOnViewport()) {

this.movedByKeyboard = false;
this.instance.setOverflowHeight();
if (this.inputBluredbyMove) {

@@ -552,2 +551,3 @@ this.inputBluredbyMove = false;

* Window resize event
* TODO: Prevent android unlock events
* @param e

@@ -557,2 +557,13 @@ */

private async onWindowResize(e) {
// We should separate keyboard and resize events
// If form element active - recognize here as KeyboardWillShow
if (this.isFormElement(document.activeElement)) {
return;
}
if (!this.isFormElement(document.activeElement)
&& this.keyboardVisible) {
this.keyboardVisible = false;
return;
}
await new Promise((resolve) => setTimeout(() => resolve(true), 150));

@@ -567,2 +578,71 @@ this.instance.updateScreenHeights();

/**
* Topper Than Top
* Lower Than Bottom
* Otherwise don't changes
* TODO: Merge same entry functions
*/
private handleTopperLowerPositions(coords: {
clientX: number, clientY: number,
newVal:number, diffY: number,
}):number {
// Non-inverse (normal) gestures
if (!this.settings.inverse) {
// Disallow drag topper than top point
if (!this.settings.upperThanTop
&& (coords.newVal <= this.breakpoints.topper)) {
return this.breakpoints.topper;
}
/**
* Allow drag topper than top point
*/
if (this.settings.upperThanTop
&& ((coords.newVal <= this.breakpoints.topper)
|| this.startPointOverTop)) {
// check that finger reach same position before enable normal swipe mode
if (!this.startPointOverTop) {
this.startPointOverTop = coords.clientY;
}
if (this.startPointOverTop < coords.clientY) {
delete this.startPointOverTop;
}
const screenDelta = this.instance.screen_height - this.instance.screenHeightOffset;
const differKoef = (screenDelta - this.instance.getPanelTransformY()) / (screenDelta - this.breakpoints.topper) / 8;
return this.instance.getPanelTransformY() + (coords.diffY * differKoef);
}
// Disallow drag lower then bottom
if (!this.settings.lowerThanBottom
&& coords.newVal >= this.breakpoints.bottomer) {
return this.breakpoints.bottomer;
}
}
if (this.settings.inverse) {
// Inverse gestures
// Allow drag topper than top point
if (this.settings.upperThanTop
&& ((coords.newVal >= this.breakpoints.topper)
|| this.startPointOverTop)) {
// check that finger reach same position before enable normal swipe mode
if (!this.startPointOverTop) {
this.startPointOverTop = coords.clientY;
}
if (this.startPointOverTop > coords.clientY) {
delete this.startPointOverTop;
}
const screenDelta = this.instance.screen_height - this.instance.screenHeightOffset;
const differKoef = (screenDelta - this.instance.getPanelTransformY()) / (screenDelta - this.breakpoints.topper) / 8;
return this.instance.getPanelTransformY() + (coords.diffY * differKoef);
}
// Disallow drag topper than top point
if (!this.settings.upperThanTop
&& (coords.newVal >= this.breakpoints.topper)) {
return this.breakpoints.topper;
}
}
}
private getEvetClientYX(ev, name) {

@@ -596,13 +676,5 @@ const targetTouch = ev.type === name && ev.targetTouches && (ev.targetTouches[0] || ev.changedTouches[0]);

/**
* Check if drag event fired by scrollable element
*/
private isDragScrollabe(path):boolean {
return !!path.find(item => item === this.instance.overflowEl);
}
private willScrolled(t): boolean {
if (!(this.isElementScrollable(this.instance.overflowEl)
&& this.instance.overflowEl.style.overflow !== 'hidden'
&& this.isDragScrollabe(t.path || t.composedPath()))) {
&& this.instance.overflowEl.style.overflow !== 'hidden')) {
return false;

@@ -614,2 +686,5 @@ }

private isPaneDescendant(el): boolean {
if (!el) {
return false;
}
let node = el.parentNode;

@@ -616,0 +691,0 @@ while (node != null) {

4

src/models.ts

@@ -72,2 +72,4 @@ export interface PaneBreak {

onTransitionEnd: (event?: any) => void
}
}
export type CupertinoSettings = Partial<PaneSettings>;

6

src/settings.ts

@@ -1,2 +0,2 @@

import { CupertinoSettings } from './cupertino-pane';
import { CupertinoSettings } from './models';

@@ -40,3 +40,3 @@ export class Settings {

touchMoveStopPropagation: false,
touchAngle: null,
touchAngle: 45,
breaks: {},

@@ -56,2 +56,2 @@ zStack: null,

}
}
}

9

tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./src/",
"baseUrl": "./",
"outDir": "./dist/",
"sourceMap": false,
"declaration": true,
"module": "es2015",
"declarationDir": "./dist/types",
"module": "es2020",
"target": "es2015",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es6",
"typeRoots": [

@@ -21,2 +22,2 @@ "node_modules/@types"

}
}
}
dist/breakpoints.d.ts
dist/cupertino-pane.d.ts
dist/cupertino-pane.esm.bundle.js
dist/cupertino-pane.esm.bundle.js.map
dist/device.d.ts
dist/events.d.ts
dist/models.d.ts
dist/settings.d.ts
dist/support.d.ts
docs/images/animals.gif
docs/images/maps.gif
docs/images/starbucks.gif
.circleci/config.yml

Sorry, the diff of this file is not supported yet

dist/cupertino-pane.js

Sorry, the diff of this file is too big to display

dist/cupertino-pane.js.map

Sorry, the diff of this file is not supported yet

dist/cupertino-pane.min.js.map

Sorry, the diff of this file is not supported yet

docs/images/overflow.gif

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc