cupertino-pane - npm Package Compare versions

Comparing version 0.1.4 to 0.1.5

dist/cupertino-pane.esm.bundle.js

 /**
- * Cupertino Pane 0.1.3
+ * Cupertino Pane 0.1.4
  * Multiplatform slide-over pane
@@ -58,2 +58,3 @@ * https://github.com/roman-rr/cupertino-pane/
             showDraggable: true,
+            clickBottomOpen: true,
             breaks: {
@@ -289,20 +290,2 @@ top: { enabled: true, offset: 0 },
         /****** Events *******/
-        // Click
-        this.paneEl.addEventListener('click', function (t) {
-            if (t.target['className'].includes('close-button')) {
-                _this.closePane(_this.backdropEl);
-                return;
-            }
-            // Click to bottom - open middle
-            if (_this.currentBreak === _this.breaks['bottom']) {
-                if (_this.settings.breaks['middle'].enabled) {
-                    _this.moveToBreak('middle');
-                    return;
-                }
-                if (_this.settings.breaks['top'].enabled) {
-                    _this.moveToBreak('top');
-                    return;
-                }
-            }
-        });
         // Touchstart
@@ -362,6 +345,9 @@ this.paneEl.addEventListener('touchstart', function (t) {
             }
-            // Bottom closable
-            if (_this.settings.bottomClose && closest === _this.breaks['bottom']) {
-                _this.closePane(_this.backdropEl);
-                return;
+            // Click to bottom - open middle
+            if (_this.settings.clickBottomOpen) {
+                if (_this.currentBreak === _this.breaks['bottom'] && isNaN(diff)) {
+                    closest = _this.settings.breaks['middle'].enabled
+                        ? _this.breaks['middle'] : _this.settings.breaks['top'].enabled
+                        ? _this.breaks['top'] : _this.breaks['bottom'];
+                }
             }
@@ -383,2 +369,7 @@ _this.steps = [];
             }
+            // Bottom closable
+            if (_this.settings.bottomClose && closest === _this.breaks['bottom']) {
+                _this.closePane(_this.backdropEl);
+                return;
+            }
             if (!_this.settings.freeMode) {
@@ -436,2 +427,4 @@ _this.paneEl.style.transition = "transform " + _this.settings.animationDuration + "ms " + _this.settings.animationType + " 0s";
         this.el.appendChild(this.contentEl);
+        // Reset vars
+        this.currentBreak = this.breaks[this.settings.initialBreak];
         this.paneEl.addEventListener('transitionend', function (t) {
@@ -438,0 +431,0 @@ _this.parentEl.removeChild(_this.wrapperEl);

dist/cupertino-pane.js

 /**
- * Cupertino Pane 0.1.3
+ * Cupertino Pane 0.1.4
  * Multiplatform slide-over pane
@@ -64,2 +64,3 @@ * https://github.com/roman-rr/cupertino-pane/
                 showDraggable: true,
+                clickBottomOpen: true,
                 breaks: {
@@ -295,20 +296,2 @@ top: { enabled: true, offset: 0 },
             /****** Events *******/
-            // Click
-            this.paneEl.addEventListener('click', function (t) {
-                if (t.target['className'].includes('close-button')) {
-                    _this.closePane(_this.backdropEl);
-                    return;
-                }
-                // Click to bottom - open middle
-                if (_this.currentBreak === _this.breaks['bottom']) {
-                    if (_this.settings.breaks['middle'].enabled) {
-                        _this.moveToBreak('middle');
-                        return;
-                    }
-                    if (_this.settings.breaks['top'].enabled) {
-                        _this.moveToBreak('top');
-                        return;
-                    }
-                }
-            });
             // Touchstart
@@ -368,6 +351,9 @@ this.paneEl.addEventListener('touchstart', function (t) {
                 }
-                // Bottom closable
-                if (_this.settings.bottomClose && closest === _this.breaks['bottom']) {
-                    _this.closePane(_this.backdropEl);
-                    return;
+                // Click to bottom - open middle
+                if (_this.settings.clickBottomOpen) {
+                    if (_this.currentBreak === _this.breaks['bottom'] && isNaN(diff)) {
+                        closest = _this.settings.breaks['middle'].enabled
+                            ? _this.breaks['middle'] : _this.settings.breaks['top'].enabled
+                            ? _this.breaks['top'] : _this.breaks['bottom'];
+                    }
                 }
@@ -389,2 +375,7 @@ _this.steps = [];
                 }
+                // Bottom closable
+                if (_this.settings.bottomClose && closest === _this.breaks['bottom']) {
+                    _this.closePane(_this.backdropEl);
+                    return;
+                }
                 if (!_this.settings.freeMode) {
@@ -442,2 +433,4 @@ _this.paneEl.style.transition = "transform " + _this.settings.animationDuration + "ms " + _this.settings.animationType + " 0s";
             this.el.appendChild(this.contentEl);
+            // Reset vars
+            this.currentBreak = this.breaks[this.settings.initialBreak];
             this.paneEl.addEventListener('transitionend', function (t) {
@@ -444,0 +437,0 @@ _this.parentEl.removeChild(_this.wrapperEl);

dist/cupertino-pane.min.js

 /**
- * Cupertino Pane 0.1.3
+ * Cupertino Pane 0.1.4
  * Multiplatform slide-over pane
@@ -27,3 +27,3 @@ * https://github.com/roman-rr/cupertino-pane/
     and limitations under the License.
-    ***************************************************************************** */var e=function(){return(e=Object.assign||function(t){for(var e,s=1,i=arguments.length;s<i;s++)for(var n in e=arguments[s])Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t}).apply(this,arguments)},s=function(){function t(t,s){var i=this;void 0===s&&(s={}),this.el=t,this.settings={initialShow:!1,initialBreak:"middle",backdrop:!1,backdropClose:!1,animationType:"ease",animationDuration:300,darkMode:!1,bottomClose:!1,freeMode:!1,buttonClose:!0,topperOverflow:!0,topperOverflowOffset:0,showDraggable:!0,breaks:{top:{enabled:!0,offset:0},middle:{enabled:!0,offset:0},bottom:{enabled:!0,offset:0}},onDidDismiss:function(){},onWillDismiss:function(){},onDidPresent:function(){},onWillPresent:function(){},onDragStart:function(){},onDrag:function(){}},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.swipeNextPoint=function(t,e,s){if(i.currentBreak===i.breaks.top){if(t>e){if(i.settings.breaks.middle.enabled)return i.breaks.middle;if(i.settings.breaks.bottom.enabled)return i.breaks.bottom}return i.breaks.top}if(i.currentBreak===i.breaks.middle)return t<-e&&i.settings.breaks.top.enabled?i.breaks.top:t>e&&i.settings.breaks.bottom.enabled?i.breaks.bottom:i.breaks.middle;if(i.currentBreak===i.breaks.bottom){if(t<-e){if(i.settings.breaks.middle.enabled)return i.breaks.middle;if(i.settings.breaks.top.enabled)return i.breaks.top}return i.breaks.bottom}return s},this.settings=e(e({},this.settings),s),this.el=document.querySelector(this.el),this.settings.parentElement?this.settings.parentElement=document.querySelector(this.settings.parentElement):this.settings.parentElement=this.el.parentElement,["top","middle","bottom"].forEach((function(t){i.settings.breaks[i.settings.initialBreak].enabled||i.settings.breaks[t].enabled&&(i.settings.initialBreak=t),i.settings.breaks[t]&&i.settings.breaks[t].enabled&&i.settings.breaks[t].offset&&(i.breaks[t]-=i.settings.breaks[t].offset)})),this.currentBreak=this.breaks[this.settings.initialBreak],this.settings.initialShow&&this.present()}return t.prototype.drawElements=function(){this.el.style.display="none",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.headerEl=this.el.childNodes[0],this.contentEl=this.el.childNodes[1],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%"},t.prototype.present=function(){var t=this;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.headerEl),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((function(){t.paneEl.style.transform="translateY("+t.breaks[t.settings.initialBreak]+"px)"}),50);this.paneEl.addEventListener("transitionend",(function(e){t.paneEl.style.transition="initial",void 0}))}if(this.settings.onDidPresent(),this.settings.backdrop&&(this.wrapperEl.appendChild(this.backdropEl),this.settings.backdropClose&&this.backdropEl.addEventListener("click",(function(e){return t.closePane(t.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",(function(e){return t.closePane(t.backdropEl)}));var e="#7a7a7e";this.settings.darkMode&&(this.closeEl.style.background="#424246",e="#a8a7ae"),this.closeEl.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">\n          <path fill="'+e+'" 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.currentBreak===this.breaks.bottom?this.contentEl.style.opacity="0":this.contentEl.style.opacity="1",this.settings.bottomClose&&(this.settings.breaks.bottom.enabled=!0);var s=[];["top","middle","bottom"].forEach((function(e){t.settings.breaks[e].enabled&&s.push(t.breaks[e])})),this.topper=s.reduce((function(t,e){return Math.abs(e)<Math.abs(t)?e:t})),this.bottomer=s.reduce((function(t,e){return Math.abs(e)>Math.abs(t)?e:t})),this.currentBreak===this.topper&&this.settings.topperOverflow&&(this.contentEl.style.overflowY="auto"),this.paneEl.addEventListener("click",(function(e){if(e.target.className.includes("close-button"))t.closePane(t.backdropEl);else if(t.currentBreak===t.breaks.bottom){if(t.settings.breaks.middle.enabled)return void t.moveToBreak("middle");if(t.settings.breaks.top.enabled)return void t.moveToBreak("top")}})),this.paneEl.addEventListener("touchstart",(function(e){t.settings.onDragStart(),t.startP=e.touches[0].screenY,t.steps.push(t.startP)})),this.paneEl.addEventListener("touchmove",(function(e){t.settings.onDrag();var s=parseFloat(/\.*translateY\((.*)px\)/i.exec(t.paneEl.style.transform)[1]),i=e.touches[0].screenY,n=i-t.steps[t.steps.length-1],a=s+n,o=!1;if("auto"===t.contentEl.style.overflowY){if(e.composedPath().forEach((function(t){t.className&&t.className.includes("cupertino-content")&&(o=!0)})),o&&t.contentEl.scrollTop>20)return;if(s+n<=t.topper&&o)return}s+n<=t.topper-20||t.settings.freeMode&&!t.settings.bottomClose&&s+n>=t.bottomer+20||(t.paneEl.style.transform="translateY("+a+"px)",t.steps.push(i))})),this.paneEl.addEventListener("touchend",(function(e){var i=parseFloat(/\.*translateY\((.*)px\)/i.exec(t.paneEl.style.transform)[1]),n=s.reduce((function(t,e){return Math.abs(e-i)<Math.abs(t-i)?e:t})),a=t.steps[t.steps.length-1]-t.steps[t.steps.length-2];if(Math.abs(a)>=4&&(n=t.swipeNextPoint(a,4,n)),t.settings.bottomClose&&n===t.breaks.bottom)t.closePane(t.backdropEl);else if(t.steps=[],t.currentBreak=n,t.currentBreak===t.breaks.bottom?t.contentEl.style.opacity="0":t.contentEl.style.opacity="1",t.currentBreak===t.topper&&t.settings.topperOverflow?t.contentEl.style.overflowY="auto":t.contentEl.style.overflowY="hidden",!t.settings.freeMode){t.paneEl.style.transition="transform "+t.settings.animationDuration+"ms "+t.settings.animationType+" 0s",t.paneEl.style.transform="translateY("+n+"px)";t.paneEl.addEventListener("transitionend",(function(){t.paneEl.style.transition="initial",void 0}))}}))}},t.prototype.moveToBreak=function(t){var e=this;this.breaks[t]===this.breaks.bottom?this.contentEl.style.opacity="0":this.contentEl.style.opacity="1",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)";this.paneEl.addEventListener("transitionend",(function(t){e.paneEl.style.transition="initial",void 0}))},t.prototype.hide=function(){var t=this;this.paneEl.style.transition="transform "+this.settings.animationDuration+"ms "+this.settings.animationType+" 0s",this.paneEl.style.transform="translateY("+this.screen_height+"px)";this.paneEl.addEventListener("transitionend",(function(e){t.paneEl.style.transition="initial",void 0}))},t.prototype.closePane=function(t){var e=this;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.el.appendChild(this.headerEl),this.el.appendChild(this.contentEl),this.paneEl.addEventListener("transitionend",(function(t){e.parentEl.removeChild(e.wrapperEl),e.settings.onDidDismiss()}))},t}();t.CupertinoPane=s,Object.defineProperty(t,"__esModule",{value:!0})}));
+    ***************************************************************************** */var e=function(){return(e=Object.assign||function(t){for(var e,s=1,i=arguments.length;s<i;s++)for(var n in e=arguments[s])Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t}).apply(this,arguments)},s=function(){function t(t,s){var i=this;void 0===s&&(s={}),this.el=t,this.settings={initialShow:!1,initialBreak:"middle",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:function(){},onWillDismiss:function(){},onDidPresent:function(){},onWillPresent:function(){},onDragStart:function(){},onDrag:function(){}},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.swipeNextPoint=function(t,e,s){if(i.currentBreak===i.breaks.top){if(t>e){if(i.settings.breaks.middle.enabled)return i.breaks.middle;if(i.settings.breaks.bottom.enabled)return i.breaks.bottom}return i.breaks.top}if(i.currentBreak===i.breaks.middle)return t<-e&&i.settings.breaks.top.enabled?i.breaks.top:t>e&&i.settings.breaks.bottom.enabled?i.breaks.bottom:i.breaks.middle;if(i.currentBreak===i.breaks.bottom){if(t<-e){if(i.settings.breaks.middle.enabled)return i.breaks.middle;if(i.settings.breaks.top.enabled)return i.breaks.top}return i.breaks.bottom}return s},this.settings=e(e({},this.settings),s),this.el=document.querySelector(this.el),this.settings.parentElement?this.settings.parentElement=document.querySelector(this.settings.parentElement):this.settings.parentElement=this.el.parentElement,["top","middle","bottom"].forEach((function(t){i.settings.breaks[i.settings.initialBreak].enabled||i.settings.breaks[t].enabled&&(i.settings.initialBreak=t),i.settings.breaks[t]&&i.settings.breaks[t].enabled&&i.settings.breaks[t].offset&&(i.breaks[t]-=i.settings.breaks[t].offset)})),this.currentBreak=this.breaks[this.settings.initialBreak],this.settings.initialShow&&this.present()}return t.prototype.drawElements=function(){this.el.style.display="none",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.headerEl=this.el.childNodes[0],this.contentEl=this.el.childNodes[1],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%"},t.prototype.present=function(){var t=this;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.headerEl),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((function(){t.paneEl.style.transform="translateY("+t.breaks[t.settings.initialBreak]+"px)"}),50);this.paneEl.addEventListener("transitionend",(function(e){t.paneEl.style.transition="initial",void 0}))}if(this.settings.onDidPresent(),this.settings.backdrop&&(this.wrapperEl.appendChild(this.backdropEl),this.settings.backdropClose&&this.backdropEl.addEventListener("click",(function(e){return t.closePane(t.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",(function(e){return t.closePane(t.backdropEl)}));var e="#7a7a7e";this.settings.darkMode&&(this.closeEl.style.background="#424246",e="#a8a7ae"),this.closeEl.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">\n          <path fill="'+e+'" 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.currentBreak===this.breaks.bottom?this.contentEl.style.opacity="0":this.contentEl.style.opacity="1",this.settings.bottomClose&&(this.settings.breaks.bottom.enabled=!0);var s=[];["top","middle","bottom"].forEach((function(e){t.settings.breaks[e].enabled&&s.push(t.breaks[e])})),this.topper=s.reduce((function(t,e){return Math.abs(e)<Math.abs(t)?e:t})),this.bottomer=s.reduce((function(t,e){return Math.abs(e)>Math.abs(t)?e:t})),this.currentBreak===this.topper&&this.settings.topperOverflow&&(this.contentEl.style.overflowY="auto"),this.paneEl.addEventListener("touchstart",(function(e){t.settings.onDragStart(),t.startP=e.touches[0].screenY,t.steps.push(t.startP)})),this.paneEl.addEventListener("touchmove",(function(e){t.settings.onDrag();var s=parseFloat(/\.*translateY\((.*)px\)/i.exec(t.paneEl.style.transform)[1]),i=e.touches[0].screenY,n=i-t.steps[t.steps.length-1],a=s+n,o=!1;if("auto"===t.contentEl.style.overflowY){if(e.composedPath().forEach((function(t){t.className&&t.className.includes("cupertino-content")&&(o=!0)})),o&&t.contentEl.scrollTop>20)return;if(s+n<=t.topper&&o)return}s+n<=t.topper-20||t.settings.freeMode&&!t.settings.bottomClose&&s+n>=t.bottomer+20||(t.paneEl.style.transform="translateY("+a+"px)",t.steps.push(i))})),this.paneEl.addEventListener("touchend",(function(e){var i=parseFloat(/\.*translateY\((.*)px\)/i.exec(t.paneEl.style.transform)[1]),n=s.reduce((function(t,e){return Math.abs(e-i)<Math.abs(t-i)?e:t})),a=t.steps[t.steps.length-1]-t.steps[t.steps.length-2];if(Math.abs(a)>=4&&(n=t.swipeNextPoint(a,4,n)),t.settings.clickBottomOpen&&t.currentBreak===t.breaks.bottom&&isNaN(a)&&(n=t.settings.breaks.middle.enabled?t.breaks.middle:t.settings.breaks.top.enabled?t.breaks.top:t.breaks.bottom),t.steps=[],t.currentBreak=n,t.currentBreak===t.breaks.bottom?t.contentEl.style.opacity="0":t.contentEl.style.opacity="1",t.currentBreak===t.topper&&t.settings.topperOverflow?t.contentEl.style.overflowY="auto":t.contentEl.style.overflowY="hidden",t.settings.bottomClose&&n===t.breaks.bottom)t.closePane(t.backdropEl);else if(!t.settings.freeMode){t.paneEl.style.transition="transform "+t.settings.animationDuration+"ms "+t.settings.animationType+" 0s",t.paneEl.style.transform="translateY("+n+"px)";t.paneEl.addEventListener("transitionend",(function(){t.paneEl.style.transition="initial",void 0}))}}))}},t.prototype.moveToBreak=function(t){var e=this;this.breaks[t]===this.breaks.bottom?this.contentEl.style.opacity="0":this.contentEl.style.opacity="1",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)";this.paneEl.addEventListener("transitionend",(function(t){e.paneEl.style.transition="initial",void 0}))},t.prototype.hide=function(){var t=this;this.paneEl.style.transition="transform "+this.settings.animationDuration+"ms "+this.settings.animationType+" 0s",this.paneEl.style.transform="translateY("+this.screen_height+"px)";this.paneEl.addEventListener("transitionend",(function(e){t.paneEl.style.transition="initial",void 0}))},t.prototype.closePane=function(t){var e=this;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.el.appendChild(this.headerEl),this.el.appendChild(this.contentEl),this.currentBreak=this.breaks[this.settings.initialBreak],this.paneEl.addEventListener("transitionend",(function(t){e.parentEl.removeChild(e.wrapperEl),e.settings.onDidDismiss()}))},t}();t.CupertinoPane=s,Object.defineProperty(t,"__esModule",{value:!0})}));
 //# sourceMappingURL=cupertino-pane.min.js.map

