cupertino-pane - npm Package Compare versions

Comparing version 1.0.45 to 1.0.51

dist/cupertino-pane.d.ts

@@ -17,3 +17,2 @@ export declare class CupertinoPane {
     private moveEl;
-    private headerEl;
     private contentEl;
@@ -28,2 +27,3 @@ private backdropEl;
     get isHidden(): boolean;
+    private checkOpacityAttr;
     private touchStart;
@@ -30,0 +30,0 @@ private touchMove;

dist/cupertino-pane.esm.bundle.js

 /**
- * Cupertino Pane 1.0.45
+ * Cupertino Pane 1.0.51
  * Multiplatform slide-over pane
@@ -10,3 +10,3 @@ * https://github.com/roman-rr/cupertino-pane/
  *
- * Released on: December 25, 2019
+ * Released on: December 27, 2019
  */
@@ -121,3 +121,2 @@
         this.el = document.querySelector(this.el);
-        this.el.style.display = 'none';
         if (this.settings.parentElement) {
@@ -181,6 +180,5 @@ this.settings.parentElement = document.querySelector(this.settings.parentElement);
         this.moveEl.style.borderRadius = '4px';
-        // Header
-        this.headerEl = this.el.childNodes[0];
         // Content
-        this.contentEl = this.el.childNodes[1];
+        this.contentEl = this.el;
+        this.contentEl.style.display = '';
         this.contentEl.style.transition = "opacity " + this.settings.animationDuration + "ms " + this.settings.animationType + " 0s";
@@ -226,3 +224,2 @@ this.contentEl.style.overflowX = 'hidden';
         this.paneEl.appendChild(this.draggableEl);
-        this.paneEl.appendChild(this.headerEl);
         this.paneEl.appendChild(this.contentEl);
@@ -266,8 +263,3 @@ this.draggableEl.appendChild(this.moveEl);
         }
-        if (this.currentBreak === this.breaks['bottom']) {
-            this.contentEl.style.opacity = '0';
-        }
-        else {
-            this.contentEl.style.opacity = '1';
-        }
+        this.checkOpacityAttr(this.currentBreak);
         if (this.settings.bottomClose) {
@@ -301,8 +293,3 @@ this.settings.breaks.bottom.enabled = true;
         var _this = this;
-        if (this.breaks[val] === this.breaks['bottom']) {
-            this.contentEl.style.opacity = '0';
-        }
-        else {
-            this.contentEl.style.opacity = '1';
-        }
+        this.checkOpacityAttr(this.breaks[val]);
         if (this.breaks[val] === this.topper
@@ -338,2 +325,13 @@ && this.settings.topperOverflow) {
     });
+    CupertinoPane.prototype.checkOpacityAttr = function (val) {
+        var _this = this;
+        var attrElements = document.querySelectorAll("." + this.el.className + " [hide-on-bottom]");
+        if (!attrElements.length)
+            return;
+        attrElements.forEach(function (item) {
+            item.style.transition = "opacity " + _this.settings.animationDuration + "ms " + _this.settings.animationType + " 0s";
+            item.style.opacity = (val >= _this.breaks['bottom'])
+                ? '0' : '1';
+        });
+    };
     CupertinoPane.prototype.touchStart = function (t) {
@@ -376,8 +374,3 @@ // Event emitter
         this.steps.push(n);
-        if (newVal > this.breaks['bottom']) {
-            this.contentEl.style.opacity = '0';
-        }
-        else {
-            this.contentEl.style.opacity = '1';
-        }
+        this.checkOpacityAttr(newVal);
     };
@@ -394,5 +387,6 @@ CupertinoPane.prototype.touchEnd = function (t) {
         var diff = this.steps[this.steps.length - 1] - this.steps[this.steps.length - 2];
-        var maxDiff = 4;
-        if (Math.abs(diff) >= maxDiff) {
-            closest = this.swipeNextPoint(diff, maxDiff, closest);
+        // Set sensivity lower for web
+        var swipeNextSensivity = window.hasOwnProperty('cordova') ? 4 : 3;
+        if (Math.abs(diff) >= swipeNextSensivity) {
+            closest = this.swipeNextPoint(diff, swipeNextSensivity, closest);
         }
@@ -409,8 +403,3 @@ // Click to bottom - open middle
         this.currentBreak = closest;
-        if (this.currentBreak === this.breaks['bottom']) {
-            this.contentEl.style.opacity = '0';
-        }
-        else {
-            this.contentEl.style.opacity = '1';
-        }
+        this.checkOpacityAttr(this.currentBreak);
         if (this.currentBreak === this.topper
@@ -445,8 +434,6 @@ && this.settings.topperOverflow) {
         backdropEl.style.backgroundColor = 'rgba(0,0,0,.0)';
-        // Return dynamic content
-        this.el.appendChild(this.headerEl);
-        this.el.appendChild(this.contentEl);
         // Reset vars
         this.currentBreak = this.breaks[this.settings.initialBreak];
         this.paneEl.addEventListener('transitionend', function (t) {
+            _this.parentEl.appendChild(_this.contentEl);
             _this.parentEl.removeChild(_this.wrapperEl);
@@ -453,0 +440,0 @@ // Emit event

dist/cupertino-pane.js

 /**
- * Cupertino Pane 1.0.45
+ * Cupertino Pane 1.0.51
  * Multiplatform slide-over pane
@@ -10,3 +10,3 @@ * https://github.com/roman-rr/cupertino-pane/
  *
- * Released on: December 25, 2019
+ * Released on: December 27, 2019
  */
@@ -127,3 +127,2 @@
             this.el = document.querySelector(this.el);
-            this.el.style.display = 'none';
             if (this.settings.parentElement) {
@@ -187,6 +186,5 @@ this.settings.parentElement = document.querySelector(this.settings.parentElement);
             this.moveEl.style.borderRadius = '4px';
-            // Header
-            this.headerEl = this.el.childNodes[0];
             // Content
-            this.contentEl = this.el.childNodes[1];
+            this.contentEl = this.el;
+            this.contentEl.style.display = '';
             this.contentEl.style.transition = "opacity " + this.settings.animationDuration + "ms " + this.settings.animationType + " 0s";
@@ -232,3 +230,2 @@ this.contentEl.style.overflowX = 'hidden';
             this.paneEl.appendChild(this.draggableEl);
-            this.paneEl.appendChild(this.headerEl);
             this.paneEl.appendChild(this.contentEl);
@@ -272,8 +269,3 @@ this.draggableEl.appendChild(this.moveEl);
             }
-            if (this.currentBreak === this.breaks['bottom']) {
-                this.contentEl.style.opacity = '0';
-            }
-            else {
-                this.contentEl.style.opacity = '1';
-            }
+            this.checkOpacityAttr(this.currentBreak);
             if (this.settings.bottomClose) {
@@ -307,8 +299,3 @@ this.settings.breaks.bottom.enabled = true;
             var _this = this;
-            if (this.breaks[val] === this.breaks['bottom']) {
-                this.contentEl.style.opacity = '0';
-            }
-            else {
-                this.contentEl.style.opacity = '1';
-            }
+            this.checkOpacityAttr(this.breaks[val]);
             if (this.breaks[val] === this.topper
@@ -344,2 +331,13 @@ && this.settings.topperOverflow) {
         });
+        CupertinoPane.prototype.checkOpacityAttr = function (val) {
+            var _this = this;
+            var attrElements = document.querySelectorAll("." + this.el.className + " [hide-on-bottom]");
+            if (!attrElements.length)
+                { return; }
+            attrElements.forEach(function (item) {
+                item.style.transition = "opacity " + _this.settings.animationDuration + "ms " + _this.settings.animationType + " 0s";
+                item.style.opacity = (val >= _this.breaks['bottom'])
+                    ? '0' : '1';
+            });
+        };
         CupertinoPane.prototype.touchStart = function (t) {
@@ -382,8 +380,3 @@ // Event emitter
             this.steps.push(n);
-            if (newVal > this.breaks['bottom']) {
-                this.contentEl.style.opacity = '0';
-            }
-            else {
-                this.contentEl.style.opacity = '1';
-            }
+            this.checkOpacityAttr(newVal);
         };
@@ -400,5 +393,6 @@ CupertinoPane.prototype.touchEnd = function (t) {
             var diff = this.steps[this.steps.length - 1] - this.steps[this.steps.length - 2];
-            var maxDiff = 4;
-            if (Math.abs(diff) >= maxDiff) {
-                closest = this.swipeNextPoint(diff, maxDiff, closest);
+            // Set sensivity lower for web
+            var swipeNextSensivity = window.hasOwnProperty('cordova') ? 4 : 3;
+            if (Math.abs(diff) >= swipeNextSensivity) {
+                closest = this.swipeNextPoint(diff, swipeNextSensivity, closest);
             }
@@ -415,8 +409,3 @@ // Click to bottom - open middle
             this.currentBreak = closest;
-            if (this.currentBreak === this.breaks['bottom']) {
-                this.contentEl.style.opacity = '0';
-            }
-            else {
-                this.contentEl.style.opacity = '1';
-            }
+            this.checkOpacityAttr(this.currentBreak);
             if (this.currentBreak === this.topper
@@ -451,8 +440,6 @@ && this.settings.topperOverflow) {
             backdropEl.style.backgroundColor = 'rgba(0,0,0,.0)';
-            // Return dynamic content
-            this.el.appendChild(this.headerEl);
-            this.el.appendChild(this.contentEl);
             // Reset vars
             this.currentBreak = this.breaks[this.settings.initialBreak];
             this.paneEl.addEventListener('transitionend', function (t) {
+                _this.parentEl.appendChild(_this.contentEl);
                 _this.parentEl.removeChild(_this.wrapperEl);
@@ -459,0 +446,0 @@ // Emit event

dist/cupertino-pane.min.js

 /**
- * Cupertino Pane 1.0.45
+ * Cupertino Pane 1.0.51
  * Multiplatform slide-over pane
@@ -10,3 +10,3 @@ * https://github.com/roman-rr/cupertino-pane/
  *
- * Released on: December 25, 2019
+ * Released on: December 27, 2019
  */
@@ -28,3 +28,3 @@
     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",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: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.brs=[],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.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((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.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),["top","middle","bottom"].forEach((function(e){t.settings.breaks[e].enabled&&t.brs.push(t.breaks[e])})),this.topper=this.brs.reduce((function(t,e){return Math.abs(e)<Math.abs(t)?e:t})),this.bottomer=this.brs.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){return t.touchStart(e)})),this.paneEl.addEventListener("touchmove",(function(e){return t.touchMove(e)})),this.paneEl.addEventListener("touchend",(function(e){return t.touchEnd(e)}))}},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}))},Object.defineProperty(t.prototype,"isHidden",{get:function(){return this.paneEl.style.transform==="translateY("+this.screen_height+"px)"},enumerable:!0,configurable:!0}),t.prototype.touchStart=function(t){this.settings.onDragStart(),this.startP=t.touches[0].screenY,this.steps.push(this.startP)},t.prototype.touchMove=function(t){this.settings.onDrag();var e=parseFloat(/\.*translateY\((.*)px\)/i.exec(this.paneEl.style.transform)[1]),s=t.touches[0].screenY,i=s-this.steps[this.steps.length-1],n=e+i,a=!1;if("auto"===this.contentEl.style.overflowY){if(t.composedPath().forEach((function(t){t.className&&t.className.includes("cupertino-content")&&(a=!0)})),a&&this.contentEl.scrollTop>20)return;if(e+i<=this.topper&&a)return}e+i<=this.topper-20||this.settings.freeMode&&!this.settings.bottomClose&&e+i>=this.bottomer+20||(this.paneEl.style.transform="translateY("+n+"px)",this.steps.push(s),n>this.breaks.bottom?this.contentEl.style.opacity="0":this.contentEl.style.opacity="1")},t.prototype.touchEnd=function(t){var e=this,s=parseFloat(/\.*translateY\((.*)px\)/i.exec(this.paneEl.style.transform)[1]),i=this.brs.reduce((function(t,e){return Math.abs(e-s)<Math.abs(t-s)?e:t})),n=this.steps[this.steps.length-1]-this.steps[this.steps.length-2];if(Math.abs(n)>=4&&(i=this.swipeNextPoint(n,4,i)),this.settings.clickBottomOpen&&this.currentBreak===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.currentBreak=i,this.currentBreak===this.breaks.bottom?this.contentEl.style.opacity="0":this.contentEl.style.opacity="1",this.currentBreak===this.topper&&this.settings.topperOverflow?this.contentEl.style.overflowY="auto":this.contentEl.style.overflowY="hidden",this.settings.bottomClose&&i===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("+i+"px)";this.paneEl.addEventListener("transitionend",(function(){e.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})}));
+    ***************************************************************************** */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",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: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.brs=[],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.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%"},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.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.checkOpacityAttr(this.currentBreak),this.settings.bottomClose&&(this.settings.breaks.bottom.enabled=!0),["top","middle","bottom"].forEach((function(e){t.settings.breaks[e].enabled&&t.brs.push(t.breaks[e])})),this.topper=this.brs.reduce((function(t,e){return Math.abs(e)<Math.abs(t)?e:t})),this.bottomer=this.brs.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){return t.touchStart(e)})),this.paneEl.addEventListener("touchmove",(function(e){return t.touchMove(e)})),this.paneEl.addEventListener("touchend",(function(e){return t.touchEnd(e)}))}},t.prototype.moveToBreak=function(t){var e=this;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)";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}))},Object.defineProperty(t.prototype,"isHidden",{get:function(){return this.paneEl.style.transform==="translateY("+this.screen_height+"px)"},enumerable:!0,configurable:!0}),t.prototype.checkOpacityAttr=function(t){var e=this,s=document.querySelectorAll("."+this.el.className+" [hide-on-bottom]");s.length&&s.forEach((function(s){s.style.transition="opacity "+e.settings.animationDuration+"ms "+e.settings.animationType+" 0s",s.style.opacity=t>=e.breaks.bottom?"0":"1"}))},t.prototype.touchStart=function(t){this.settings.onDragStart(),this.startP=t.touches[0].screenY,this.steps.push(this.startP)},t.prototype.touchMove=function(t){this.settings.onDrag();var e=parseFloat(/\.*translateY\((.*)px\)/i.exec(this.paneEl.style.transform)[1]),s=t.touches[0].screenY,i=s-this.steps[this.steps.length-1],n=e+i,a=!1;if("auto"===this.contentEl.style.overflowY){if(t.composedPath().forEach((function(t){t.className&&t.className.includes("cupertino-content")&&(a=!0)})),a&&this.contentEl.scrollTop>20)return;if(e+i<=this.topper&&a)return}e+i<=this.topper-20||this.settings.freeMode&&!this.settings.bottomClose&&e+i>=this.bottomer+20||(this.paneEl.style.transform="translateY("+n+"px)",this.steps.push(s),this.checkOpacityAttr(n))},t.prototype.touchEnd=function(t){var e=this,s=parseFloat(/\.*translateY\((.*)px\)/i.exec(this.paneEl.style.transform)[1]),i=this.brs.reduce((function(t,e){return Math.abs(e-s)<Math.abs(t-s)?e:t})),n=this.steps[this.steps.length-1]-this.steps[this.steps.length-2],a=window.hasOwnProperty("cordova")?4:3;if(Math.abs(n)>=a&&(i=this.swipeNextPoint(n,a,i)),this.settings.clickBottomOpen&&this.currentBreak===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.currentBreak=i,this.checkOpacityAttr(this.currentBreak),this.currentBreak===this.topper&&this.settings.topperOverflow?this.contentEl.style.overflowY="auto":this.contentEl.style.overflowY="hidden",this.settings.bottomClose&&i===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("+i+"px)";this.paneEl.addEventListener("transitionend",(function(){e.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.currentBreak=this.breaks[this.settings.initialBreak],this.paneEl.addEventListener("transitionend",(function(t){e.parentEl.appendChild(e.contentEl),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": "1.0.45",
+  "version": "1.0.51",
   "author": "Roman Antonov (roman-rr)",
@@ -6,0 +6,0 @@ "homepage": "https://github.com/roman-rr/cupertino-pane/",

README.md

@@ -19,2 +19,3 @@ # Cupertino Pane
 * [Public Methods](#public-methods)
+* [Attributes](#attributes)
 * [Future Goals](#future-goals)
@@ -25,2 +26,3 @@ * [Contributing](#contributing)
 ## Demonstration
+[Live Demo](https://ionicsvelte.firebaseapp.com/pane/)
 <div style="display:flex;flex-wrap:wrap;">
@@ -64,8 +66,4 @@ <img src="https://github.com/roman-rr/cupertino-pane/blob/master/docs/images/1.gif?raw=true" width="250">
 <div class="cupertino-pane">
-    <div class="cupertino-header">
-        Header
-    </div>
-    <div class="cupertino-content">
-        Content
-    </div>    
+    <h1>Header</h1>
+    <div class="content">Content</div>    
 </div>
@@ -75,8 +73,3 @@ ```
 ```css
-.cupertino-pane-wrapper .pane {
-    background: #ffffff;
-}
-
-.cupertino-header,
-.cupertino-content {
+.cupertino-pane {
     margin: 20px;
@@ -187,3 +180,14 @@ }
 
+## Attributes
+### hide-on-bottom
+Set for element to automaticaly hide on reach bottom breakpoint.
+```html
+<div class="cupertino-pane">
+    <h1>Header</h1>
+    <div class="content" hide-on-bottom>Content</div>    
+</div>
+```
+
 ## Future Goals
+- Create component for Ionic Framework using stencil
 - Hardware accelerated drag&drop actions
@@ -190,0 +194,0 @@ - Realistic easy-in-out transitions

src/cupertino-pane.ts

@@ -51,3 +51,2 @@ export class CupertinoPane {
   private moveEl: HTMLDivElement;
-  private headerEl: HTMLHeadingElement;
   private contentEl: HTMLHeadingElement;
@@ -60,3 +59,2 @@ private backdropEl: HTMLDivElement;
     this.el = <HTMLDivElement>document.querySelector(this.el);
-    this.el.style.display = 'none';
     
@@ -132,7 +130,5 @@ if (this.settings.parentElement) {
 
-      // Header
-      this.headerEl = this.el.childNodes[0];
-
       // Content
-      this.contentEl = this.el.childNodes[1];
+      this.contentEl = this.el;
+      this.contentEl.style.display = '';
       this.contentEl.style.transition = `opacity ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
@@ -185,3 +181,2 @@ this.contentEl.style.overflowX = 'hidden';
       this.paneEl.appendChild(this.draggableEl);
-      this.paneEl.appendChild(this.headerEl);
       this.paneEl.appendChild(this.contentEl);
@@ -235,7 +230,3 @@ this.draggableEl.appendChild(this.moveEl);
 
-      if (this.currentBreak === this.breaks['bottom']) {
-        this.contentEl.style.opacity = '0';
-      } else {
-        this.contentEl.style.opacity = '1';
-      }
+      this.checkOpacityAttr(this.currentBreak);
 
@@ -274,7 +265,3 @@ if (this.settings.bottomClose) {
   moveToBreak(val) {
-    if (this.breaks[val] === this.breaks['bottom']) {
-      this.contentEl.style.opacity = '0';
-    } else {
-      this.contentEl.style.opacity = '1';
-    }
+    this.checkOpacityAttr(this.breaks[val]);
 
@@ -309,2 +296,12 @@ if (this.breaks[val] === this.topper
 
+  private checkOpacityAttr(val) {
+    let attrElements = document.querySelectorAll(`.${this.el.className} [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';
+    });
+  }
+
   private touchStart(t) {
@@ -349,7 +346,3 @@ // Event emitter
 
-    if (newVal > this.breaks['bottom']) {
-      this.contentEl.style.opacity = '0';
-    } else {
-      this.contentEl.style.opacity = '1';
-    }
+    this.checkOpacityAttr(newVal);
   }
@@ -368,5 +361,6 @@
     const diff =  this.steps[this.steps.length - 1] - this.steps[this.steps.length - 2];
-    const maxDiff = 4;
-    if (Math.abs(diff) >= maxDiff) {
-      closest = this.swipeNextPoint(diff, maxDiff, closest);
+    // Set sensivity lower for web
+    const swipeNextSensivity = window.hasOwnProperty('cordova') ? 4 : 3; 
+    if (Math.abs(diff) >= swipeNextSensivity) {
+      closest = this.swipeNextPoint(diff, swipeNextSensivity, closest);
     }
@@ -386,7 +380,3 @@
 
-    if (this.currentBreak === this.breaks['bottom']) {
-      this.contentEl.style.opacity = '0';
-    } else {
-      this.contentEl.style.opacity = '1';
-    }
+    this.checkOpacityAttr(this.currentBreak);
 
@@ -425,7 +415,3 @@ if (this.currentBreak === this.topper
       backdropEl.style.backgroundColor = 'rgba(0,0,0,.0)';
-
-      // Return dynamic content
-      this.el.appendChild(this.headerEl);
-      this.el.appendChild(this.contentEl);
-
+      
       // Reset vars
@@ -435,2 +421,3 @@ this.currentBreak = this.breaks[this.settings.initialBreak];
       this.paneEl.addEventListener('transitionend', (t) => {
+        this.parentEl.appendChild(this.contentEl);
         this.parentEl.removeChild(this.wrapperEl);
@@ -437,0 +424,0 @@

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

Improved metrics

Number of lines in readme file

221

increased by1.84%

Worsened metrics

Total package byte prevSize

9906640

Lines of code

1748

decreased by-2.13%

No dependency changes