New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.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.1.57 to 1.1.58

docs/images/animals.gif
docs/images/bulletin.gif
docs/images/maps.gif
docs/images/overflow.gif
docs/images/starbucks.gif
playground/bulletin.html
playground/follower.html
playground/img/cup-1.png
playground/img/cup-2.png
playground/img/starbucks.png

3

dist/cupertino-pane.d.ts

@@ -42,2 +42,3 @@ import { Settings } from './models';

*/
private touchStartCb;
private touchStart;

@@ -48,2 +49,3 @@ /**

*/
private touchMoveCb;
private touchMove;

@@ -54,2 +56,3 @@ /**

*/
private touchEndCb;
private touchEnd;

@@ -56,0 +59,0 @@ private swipeNextPoint;

122

dist/cupertino-pane.esm.bundle.js
/**
* Cupertino Pane 1.1.57
* Cupertino Pane 1.1.58
* Multiplatform slide-over pane

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

*
* Released on: May 29, 2020
* Released on: June 10, 2020
*/

@@ -46,3 +46,4 @@

}
static pointerEvents() {
static get pointerEvents() {
return !!window['PointerEvent'] && ('maxTouchPoints' in window.navigator) && window.navigator.maxTouchPoints > 0;
}

@@ -161,2 +162,3 @@ }

animationDuration: 300,
dragBy: ['.cupertino-pane-wrapper .pane'],
bottomOffset: 0,

@@ -169,6 +171,6 @@ darkMode: false,

topperOverflowOffset: 0,
lowerThanBottom: true,
showDraggable: true,
draggableOver: false,
clickBottomOpen: true,
dragByCursor: false,
simulateTouch: true,

@@ -200,2 +202,17 @@ passiveListeners: true,