package.json

 {
   "name": "cupertino-pane",
   "description": "Multiplatform slide-over pane",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "author": "Roman Antonov (roman-rr)",
@@ -6,0 +6,0 @@ "homepage": "https://github.com/roman-rr/cupertino-pane/",

src/cupertino-pane.ts

@@ -17,2 +17,3 @@ export class CupertinoPane {
     showDraggable: true,
+    clickBottomOpen: true,
     breaks: {
@@ -165,2 +166,3 @@ top: { enabled: true, offset: 0},
   present() {
+
       if (document.querySelector(
@@ -262,22 +264,2 @@ `.cupertino-pane-wrapper.${this.el.className.split(' ').join('.')}`)
 
-      // Click
-      this.paneEl.addEventListener('click', (t) => {
-        if (t.target['className'].includes('close-button')) {
-          this.closePane(this.backdropEl);
-          return;
-        }
-
-        // Click to bottom - open middle
-        if (this.currentBreak === this.breaks['bottom']) {
-          if (this.settings.breaks['middle'].enabled) {
-            this.moveToBreak('middle');
-            return;
-          } 
-          if (this.settings.breaks['top'].enabled) {
-            this.moveToBreak('top');
-            return;
-          }
-        }
-      });
-
       // Touchstart
@@ -342,6 +324,9 @@ this.paneEl.addEventListener('touchstart', (t) => {
 
-        // Bottom closable
-        if (this.settings.bottomClose && closest === this.breaks['bottom']) {
-          this.closePane(this.backdropEl);
-          return;
+        // Click to bottom - open middle
+        if (this.settings.clickBottomOpen) {
+          if (this.currentBreak === this.breaks['bottom'] && isNaN(diff)) {
+            closest = this.settings.breaks['middle'].enabled
+            ? this.breaks['middle'] : this.settings.breaks['top'].enabled
+            ? this.breaks['top'] : this.breaks['bottom'];
+          }
         }
@@ -365,2 +350,8 @@
 
+        // Bottom closable
+        if (this.settings.bottomClose && closest === this.breaks['bottom']) {
+          this.closePane(this.backdropEl);
+          return;
+        }
+
         if (!this.settings.freeMode) {
@@ -421,2 +412,5 @@ this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
       this.el.appendChild(this.contentEl);
+      
+      // Reset vars
+      this.currentBreak = this.breaks[this.settings.initialBreak];
 
@@ -461,2 +455,2 @@ this.paneEl.addEventListener('transitionend', (t) => {
 
-}
+}

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

157972

decreased by-0.39%

Lines of code

1707

decreased by-1.27%

No dependency changes