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.0.6 to 1.0.7
@@ -10,2 +10,3 @@ export declare class CupertinoPane { | ||
| private currentBreak; | ||
| private contentScrollTop; | ||
| private breaks; | ||
@@ -21,2 +22,3 @@ private brs; | ||
| private closeEl; | ||
| private overflowEl; | ||
| constructor(el: any, conf?: any); | ||
@@ -29,4 +31,17 @@ private drawElements; | ||
| private checkOpacityAttr; | ||
| private checkOverflowAttr; | ||
| /** | ||
| * Touch Start Event | ||
| * @param t | ||
| */ | ||
| private touchStart; | ||
| /** | ||
| * Touch Move Event | ||
| * @param t | ||
| */ | ||
| private touchMove; | ||
| /** | ||
| * Touch End Event | ||
| * @param t | ||
| */ | ||
| private touchEnd; | ||
@@ -33,0 +48,0 @@ private closePane; |
| /** | ||
| * Cupertino Pane 1.0.6 | ||
| * Cupertino Pane 1.0.7 | ||
| * Multiplatform slide-over pane | ||
| * https://github.com/roman-rr/cupertino-pane/ | ||
| * | ||
| * Copyright 2019-2019 Roman Antonov (roman-rr) | ||
| * Copyright 2019-2020 Roman Antonov (roman-rr) | ||
| * | ||
| * Released under the MIT License | ||
| * | ||
| * Released on: December 28, 2019 | ||
| * Released on: January 8, 2020 | ||
| */ | ||
@@ -156,5 +156,2 @@ | ||
| this.contentEl.style.overflowX = 'hidden'; | ||
| this.contentEl.style.height = `${this.screen_height | ||
| - this.breaks['top'] - 51 | ||
| - this.settings.topperOverflowOffset}px`; | ||
| // Backdrop | ||
@@ -234,3 +231,2 @@ this.backdropEl = document.createElement('div'); | ||
| } | ||
| this.checkOpacityAttr(this.currentBreak); | ||
| if (this.settings.bottomClose) { | ||
@@ -252,7 +248,15 @@ this.settings.breaks.bottom.enabled = true; | ||
| }); | ||
| if (this.currentBreak === this.topper | ||
| && this.settings.topperOverflow) { | ||
| this.contentEl.style.overflowY = 'auto'; | ||
| // headerEl.style.borderBottom = '1px solid #ebebeb'; | ||
| // Get overflow element | ||
| let attrElements = document.querySelectorAll(`.${this.el.className.split(' ')[0]} [overflow-y]`); | ||
| if (!attrElements.length || attrElements.length > 1) { | ||
| this.overflowEl = this.contentEl; | ||
| } | ||
| else { | ||
| this.overflowEl = attrElements[0]; | ||
| } | ||
| this.overflowEl.style.height = `${this.screen_height | ||
| - this.breaks['top'] - 51 | ||
| - this.settings.topperOverflowOffset}px`; | ||
| this.checkOpacityAttr(this.currentBreak); | ||
| this.checkOverflowAttr(this.currentBreak); | ||
| /****** Events *******/ | ||
@@ -265,9 +269,3 @@ this.paneEl.addEventListener('touchstart', (t) => this.touchStart(t)); | ||
| this.checkOpacityAttr(this.breaks[val]); | ||
| if (this.breaks[val] === this.topper | ||
| && this.settings.topperOverflow) { | ||
| this.contentEl.style.overflowY = 'auto'; | ||
| } | ||
| else { | ||
| this.contentEl.style.overflowY = 'hidden'; | ||
| } | ||
| this.checkOverflowAttr(this.breaks[val]); | ||
| this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`; | ||
@@ -292,3 +290,3 @@ this.paneEl.style.transform = `translateY(${this.breaks[val]}px)`; | ||
| checkOpacityAttr(val) { | ||
| let attrElements = document.querySelectorAll(`.${this.el.className} [hide-on-bottom]`); | ||
| let attrElements = document.querySelectorAll(`.${this.el.className.split(' ')[0]} [hide-on-bottom]`); | ||
| if (!attrElements.length) | ||
@@ -298,6 +296,14 @@ return; | ||
| item.style.transition = `opacity ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`; | ||
| item.style.opacity = (val >= this.breaks['bottom']) | ||
| ? '0' : '1'; | ||
| item.style.opacity = (val >= this.breaks['bottom']) ? '0' : '1'; | ||
| }); | ||
| } | ||
| checkOverflowAttr(val) { | ||
| if (!this.settings.topperOverflow) | ||
| return; | ||
| this.overflowEl.style.overflowY = (val <= this.topper) ? 'auto' : 'hidden'; | ||
| } | ||
| /** | ||
| * Touch Start Event | ||
| * @param t | ||
| */ | ||
| touchStart(t) { | ||
@@ -309,2 +315,6 @@ // Event emitter | ||
| } | ||
| /** | ||
| * Touch Move Event | ||
| * @param t | ||
| */ | ||
| touchMove(t) { | ||
@@ -318,27 +328,28 @@ this.settings.onDrag(); | ||
| const newVal = p + diff; | ||
| // Not allow move panel with overflow scroll | ||
| let noScroll = false; | ||
| if (this.contentEl.style.overflowY === 'auto') { | ||
| t.composedPath().forEach((item) => { | ||
| if (item['className'] && item['className'].includes('cupertino-content')) { | ||
| noScroll = true; | ||
| } | ||
| // Not allow move panel with positive overflow scroll | ||
| if (this.overflowEl.style.overflowY === 'auto') { | ||
| this.overflowEl.addEventListener('scroll', (s) => { | ||
| this.contentScrollTop = s.target.scrollTop; | ||
| }); | ||
| if (noScroll && this.contentEl.scrollTop > 20) { | ||
| if ((newVal > this.topper && this.contentScrollTop > 0) | ||
| || (newVal <= this.topper)) { | ||
| return; | ||
| } | ||
| if ((p + diff) <= this.topper && noScroll) { | ||
| return; | ||
| } | ||
| } | ||
| // Not allow drag upper than topper point | ||
| // Not allow drag lower than bottom if free mode | ||
| if (((p + diff) <= this.topper - 20) | ||
| || (this.settings.freeMode && !this.settings.bottomClose && ((p + diff) >= this.bottomer + 20))) { | ||
| if ((newVal <= this.topper) | ||
| || (this.settings.freeMode && !this.settings.bottomClose && (newVal >= this.bottomer))) { | ||
| return; | ||
| } | ||
| this.checkOpacityAttr(newVal); | ||
| this.checkOverflowAttr(newVal); | ||
| this.paneEl.style.transition = 'initial'; | ||
| this.paneEl.style.transform = `translateY(${newVal}px)`; | ||
| this.steps.push(n); | ||
| this.checkOpacityAttr(newVal); | ||
| } | ||
| /** | ||
| * Touch End Event | ||
| * @param t | ||
| */ | ||
| touchEnd(t) { | ||
@@ -369,9 +380,3 @@ const translateYRegex = /\.*translateY\((.*)px\)/i; | ||
| this.checkOpacityAttr(this.currentBreak); | ||
| if (this.currentBreak === this.topper | ||
| && this.settings.topperOverflow) { | ||
| this.contentEl.style.overflowY = 'auto'; | ||
| } | ||
| else { | ||
| this.contentEl.style.overflowY = 'hidden'; | ||
| } | ||
| this.checkOverflowAttr(this.currentBreak); | ||
| // Bottom closable | ||
@@ -378,0 +383,0 @@ if (this.settings.bottomClose && closest === this.breaks['bottom']) { |
| /** | ||
| * Cupertino Pane 1.0.6 | ||
| * Cupertino Pane 1.0.7 | ||
| * Multiplatform slide-over pane | ||
| * https://github.com/roman-rr/cupertino-pane/ | ||
| * | ||
| * Copyright 2019-2019 Roman Antonov (roman-rr) | ||
| * Copyright 2019-2020 Roman Antonov (roman-rr) | ||
| * | ||
| * Released under the MIT License | ||
| * | ||
| * Released on: December 28, 2019 | ||
| * Released on: January 8, 2020 | ||
| */ | ||
@@ -160,5 +160,2 @@ | ||
| this.contentEl.style.overflowX = 'hidden'; | ||
| this.contentEl.style.height = `${this.screen_height | ||
| - this.breaks['top'] - 51 | ||
| - this.settings.topperOverflowOffset}px`; | ||
| // Backdrop | ||
@@ -238,3 +235,2 @@ this.backdropEl = document.createElement('div'); | ||
| } | ||
| this.checkOpacityAttr(this.currentBreak); | ||
| if (this.settings.bottomClose) { | ||
@@ -256,7 +252,15 @@ this.settings.breaks.bottom.enabled = true; | ||
| }); | ||
| if (this.currentBreak === this.topper | ||
| && this.settings.topperOverflow) { | ||
| this.contentEl.style.overflowY = 'auto'; | ||
| // headerEl.style.borderBottom = '1px solid #ebebeb'; | ||
| // Get overflow element | ||
| let attrElements = document.querySelectorAll(`.${this.el.className.split(' ')[0]} [overflow-y]`); | ||
| if (!attrElements.length || attrElements.length > 1) { | ||
| this.overflowEl = this.contentEl; | ||
| } | ||
| else { | ||
| this.overflowEl = attrElements[0]; | ||
| } | ||
| this.overflowEl.style.height = `${this.screen_height | ||
| - this.breaks['top'] - 51 | ||
| - this.settings.topperOverflowOffset}px`; | ||
| this.checkOpacityAttr(this.currentBreak); | ||
| this.checkOverflowAttr(this.currentBreak); | ||
| /****** Events *******/ | ||
@@ -269,9 +273,3 @@ this.paneEl.addEventListener('touchstart', (t) => this.touchStart(t)); | ||
| this.checkOpacityAttr(this.breaks[val]); | ||
| if (this.breaks[val] === this.topper | ||
| && this.settings.topperOverflow) { | ||
| this.contentEl.style.overflowY = 'auto'; | ||
| } | ||
| else { | ||
| this.contentEl.style.overflowY = 'hidden'; | ||
| } | ||
| this.checkOverflowAttr(this.breaks[val]); | ||
| this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`; | ||
@@ -296,3 +294,3 @@ this.paneEl.style.transform = `translateY(${this.breaks[val]}px)`; | ||
| checkOpacityAttr(val) { | ||
| let attrElements = document.querySelectorAll(`.${this.el.className} [hide-on-bottom]`); | ||
| let attrElements = document.querySelectorAll(`.${this.el.className.split(' ')[0]} [hide-on-bottom]`); | ||
| if (!attrElements.length) | ||
@@ -302,6 +300,14 @@ return; | ||
| item.style.transition = `opacity ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`; | ||
| item.style.opacity = (val >= this.breaks['bottom']) | ||
| ? '0' : '1'; | ||
| item.style.opacity = (val >= this.breaks['bottom']) ? '0' : '1'; | ||
| }); | ||
| } | ||
| checkOverflowAttr(val) { | ||
| if (!this.settings.topperOverflow) | ||
| return; | ||
| this.overflowEl.style.overflowY = (val <= this.topper) ? 'auto' : 'hidden'; | ||
| } | ||
| /** | ||
| * Touch Start Event | ||
| * @param t | ||
| */ | ||
| touchStart(t) { | ||
@@ -313,2 +319,6 @@ // Event emitter | ||
| } | ||
| /** | ||
| * Touch Move Event | ||
| * @param t | ||
| */ | ||
| touchMove(t) { | ||
@@ -322,27 +332,28 @@ this.settings.onDrag(); | ||
| const newVal = p + diff; | ||
| // Not allow move panel with overflow scroll | ||
| let noScroll = false; | ||
| if (this.contentEl.style.overflowY === 'auto') { | ||
| t.composedPath().forEach((item) => { | ||
| if (item['className'] && item['className'].includes('cupertino-content')) { | ||
| noScroll = true; | ||
| } | ||
| // Not allow move panel with positive overflow scroll | ||
| if (this.overflowEl.style.overflowY === 'auto') { | ||
| this.overflowEl.addEventListener('scroll', (s) => { | ||
| this.contentScrollTop = s.target.scrollTop; | ||
| }); | ||
| if (noScroll && this.contentEl.scrollTop > 20) { | ||
| if ((newVal > this.topper && this.contentScrollTop > 0) | ||
| || (newVal <= this.topper)) { | ||
| return; | ||
| } | ||
| if ((p + diff) <= this.topper && noScroll) { | ||
| return; | ||
| } | ||
| } | ||
| // Not allow drag upper than topper point | ||
| // Not allow drag lower than bottom if free mode | ||
| if (((p + diff) <= this.topper - 20) | ||
| || (this.settings.freeMode && !this.settings.bottomClose && ((p + diff) >= this.bottomer + 20))) { | ||
| if ((newVal <= this.topper) | ||
| || (this.settings.freeMode && !this.settings.bottomClose && (newVal >= this.bottomer))) { | ||
| return; | ||
| } | ||
| this.checkOpacityAttr(newVal); | ||
| this.checkOverflowAttr(newVal); | ||
| this.paneEl.style.transition = 'initial'; | ||
| this.paneEl.style.transform = `translateY(${newVal}px)`; | ||
| this.steps.push(n); | ||
| this.checkOpacityAttr(newVal); | ||
| } | ||
| /** | ||
| * Touch End Event | ||
| * @param t | ||
| */ | ||
| touchEnd(t) { | ||
@@ -373,9 +384,3 @@ const translateYRegex = /\.*translateY\((.*)px\)/i; | ||
| this.checkOpacityAttr(this.currentBreak); | ||
| if (this.currentBreak === this.topper | ||
| && this.settings.topperOverflow) { | ||
| this.contentEl.style.overflowY = 'auto'; | ||
| } | ||
| else { | ||
| this.contentEl.style.overflowY = 'hidden'; | ||
| } | ||
| this.checkOverflowAttr(this.currentBreak); | ||
| // Bottom closable | ||
@@ -382,0 +387,0 @@ if (this.settings.bottomClose && closest === this.breaks['bottom']) { |
| /** | ||
| * Cupertino Pane 1.0.6 | ||
| * Cupertino Pane 1.0.7 | ||
| * Multiplatform slide-over pane | ||
| * https://github.com/roman-rr/cupertino-pane/ | ||
| * | ||
| * Copyright 2019-2019 Roman Antonov (roman-rr) | ||
| * Copyright 2019-2020 Roman Antonov (roman-rr) | ||
| * | ||
| * Released under the MIT License | ||
| * | ||
| * Released on: December 28, 2019 | ||
| * Released on: January 8, 2020 | ||
| */ | ||
| "use strict";Object.defineProperty(exports,"__esModule",{value:!0});class CupertinoPane{constructor(t,s={}){this.el=t,this.settings={initialShow:!1,initialBreak:"middle",parentElement:null,backdrop:!1,backdropClose:!1,animationType:"ease",animationDuration:300,darkMode:!1,bottomClose:!1,freeMode:!1,buttonClose:!0,topperOverflow:!0,topperOverflowOffset:0,showDraggable:!0,clickBottomOpen:!0,breaks:{top:{enabled:!0,offset:0},middle:{enabled:!0,offset:0},bottom:{enabled:!0,offset:0}},onDidDismiss:()=>{},onWillDismiss:()=>{},onDidPresent:()=>{},onWillPresent:()=>{},onDragStart:()=>{},onDrag:()=>{}},this.screen_height=window.screen.height,this.steps=[],this.breaks={top:50,middle:Math.round(this.screen_height-.35*this.screen_height),bottom:this.screen_height-80},this.brs=[],this.swipeNextPoint=(t,s,e)=>{if(this.currentBreak===this.breaks.top){if(t>s){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.currentBreak===this.breaks.middle)return t<-s&&this.settings.breaks.top.enabled?this.breaks.top:t>s&&this.settings.breaks.bottom.enabled?this.breaks.bottom:this.breaks.middle;if(this.currentBreak===this.breaks.bottom){if(t<-s){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 e},this.settings=Object.assign(Object.assign({},this.settings),s),this.el=document.querySelector(this.el),this.el.style.display="none",this.settings.parentElement?this.settings.parentElement=document.querySelector(this.settings.parentElement):this.settings.parentElement=this.el.parentElement,["top","middle","bottom"].forEach(t=>{this.settings.breaks[this.settings.initialBreak].enabled||this.settings.breaks[t].enabled&&(this.settings.initialBreak=t),this.settings.breaks[t]&&this.settings.breaks[t].enabled&&this.settings.breaks[t].offset&&(this.breaks[t]-=this.settings.breaks[t].offset)}),this.currentBreak=this.breaks[this.settings.initialBreak],this.settings.initialShow&&this.present()}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.paneEl=document.createElement("div"),this.paneEl.className="pane",this.paneEl.style.position="fixed",this.paneEl.style.zIndex="11",this.paneEl.style.width="100%",this.paneEl.style.height="100%",this.paneEl.style.background="#ffffff",this.paneEl.style.borderTopLeftRadius="20px",this.paneEl.style.borderTopRightRadius="20px",this.paneEl.style.boxShadow="0 4px 16px rgba(0,0,0,.12)",this.paneEl.style.overflow="hidden",this.paneEl.style.transform=`translateY(${this.settings.initialShow?this.breaks[this.settings.initialBreak]:this.screen_height}px)`,this.draggableEl=document.createElement("div"),this.draggableEl.className="draggable",this.draggableEl.style.padding="5px",this.moveEl=document.createElement("div"),this.moveEl.className="move",this.moveEl.style.margin="0 auto",this.moveEl.style.height="5px",this.moveEl.style.background="#c0c0c0",this.moveEl.style.width="36px",this.moveEl.style.borderRadius="4px",this.contentEl=this.el,this.contentEl.style.display="",this.contentEl.style.transition=`opacity ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.contentEl.style.overflowX="hidden",this.contentEl.style.height=`${this.screen_height-this.breaks.top-51-this.settings.topperOverflowOffset}px`,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.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(){if(document.querySelector(`.cupertino-pane-wrapper.${this.el.className.split(" ").join(".")}`))this.moveToBreak(this.settings.initialBreak);else{if(this.settings.onWillPresent(),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.initialShow){this.paneEl.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,setTimeout(()=>{this.paneEl.style.transform=`translateY(${this.breaks[this.settings.initialBreak]}px)`},50);let t=this.paneEl.addEventListener("transitionend",s=>{this.paneEl.style.transition="initial",t=void 0})}if(this.settings.onDidPresent(),this.settings.backdrop&&(this.wrapperEl.appendChild(this.backdropEl),this.settings.backdropClose&&this.backdropEl.addEventListener("click",t=>this.closePane(this.backdropEl))),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.closePane(this.backdropEl));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.checkOpacityAttr(this.currentBreak),this.settings.bottomClose&&(this.settings.breaks.bottom.enabled=!0),["top","middle","bottom"].forEach(t=>{this.settings.breaks[t].enabled&&this.brs.push(this.breaks[t])}),this.topper=this.brs.reduce((t,s)=>Math.abs(s)<Math.abs(t)?s:t),this.bottomer=this.brs.reduce((t,s)=>Math.abs(s)>Math.abs(t)?s:t),this.currentBreak===this.topper&&this.settings.topperOverflow&&(this.contentEl.style.overflowY="auto"),this.paneEl.addEventListener("touchstart",t=>this.touchStart(t)),this.paneEl.addEventListener("touchmove",t=>this.touchMove(t)),this.paneEl.addEventListener("touchend",t=>this.touchEnd(t))}}moveToBreak(t){this.checkOpacityAttr(this.breaks[t]),this.breaks[t]===this.topper&&this.settings.topperOverflow?this.contentEl.style.overflowY="auto":this.contentEl.style.overflowY="hidden",this.paneEl.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.paneEl.style.transform=`translateY(${this.breaks[t]}px)`;let s=this.paneEl.addEventListener("transitionend",t=>{this.paneEl.style.transition="initial",s=void 0})}hide(){this.paneEl.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.paneEl.style.transform=`translateY(${this.screen_height}px)`;let t=this.paneEl.addEventListener("transitionend",s=>{this.paneEl.style.transition="initial",t=void 0})}isHidden(){return this.paneEl.style.transform===`translateY(${this.screen_height}px)`}checkOpacityAttr(t){let s=document.querySelectorAll(`.${this.el.className} [hide-on-bottom]`);s.length&&s.forEach(s=>{s.style.transition=`opacity ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,s.style.opacity=t>=this.breaks.bottom?"0":"1"})}touchStart(t){this.settings.onDragStart(),this.startP=t.touches[0].screenY,this.steps.push(this.startP)}touchMove(t){this.settings.onDrag();const s=parseFloat(/\.*translateY\((.*)px\)/i.exec(this.paneEl.style.transform)[1]),e=t.touches[0].screenY,i=e-this.steps[this.steps.length-1],n=s+i;let a=!1;if("auto"===this.contentEl.style.overflowY){if(t.composedPath().forEach(t=>{t.className&&t.className.includes("cupertino-content")&&(a=!0)}),a&&this.contentEl.scrollTop>20)return;if(s+i<=this.topper&&a)return}s+i<=this.topper-20||this.settings.freeMode&&!this.settings.bottomClose&&s+i>=this.bottomer+20||(this.paneEl.style.transform=`translateY(${n}px)`,this.steps.push(e),this.checkOpacityAttr(n))}touchEnd(t){const s=parseFloat(/\.*translateY\((.*)px\)/i.exec(this.paneEl.style.transform)[1]);let e=this.brs.reduce((t,e)=>Math.abs(e-s)<Math.abs(t-s)?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&&(e=this.swipeNextPoint(i,n,e)),this.settings.clickBottomOpen&&this.currentBreak===this.breaks.bottom&&isNaN(i)&&(e=this.settings.breaks.middle.enabled?this.breaks.middle:this.settings.breaks.top.enabled?this.breaks.top:this.breaks.bottom),this.steps=[],this.currentBreak=e,this.checkOpacityAttr(this.currentBreak),this.currentBreak===this.topper&&this.settings.topperOverflow?this.contentEl.style.overflowY="auto":this.contentEl.style.overflowY="hidden",this.settings.bottomClose&&e===this.breaks.bottom)this.closePane(this.backdropEl);else if(!this.settings.freeMode){this.paneEl.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.paneEl.style.transform=`translateY(${e}px)`;let t=this.paneEl.addEventListener("transitionend",()=>{this.paneEl.style.transition="initial",t=void 0})}}closePane(t){this.settings.onWillDismiss(),this.paneEl.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.paneEl.style.transform=`translateY(${this.screen_height}px)`,t.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,t.style.backgroundColor="rgba(0,0,0,.0)",this.currentBreak=this.breaks[this.settings.initialBreak],this.paneEl.addEventListener("transitionend",t=>{this.parentEl.appendChild(this.contentEl),this.contentEl.style.display="none",this.parentEl.removeChild(this.wrapperEl),this.settings.onDidDismiss()})}}exports.CupertinoPane=CupertinoPane; | ||
| "use strict";Object.defineProperty(exports,"__esModule",{value:!0});class CupertinoPane{constructor(t,s={}){this.el=t,this.settings={initialShow:!1,initialBreak:"middle",parentElement:null,backdrop:!1,backdropClose:!1,animationType:"ease",animationDuration:300,darkMode:!1,bottomClose:!1,freeMode:!1,buttonClose:!0,topperOverflow:!0,topperOverflowOffset:0,showDraggable:!0,clickBottomOpen:!0,breaks:{top:{enabled:!0,offset:0},middle:{enabled:!0,offset:0},bottom:{enabled:!0,offset:0}},onDidDismiss:()=>{},onWillDismiss:()=>{},onDidPresent:()=>{},onWillPresent:()=>{},onDragStart:()=>{},onDrag:()=>{}},this.screen_height=window.screen.height,this.steps=[],this.breaks={top:50,middle:Math.round(this.screen_height-.35*this.screen_height),bottom:this.screen_height-80},this.brs=[],this.swipeNextPoint=(t,s,e)=>{if(this.currentBreak===this.breaks.top){if(t>s){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.currentBreak===this.breaks.middle)return t<-s&&this.settings.breaks.top.enabled?this.breaks.top:t>s&&this.settings.breaks.bottom.enabled?this.breaks.bottom:this.breaks.middle;if(this.currentBreak===this.breaks.bottom){if(t<-s){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 e},this.settings=Object.assign(Object.assign({},this.settings),s),this.el=document.querySelector(this.el),this.el.style.display="none",this.settings.parentElement?this.settings.parentElement=document.querySelector(this.settings.parentElement):this.settings.parentElement=this.el.parentElement,["top","middle","bottom"].forEach(t=>{this.settings.breaks[this.settings.initialBreak].enabled||this.settings.breaks[t].enabled&&(this.settings.initialBreak=t),this.settings.breaks[t]&&this.settings.breaks[t].enabled&&this.settings.breaks[t].offset&&(this.breaks[t]-=this.settings.breaks[t].offset)}),this.currentBreak=this.breaks[this.settings.initialBreak],this.settings.initialShow&&this.present()}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.paneEl=document.createElement("div"),this.paneEl.className="pane",this.paneEl.style.position="fixed",this.paneEl.style.zIndex="11",this.paneEl.style.width="100%",this.paneEl.style.height="100%",this.paneEl.style.background="#ffffff",this.paneEl.style.borderTopLeftRadius="20px",this.paneEl.style.borderTopRightRadius="20px",this.paneEl.style.boxShadow="0 4px 16px rgba(0,0,0,.12)",this.paneEl.style.overflow="hidden",this.paneEl.style.transform=`translateY(${this.settings.initialShow?this.breaks[this.settings.initialBreak]:this.screen_height}px)`,this.draggableEl=document.createElement("div"),this.draggableEl.className="draggable",this.draggableEl.style.padding="5px",this.moveEl=document.createElement("div"),this.moveEl.className="move",this.moveEl.style.margin="0 auto",this.moveEl.style.height="5px",this.moveEl.style.background="#c0c0c0",this.moveEl.style.width="36px",this.moveEl.style.borderRadius="4px",this.contentEl=this.el,this.contentEl.style.display="",this.contentEl.style.transition=`opacity ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.contentEl.style.overflowX="hidden",this.backdropEl=document.createElement("div"),this.backdropEl.className="backdrop",this.backdropEl.style.overflow="hidden",this.backdropEl.style.position="fixed",this.backdropEl.style.width="100%",this.backdropEl.style.bottom="0",this.backdropEl.style.right="0",this.backdropEl.style.left="0",this.backdropEl.style.top="0",this.backdropEl.style.backgroundColor="rgba(0,0,0,.4)",this.backdropEl.style.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(){if(document.querySelector(`.cupertino-pane-wrapper.${this.el.className.split(" ").join(".")}`))return void this.moveToBreak(this.settings.initialBreak);if(this.settings.onWillPresent(),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.initialShow){this.paneEl.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,setTimeout(()=>{this.paneEl.style.transform=`translateY(${this.breaks[this.settings.initialBreak]}px)`},50);let t=this.paneEl.addEventListener("transitionend",s=>{this.paneEl.style.transition="initial",t=void 0})}if(this.settings.onDidPresent(),this.settings.backdrop&&(this.wrapperEl.appendChild(this.backdropEl),this.settings.backdropClose&&this.backdropEl.addEventListener("click",t=>this.closePane(this.backdropEl))),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.closePane(this.backdropEl));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),["top","middle","bottom"].forEach(t=>{this.settings.breaks[t].enabled&&this.brs.push(this.breaks[t])}),this.topper=this.brs.reduce((t,s)=>Math.abs(s)<Math.abs(t)?s:t),this.bottomer=this.brs.reduce((t,s)=>Math.abs(s)>Math.abs(t)?s:t);let t=document.querySelectorAll(`.${this.el.className.split(" ")[0]} [overflow-y]`);!t.length||t.length>1?this.overflowEl=this.contentEl:this.overflowEl=t[0],this.overflowEl.style.height=`${this.screen_height-this.breaks.top-51-this.settings.topperOverflowOffset}px`,this.checkOpacityAttr(this.currentBreak),this.checkOverflowAttr(this.currentBreak),this.paneEl.addEventListener("touchstart",t=>this.touchStart(t)),this.paneEl.addEventListener("touchmove",t=>this.touchMove(t)),this.paneEl.addEventListener("touchend",t=>this.touchEnd(t))}moveToBreak(t){this.checkOpacityAttr(this.breaks[t]),this.checkOverflowAttr(this.breaks[t]),this.paneEl.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.paneEl.style.transform=`translateY(${this.breaks[t]}px)`;let s=this.paneEl.addEventListener("transitionend",t=>{this.paneEl.style.transition="initial",s=void 0})}hide(){this.paneEl.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.paneEl.style.transform=`translateY(${this.screen_height}px)`;let t=this.paneEl.addEventListener("transitionend",s=>{this.paneEl.style.transition="initial",t=void 0})}isHidden(){return this.paneEl.style.transform===`translateY(${this.screen_height}px)`}checkOpacityAttr(t){let s=document.querySelectorAll(`.${this.el.className.split(" ")[0]} [hide-on-bottom]`);s.length&&s.forEach(s=>{s.style.transition=`opacity ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,s.style.opacity=t>=this.breaks.bottom?"0":"1"})}checkOverflowAttr(t){this.settings.topperOverflow&&(this.overflowEl.style.overflowY=t<=this.topper?"auto":"hidden")}touchStart(t){this.settings.onDragStart(),this.startP=t.touches[0].screenY,this.steps.push(this.startP)}touchMove(t){this.settings.onDrag();const s=parseFloat(/\.*translateY\((.*)px\)/i.exec(this.paneEl.style.transform)[1]),e=t.touches[0].screenY,i=s+(e-this.steps[this.steps.length-1]);"auto"===this.overflowEl.style.overflowY&&(this.overflowEl.addEventListener("scroll",t=>{this.contentScrollTop=t.target.scrollTop}),i>this.topper&&this.contentScrollTop>0||i<=this.topper)||i<=this.topper||this.settings.freeMode&&!this.settings.bottomClose&&i>=this.bottomer||(this.checkOpacityAttr(i),this.checkOverflowAttr(i),this.paneEl.style.transition="initial",this.paneEl.style.transform=`translateY(${i}px)`,this.steps.push(e))}touchEnd(t){const s=parseFloat(/\.*translateY\((.*)px\)/i.exec(this.paneEl.style.transform)[1]);let e=this.brs.reduce((t,e)=>Math.abs(e-s)<Math.abs(t-s)?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&&(e=this.swipeNextPoint(i,n,e)),this.settings.clickBottomOpen&&this.currentBreak===this.breaks.bottom&&isNaN(i)&&(e=this.settings.breaks.middle.enabled?this.breaks.middle:this.settings.breaks.top.enabled?this.breaks.top:this.breaks.bottom),this.steps=[],this.currentBreak=e,this.checkOpacityAttr(this.currentBreak),this.checkOverflowAttr(this.currentBreak),this.settings.bottomClose&&e===this.breaks.bottom)this.closePane(this.backdropEl);else if(!this.settings.freeMode){this.paneEl.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.paneEl.style.transform=`translateY(${e}px)`;let t=this.paneEl.addEventListener("transitionend",()=>{this.paneEl.style.transition="initial",t=void 0})}}closePane(t){this.settings.onWillDismiss(),this.paneEl.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,this.paneEl.style.transform=`translateY(${this.screen_height}px)`,t.style.transition=`transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`,t.style.backgroundColor="rgba(0,0,0,.0)",this.currentBreak=this.breaks[this.settings.initialBreak],this.paneEl.addEventListener("transitionend",t=>{this.parentEl.appendChild(this.contentEl),this.contentEl.style.display="none",this.parentEl.removeChild(this.wrapperEl),this.settings.onDidDismiss()})}}exports.CupertinoPane=CupertinoPane; | ||
| //# sourceMappingURL=cupertino-pane.min.js.map |
| { | ||
| "name": "cupertino-pane", | ||
| "description": "Multiplatform slide-over pane", | ||
| "version": "1.0.6", | ||
| "version": "1.0.7", | ||
| "author": "Roman Antonov (roman-rr)", | ||
@@ -6,0 +6,0 @@ "homepage": "https://github.com/roman-rr/cupertino-pane/", |
@@ -185,2 +185,11 @@ # Cupertino Pane | ||
| ``` | ||
| ### overflow-y | ||
| Set for element with overflow ability. | ||
| By default using for full pane area, but in some cases good useful with header. | ||
| ```html | ||
| <div class="cupertino-pane"> | ||
| <h1>Header</h1> | ||
| <div class="content" overflow-y>Content</div> | ||
| </div> | ||
| ``` | ||
@@ -191,3 +200,2 @@ ## Future Goals | ||
| - Realistic easy-in-out transitions | ||
| - Work out the state with overflow-x | ||
| - Using in all popular mobile frameworks | ||
@@ -194,0 +202,0 @@ |
@@ -38,2 +38,3 @@ export class CupertinoPane { | ||
| private currentBreak: number; | ||
| private contentScrollTop: number; | ||
@@ -55,2 +56,3 @@ private breaks: {} = { | ||
| private closeEl: HTMLDivElement; | ||
| private overflowEl: HTMLElement; | ||
@@ -136,5 +138,2 @@ constructor(private el, conf: any = {}) { | ||
| this.contentEl.style.overflowX = 'hidden'; | ||
| this.contentEl.style.height = `${this.screen_height | ||
| - this.breaks['top'] - 51 | ||
| - this.settings.topperOverflowOffset}px`; | ||
@@ -230,4 +229,2 @@ // Backdrop | ||
| this.checkOpacityAttr(this.currentBreak); | ||
| if (this.settings.bottomClose) { | ||
@@ -252,8 +249,16 @@ this.settings.breaks.bottom.enabled = true; | ||
| if (this.currentBreak === this.topper | ||
| && this.settings.topperOverflow) { | ||
| this.contentEl.style.overflowY = 'auto'; | ||
| // headerEl.style.borderBottom = '1px solid #ebebeb'; | ||
| // Get overflow element | ||
| let attrElements = document.querySelectorAll(`.${this.el.className.split(' ')[0]} [overflow-y]`); | ||
| if (!attrElements.length || attrElements.length > 1) { | ||
| this.overflowEl = this.contentEl; | ||
| } else { | ||
| this.overflowEl = <HTMLElement>attrElements[0]; | ||
| } | ||
| this.overflowEl.style.height = `${this.screen_height | ||
| - this.breaks['top'] - 51 | ||
| - this.settings.topperOverflowOffset}px`; | ||
| this.checkOpacityAttr(this.currentBreak); | ||
| this.checkOverflowAttr(this.currentBreak); | ||
| /****** Events *******/ | ||
@@ -267,10 +272,4 @@ this.paneEl.addEventListener('touchstart', (t) => this.touchStart(t)); | ||
| this.checkOpacityAttr(this.breaks[val]); | ||
| this.checkOverflowAttr(this.breaks[val]); | ||
| if (this.breaks[val] === this.topper | ||
| && this.settings.topperOverflow) { | ||
| this.contentEl.style.overflowY = 'auto'; | ||
| } else { | ||
| this.contentEl.style.overflowY = 'hidden'; | ||
| } | ||
| this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`; | ||
@@ -298,11 +297,19 @@ this.paneEl.style.transform = `translateY(${this.breaks[val]}px)`; | ||
| private checkOpacityAttr(val) { | ||
| let attrElements = document.querySelectorAll(`.${this.el.className} [hide-on-bottom]`); | ||
| let attrElements = document.querySelectorAll(`.${this.el.className.split(' ')[0]} [hide-on-bottom]`); | ||
| if (!attrElements.length) return; | ||
| attrElements.forEach((item) => { | ||
| (<HTMLElement>item).style.transition = `opacity ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`; | ||
| (<HTMLElement>item).style.opacity = (val >= this.breaks['bottom']) | ||
| ? '0' : '1'; | ||
| (<HTMLElement>item).style.opacity = (val >= this.breaks['bottom']) ? '0' : '1'; | ||
| }); | ||
| } | ||
| private checkOverflowAttr(val) { | ||
| if (!this.settings.topperOverflow) return; | ||
| this.overflowEl.style.overflowY = (val <= this.topper) ? 'auto' : 'hidden'; | ||
| } | ||
| /** | ||
| * Touch Start Event | ||
| * @param t | ||
| */ | ||
| private touchStart(t) { | ||
@@ -315,2 +322,6 @@ // Event emitter | ||
| /** | ||
| * Touch Move Event | ||
| * @param t | ||
| */ | ||
| private touchMove(t) { | ||
@@ -326,12 +337,11 @@ this.settings.onDrag(); | ||
| // Not allow move panel with overflow scroll | ||
| let noScroll = false; | ||
| if (this.contentEl.style.overflowY === 'auto') { | ||
| t.composedPath().forEach((item) => { | ||
| if (item['className'] && item['className'].includes('cupertino-content')) { | ||
| noScroll = true; | ||
| } | ||
| // Not allow move panel with positive overflow scroll | ||
| if (this.overflowEl.style.overflowY === 'auto') { | ||
| this.overflowEl.addEventListener('scroll', (s: any) => { | ||
| this.contentScrollTop = s.target.scrollTop; | ||
| }); | ||
| if (noScroll && this.contentEl.scrollTop > 20) { return; } | ||
| if ((p + diff) <= this.topper && noScroll) { return; } | ||
| if ((newVal > this.topper && this.contentScrollTop > 0) | ||
| || (newVal <= this.topper)) { | ||
| return; | ||
| } | ||
| } | ||
@@ -341,13 +351,19 @@ | ||
| // Not allow drag lower than bottom if free mode | ||
| if (((p + diff) <= this.topper - 20) | ||
| || (this.settings.freeMode && !this.settings.bottomClose && ((p + diff) >= this.bottomer + 20))) { | ||
| if ((newVal <= this.topper) | ||
| || (this.settings.freeMode && !this.settings.bottomClose && (newVal >= this.bottomer))) { | ||
| return; | ||
| } | ||
| this.checkOpacityAttr(newVal); | ||
| this.checkOverflowAttr(newVal); | ||
| this.paneEl.style.transition = 'initial'; | ||
| this.paneEl.style.transform = `translateY(${newVal}px)`; | ||
| this.steps.push(n); | ||
| this.checkOpacityAttr(newVal); | ||
| } | ||
| /** | ||
| * Touch End Event | ||
| * @param t | ||
| */ | ||
| private touchEnd(t) { | ||
@@ -383,10 +399,4 @@ const translateYRegex = /\.*translateY\((.*)px\)/i; | ||
| this.checkOpacityAttr(this.currentBreak); | ||
| this.checkOverflowAttr(this.currentBreak); | ||
| if (this.currentBreak === this.topper | ||
| && this.settings.topperOverflow) { | ||
| this.contentEl.style.overflowY = 'auto'; | ||
| } else { | ||
| this.contentEl.style.overflowY = 'hidden'; | ||
| } | ||
| // Bottom closable | ||
@@ -393,0 +403,0 @@ if (this.settings.bottomClose && closest === this.breaks['bottom']) { |
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.01%
9893584
- Lines of code
- increased by2.31%
1597
- Number of lines in readme file
- increased by3.62%
229
No dependency changes