this.device = new Device();
/**
* Touch Start Event
* @param t
*/
this.touchStartCb = (t) => this.touchStart(t);
/**
* Touch Move Event
* @param t
*/
this.touchMoveCb = (t) => this.touchMove(t);
/**
* Touch End Event
* @param t
*/
this.touchEndCb = (t) => this.touchEnd(t);
this.swipeNextPoint = (diff, maxDiff, closest) => {

@@ -427,4 +444,5 @@ if (this.currentBreakpoint === this.breaks['top']) {

this.followerEl = document.querySelector(this.settings.followerElement);
this.followerEl.style.willChange = 'transform';
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.settings.animationType} 0s`;
}

@@ -494,3 +512,7 @@ if (!this.settings.showDraggable) {

/****** Attach Events *******/
this.attachEvents();
this.settings.dragBy.forEach((selector) => {
const el = document.querySelector(selector);
if (el)
this.attachEvents(el);
});
/****** Animation & Transition ******/

@@ -523,6 +545,2 @@ if (conf.animate) {

}
/**
* Touch Start Event
* @param t
*/
touchStart(t) {

@@ -542,6 +560,2 @@ // Event emitter

}
/**
* Touch Move Event
* @param t
*/
touchMove(t) {

@@ -579,2 +593,8 @@ // Event emitter

}
// Custom Lower then bottom
// (for example in follower drag events)
if (!this.settings.lowerThanBottom && (newVal >= this.bottomer)) {
this.destroy({ animate: true });
return;
}
this.checkOpacityAttr(newVal);

@@ -585,6 +605,2 @@ this.checkOverflowAttr(newVal);

}
/**
* Touch End Event
* @param t
*/
touchEnd(t) {

@@ -629,12 +645,8 @@ // Event emitter

}
attachEvents() {
let el = this.paneEl;
if (this.settings.dragByCursor) {
el = this.draggableEl;
}
attachEvents(el) {
// Touch Events
if (!Support.touch && Support.pointerEvents) {
el.addEventListener(this.touchEvents.start, (t) => this.touchStart(t), false);
el.addEventListener(this.touchEvents.move, (t) => this.touchMove(t), false);
el.addEventListener(this.touchEvents.end, (t) => this.touchEnd(t), false);
el.addEventListener(this.touchEvents.start, this.touchStartCb, false);
el.addEventListener(this.touchEvents.move, this.touchMoveCb, false);
el.addEventListener(this.touchEvents.end, this.touchEndCb, false);
}

@@ -644,26 +656,22 @@ else {

const passiveListener = this.touchEvents.start === 'touchstart' && Support.passiveListener && this.settings.passiveListeners ? { passive: true, capture: false } : false;
el.addEventListener(this.touchEvents.start, (t) => this.touchStart(t), passiveListener);
el.addEventListener(this.touchEvents.move, (t) => this.touchMove(t), Support.passiveListener ? { passive: false, capture: false } : false);
el.addEventListener(this.touchEvents.end, (t) => this.touchEnd(t), passiveListener);
el.addEventListener(this.touchEvents.start, this.touchStartCb, passiveListener);
el.addEventListener(this.touchEvents.move, this.touchMoveCb, Support.passiveListener ? { passive: false, capture: false } : false);
el.addEventListener(this.touchEvents.end, this.touchEndCb, passiveListener);
if (this.touchEvents['cancel']) {
el.addEventListener(this.touchEvents['cancel'], (t) => this.touchEnd(t), passiveListener);
el.addEventListener(this.touchEvents['cancel'], this.touchEndCb, passiveListener);
}
}
if ((this.settings.simulateTouch && !this.device.ios && !this.device.android) || (this.settings.simulateTouch && !Support.touch && this.device.ios)) {
el.addEventListener('mousedown', (t) => this.touchStart(t), false);
el.addEventListener('mousemove', (t) => this.touchMove(t), false);
el.addEventListener('mouseup', (t) => this.touchEnd(t), false);
el.addEventListener('mousedown', this.touchStartCb, false);
el.addEventListener('mousemove', this.touchMoveCb, false);
el.addEventListener('mouseup', this.touchEndCb, false);
}
}
}
detachEvents() {
let el = this.paneEl;
if (this.settings.dragByCursor) {
el = this.draggableEl;
}
detachEvents(el) {
// Touch Events
if (!Support.touch && Support.pointerEvents) {
el.removeEventListener(this.touchEvents.start, (t) => this.touchStart(t), false);
el.removeEventListener(this.touchEvents.move, (t) => this.touchMove(t), false);
el.removeEventListener(this.touchEvents.end, (t) => this.touchEnd(t), false);
el.removeEventListener(this.touchEvents.start, this.touchStartCb, false);
el.removeEventListener(this.touchEvents.move, this.touchMoveCb, false);
el.removeEventListener(this.touchEvents.end, this.touchEndCb, false);
}

@@ -673,13 +681,13 @@ else {

const passiveListener = this.touchEvents.start === 'onTouchStart' && Support.passiveListener && this.settings.passiveListeners ? { passive: true, capture: false } : false;
el.removeEventListener(this.touchEvents.start, (t) => this.touchStart(t), passiveListener);
el.removeEventListener(this.touchEvents.move, (t) => this.touchMove(t), false);
el.removeEventListener(this.touchEvents.end, (t) => this.touchEnd(t), passiveListener);
el.removeEventListener(this.touchEvents.start, this.touchStartCb, passiveListener);
el.removeEventListener(this.touchEvents.move, this.touchMoveCb, false);
el.removeEventListener(this.touchEvents.end, this.touchEndCb, passiveListener);
if (this.touchEvents['cancel']) {
el.removeEventListener(this.touchEvents['cancel'], (t) => this.touchEnd(t), passiveListener);
el.removeEventListener(this.touchEvents['cancel'], this.touchEndCb, passiveListener);
}
}
if ((this.settings.simulateTouch && !this.device.ios && !this.device.android) || (this.settings.simulateTouch && !Support.touch && this.device.ios)) {
el.removeEventListener('mousedown', (t) => this.touchStart(t), false);
el.removeEventListener('mousemove', (t) => this.touchMove(t), false);
el.removeEventListener('mouseup', (t) => this.touchEnd(t), false);
el.removeEventListener('mousedown', this.touchStartCb, false);
el.removeEventListener('mousemove', this.touchMoveCb, false);
el.removeEventListener('mouseup', this.touchEndCb, false);
}

@@ -755,5 +763,9 @@ }

this.parentEl.appendChild(this.contentEl);
this.parentEl.removeChild(this.wrapperEl);
this.wrapperEl.remove();
/****** Detach Events *******/
this.detachEvents();
this.settings.dragBy.forEach((selector) => {
const el = document.querySelector(selector);
if (el)
this.detachEvents(el);
});
// Reset vars

@@ -787,7 +799,7 @@ this.currentBreakpoint = this.breaks[this.settings.initialBreak];

if (params.type === 'move') {
this.paneEl.style.transition = 'initial';
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 = 'initial';
this.followerEl.style.transition = 'all 0ms linear 0ms';
this.followerEl.style.transform = `translateY(${params.translateY - this.breaks[this.settings.initialBreak]}px) translateZ(0px)`;

@@ -859,6 +871,2 @@ }

this.paneEl.style.transform = `translateY(${this.screen_height}px) translateZ(0px)`;
// Bind for follower same transitions
if (this.followerEl) {
this.followerEl.style.transform = `translateY(${this.screen_height - this.breaks[this.settings.initialBreak]}px) translateZ(0px)`;
}
setTimeout(() => {

@@ -868,3 +876,3 @@ this.paneEl.style.transform = `translateY(${this.breaks[this.settings.initialBreak]}px) translateZ(0px)`;

if (this.followerEl) {
this.followerEl.style.transform = `translateY(${this.breaks[this.settings.initialBreak] - this.breaks[this.settings.initialBreak]}px) translateZ(0px)`;
this.followerEl.style.transform = `translateY(0px) translateZ(0px)`;
}

@@ -871,0 +879,0 @@ }, 50);

122

dist/cupertino-pane.js
/**
* Cupertino Pane 1.1.57
* Cupertino Pane 1.1.58
* Multiplatform slide-over pane

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

*
* Released on: May 29, 2020
* Released on: June 10, 2020
*/

@@ -50,3 +50,4 @@

}
static pointerEvents() {
static get pointerEvents() {
return !!window['PointerEvent'] && ('maxTouchPoints' in window.navigator) && window.navigator.maxTouchPoints > 0;
}

@@ -165,2 +166,3 @@ }

animationDuration: 300,
dragBy: ['.cupertino-pane-wrapper .pane'],
bottomOffset: 0,

@@ -173,6 +175,6 @@ darkMode: false,

topperOverflowOffset: 0,
lowerThanBottom: true,
showDraggable: true,
draggableOver: false,
clickBottomOpen: true,
dragByCursor: false,
simulateTouch: true,

@@ -204,2 +206,17 @@ passiveListeners: true,

this.device = new Device();
/**
* Touch Start Event
* @param t
*/
this.touchStartCb = (t) => this.touchStart(t);
/**
* Touch Move Event
* @param t
*/
this.touchMoveCb = (t) => this.touchMove(t);
/**
* Touch End Event
* @param t
*/
this.touchEndCb = (t) => this.touchEnd(t);
this.swipeNextPoint = (diff, maxDiff, closest) => {

@@ -431,4 +448,5 @@ if (this.currentBreakpoint === this.breaks['top']) {

this.followerEl = document.querySelector(this.settings.followerElement);
this.followerEl.style.willChange = 'transform';
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.settings.animationType} 0s`;
}

