Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
cupertino-pane
Advanced tools
cupertino-pane - npm Package Compare versions
Comparing version 1.1.4 to 1.1.5
@@ -57,2 +57,3 @@ export declare class CupertinoPane { | ||
| detachEvents(): void; | ||
| private get getPanelTransformY(); | ||
| /************************************ | ||
@@ -59,0 +60,0 @@ * Public user methods |
| /** | ||
| * Cupertino Pane 1.1.4 | ||
| * Cupertino Pane 1.1.5 | ||
| * Multiplatform slide-over pane | ||
@@ -10,3 +10,3 @@ * https://github.com/roman-rr/cupertino-pane/ | ||
| * | ||
| * Released on: May 2, 2020 | ||
| * Released on: May 16, 2020 | ||
| */ | ||
@@ -152,3 +152,3 @@ | ||
| backdrop: false, | ||
| backdropTransparent: false, | ||
| backdropOpacity: 0.4, | ||
| animationType: 'ease', | ||
@@ -174,10 +174,12 @@ animationDuration: 300, | ||
| onDrag: () => { }, | ||
| onBackdropTap: () => { } | ||
| onDragEnd: () => { }, | ||
| onBackdropTap: () => { }, | ||
| onTransitionEnd: () => { } | ||
| }; | ||
| this.defaultBreaksConf = { | ||
| top: { enabled: true, offset: window.screen.height - (135 * 0.35) }, | ||
| top: { enabled: true, offset: window.innerHeight - (135 * 0.35) }, | ||
| middle: { enabled: true, offset: 300 }, | ||
| bottom: { enabled: true, offset: 100 }, | ||
| }; | ||
| this.screen_height = window.screen.height; | ||
| this.screen_height = window.innerHeight; | ||
| this.steps = []; | ||
@@ -196,2 +198,5 @@ this.pointerDown = false; | ||
| if (this.settings.breaks['bottom'].enabled) { | ||
| if (this.breaks['middle'] < closest) { | ||
| return closest; | ||
| } | ||
| return this.breaks['bottom']; | ||
@@ -218,2 +223,5 @@ } | ||
| if (this.settings.breaks['middle'].enabled) { | ||
| if (this.breaks['middle'] > closest) { | ||
| return closest; | ||
| } | ||
| return this.breaks['middle']; | ||
@@ -253,6 +261,10 @@ } | ||
| if (!document.querySelector(this.selector)) { | ||
| console.error('Cupertino Pane: wrong selector specified', this.selector); | ||
| delete this.el; | ||
| console.warn('Cupertino Pane: wrong selector specified', this.selector); | ||
| return; | ||
| } | ||
| // Pane already was rendered | ||
| if (this.isPanePresented()) { | ||
| console.warn('Cupertino Pane: specified selector already in use', this.selector); | ||
| return; | ||
| } | ||
| this.el = document.querySelector(this.selector); | ||
@@ -325,6 +337,6 @@ this.el.style.display = 'none'; | ||
| this.backdropEl.style.top = '0'; | ||
| this.backdropEl.style.backgroundColor = 'rgba(0,0,0,.4)'; | ||
| this.backdropEl.style.display = 'block'; | ||
| 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.backdropEl.style.opacity = this.settings.backdropTransparent ? '0' : '1'; | ||
| // Close button | ||
@@ -385,23 +397,2 @@ this.closeEl = document.createElement('div'); | ||
| this.draggableEl.appendChild(this.moveEl); | ||
| if (conf.animate) { | ||
| this.paneEl.style.transform = `translateY(${this.screen_height}px) translateZ(0px)`; | ||
| this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`; | ||
| setTimeout(() => { | ||
| this.paneEl.style.transform = `translateY(${this.breaks[this.settings.initialBreak]}px) translateZ(0px)`; | ||
| }, 50); | ||
| let initTransitionEv = this.paneEl.addEventListener('transitionend', (t) => { | ||
| this.paneEl.style.transition = `initial`; | ||
| initTransitionEv = undefined; | ||
| // Emit event | ||
| this.settings.onDidPresent(); | ||
| }); | ||
| } | ||
| else { | ||
| // Emit event | ||
| this.settings.onDidPresent(); | ||
| } | ||
| if (this.settings.backdrop) { | ||
| this.wrapperEl.appendChild(this.backdropEl); | ||
| this.backdropEl.addEventListener('click', (t) => this.settings.onBackdropTap()); | ||
| } | ||
| if (!this.settings.showDraggable) { | ||
@@ -430,2 +421,7 @@ this.draggableEl.style.opacity = '0'; | ||
| } | ||
| if (this.settings.backdrop) { | ||
| this.wrapperEl.appendChild(this.backdropEl); | ||
| this.backdropEl.style.display = 'block'; | ||
| this.backdropEl.addEventListener('click', (t) => this.settings.onBackdropTap()); | ||
| } | ||
| this.brs = []; | ||
@@ -460,2 +456,29 @@ ['top', 'middle', 'bottom'].forEach((val) => { | ||
| this.attachEvents(); | ||
| /** Animation present ******* | ||
| * TODO: merge this animation with move to break | ||
| ********/ | ||
| const transitionEnd = () => { | ||
| this.paneEl.style.transition = `initial`; | ||
| // Emit event | ||
| this.settings.onDidPresent(); | ||
| this.settings.onTransitionEnd(); | ||
| // Remove listener | ||
| this.paneEl.removeEventListener('transitionend', transitionEnd); | ||
| }; | ||
| if (conf.animate) { | ||
| this.paneEl.style.transform = `translateY(${this.screen_height}px) translateZ(0px)`; | ||
| this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`; | ||
| this.backdropEl.style.backgroundColor = 'rgba(0,0,0,.0)'; | ||
| setTimeout(() => { | ||
| this.paneEl.style.transform = `translateY(${this.breaks[this.settings.initialBreak]}px) translateZ(0px)`; | ||
| if (this.settings.backdrop) { | ||
| this.backdropEl.style.backgroundColor = `rgba(0,0,0, ${this.settings.backdropOpacity})`; | ||
| } | ||
| }, 50); | ||
| this.paneEl.addEventListener('transitionend', transitionEnd); | ||
| } | ||
| else { | ||
| // Emit event | ||
| this.settings.onDidPresent(); | ||
| } | ||
| } | ||
@@ -510,8 +533,6 @@ checkOpacityAttr(val) { | ||
| return; | ||
| const translateYRegex = /\.*translateY\((.*)px\)/i; | ||
| const p = parseFloat(translateYRegex.exec(this.paneEl.style.transform)[1]); | ||
| // Delta | ||
| const n = screenY; | ||
| const diff = n - this.steps[this.steps.length - 1]; | ||
| const newVal = p + diff; | ||
| const newVal = this.getPanelTransformY + diff; | ||
| // Not allow move panel with positive overflow scroll | ||
@@ -544,2 +565,4 @@ if (this.overflowEl.style.overflowY === 'auto') { | ||
| touchEnd(t) { | ||
| // Event emitter | ||
| this.settings.onDragEnd(t); | ||
| if (this.disableDragEvents) | ||
@@ -551,7 +574,5 @@ return; | ||
| this.pointerDown = false; | ||
| const translateYRegex = /\.*translateY\((.*)px\)/i; | ||
| const p = parseFloat(translateYRegex.exec(this.paneEl.style.transform)[1]); | ||
| // Determinate nearest point | ||
| let closest = this.brs.reduce((prev, curr) => { | ||
| return (Math.abs(curr - p) < Math.abs(prev - p) ? curr : prev); | ||
| return (Math.abs(curr - this.getPanelTransformY) < Math.abs(prev - this.getPanelTransformY) ? curr : prev); | ||
| }); | ||
@@ -582,9 +603,13 @@ // Swipe - next (if differ > 10) | ||
| } | ||
| const transitionEnd = () => { | ||
| this.paneEl.style.transition = `initial`; | ||
| // Emit event | ||
| this.settings.onTransitionEnd(); | ||
| // Remove listener | ||
| this.paneEl.removeEventListener('transitionend', transitionEnd); | ||
| }; | ||
| if (!this.settings.freeMode) { | ||
| this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`; | ||
| this.paneEl.style.transform = `translateY(${closest}px) translateZ(0px)`; | ||
| let initTransitionEv = this.paneEl.addEventListener('transitionend', () => { | ||
| this.paneEl.style.transition = `initial`; | ||
| initTransitionEv = undefined; | ||
| }); | ||
| this.paneEl.addEventListener('transitionend', transitionEnd); | ||
| } | ||
@@ -648,2 +673,6 @@ } | ||
| } | ||
| get getPanelTransformY() { | ||
| const translateYRegex = /\.*translateY\((.*)px\)/i; | ||
| return parseFloat(translateYRegex.exec(this.paneEl.style.transform)[1]); | ||
| } | ||
| /************************************ | ||
@@ -675,5 +704,12 @@ * Public user methods | ||
| this.checkOverflowAttr(this.breaks[val]); | ||
| /** Animation present | ||
| * TODO: merge this animation with move to break | ||
| */ | ||
| if (this.settings.backdrop) { | ||
| this.backdropEl.style.backgroundColor = 'rgba(0,0,0,.4)'; | ||
| this.backdropEl.style.display = 'block'; | ||
| this.backdropEl.style.backgroundColor = 'rgba(0,0,0,.0)'; | ||
| this.backdropEl.style.transition = `all ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`; | ||
| setTimeout(() => { | ||
| this.backdropEl.style.backgroundColor = `rgba(0,0,0, ${this.settings.backdropOpacity})`; | ||
| }, 50); | ||
| } | ||
@@ -683,6 +719,11 @@ this.currentBreakpoint = this.breaks[val]; | ||
| this.paneEl.style.transform = `translateY(${this.breaks[val]}px) translateZ(0px)`; | ||
| let initTransitionEv = this.paneEl.addEventListener('transitionend', (t) => { | ||
| // Transition end | ||
| const transitionEnd = () => { | ||
| this.paneEl.style.transition = `initial`; | ||
| initTransitionEv = undefined; | ||
| }); | ||
| // Emit event | ||
| this.settings.onTransitionEnd(); | ||
| // Remove listener | ||
| this.paneEl.removeEventListener('transitionend', transitionEnd); | ||
| }; | ||
| this.paneEl.addEventListener('transitionend', transitionEnd); | ||
| } | ||
@@ -697,6 +738,7 @@ hide() { | ||
| if (this.settings.backdrop) { | ||
| this.backdropEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`; | ||
| this.backdropEl.style.transition = `all ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`; | ||
| this.backdropEl.style.backgroundColor = 'rgba(0,0,0,.0)'; | ||
| } | ||
| let initTransitionEv = this.paneEl.addEventListener('transitionend', (t) => { | ||
| // Transition end | ||
| const transitionEnd = () => { | ||
| this.paneEl.style.transition = `initial`; | ||
@@ -707,4 +749,7 @@ if (this.settings.backdrop) { | ||
| } | ||
| initTransitionEv = undefined; | ||
| }); | ||
| // Emit event | ||
| this.settings.onTransitionEnd(); | ||
| this.paneEl.removeEventListener('transitionend', transitionEnd); | ||
| }; | ||
| this.paneEl.addEventListener('transitionend', transitionEnd); | ||
| } | ||
@@ -751,2 +796,5 @@ isHidden() { | ||
| this.settings.onDidDismiss(); | ||
| this.settings.onTransitionEnd(); | ||
| // Remove listener | ||
| this.paneEl.removeEventListener('transitionend', resets); | ||
| }; | ||
@@ -757,6 +805,6 @@ if (conf.animate) { | ||
| if (this.settings.backdrop) { | ||
| this.backdropEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`; | ||
| this.backdropEl.style.transition = `all ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`; | ||
| this.backdropEl.style.backgroundColor = 'rgba(0,0,0,.0)'; | ||
| } | ||
| this.paneEl.addEventListener('transitionend', () => resets()); | ||
| this.paneEl.addEventListener('transitionend', resets); | ||
| return; | ||
@@ -763,0 +811,0 @@ } |
| /** | ||
| * Cupertino Pane 1.1.4 | ||
| * Cupertino Pane 1.1.5 | ||
| * Multiplatform slide-over pane | ||
@@ -10,3 +10,3 @@ * https://github.com/roman-rr/cupertino-pane/ | ||
| * | ||
| * Released on: May 2, 2020 | ||
| * Released on: May 16, 2020 | ||
| */ | ||
@@ -156,3 +156,3 @@ | ||
| backdrop: false, | ||
| backdropTransparent: false, | ||
| backdropOpacity: 0.4, | ||
| animationType: 'ease', | ||
@@ -178,10 +178,12 @@ animationDuration: 300, | ||
| onDrag: () => { }, | ||
| onBackdropTap: () => { } | ||
| onDragEnd: () => { }, | ||
| onBackdropTap: () => { }, | ||
| onTransitionEnd: () => { } | ||
| }; | ||
| this.defaultBreaksConf = { | ||
| top: { enabled: true, offset: window.screen.height - (135 * 0.35) }, | ||
| top: { enabled: true, offset: window.innerHeight - (135 * 0.35) }, | ||
| middle: { enabled: true, offset: 300 }, | ||
| bottom: { enabled: true, offset: 100 }, | ||
| }; | ||
| this.screen_height = window.screen.height; | ||
| this.screen_height = window.innerHeight; | ||
| this.steps = []; | ||
@@ -200,2 +202,5 @@ this.pointerDown = false; | ||
| if (this.settings.breaks['bottom'].enabled) { | ||
| if (this.breaks['middle'] < closest) { | ||
| return closest; | ||
| } | ||
| return this.breaks['bottom']; | ||
@@ -222,2 +227,5 @@ } | ||
| if (this.settings.breaks['middle'].enabled) { | ||
| if (this.breaks['middle'] > closest) { | ||
| return closest; | ||
| } | ||
| return this.breaks['middle']; | ||
@@ -257,6 +265,10 @@ } | ||
| if (!document.querySelector(this.selector)) { | ||
| console.error('Cupertino Pane: wrong selector specified', this.selector); | ||
| delete this.el; | ||
| console.warn('Cupertino Pane: wrong selector specified', this.selector); | ||
| return; | ||
| } | ||
| // Pane already was rendered | ||
| if (this.isPanePresented()) { | ||
| console.warn('Cupertino Pane: specified selector already in use', this.selector); | ||
| return; | ||
| } | ||
| this.el = document.querySelector(this.selector); | ||
@@ -329,6 +341,6 @@ this.el.style.display = 'none'; | ||
| this.backdropEl.style.top = '0'; | ||
| this.backdropEl.style.backgroundColor = 'rgba(0,0,0,.4)'; | ||
| this.backdropEl.style.display = 'block'; | ||
| 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.backdropEl.style.opacity = this.settings.backdropTransparent ? '0' : '1'; | ||
| // Close button | ||
@@ -389,23 +401,2 @@ this.closeEl = document.createElement('div'); | ||
| this.draggableEl.appendChild(this.moveEl); | ||
| if (conf.animate) { | ||
| this.paneEl.style.transform = `translateY(${this.screen_height}px) translateZ(0px)`; | ||
| this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`; | ||
| setTimeout(() => { | ||
| this.paneEl.style.transform = `translateY(${this.breaks[this.settings.initialBreak]}px) translateZ(0px)`; | ||
| }, 50); | ||
| let initTransitionEv = this.paneEl.addEventListener('transitionend', (t) => { | ||
| this.paneEl.style.transition = `initial`; | ||
| initTransitionEv = undefined; | ||
| // Emit event | ||
| this.settings.onDidPresent(); | ||
| }); | ||
| } | ||
| else { | ||
| // Emit event | ||
| this.settings.onDidPresent(); | ||
| } | ||
| if (this.settings.backdrop) { | ||
| this.wrapperEl.appendChild(this.backdropEl); | ||
| this.backdropEl.addEventListener('click', (t) => this.settings.onBackdropTap()); | ||
| } | ||
| if (!this.settings.showDraggable) { | ||
@@ -434,2 +425,7 @@ this.draggableEl.style.opacity = '0'; | ||
| } | ||
| if (this.settings.backdrop) { | ||
| this.wrapperEl.appendChild(this.backdropEl); | ||
| this.backdropEl.style.display = 'block'; | ||
| this.backdropEl.addEventListener('click', (t) => this.settings.onBackdropTap()); | ||
| } | ||
| this.brs = []; | ||
@@ -464,2 +460,29 @@ ['top', 'middle', 'bottom'].forEach((val) => { | ||
| this.attachEvents(); | ||
| /** Animation present ******* | ||
| * TODO: merge this animation with move to break | ||
| ********/ | ||
| const transitionEnd = () => { | ||
| this.paneEl.style.transition = `initial`; | ||
| // Emit event | ||
| this.settings.onDidPresent(); | ||
| this.settings.onTransitionEnd(); | ||
| // Remove listener | ||
| this.paneEl.removeEventListener('transitionend', transitionEnd); | ||
| }; | ||
| if (conf.animate) { | ||
| this.paneEl.style.transform = `translateY(${this.screen_height}px) translateZ(0px)`; | ||
| this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`; | ||
| this.backdropEl.style.backgroundColor = 'rgba(0,0,0,.0)'; | ||
| setTimeout(() => { | ||
| this.paneEl.style.transform = `translateY(${this.breaks[this.settings.initialBreak]}px) translateZ(0px)`; | ||
| if (this.settings.backdrop) { | ||
| this.backdropEl.style.backgroundColor = `rgba(0,0,0, ${this.settings.backdropOpacity})`; | ||
| } | ||
| }, 50); | ||
| this.paneEl.addEventListener('transitionend', transitionEnd); | ||
| } | ||
| else { | ||
| // Emit event | ||
| this.settings.onDidPresent(); | ||
| } | ||
| } | ||
@@ -514,8 +537,6 @@ checkOpacityAttr(val) { | ||
| return; | ||
| const translateYRegex = /\.*translateY\((.*)px\)/i; | ||
| const p = parseFloat(translateYRegex.exec(this.paneEl.style.transform)[1]); | ||
| // Delta | ||
| const n = screenY; | ||
| const diff = n - this.steps[this.steps.length - 1]; | ||
| const newVal = p + diff; | ||
| const newVal = this.getPanelTransformY + diff; | ||
| // Not allow move panel with positive overflow scroll | ||
@@ -548,2 +569,4 @@ if (this.overflowEl.style.overflowY === 'auto') { | ||
| touchEnd(t) { | ||
| // Event emitter | ||
| this.settings.onDragEnd(t); | ||
| if (this.disableDragEvents) | ||
@@ -555,7 +578,5 @@ return; | ||
| this.pointerDown = false; | ||
| const translateYRegex = /\.*translateY\((.*)px\)/i; | ||
| const p = parseFloat(translateYRegex.exec(this.paneEl.style.transform)[1]); | ||
| // Determinate nearest point | ||
| let closest = this.brs.reduce((prev, curr) => { | ||
| return (Math.abs(curr - p) < Math.abs(prev - p) ? curr : prev); | ||
| return (Math.abs(curr - this.getPanelTransformY) < Math.abs(prev - this.getPanelTransformY) ? curr : prev); | ||
| }); | ||
@@ -586,9 +607,13 @@ // Swipe - next (if differ > 10) | ||
| } | ||
| const transitionEnd = () => { | ||
| this.paneEl.style.transition = `initial`; | ||
| // Emit event | ||
| this.settings.onTransitionEnd(); | ||
| // Remove listener | ||
| this.paneEl.removeEventListener('transitionend', transitionEnd); | ||
| }; | ||
| if (!this.settings.freeMode) { | ||
| this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`; | ||
| this.paneEl.style.transform = `translateY(${closest}px) translateZ(0px)`; | ||
| let initTransitionEv = this.paneEl.addEventListener('transitionend', () => { | ||
| this.paneEl.style.transition = `initial`; | ||
| initTransitionEv = undefined; | ||
| }); | ||
| this.paneEl.addEventListener('transitionend', transitionEnd); | ||
| } | ||
@@ -652,2 +677,6 @@ } | ||
| } | ||
| get getPanelTransformY() { | ||
| const translateYRegex = /\.*translateY\((.*)px\)/i; | ||
| return parseFloat(translateYRegex.exec(this.paneEl.style.transform)[1]); | ||
| } | ||
| /************************************ | ||
@@ -679,5 +708,12 @@ * Public user methods | ||
| this.checkOverflowAttr(this.breaks[val]); | ||
| /** Animation present | ||
| * TODO: merge this animation with move to break | ||
| */ | ||
| if (this.settings.backdrop) { | ||
| this.backdropEl.style.backgroundColor = 'rgba(0,0,0,.4)'; | ||
| this.backdropEl.style.display = 'block'; | ||
| this.backdropEl.style.backgroundColor = 'rgba(0,0,0,.0)'; | ||
| this.backdropEl.style.transition = `all ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`; | ||
| setTimeout(() => { | ||
| this.backdropEl.style.backgroundColor = `rgba(0,0,0, ${this.settings.backdropOpacity})`; | ||
| }, 50); | ||
| } | ||
@@ -687,6 +723,11 @@ this.currentBreakpoint = this.breaks[val]; | ||
| this.paneEl.style.transform = `translateY(${this.breaks[val]}px) translateZ(0px)`; | ||
| let initTransitionEv = this.paneEl.addEventListener('transitionend', (t) => { | ||
| // Transition end | ||
| const transitionEnd = () => { | ||
| this.paneEl.style.transition = `initial`; | ||
| initTransitionEv = undefined; | ||
| }); | ||
| // Emit event | ||
| this.settings.onTransitionEnd(); | ||
| // Remove listener | ||
| this.paneEl.removeEventListener('transitionend', transitionEnd); | ||
| }; | ||
| this.paneEl.addEventListener('transitionend', transitionEnd); | ||
| } | ||
@@ -701,6 +742,7 @@ hide() { | ||
| if (this.settings.backdrop) { | ||
| this.backdropEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`; | ||
| this.backdropEl.style.transition = `all ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`; | ||
| this.backdropEl.style.backgroundColor = 'rgba(0,0,0,.0)'; | ||
| } | ||
| let initTransitionEv = this.paneEl.addEventListener('transitionend', (t) => { | ||
| // Transition end | ||
| const transitionEnd = () => { | ||
| this.paneEl.style.transition = `initial`; | ||
@@ -711,4 +753,7 @@ if (this.settings.backdrop) { | ||
| } | ||
| initTransitionEv = undefined; | ||
| }); | ||
| // Emit event | ||
| this.settings.onTransitionEnd(); | ||
| this.paneEl.removeEventListener('transitionend', transitionEnd); | ||
| }; | ||
| this.paneEl.addEventListener('transitionend', transitionEnd); | ||
| } | ||
@@ -755,2 +800,5 @@ isHidden() { | ||
| this.settings.onDidDismiss(); | ||
| this.settings.onTransitionEnd(); | ||
| // Remove listener | ||
| this.paneEl.removeEventListener('transitionend', resets); | ||
| }; | ||
@@ -761,6 +809,6 @@ if (conf.animate) { | ||
| if (this.settings.backdrop) { | ||
| this.backdropEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`; | ||
| this.backdropEl.style.transition = `all ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`; | ||
| this.backdropEl.style.backgroundColor = 'rgba(0,0,0,.0)'; | ||
| } | ||
| this.paneEl.addEventListener('transitionend', () => resets()); | ||
| this.paneEl.addEventListener('transitionend', resets); | ||
| return; | ||
@@ -767,0 +815,0 @@ } |
| /** | ||
| * Cupertino Pane 1.1.4 | ||
| * Cupertino Pane 1.1.5 | ||
| * Multiplatform slide-over pane | ||
@@ -10,6 +10,6 @@ * https://github.com/roman-rr/cupertino-pane/ | ||
| * | ||
| * Released on: May 2, 2020 | ||
| * Released on: May 16, 2020 | ||
| */ | ||
| "use strict";Object.defineProperty(exports,"__esModule",{value:!0});class Support{static get touch(){return window.Modernizr&&!0===window.Modernizr.touch||!!(window.navigator.maxTouchPoints>0||"ontouchstart"in window||window.DocumentTouch&&document instanceof window.DocumentTouch)}static get observer(){return"MutationObserver"in window||"WebkitMutationObserver"in window}static get passiveListener(){let t=!1;try{const e=Object.defineProperty({},"passive",{get(){t=!0}});window.addEventListener("testPassiveListener",null,e)}catch(t){}return t}static get gestures(){return"ongesturestart"in window}static pointerEvents(){}}class Device{constructor(){this.ios=!1,this.android=!1,this.androidChrome=!1,this.desktop=!1,this.iphone=!1,this.ipod=!1,this.ipad=!1,this.edge=!1,this.ie=!1,this.firefox=!1,this.macos=!1,this.windows=!1,this.cordova=!(!window.cordova&&!window.phonegap),this.phonegap=!(!window.cordova&&!window.phonegap),this.electron=!1;const t=window.navigator.platform,e=window.navigator.userAgent,s=window.screen.width,i=window.screen.height;let n=e.match(/(Android);?[\s\/]+([\d.]+)?/),o=e.match(/(iPad).*OS\s([\d_]+)/),r=e.match(/(iPod)(.*OS\s([\d_]+))?/),a=!this.ipad&&e.match(/(iPhone\sOS|iOS)\s([\d_]+)/),h=e.indexOf("MSIE ")>=0||e.indexOf("Trident/")>=0,l=e.indexOf("Edge/")>=0,d=e.indexOf("Gecko/")>=0&&e.indexOf("Firefox/")>=0,p="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=d,n&&!p&&(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=p,this.macos&&(this.os="macos"),this.windows&&(this.os="windows")),this.pixelRatio=window.devicePixelRatio||1}}class CupertinoPane{constructor(t,e={}){if(this.selector=t,this.settings={initialBreak:"middle",parentElement:null,backdrop:!1,backdropTransparent:!1,animationType:"ease",animationDuration:300,darkMode:!1,bottomClose:!1,freeMode:!1,buttonClose:!0,topperOverflow:!0,topperOverflowOffset:0,showDraggable:!0,clickBottomOpen:!0,dragByCursor:!1,simulateTouch:!0,passiveListeners:!0,breaks:{},onDidDismiss:()=>{},onWillDismiss:()=>{},onDidPresent:()=>{},onWillPresent:()=>{},onDragStart:()=>{},onDrag:()=>{},onBackdropTap:()=>{}},this.defaultBreaksConf={top:{enabled:!0,offset:window.screen.height-47.25},middle:{enabled:!0,offset:300},bottom:{enabled:!0,offset:100}},this.screen_height=window.screen.height,this.steps=[],this.pointerDown=!1,this.disableDragEvents=!1,this.breaks={},this.brs=[],this.device=new Device,this.swipeNextPoint=(t,e,s)=>{if(this.currentBreakpoint===this.breaks.top){if(t>e){if(this.settings.breaks.middle.enabled)return this.breaks.middle;if(this.settings.breaks.bottom.enabled)return this.breaks.bottom}return this.breaks.top}if(this.currentBreakpoint===this.breaks.middle)return t<-e&&this.settings.breaks.top.enabled?this.breaks.top:t>e&&this.settings.breaks.bottom.enabled?this.breaks.bottom:this.breaks.middle;if(this.currentBreakpoint===this.breaks.bottom){if(t<-e){if(this.settings.breaks.middle.enabled)return this.breaks.middle;if(this.settings.breaks.top.enabled)return this.breaks.top}return this.breaks.bottom}return s},this.touchEvents=(()=>{const t=["touchstart","touchmove","touchend","touchcancel"];let e=["mousedown","mousemove","mouseup"];Support.pointerEvents&&(e=["pointerdown","pointermove","pointerup"]);const s={start:t[0],move:t[1],end:t[2],cancel:t[3]},i={start:e[0],move:e[1],end:e[2]};return Support.touch||!this.settings.simulateTouch?s:i})(),!document.querySelector(this.selector))return console.error("Cupertino Pane: wrong selector specified",this.selector),void delete this.el;this.el=document.querySelector(this.selector),this.el.style.display="none",this.settings=Object.assign(Object.assign({},this.settings),e),this.settings.parentElement?this.settings.parentElement=document.querySelector(this.settings.parentElement):this.settings.parentElement=this.el.parentElement}drawElements(){this.parentEl=this.settings.parentElement,this.wrapperEl=document.createElement("div"),this.wrapperEl.className="cupertino-pane-wrapper "+this.el.className,this.wrapperEl.style.position="absolute",this.wrapperEl.style.top="0",this.wrapperEl.style.left="0",this.paneEl=document.createElement("div"),this.paneEl.className="pane",this.paneEl.style.position="fixed",this.paneEl.style.zIndex="11",this.paneEl.style.paddingTop="15px",this.paneEl.style.width="100%",this.paneEl.style.height="100%",this.paneEl.style.background="#ffffff",this.paneEl.style.borderTopLeftRadius="20px",this.paneEl.style.borderTopRightRadius="20px",this.paneEl.style.boxShadow="0 4px 16px rgba(0,0,0,.12)",this.paneEl.style.overflow="hidden",this.paneEl.style.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="",this.contentEl.style.transition=`opacity ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.contentEl.style.overflowX="hidden",this.backdropEl=document.createElement("div"),this.backdropEl.className="backdrop",this.backdropEl.style.overflow="hidden",this.backdropEl.style.position="fixed",this.backdropEl.style.width="100%",this.backdropEl.style.bottom="0",this.backdropEl.style.right="0",this.backdropEl.style.left="0",this.backdropEl.style.top="0",this.backdropEl.style.backgroundColor="rgba(0,0,0,.4)",this.backdropEl.style.display="block",this.backdropEl.style.zIndex="10",this.backdropEl.style.opacity=this.settings.backdropTransparent?"0":"1",this.closeEl=document.createElement("div"),this.closeEl.className="close-button",this.closeEl.style.width="26px",this.closeEl.style.height="26px",this.closeEl.style.position="absolute",this.closeEl.style.background="#ebebeb",this.closeEl.style.top="16px",this.closeEl.style.right="20px",this.closeEl.style.borderRadius="100%"}present(t={animate:!1}){if(!this.el)return;if(this.isPanePresented())return void this.moveToBreak(this.settings.initialBreak);if(this.settings.onWillPresent(),this.breaks={top:this.screen_height,middle:this.screen_height,bottom:this.screen_height},["top","middle","bottom"].forEach(t=>{this.settings.breaks[t]||(this.settings.breaks[t]=this.defaultBreaksConf[t]),this.settings.breaks[t]&&this.settings.breaks[t].enabled&&this.settings.breaks[t].offset&&(this.breaks[t]-=this.settings.breaks[t].offset)}),this.settings.breaks[this.settings.initialBreak].enabled||console.warn("Cupertino Pane: Please set initialBreak for enabled breakpoint"),this.settings.breaks.middle.offset>=this.settings.breaks.top.offset&&console.warn("Cupertino Pane: Please set middle offset lower than top offset"),this.settings.breaks.middle.offset<=this.settings.breaks.bottom.offset&&console.warn("Cupertino Pane: Please set bottom offset lower than middle offset"),this.currentBreakpoint=this.breaks[this.settings.initialBreak],this.drawElements(),this.parentEl.appendChild(this.wrapperEl),this.wrapperEl.appendChild(this.paneEl),this.paneEl.appendChild(this.draggableEl),this.paneEl.appendChild(this.contentEl),this.draggableEl.appendChild(this.moveEl),t.animate){this.paneEl.style.transform=`translateY(${this.screen_height}px) translateZ(0px)`,this.paneEl.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,setTimeout(()=>{this.paneEl.style.transform=`translateY(${this.breaks[this.settings.initialBreak]}px) translateZ(0px)`},50);let t=this.paneEl.addEventListener("transitionend",e=>{this.paneEl.style.transition="initial",t=void 0,this.settings.onDidPresent()})}else this.settings.onDidPresent();if(this.settings.backdrop&&(this.wrapperEl.appendChild(this.backdropEl),this.backdropEl.addEventListener("click",t=>this.settings.onBackdropTap())),this.settings.showDraggable||(this.draggableEl.style.opacity="0"),this.settings.darkMode&&(this.paneEl.style.background="#1c1c1d",this.paneEl.style.color="#ffffff",this.moveEl.style.background="#5a5a5e"),this.settings.buttonClose){this.paneEl.appendChild(this.closeEl),this.closeEl.addEventListener("click",t=>this.destroy({animate:!0}));let t="#7a7a7e";this.settings.darkMode&&(this.closeEl.style.background="#424246",t="#a8a7ae"),this.closeEl.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">\n <path fill="${t}" d="M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z"/>\n </svg>`}this.settings.bottomClose&&(this.settings.breaks.bottom.enabled=!0),this.brs=[],["top","middle","bottom"].forEach(t=>{this.settings.breaks[t].enabled&&this.brs.push(this.breaks[t])}),this.topper=this.brs.reduce((t,e)=>Math.abs(e)<Math.abs(t)?e:t),this.bottomer=this.brs.reduce((t,e)=>Math.abs(e)>Math.abs(t)?e:t);let e=document.querySelectorAll(this.selector+" [overflow-y]");!e.length||e.length>1?this.overflowEl=this.contentEl:this.overflowEl=e[0],this.overflowEl.style.height=this.screen_height-this.breaks.top-51-this.settings.topperOverflowOffset+"px",this.checkOpacityAttr(this.currentBreakpoint),this.checkOverflowAttr(this.currentBreakpoint),this.attachEvents()}checkOpacityAttr(t){let e=document.querySelectorAll(this.selector+" [hide-on-bottom]");e.length&&e.forEach(e=>{e.style.transition=`opacity ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,e.style.opacity=t>=this.breaks.bottom?"0":"1"})}checkOverflowAttr(t){this.settings.topperOverflow&&(this.overflowEl.style.overflowY=t<=this.topper?"auto":"hidden")}isPanePresented(){return!!document.querySelector(".cupertino-pane-wrapper "+this.selector)}touchStart(t){if(this.settings.onDragStart(t),this.disableDragEvents)return;const e="touchstart"===t.type&&t.targetTouches&&(t.targetTouches[0]||t.changedTouches[0]),s="touchstart"===t.type?e.screenY:t.screenY;"pointerdown"===t.type&&(this.pointerDown=!0),this.startP=s,this.steps.push(this.startP)}touchMove(t){if(this.settings.onDrag(t),this.disableDragEvents)return;const e="touchmove"===t.type&&t.targetTouches&&(t.targetTouches[0]||t.changedTouches[0]),s="touchmove"===t.type?e.screenY:t.screenY;if("pointermove"===t.type&&!this.pointerDown)return;const i=s,n=parseFloat(/\.*translateY\((.*)px\)/i.exec(this.paneEl.style.transform)[1])+(i-this.steps[this.steps.length-1]);"auto"===this.overflowEl.style.overflowY&&(this.overflowEl.addEventListener("scroll",t=>{this.contentScrollTop=t.target.scrollTop}),n>this.topper&&this.contentScrollTop>0||n<=this.topper)||n<=this.topper||this.settings.freeMode&&!this.settings.bottomClose&&n>=this.bottomer||(this.checkOpacityAttr(n),this.checkOverflowAttr(n),this.paneEl.style.transition="initial",this.paneEl.style.transform=`translateY(${n}px) translateZ(0px)`,this.steps.push(i))}touchEnd(t){if(this.disableDragEvents)return;const e="touchmove"===t.type&&t.targetTouches&&(t.targetTouches[0]||t.changedTouches[0]);"touchmove"===t.type?e.screenY:t.screenY;"pointerup"===t.type&&(this.pointerDown=!1);const s=parseFloat(/\.*translateY\((.*)px\)/i.exec(this.paneEl.style.transform)[1]);let i=this.brs.reduce((t,e)=>Math.abs(e-s)<Math.abs(t-s)?e:t);const n=this.steps[this.steps.length-1]-this.steps[this.steps.length-2],o=window.hasOwnProperty("cordova")?4:3;if(Math.abs(n)>=o&&(i=this.swipeNextPoint(n,o,i)),this.settings.clickBottomOpen&&this.currentBreakpoint===this.breaks.bottom&&isNaN(n)&&(i=this.settings.breaks.middle.enabled?this.breaks.middle:this.settings.breaks.top.enabled?this.breaks.top:this.breaks.bottom),this.steps=[],this.currentBreakpoint=i,this.checkOpacityAttr(this.currentBreakpoint),this.checkOverflowAttr(this.currentBreakpoint),this.settings.bottomClose&&i===this.breaks.bottom)this.destroy({animate:!0});else if(!this.settings.freeMode){this.paneEl.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.paneEl.style.transform=`translateY(${i}px) translateZ(0px)`;let t=this.paneEl.addEventListener("transitionend",()=>{this.paneEl.style.transition="initial",t=void 0})}}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))}}disableDrag(){this.disableDragEvents=!0}enableDrag(){this.disableDragEvents=!1}moveToBreak(t){if(!this.isPanePresented())return console.warn("Cupertino Pane: Present pane before call moveToBreak()"),null;if(!this.settings.breaks[t].enabled)return void console.warn("Cupertino Pane: %s breakpoint disabled",t);this.checkOpacityAttr(this.breaks[t]),this.checkOverflowAttr(this.breaks[t]),this.settings.backdrop&&(this.backdropEl.style.backgroundColor="rgba(0,0,0,.4)",this.backdropEl.style.display="block"),this.currentBreakpoint=this.breaks[t],this.paneEl.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.paneEl.style.transform=`translateY(${this.breaks[t]}px) translateZ(0px)`;let e=this.paneEl.addEventListener("transitionend",t=>{this.paneEl.style.transition="initial",e=void 0})}hide(){if(!this.isPanePresented())return console.warn("Cupertino Pane: Present pane before call hide()"),null;this.paneEl.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.paneEl.style.transform=`translateY(${this.screen_height}px) translateZ(0px)`,this.settings.backdrop&&(this.backdropEl.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.backdropEl.style.backgroundColor="rgba(0,0,0,.0)");let t=this.paneEl.addEventListener("transitionend",e=>{this.paneEl.style.transition="initial",this.settings.backdrop&&(this.backdropEl.style.transition="initial",this.backdropEl.style.display="none"),t=void 0})}isHidden(){return this.isPanePresented()?this.paneEl.style.transform===`translateY(${this.screen_height}px) 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)}destroy(t={animate:!1}){if(!this.isPanePresented())return console.warn("Cupertino Pane: Present pane before call destroy()"),null;this.settings.onWillDismiss();const e=()=>{this.parentEl.appendChild(this.contentEl),this.parentEl.removeChild(this.wrapperEl),this.detachEvents(),this.currentBreakpoint=this.breaks[this.settings.initialBreak],this.contentEl.style.display="none",this.paneEl.style.transform="initial",this.settings.onDidDismiss()};if(t.animate)return this.paneEl.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.paneEl.style.transform=`translateY(${this.screen_height}px) translateZ(0px)`,this.settings.backdrop&&(this.backdropEl.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.backdropEl.style.backgroundColor="rgba(0,0,0,.0)"),void this.paneEl.addEventListener("transitionend",()=>e());e()}}exports.CupertinoPane=CupertinoPane; | ||
| "use strict";Object.defineProperty(exports,"__esModule",{value:!0});class Support{static get touch(){return window.Modernizr&&!0===window.Modernizr.touch||!!(window.navigator.maxTouchPoints>0||"ontouchstart"in window||window.DocumentTouch&&document instanceof window.DocumentTouch)}static get observer(){return"MutationObserver"in window||"WebkitMutationObserver"in window}static get passiveListener(){let t=!1;try{const e=Object.defineProperty({},"passive",{get(){t=!0}});window.addEventListener("testPassiveListener",null,e)}catch(t){}return t}static get gestures(){return"ongesturestart"in window}static pointerEvents(){}}class Device{constructor(){this.ios=!1,this.android=!1,this.androidChrome=!1,this.desktop=!1,this.iphone=!1,this.ipod=!1,this.ipad=!1,this.edge=!1,this.ie=!1,this.firefox=!1,this.macos=!1,this.windows=!1,this.cordova=!(!window.cordova&&!window.phonegap),this.phonegap=!(!window.cordova&&!window.phonegap),this.electron=!1;const t=window.navigator.platform,e=window.navigator.userAgent,s=window.screen.width,i=window.screen.height;let n=e.match(/(Android);?[\s\/]+([\d.]+)?/),o=e.match(/(iPad).*OS\s([\d_]+)/),r=e.match(/(iPod)(.*OS\s([\d_]+))?/),a=!this.ipad&&e.match(/(iPhone\sOS|iOS)\s([\d_]+)/),h=e.indexOf("MSIE ")>=0||e.indexOf("Trident/")>=0,l=e.indexOf("Edge/")>=0,d=e.indexOf("Gecko/")>=0&&e.indexOf("Firefox/")>=0,p="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=d,n&&!p&&(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=p,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,backdrop:!1,backdropOpacity:.4,animationType:"ease",animationDuration:300,darkMode:!1,bottomClose:!1,freeMode:!1,buttonClose:!0,topperOverflow:!0,topperOverflowOffset:0,showDraggable:!0,clickBottomOpen:!0,dragByCursor:!1,simulateTouch:!0,passiveListeners:!0,breaks:{},onDidDismiss:()=>{},onWillDismiss:()=>{},onDidPresent:()=>{},onWillPresent:()=>{},onDragStart:()=>{},onDrag:()=>{},onDragEnd:()=>{},onBackdropTap:()=>{},onTransitionEnd:()=>{}},this.defaultBreaksConf={top:{enabled:!0,offset:window.innerHeight-47.25},middle:{enabled:!0,offset:300},bottom:{enabled:!0,offset:100}},this.screen_height=window.innerHeight,this.steps=[],this.pointerDown=!1,this.disableDragEvents=!1,this.breaks={},this.brs=[],this.device=new Device,this.swipeNextPoint=(t,e,s)=>{if(this.currentBreakpoint===this.breaks.top){if(t>e){if(this.settings.breaks.middle.enabled)return this.breaks.middle;if(this.settings.breaks.bottom.enabled)return this.breaks.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.height="100%",this.paneEl.style.background="#ffffff",this.paneEl.style.borderTopLeftRadius="20px",this.paneEl.style.borderTopRightRadius="20px",this.paneEl.style.boxShadow="0 4px 16px rgba(0,0,0,.12)",this.paneEl.style.overflow="hidden",this.paneEl.style.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="",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.settings.breaks[t]||(this.settings.breaks[t]=this.defaultBreaksConf[t]),this.settings.breaks[t]&&this.settings.breaks[t].enabled&&this.settings.breaks[t].offset&&(this.breaks[t]-=this.settings.breaks[t].offset)}),this.settings.breaks[this.settings.initialBreak].enabled||console.warn("Cupertino Pane: Please set initialBreak for enabled breakpoint"),this.settings.breaks.middle.offset>=this.settings.breaks.top.offset&&console.warn("Cupertino Pane: Please set middle offset lower than top offset"),this.settings.breaks.middle.offset<=this.settings.breaks.bottom.offset&&console.warn("Cupertino Pane: Please set bottom offset lower than middle offset"),this.currentBreakpoint=this.breaks[this.settings.initialBreak],this.drawElements(),this.parentEl.appendChild(this.wrapperEl),this.wrapperEl.appendChild(this.paneEl),this.paneEl.appendChild(this.draggableEl),this.paneEl.appendChild(this.contentEl),this.draggableEl.appendChild(this.moveEl),this.settings.showDraggable||(this.draggableEl.style.opacity="0"),this.settings.darkMode&&(this.paneEl.style.background="#1c1c1d",this.paneEl.style.color="#ffffff",this.moveEl.style.background="#5a5a5e"),this.settings.buttonClose){this.paneEl.appendChild(this.closeEl),this.closeEl.addEventListener("click",t=>this.destroy({animate:!0}));let t="#7a7a7e";this.settings.darkMode&&(this.closeEl.style.background="#424246",t="#a8a7ae"),this.closeEl.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">\n <path fill="${t}" d="M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z"/>\n </svg>`}this.settings.bottomClose&&(this.settings.breaks.bottom.enabled=!0),this.settings.backdrop&&(this.wrapperEl.appendChild(this.backdropEl),this.backdropEl.style.display="block",this.backdropEl.addEventListener("click",t=>this.settings.onBackdropTap())),this.brs=[],["top","middle","bottom"].forEach(t=>{this.settings.breaks[t].enabled&&this.brs.push(this.breaks[t])}),this.topper=this.brs.reduce((t,e)=>Math.abs(e)<Math.abs(t)?e:t),this.bottomer=this.brs.reduce((t,e)=>Math.abs(e)>Math.abs(t)?e:t);let e=document.querySelectorAll(this.selector+" [overflow-y]");!e.length||e.length>1?this.overflowEl=this.contentEl:this.overflowEl=e[0],this.overflowEl.style.height=this.screen_height-this.breaks.top-51-this.settings.topperOverflowOffset+"px",this.checkOpacityAttr(this.currentBreakpoint),this.checkOverflowAttr(this.currentBreakpoint),this.attachEvents();const s=()=>{this.paneEl.style.transition="initial",this.settings.onDidPresent(),this.settings.onTransitionEnd(),this.paneEl.removeEventListener("transitionend",s)};t.animate?(this.paneEl.style.transform=`translateY(${this.screen_height}px) translateZ(0px)`,this.paneEl.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.backdropEl.style.backgroundColor="rgba(0,0,0,.0)",setTimeout(()=>{this.paneEl.style.transform=`translateY(${this.breaks[this.settings.initialBreak]}px) translateZ(0px)`,this.settings.backdrop&&(this.backdropEl.style.backgroundColor=`rgba(0,0,0, ${this.settings.backdropOpacity})`)},50),this.paneEl.addEventListener("transitionend",s)):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.steps.push(this.startP)}touchMove(t){if(this.settings.onDrag(t),this.disableDragEvents)return;const e="touchmove"===t.type&&t.targetTouches&&(t.targetTouches[0]||t.changedTouches[0]),s="touchmove"===t.type?e.screenY:t.screenY;if("pointermove"===t.type&&!this.pointerDown)return;const i=s,n=i-this.steps[this.steps.length-1],o=this.getPanelTransformY+n;"auto"===this.overflowEl.style.overflowY&&(this.overflowEl.addEventListener("scroll",t=>{this.contentScrollTop=t.target.scrollTop}),o>this.topper&&this.contentScrollTop>0||o<=this.topper)||o<=this.topper||this.settings.freeMode&&!this.settings.bottomClose&&o>=this.bottomer||(this.checkOpacityAttr(o),this.checkOverflowAttr(o),this.paneEl.style.transition="initial",this.paneEl.style.transform=`translateY(${o}px) translateZ(0px)`,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;if(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)return void this.destroy({animate:!0});const o=()=>{this.paneEl.style.transition="initial",this.settings.onTransitionEnd(),this.paneEl.removeEventListener("transitionend",o)};this.settings.freeMode||(this.paneEl.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.paneEl.style.transform=`translateY(${s}px) translateZ(0px)`,this.paneEl.addEventListener("transitionend",o))}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))}}get 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;if(!this.settings.breaks[t].enabled)return void console.warn("Cupertino Pane: %s breakpoint disabled",t);this.checkOpacityAttr(this.breaks[t]),this.checkOverflowAttr(this.breaks[t]),this.settings.backdrop&&(this.backdropEl.style.display="block",this.backdropEl.style.backgroundColor="rgba(0,0,0,.0)",this.backdropEl.style.transition=`all ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,setTimeout(()=>{this.backdropEl.style.backgroundColor=`rgba(0,0,0, ${this.settings.backdropOpacity})`},50)),this.currentBreakpoint=this.breaks[t],this.paneEl.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.paneEl.style.transform=`translateY(${this.breaks[t]}px) translateZ(0px)`;const e=()=>{this.paneEl.style.transition="initial",this.settings.onTransitionEnd(),this.paneEl.removeEventListener("transitionend",e)};this.paneEl.addEventListener("transitionend",e)}hide(){if(!this.isPanePresented())return console.warn("Cupertino Pane: Present pane before call hide()"),null;this.paneEl.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.paneEl.style.transform=`translateY(${this.screen_height}px) translateZ(0px)`,this.settings.backdrop&&(this.backdropEl.style.transition=`all ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.backdropEl.style.backgroundColor="rgba(0,0,0,.0)");const t=()=>{this.paneEl.style.transition="initial",this.settings.backdrop&&(this.backdropEl.style.transition="initial",this.backdropEl.style.display="none"),this.settings.onTransitionEnd(),this.paneEl.removeEventListener("transitionend",t)};this.paneEl.addEventListener("transitionend",t)}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)}destroy(t={animate:!1}){if(!this.isPanePresented())return console.warn("Cupertino Pane: Present pane before call destroy()"),null;this.settings.onWillDismiss();const e=()=>{this.parentEl.appendChild(this.contentEl),this.parentEl.removeChild(this.wrapperEl),this.detachEvents(),this.currentBreakpoint=this.breaks[this.settings.initialBreak],this.contentEl.style.display="none",this.paneEl.style.transform="initial",this.settings.onDidDismiss(),this.settings.onTransitionEnd(),this.paneEl.removeEventListener("transitionend",e)};if(t.animate)return this.paneEl.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.paneEl.style.transform=`translateY(${this.screen_height}px) translateZ(0px)`,this.settings.backdrop&&(this.backdropEl.style.transition=`all ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.backdropEl.style.backgroundColor="rgba(0,0,0,.0)"),void this.paneEl.addEventListener("transitionend",e);e()}}exports.CupertinoPane=CupertinoPane; | ||
| //# sourceMappingURL=cupertino-pane.min.js.map |
@@ -19,2 +19,5 @@ /* eslint no-console: ["error", { allow: ["log"] }] */ | ||
| buildJs(cb); | ||
| return gulp | ||
| .src('./src/**/*.ts') | ||
| .pipe(connect.reload()); | ||
| }); | ||
@@ -21,0 +24,0 @@ |
| { | ||
| "name": "cupertino-pane", | ||
| "description": "Multiplatform slide-over pane", | ||
| "version": "1.1.4", | ||
| "version": "1.1.5", | ||
| "author": "Roman Antonov (roman-rr)", | ||
@@ -6,0 +6,0 @@ "homepage": "https://github.com/roman-rr/cupertino-pane/", |
120
README.md
@@ -34,3 +34,3 @@ <!-- https://github.com/ai/nanoid - cover --> | ||
| ## Breaking Changes | ||
| <!-- ## Breaking Changes | ||
| ### v.1.1.2 | ||
@@ -56,18 +56,21 @@ - Offsets and pane position normalized across all devices and screen heights. Please re-configure offsets if needs. | ||
| ``` | ||
| --> | ||
| ## Demonstration | ||
| [Live Demo Old Version](https://ionicsvelte.firebaseapp.com/ionic/Pane/) | ||
| <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"> | ||
| </div> | ||
| <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"> | ||
| ## Supporting platforms | ||
| We officially support the last two versions of every major browser. Specifically, we test on the following browsers: | ||
| - **Chrome** on Android, Windows, macOS, and Linux | ||
| - **Firefox** on Windows, macOS, and Linux | ||
| - **Safari** on iOS | ||
| - **iOS WkWebView** on iOS | ||
| - **Android WebView** on Android | ||
| We officially support the last two versions of every major browser. Specifically, we test on the following browsers | ||
| | Browser | Operating system | | ||
| | - | - | | ||
| | **Chrome** | Android, Windows, macOS, and Linux | | ||
| | **Firefox** | Windows, macOS, and Linux | | ||
| | **Safari** | iOS | | ||
| | **WkWebView** | iOS | | ||
| | **Android WebView** | Android | | ||
@@ -149,39 +152,51 @@ ## Getting Started | ||
| ### Common configuration | ||
| - `parentElement` | **string** | Element selector where pane will appended (by default using parent element where html layout placed) | ||
| - `initialBreak` | **(top|middle|bottom): 'middle'** | Initial pane position | ||
| - `darkMode` | **boolean: false** | Initial pane styles | ||
| - `backdrop` | **boolean: false** | Dimmed overlay will rendered with pane if `true` | ||
| - `backdropTransparent` | **boolean: false** | Dimmed overlay will rendered with zero opacity | ||
| - `animationType` | **(ease | ease-in | ease-out | ease-in-out | cubic-bezier): 'ease'** | Transition property animation type | ||
| - `animationDuration` | **number: 300** | Transition property duration | ||
| - `bottomClose` | **boolean: false** | Close pane with drag to bottom breakpoint | ||
| - `freeMode` | **boolean: false** | On `true` will remove automatical magnetic effects to near breakpoint. | ||
| - `buttonClose` | **boolean: true** | Determinate whetever close button will render or not | ||
| - `topperOverflow` | **boolean: true** | Ability to scroll content inside pane if topper point reached | ||
| - `topperOverflowOffset` | **number: 0** | Offset from screen bottom to the end of overflow content | ||
| - `showDraggable` | **boolean: true** | Render rectangular shape on the top of pane | ||
| - `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 | ||
| - `simulateTouch` | **boolean: true** | Simulate touch events for Desktop | ||
| - `passiveListeners` | **boolean: true** | (Indicates that the function specified by listener will never call preventDefault()) | ||
| | Property | Type | Default | Description | | ||
| | - | - | - | - | | ||
| | **parentElement** | `string` | Parent element selector | Element selector where pane will rendered | | ||
| | **initialBreak** | `'top' \| 'middle' \| 'bottom'` | 'middle' | Initial pane position | | ||
| | **darkMode** | `boolean` | false | Initial pane styles | | ||
| | **backdrop** | `boolean` | false | Dimmed overlay will rendered with pane if `true` | | ||
| | **backdropOpacity** | `number` | 0.4 | Dimmed overlay opacity value | | ||
| | **animationType** | `'ease' \| 'ease-in' \| 'ease-out' \| 'ease-in-out' \| 'cubic-bezier'` | 'ease' | Transition property animation type | | ||
| | **animationDuration** | `number` | 300 | Transition property duration | | ||
| | **bottomClose** | `boolean` | false | Close pane with drag to bottom breakpoint | | ||
| | **freeMode** | `boolean` | false | On `true` will remove automatical magnetic effects to near breakpoint | | ||
| | **buttonClose** | `boolean` | true | Determinate whetever close button will render or not | | ||
| | **topperOverflow** | `boolean` | true | Ability to scroll content inside pane if topper point reached | | ||
| | **topperOverflowOffset** | `number` | 0 | Offset from screen bottom to the end of overflow content | | ||
| | **showDraggable** | `boolean` | true | Render rectangular shape on the top of pane | ||
| | **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 | | ||
| | **simulateTouch** | `boolean` | true | Simulate touch events for Desktop | | ||
| | **passiveListeners** | `boolean` | true | (Indicates that the function specified by listener will never call preventDefault()) | | ||
| ### Breakpoints | ||
| - `breaks` | **{}** | Using to override default pane breakpoints. | ||
| - `top` | **{}** | Topper point that pane can reach | ||
| - `enabled` | **boolean: true** | Enable or disable breakpoint | ||
| - `offset` | **number: window.screen.height - (135 * 0.35)** | Additional bottom margin if needs | ||
| - `middle` | **{}** | Middle point that pane can reach | ||
| - `enabled` | **boolean: true** | Enable or disable breakpoint | ||
| - `offset` | **number: 300** | Additional bottom margin if needs | ||
| - `bottom` | **{}** | Bottom point that pane can reach | ||
| - `enabled` | **boolean: true** | Enable or disable breakpoint | ||
| - `offset` | **number: 100** | Additional bottom margin if needs | ||
| Package now supports 3 base breakpoints | ||
| ```javascript | ||
| const pane = new CupertinoPane('.cupertino-pane', { | ||
| breaks: { | ||
| top: { // Topper point that pane can reach | ||
| enabled: true, // Enable or disable breakpoint | ||
| offset: 0 // Additional bottom margin if needs | ||
| }, | ||
| middle: { ... }, | ||
| bottom: { ... } | ||
| } | ||
| }); | ||
| ``` | ||
| Default top offset: `window.screen.height - (135 * 0.35)` | ||
| Bottom and middle offsets normalized accross devices by default | ||
| ### Callbacks | ||
| The function that executes when the event fires. | ||
| - `onDidDismiss` | **void: () => {}** | Call after pane will dissapeared | ||
| - `onWillDismiss` | **void: () => {}** | Call before pane will dissapeared | ||
| - `onDidPresent` | **void: () => {}** | Call after pane will present | ||
| - `onWillPresent` | **void: () => {}** | Call before panel will present | ||
| - `onDragStart` | **void: () => {}** | Call when detect user drag event on pane | ||
| - `onDrag` | **void: () => {}** | Call executes on each new pane position | ||
| - `onBackdropTap` | **void: () => {}** | Call when user tap backdrop overlay | ||
| | Name | Type | Description | | ||
| | ---- | ---- | ----------- | | ||
| | **onDidDismiss** | `void: () => {}` | Call after pane will dissapeared | | ||
| | **onWillDismiss** | `void: () => {}` | Call before pane will dissapeared | | ||
| | **onDidPresent** | `void: () => {}` | Call after pane will present | | ||
| | **onWillPresent** | `void: () => {}` | Call before panel will present | | ||
| | **onDragStart** | `void: () => {}` | Call when detect user drag event on pane | | ||
| | **onDrag** | `void: () => {}` | Call executes on each new position of pane | | ||
| | **onDragEng** | `void: () => {}` | Executes when drag event complete | | ||
| | **onBackdropTap** | `void: () => {}` | Call when user tap backdrop overlay | | ||
| | **onTransitionEnd** | `void: () => {}` | Executes when transition and animation complete | | ||
@@ -255,9 +270,12 @@ ## Public Methods | ||
| ## Future Goals | ||
| - Playground (livereload, build cordova app from html) | ||
| - Precision delta counts | ||
| - Merge transitions to one function | ||
| - Click item/Drag pane Precision | ||
| - Precision delta counts experiments | ||
| - 3D effect (ion-modal example) | ||
| - Drawer effect | ||
| - Topper than top (10px-20px) | ||
| - Drawer control effect | ||
| - 3D button toggle effect | ||
| - Realistic easy-in-out transitions | ||
| - Readme (livedemos/tables/nanoid cons) | ||
| - Docs engine | ||
| - Live example hosted in pages | ||
| - React Native version with one core | ||
@@ -264,0 +282,0 @@ ## Contributing |
@@ -10,3 +10,3 @@ import { Support } from './support'; | ||
| backdrop: false, | ||
| backdropTransparent: false, | ||
| backdropOpacity: 0.4, | ||
| animationType: 'ease', | ||
@@ -32,11 +32,13 @@ animationDuration: 300, | ||
| onDrag: () => {}, | ||
| onBackdropTap: () => {} | ||
| onDragEnd: () => {}, | ||
| onBackdropTap: () => {}, | ||
| onTransitionEnd: () => {} | ||
| }; | ||
| private defaultBreaksConf = { | ||
| top: { enabled: true, offset: window.screen.height - (135 * 0.35)}, | ||
| top: { enabled: true, offset: window.innerHeight - (135 * 0.35)}, | ||
| middle: { enabled: true, offset: 300}, | ||
| bottom: { enabled: true, offset: 100}, | ||
| }; | ||
| private screen_height: number = window.screen.height; | ||
| private screen_height: number = window.innerHeight; | ||
| private steps: any[] = []; | ||
@@ -70,6 +72,11 @@ private startP: any; | ||
| if (!<HTMLElement>document.querySelector(this.selector)) { | ||
| console.error('Cupertino Pane: wrong selector specified', this.selector); | ||
| delete this.el; | ||
| console.warn('Cupertino Pane: wrong selector specified', this.selector); | ||
| return; | ||
| } | ||
| // Pane already was rendered | ||
| if (this.isPanePresented()) { | ||
| console.warn('Cupertino Pane: specified selector already in use', this.selector); | ||
| return; | ||
| } | ||
@@ -152,6 +159,6 @@ this.el = <HTMLElement>document.querySelector(this.selector); | ||
| this.backdropEl.style.top = '0'; | ||
| this.backdropEl.style.backgroundColor = 'rgba(0,0,0,.4)'; | ||
| this.backdropEl.style.display = 'block'; | ||
| 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.backdropEl.style.opacity = this.settings.backdropTransparent ? '0' : '1'; | ||
@@ -221,26 +228,3 @@ // Close button | ||
| this.draggableEl.appendChild(this.moveEl); | ||
| if (conf.animate) { | ||
| this.paneEl.style.transform = `translateY(${this.screen_height}px) translateZ(0px)`; | ||
| this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`; | ||
| setTimeout(() => { | ||
| this.paneEl.style.transform = `translateY(${this.breaks[this.settings.initialBreak]}px) translateZ(0px)`; | ||
| }, 50); | ||
| let initTransitionEv = this.paneEl.addEventListener('transitionend', (t) => { | ||
| this.paneEl.style.transition = `initial`; | ||
| initTransitionEv = undefined; | ||
| // Emit event | ||
| this.settings.onDidPresent(); | ||
| }); | ||
| } else { | ||
| // Emit event | ||
| this.settings.onDidPresent(); | ||
| } | ||
| if (this.settings.backdrop) { | ||
| this.wrapperEl.appendChild(this.backdropEl); | ||
| this.backdropEl.addEventListener('click', (t) => this.settings.onBackdropTap()); | ||
| } | ||
| if (!this.settings.showDraggable) { | ||
@@ -273,2 +257,8 @@ this.draggableEl.style.opacity = '0'; | ||
| if (this.settings.backdrop) { | ||
| this.wrapperEl.appendChild(this.backdropEl); | ||
| this.backdropEl.style.display = 'block'; | ||
| this.backdropEl.addEventListener('click', (t) => this.settings.onBackdropTap()); | ||
| } | ||
| this.brs = []; | ||
@@ -306,2 +296,34 @@ ['top', 'middle', 'bottom'].forEach((val) => { | ||
| this.attachEvents(); | ||
| /** Animation present ******* | ||
| * TODO: merge this animation with move to break | ||
| ********/ | ||
| const transitionEnd = () => { | ||
| this.paneEl.style.transition = `initial`; | ||
| // Emit event | ||
| this.settings.onDidPresent(); | ||
| this.settings.onTransitionEnd(); | ||
| // Remove listener | ||
| this.paneEl.removeEventListener('transitionend', transitionEnd); | ||
| }; | ||
| if (conf.animate) { | ||
| this.paneEl.style.transform = `translateY(${this.screen_height}px) translateZ(0px)`; | ||
| this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`; | ||
| this.backdropEl.style.backgroundColor = 'rgba(0,0,0,.0)'; | ||
| setTimeout(() => { | ||
| this.paneEl.style.transform = `translateY(${this.breaks[this.settings.initialBreak]}px) translateZ(0px)`; | ||
| if (this.settings.backdrop) { | ||
| this.backdropEl.style.backgroundColor = `rgba(0,0,0, ${this.settings.backdropOpacity})`; | ||
| } | ||
| }, 50); | ||
| this.paneEl.addEventListener('transitionend', transitionEnd); | ||
| } else { | ||
| // Emit event | ||
| this.settings.onDidPresent(); | ||
| } | ||
| } | ||
@@ -361,8 +383,6 @@ | ||
| const translateYRegex = /\.*translateY\((.*)px\)/i; | ||
| const p = parseFloat(translateYRegex.exec(this.paneEl.style.transform)[1]); | ||
| // Delta | ||
| const n = screenY; | ||
| const diff = n - this.steps[this.steps.length - 1]; | ||
| const newVal = p + diff; | ||
| const newVal = this.getPanelTransformY + diff; | ||
@@ -400,2 +420,5 @@ // Not allow move panel with positive overflow scroll | ||
| private touchEnd(t) { | ||
| // Event emitter | ||
| this.settings.onDragEnd(t as CustomEvent); | ||
| if (this.disableDragEvents) return; | ||
@@ -407,8 +430,5 @@ | ||
| const translateYRegex = /\.*translateY\((.*)px\)/i; | ||
| const p = parseFloat(translateYRegex.exec(this.paneEl.style.transform)[1]); | ||
| // Determinate nearest point | ||
| let closest = this.brs.reduce((prev, curr) => { | ||
| return (Math.abs(curr - p) < Math.abs(prev - p) ? curr : prev); | ||
| return (Math.abs(curr - this.getPanelTransformY) < Math.abs(prev - this.getPanelTransformY) ? curr : prev); | ||
| }); | ||
@@ -445,9 +465,17 @@ | ||
| const transitionEnd = () => { | ||
| this.paneEl.style.transition = `initial`; | ||
| // Emit event | ||
| this.settings.onTransitionEnd(); | ||
| // Remove listener | ||
| this.paneEl.removeEventListener('transitionend', transitionEnd); | ||
| }; | ||
| if (!this.settings.freeMode) { | ||
| this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`; | ||
| this.paneEl.style.transform = `translateY(${closest}px) translateZ(0px)`; | ||
| let initTransitionEv = this.paneEl.addEventListener('transitionend', () => { | ||
| this.paneEl.style.transition = `initial`; | ||
| initTransitionEv = undefined; | ||
| }); | ||
| this.paneEl.addEventListener('transitionend', transitionEnd); | ||
| } | ||
@@ -460,3 +488,8 @@ } | ||
| if (this.settings.breaks['middle'].enabled) { return this.breaks['middle']; } | ||
| if (this.settings.breaks['bottom'].enabled) { return this.breaks['bottom']; } | ||
| if (this.settings.breaks['bottom'].enabled) { | ||
| if (this.breaks['middle'] < closest) { | ||
| return closest; | ||
| } | ||
| return this.breaks['bottom']; | ||
| } | ||
| } | ||
@@ -478,3 +511,8 @@ return this.breaks['top']; | ||
| if (diff < -maxDiff) { | ||
| if (this.settings.breaks['middle'].enabled) { return this.breaks['middle']; } | ||
| if (this.settings.breaks['middle'].enabled) { | ||
| if (this.breaks['middle'] > closest) { | ||
| return closest; | ||
| } | ||
| return this.breaks['middle']; | ||
| } | ||
| if (this.settings.breaks['top'].enabled) { return this.breaks['top']; } | ||
@@ -574,2 +612,7 @@ } | ||
| private get getPanelTransformY():number { | ||
| const translateYRegex = /\.*translateY\((.*)px\)/i; | ||
| return parseFloat(translateYRegex.exec(this.paneEl.style.transform)[1]); | ||
| } | ||
| /************************************ | ||
@@ -607,15 +650,29 @@ * Public user methods | ||
| /** Animation present | ||
| * TODO: merge this animation with move to break | ||
| */ | ||
| if (this.settings.backdrop) { | ||
| this.backdropEl.style.backgroundColor = 'rgba(0,0,0,.4)'; | ||
| this.backdropEl.style.display = 'block'; | ||
| this.backdropEl.style.backgroundColor = 'rgba(0,0,0,.0)'; | ||
| this.backdropEl.style.transition = `all ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`; | ||
| setTimeout(() => { | ||
| this.backdropEl.style.backgroundColor = `rgba(0,0,0, ${this.settings.backdropOpacity})`; | ||
| }, 50); | ||
| } | ||
| this.currentBreakpoint = this.breaks[val]; | ||
| this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`; | ||
| this.paneEl.style.transform = `translateY(${this.breaks[val]}px) translateZ(0px)`; | ||
| let initTransitionEv = this.paneEl.addEventListener('transitionend', (t) => { | ||
| // Transition end | ||
| const transitionEnd = () => { | ||
| this.paneEl.style.transition = `initial`; | ||
| initTransitionEv = undefined; | ||
| }); | ||
| // Emit event | ||
| this.settings.onTransitionEnd(); | ||
| // Remove listener | ||
| this.paneEl.removeEventListener('transitionend', transitionEnd); | ||
| }; | ||
| this.paneEl.addEventListener('transitionend', transitionEnd); | ||
| } | ||
@@ -633,7 +690,8 @@ | ||
| if (this.settings.backdrop) { | ||
| this.backdropEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`; | ||
| this.backdropEl.style.transition = `all ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`; | ||
| this.backdropEl.style.backgroundColor = 'rgba(0,0,0,.0)'; | ||
| } | ||
| let initTransitionEv = this.paneEl.addEventListener('transitionend', (t) => { | ||
| // Transition end | ||
| const transitionEnd = () => { | ||
| this.paneEl.style.transition = `initial`; | ||
@@ -646,4 +704,7 @@ | ||
| initTransitionEv = undefined; | ||
| }); | ||
| // Emit event | ||
| this.settings.onTransitionEnd(); | ||
| this.paneEl.removeEventListener('transitionend', transitionEnd); | ||
| }; | ||
| this.paneEl.addEventListener('transitionend', transitionEnd); | ||
| } | ||
@@ -697,2 +758,6 @@ | ||
| this.settings.onDidDismiss(); | ||
| this.settings.onTransitionEnd(); | ||
| // Remove listener | ||
| this.paneEl.removeEventListener('transitionend', resets); | ||
| }; | ||
@@ -705,7 +770,7 @@ | ||
| if (this.settings.backdrop) { | ||
| this.backdropEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`; | ||
| this.backdropEl.style.transition = `all ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`; | ||
| this.backdropEl.style.backgroundColor = 'rgba(0,0,0,.0)'; | ||
| } | ||
| this.paneEl.addEventListener('transitionend', () => resets()); | ||
| this.paneEl.addEventListener('transitionend', resets); | ||
| return; | ||
@@ -712,0 +777,0 @@ } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.08%
9969517
- Lines of code
- increased by5.74%
2872
- Number of lines in readme file
- increased by6.23%
307
No dependency changes