@@ -498,3 +516,7 @@ if (!this.settings.showDraggable) {

/****** Attach Events *******/
this.attachEvents();
this.settings.dragBy.forEach((selector) => {
const el = document.querySelector(selector);
if (el)
this.attachEvents(el);
});
/****** Animation & Transition ******/

@@ -527,6 +549,2 @@ if (conf.animate) {

}
/**
* Touch Start Event
* @param t
*/
touchStart(t) {

@@ -546,6 +564,2 @@ // Event emitter

}
/**
* Touch Move Event
* @param t
*/
touchMove(t) {

@@ -583,2 +597,8 @@ // Event emitter

}
// Custom Lower then bottom
// (for example in follower drag events)
if (!this.settings.lowerThanBottom && (newVal >= this.bottomer)) {
this.destroy({ animate: true });
return;
}
this.checkOpacityAttr(newVal);

@@ -589,6 +609,2 @@ this.checkOverflowAttr(newVal);

}
/**
* Touch End Event
* @param t
*/
touchEnd(t) {

@@ -633,12 +649,8 @@ // Event emitter

}
attachEvents() {
let el = this.paneEl;
if (this.settings.dragByCursor) {
el = this.draggableEl;
}
attachEvents(el) {
// Touch Events
if (!Support.touch && Support.pointerEvents) {
el.addEventListener(this.touchEvents.start, (t) => this.touchStart(t), false);
el.addEventListener(this.touchEvents.move, (t) => this.touchMove(t), false);
el.addEventListener(this.touchEvents.end, (t) => this.touchEnd(t), false);
el.addEventListener(this.touchEvents.start, this.touchStartCb, false);
el.addEventListener(this.touchEvents.move, this.touchMoveCb, false);
el.addEventListener(this.touchEvents.end, this.touchEndCb, false);
}

@@ -648,26 +660,22 @@ else {

const passiveListener = this.touchEvents.start === 'touchstart' && Support.passiveListener && this.settings.passiveListeners ? { passive: true, capture: false } : false;
el.addEventListener(this.touchEvents.start, (t) => this.touchStart(t), passiveListener);
el.addEventListener(this.touchEvents.move, (t) => this.touchMove(t), Support.passiveListener ? { passive: false, capture: false } : false);
el.addEventListener(this.touchEvents.end, (t) => this.touchEnd(t), passiveListener);
el.addEventListener(this.touchEvents.start, this.touchStartCb, passiveListener);
el.addEventListener(this.touchEvents.move, this.touchMoveCb, Support.passiveListener ? { passive: false, capture: false } : false);
el.addEventListener(this.touchEvents.end, this.touchEndCb, passiveListener);
if (this.touchEvents['cancel']) {
el.addEventListener(this.touchEvents['cancel'], (t) => this.touchEnd(t), passiveListener);
el.addEventListener(this.touchEvents['cancel'], this.touchEndCb, passiveListener);
}
}
if ((this.settings.simulateTouch && !this.device.ios && !this.device.android) || (this.settings.simulateTouch && !Support.touch && this.device.ios)) {
el.addEventListener('mousedown', (t) => this.touchStart(t), false);
el.addEventListener('mousemove', (t) => this.touchMove(t), false);
el.addEventListener('mouseup', (t) => this.touchEnd(t), false);
el.addEventListener('mousedown', this.touchStartCb, false);
el.addEventListener('mousemove', this.touchMoveCb, false);
el.addEventListener('mouseup', this.touchEndCb, false);
}
}
}
detachEvents() {
let el = this.paneEl;
if (this.settings.dragByCursor) {
el = this.draggableEl;
}
detachEvents(el) {
// Touch Events
if (!Support.touch && Support.pointerEvents) {
el.removeEventListener(this.touchEvents.start, (t) => this.touchStart(t), false);
el.removeEventListener(this.touchEvents.move, (t) => this.touchMove(t), false);
el.removeEventListener(this.touchEvents.end, (t) => this.touchEnd(t), false);
el.removeEventListener(this.touchEvents.start, this.touchStartCb, false);
el.removeEventListener(this.touchEvents.move, this.touchMoveCb, false);
el.removeEventListener(this.touchEvents.end, this.touchEndCb, false);
}

@@ -677,13 +685,13 @@ else {

const passiveListener = this.touchEvents.start === 'onTouchStart' && Support.passiveListener && this.settings.passiveListeners ? { passive: true, capture: false } : false;
el.removeEventListener(this.touchEvents.start, (t) => this.touchStart(t), passiveListener);
el.removeEventListener(this.touchEvents.move, (t) => this.touchMove(t), false);
el.removeEventListener(this.touchEvents.end, (t) => this.touchEnd(t), passiveListener);
el.removeEventListener(this.touchEvents.start, this.touchStartCb, passiveListener);
el.removeEventListener(this.touchEvents.move, this.touchMoveCb, false);
el.removeEventListener(this.touchEvents.end, this.touchEndCb, passiveListener);
if (this.touchEvents['cancel']) {
el.removeEventListener(this.touchEvents['cancel'], (t) => this.touchEnd(t), passiveListener);
el.removeEventListener(this.touchEvents['cancel'], this.touchEndCb, passiveListener);
}
}
if ((this.settings.simulateTouch && !this.device.ios && !this.device.android) || (this.settings.simulateTouch && !Support.touch && this.device.ios)) {
el.removeEventListener('mousedown', (t) => this.touchStart(t), false);
el.removeEventListener('mousemove', (t) => this.touchMove(t), false);
el.removeEventListener('mouseup', (t) => this.touchEnd(t), false);
el.removeEventListener('mousedown', this.touchStartCb, false);
el.removeEventListener('mousemove', this.touchMoveCb, false);
el.removeEventListener('mouseup', this.touchEndCb, false);
}

@@ -759,5 +767,9 @@ }

this.parentEl.appendChild(this.contentEl);
this.parentEl.removeChild(this.wrapperEl);
this.wrapperEl.remove();
/****** Detach Events *******/
this.detachEvents();
this.settings.dragBy.forEach((selector) => {
const el = document.querySelector(selector);
if (el)
this.detachEvents(el);
});
// Reset vars

@@ -791,7 +803,7 @@ this.currentBreakpoint = this.breaks[this.settings.initialBreak];

if (params.type === 'move') {
this.paneEl.style.transition = 'initial';
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 = 'initial';
this.followerEl.style.transition = 'all 0ms linear 0ms';
this.followerEl.style.transform = `translateY(${params.translateY - this.breaks[this.settings.initialBreak]}px) translateZ(0px)`;

@@ -863,6 +875,2 @@ }

this.paneEl.style.transform = `translateY(${this.screen_height}px) translateZ(0px)`;
// Bind for follower same transitions
if (this.followerEl) {
this.followerEl.style.transform = `translateY(${this.screen_height - this.breaks[this.settings.initialBreak]}px) translateZ(0px)`;
}
setTimeout(() => {

@@ -872,3 +880,3 @@ this.paneEl.style.transform = `translateY(${this.breaks[this.settings.initialBreak]}px) translateZ(0px)`;

if (this.followerEl) {
this.followerEl.style.transform = `translateY(${this.breaks[this.settings.initialBreak] - this.breaks[this.settings.initialBreak]}px) translateZ(0px)`;
this.followerEl.style.transform = `translateY(0px) translateZ(0px)`;
}

@@ -875,0 +883,0 @@ }, 50);

6

dist/cupertino-pane.min.js
/**
* Cupertino Pane 1.1.57
* Cupertino Pane 1.1.58
* Multiplatform slide-over pane

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

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

3

dist/models.d.ts

@@ -33,6 +33,7 @@ export interface PaneBreaks {

topperOverflowOffset: number;
lowerThanBottom: boolean;
showDraggable: boolean;
draggableOver: boolean;
clickBottomOpen: boolean;
dragByCursor: boolean;
dragBy: string[];
simulateTouch: boolean;

@@ -39,0 +40,0 @@ passiveListeners: boolean;

2

dist/support.d.ts

@@ -7,3 +7,3 @@ export declare class Support {

static get gestures(): boolean;
static pointerEvents(): void;
static get pointerEvents(): boolean;
}

2

package.json
{
"name": "cupertino-pane",
"description": "Multiplatform slide-over pane",
"version": "1.1.57",
"version": "1.1.58",
"author": "Roman Antonov (roman-rr)",

@@ -6,0 +6,0 @@ "homepage": "https://github.com/roman-rr/cupertino-pane/",

30

README.md

@@ -60,5 +60,6 @@ <!-- https://github.com/ai/nanoid - cover -->

<div style="display:flex;flex-wrap:wrap;">
<img src="https://github.com/roman-rr/cupertino-pane/blob/master/docs/images/1.gif?raw=true" alt="Cupertino Pane - Roman Antonov" width="220px">
<img src="https://github.com/roman-rr/cupertino-pane/blob/master/docs/images/2.gif?raw=true" alt="Cupertino Pane - Roman Antonov" width="220px">
<img src="https://github.com/roman-rr/cupertino-pane/blob/master/docs/images/3.gif?raw=true" alt="Cupertino Pane - Roman Antonov" width="220px">
<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">
</div>

@@ -164,2 +165,3 @@

| **freeMode** | `boolean` | false | On `true` will remove automatical magnetic effects to near breakpoint |
| **lowerThanBottom** | `boolean` | true | By default allow user to drag pane lower than bottom position. On `false` will automatically place pane to bottom position on lower than bottom attemption |
| **buttonClose** | `boolean` | true | Determinate whetever close button will render or not |

@@ -172,3 +174,3 @@ | **bottomOffset** | `number` | 0 | Margin bottom for pane from screen bottom point |

| **clickBottomOpen** | `boolean` | true | If bottom position reached, simple click to pane will open pane to the next upper point |
| **dragByCursor** | `boolean` | false | Drag pane only with draggabale top cursor |
| **dragBy** | `string[]` | ['.cupertino-pane-wrapper .pane'] | Array of selectors for whom elements drag events will be attached. If you want drag only by draggable component set option to ['.pane .draggable'] |
| **simulateTouch** | `boolean` | true | Simulate touch events for Desktop |

@@ -274,20 +276,12 @@ | **passiveListeners** | `boolean` | true | (Indicates that the function specified by listener will never call preventDefault()) |

## Future Goals
- [UI] Bulletin playground
- [UI] Starbucks playground
<!--
https://cdn.dribbble.com/users/1187417/screenshots/6340744/coffee-app-booking.jpg
https://dribbble.com/shots/6372790-Coffee-Ordering-Animation-Starbucks
https://medium.com/@riz_maulana/dribbble-challenge-coffee-ordering-animation-cf3ae17785fe
-->
- [Docs] All playground live
- [Docs] Bulletin, Starbucks video
- [Quality] Click item/drag pane precision on device
- [Quality] Max diff
- [Quality] Precision delta counts experiments + option
- [Quality] Touch angle 45
- [Quality] Click item/drag pane precision on device (threshold)
- [Quality] Topper than top (if scroll - overflow enable else 10px-20px)
- [Quality] Auto detection horizontall drag events inside pane
- [Quality] Transition timing: easeOutElastic
- [Accurance] Draw experiment application (Normal/TimeStamp/Native)
- [Accurance] Native Touch Plugin
- [UI] 3D effect (ion-modal example)
- [UI] Drawer control effect (simple/circle)
- [UI] 3D button toggle effect
- [Docs] Docs engine (React)
- [Docs] Docs engine
- [Docs] Live example hosted in pages

@@ -294,0 +288,0 @@ - [Platforms] React Native version with one core

98

src/cupertino-pane.ts

@@ -16,2 +16,3 @@ import { Support } from './support';

animationDuration: 300,
dragBy: ['.cupertino-pane-wrapper .pane'],
bottomOffset: 0,

@@ -24,6 +25,6 @@ darkMode: false,

topperOverflowOffset: 0,
lowerThanBottom: true,
showDraggable: true,
draggableOver: false,
clickBottomOpen: true,
dragByCursor: false,
simulateTouch: true,

@@ -263,4 +264,5 @@ passiveListeners: true,

);
this.followerEl.style.willChange = 'transform';
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.settings.animationType} 0s`;
}

@@ -343,3 +345,6 @@

/****** Attach Events *******/
this.attachEvents();
this.settings.dragBy.forEach((selector) => {
const el = document.querySelector(selector);
if (el) this.attachEvents(el);
});

@@ -378,2 +383,3 @@ /****** Animation & Transition ******/

*/
private touchStartCb = (t) => this.touchStart(t);
private touchStart(t) {

@@ -399,2 +405,3 @@ // Event emitter

*/
private touchMoveCb = (t) => this.touchMove(t);
private touchMove(t) {

@@ -410,3 +417,3 @@ // Event emitter

if(t.type === 'pointermove' && !this.pointerDown) return;
// Delta

@@ -437,2 +444,9 @@ let n = screenY;

// Custom Lower then bottom
// (for example in follower drag events)
if (!this.settings.lowerThanBottom && (newVal >= this.bottomer)) {
this.destroy({animate:true});
return;
}
this.checkOpacityAttr(newVal);

@@ -448,2 +462,3 @@ this.checkOverflowAttr(newVal);

*/
private touchEndCb = (t) => this.touchEnd(t);
private touchEnd(t) {

@@ -561,13 +576,8 @@

private attachEvents() {
let el: HTMLElement = this.paneEl;
if (this.settings.dragByCursor) {
el = this.draggableEl;
}
private attachEvents(el: Element) {
// Touch Events
if (!Support.touch && Support.pointerEvents) {
el.addEventListener(this.touchEvents.start, (t) => this.touchStart(t), false);
el.addEventListener(this.touchEvents.move, (t) => this.touchMove(t), false);
el.addEventListener(this.touchEvents.end, (t) => this.touchEnd(t), false);
el.addEventListener(this.touchEvents.start, this.touchStartCb, false);
el.addEventListener(this.touchEvents.move, this.touchMoveCb, false);
el.addEventListener(this.touchEvents.end, this.touchEndCb, false);
} else {

@@ -577,7 +587,7 @@

const passiveListener = this.touchEvents.start === 'touchstart' && Support.passiveListener && this.settings.passiveListeners ? { passive: true, capture: false } : false;
el.addEventListener(this.touchEvents.start, (t) => this.touchStart(t), passiveListener);
el.addEventListener(this.touchEvents.move, (t) => this.touchMove(t), Support.passiveListener ? { passive: false, capture: false } : false);
el.addEventListener(this.touchEvents.end, (t) => this.touchEnd(t), passiveListener);
el.addEventListener(this.touchEvents.start, this.touchStartCb, passiveListener);
el.addEventListener(this.touchEvents.move, this.touchMoveCb, Support.passiveListener ? { passive: false, capture: false } : false);
el.addEventListener(this.touchEvents.end, this.touchEndCb, passiveListener);
if (this.touchEvents['cancel']) {
el.addEventListener(this.touchEvents['cancel'], (t) => this.touchEnd(t), passiveListener);
el.addEventListener(this.touchEvents['cancel'], this.touchEndCb, passiveListener);
}

@@ -587,36 +597,29 @@ }

if ((this.settings.simulateTouch && !this.device.ios && !this.device.android) || (this.settings.simulateTouch && !Support.touch && this.device.ios)) {
el.addEventListener('mousedown', (t) => this.touchStart(t), false);
el.addEventListener('mousemove', (t) => this.touchMove(t), false);
el.addEventListener('mouseup', (t) => this.touchEnd(t), false);
el.addEventListener('mousedown', this.touchStartCb, false);
el.addEventListener('mousemove', this.touchMoveCb, false);
el.addEventListener('mouseup', this.touchEndCb, false);
}
}
}
private detachEvents() {
let el: HTMLElement = this.paneEl;
if (this.settings.dragByCursor) {
el = this.draggableEl;
}
private detachEvents(el: Element) {
// Touch Events
if (!Support.touch && Support.pointerEvents) {
el.removeEventListener(this.touchEvents.start, (t) => this.touchStart(t), false);
el.removeEventListener(this.touchEvents.move, (t) => this.touchMove(t), false);
el.removeEventListener(this.touchEvents.end, (t) => this.touchEnd(t), false);
el.removeEventListener(this.touchEvents.start, this.touchStartCb, false);
el.removeEventListener(this.touchEvents.move, this.touchMoveCb, false);
el.removeEventListener(this.touchEvents.end, this.touchEndCb, false);
} else {
if (Support.touch) {
const passiveListener = this.touchEvents.start === 'onTouchStart' && Support.passiveListener && this.settings.passiveListeners ? { passive: true, capture: false } : false;
el.removeEventListener(this.touchEvents.start, (t) => this.touchStart(t), passiveListener);
el.removeEventListener(this.touchEvents.move, (t) => this.touchMove(t), false);
el.removeEventListener(this.touchEvents.end, (t) => this.touchEnd(t), passiveListener);
el.removeEventListener(this.touchEvents.start, this.touchStartCb, passiveListener);
el.removeEventListener(this.touchEvents.move, this.touchMoveCb, false);
el.removeEventListener(this.touchEvents.end, this.touchEndCb, passiveListener);
if (this.touchEvents['cancel']) {
el.removeEventListener(this.touchEvents['cancel'], (t) => this.touchEnd(t), passiveListener);
el.removeEventListener(this.touchEvents['cancel'], this.touchEndCb, passiveListener);
}
}
if ((this.settings.simulateTouch && !this.device.ios && !this.device.android) || (this.settings.simulateTouch && !Support.touch && this.device.ios)) {
el.removeEventListener('mousedown', (t) => this.touchStart(t), false);
el.removeEventListener('mousemove', (t) => this.touchMove(t), false);
el.removeEventListener('mouseup', (t) => this.touchEnd(t), false);
el.removeEventListener('mousedown', this.touchStartCb, false);
el.removeEventListener('mousemove', this.touchMoveCb, false);
el.removeEventListener('mouseup', this.touchEndCb, false);
}

@@ -703,7 +706,10 @@ }

this.parentEl.appendChild(this.contentEl);
this.parentEl.removeChild(this.wrapperEl);
this.wrapperEl.remove();
/****** Detach Events *******/
this.detachEvents();
this.settings.dragBy.forEach((selector) => {
const el = document.querySelector(selector);
if (el) this.detachEvents(el);
});
// Reset vars

@@ -741,7 +747,7 @@ this.currentBreakpoint = this.breaks[this.settings.initialBreak];

if (params.type === 'move') {
this.paneEl.style.transition = 'initial';
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 = 'initial';
this.followerEl.style.transition = 'all 0ms linear 0ms';
this.followerEl.style.transform = `translateY(${params.translateY - this.breaks[this.settings.initialBreak]}px) translateZ(0px)`;

@@ -823,6 +829,2 @@ }

this.paneEl.style.transform = `translateY(${this.screen_height}px) translateZ(0px)`;
// Bind for follower same transitions
if (this.followerEl) {
this.followerEl.style.transform = `translateY(${this.screen_height - this.breaks[this.settings.initialBreak]}px) translateZ(0px)`;
}
setTimeout(() => {

@@ -832,3 +834,3 @@ this.paneEl.style.transform = `translateY(${this.breaks[this.settings.initialBreak]}px) translateZ(0px)`;

if (this.followerEl) {
this.followerEl.style.transform = `translateY(${this.breaks[this.settings.initialBreak] - this.breaks[this.settings.initialBreak]}px) translateZ(0px)`;
this.followerEl.style.transform = `translateY(0px) translateZ(0px)`;
}

@@ -835,0 +837,0 @@ }, 50);

3

src/models.ts

@@ -22,6 +22,7 @@ export interface PaneBreaks {

topperOverflowOffset: number;
lowerThanBottom: boolean;
showDraggable: boolean;
draggableOver: boolean;
clickBottomOpen: boolean;
dragByCursor: boolean;
dragBy: string[];
simulateTouch: boolean;

@@ -28,0 +29,0 @@ passiveListeners: boolean;

4

src/support.ts

@@ -37,5 +37,5 @@ export class Support {

public static pointerEvents() {
!!window['PointerEvent'] && ('maxTouchPoints' in window.navigator) && window.navigator.maxTouchPoints > 0
public static get pointerEvents() {
return !!window['PointerEvent'] && ('maxTouchPoints' in window.navigator) && window.navigator.maxTouchPoints > 0
}
}
docs/images/1.gif
docs/images/2.gif
docs/images/3.gif
dist/cupertino-pane.esm.bundle.js.map

Sorry, the diff of this file is not supported yet

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

playground/index.html

Sorry, the diff of this file is not supported yet

playground/starbucks.html

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