New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

cupertino-pane

Package Overview
Dependencies
Maintainers
1
Versions
105
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

cupertino-pane - npm Package Compare versions

Comparing version 1.0.53 to 1.0.61

286

dist/cupertino-pane.esm.bundle.js
/**
* Cupertino Pane 1.0.53
* Cupertino Pane 1.0.61
* 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 27, 2019
* Released on: January 6, 2020
*/
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var CupertinoPane = /** @class */ (function () {
function CupertinoPane(el, conf) {
var _this = this;
if (conf === void 0) { conf = {}; }
class CupertinoPane {
constructor(el, conf = {}) {
this.el = el;

@@ -65,8 +37,8 @@ this.settings = {

},
onDidDismiss: function () { },
onWillDismiss: function () { },
onDidPresent: function () { },
onWillPresent: function () { },
onDragStart: function () { },
onDrag: function () { }
onDidDismiss: () => { },
onWillDismiss: () => { },
onDidPresent: () => { },
onWillPresent: () => { },
onDragStart: () => { },
onDrag: () => { }
};

@@ -81,42 +53,43 @@ this.screen_height = window.screen.height;

this.brs = [];
this.swipeNextPoint = function (diff, maxDiff, closest) {
if (_this.currentBreak === _this.breaks['top']) {
this.swipeNextPoint = (diff, maxDiff, closest) => {
if (this.currentBreak === this.breaks['top']) {
if (diff > maxDiff) {
if (_this.settings.breaks['middle'].enabled) {
return _this.breaks['middle'];
if (this.settings.breaks['middle'].enabled) {
return this.breaks['middle'];
}
if (_this.settings.breaks['bottom'].enabled) {
return _this.breaks['bottom'];
if (this.settings.breaks['bottom'].enabled) {
return this.breaks['bottom'];
}
}
return _this.breaks['top'];
return this.breaks['top'];
}
if (_this.currentBreak === _this.breaks['middle']) {
if (this.currentBreak === this.breaks['middle']) {
if (diff < -maxDiff) {
if (_this.settings.breaks['top'].enabled) {
return _this.breaks['top'];
if (this.settings.breaks['top'].enabled) {
return this.breaks['top'];
}
}
if (diff > maxDiff) {
if (_this.settings.breaks['bottom'].enabled) {
return _this.breaks['bottom'];
if (this.settings.breaks['bottom'].enabled) {
return this.breaks['bottom'];
}
}
return _this.breaks['middle'];
return this.breaks['middle'];
}
if (_this.currentBreak === _this.breaks['bottom']) {
if (this.currentBreak === this.breaks['bottom']) {
if (diff < -maxDiff) {
if (_this.settings.breaks['middle'].enabled) {
return _this.breaks['middle'];
if (this.settings.breaks['middle'].enabled) {
return this.breaks['middle'];
}
if (_this.settings.breaks['top'].enabled) {
return _this.breaks['top'];
if (this.settings.breaks['top'].enabled) {
return this.breaks['top'];
}
}
return _this.breaks['bottom'];
return this.breaks['bottom'];
}
return closest;
};
this.settings = __assign(__assign({}, this.settings), conf);
this.settings = Object.assign(Object.assign({}, this.settings), conf);
this.el = document.querySelector(this.el);
this.el.style.display = 'none';
if (this.settings.parentElement) {

@@ -128,14 +101,14 @@ this.settings.parentElement = document.querySelector(this.settings.parentElement);

}
['top', 'middle', 'bottom'].forEach(function (val) {
['top', 'middle', 'bottom'].forEach((val) => {
// If initial break disabled - set first enabled
if (!_this.settings.breaks[_this.settings.initialBreak].enabled) {
if (_this.settings.breaks[val].enabled) {
_this.settings.initialBreak = val;
if (!this.settings.breaks[this.settings.initialBreak].enabled) {
if (this.settings.breaks[val].enabled) {
this.settings.initialBreak = val;
}
}
// Add offsets
if (_this.settings.breaks[val]
&& _this.settings.breaks[val].enabled
&& _this.settings.breaks[val].offset) {
_this.breaks[val] -= _this.settings.breaks[val].offset;
if (this.settings.breaks[val]
&& this.settings.breaks[val].enabled
&& this.settings.breaks[val].offset) {
this.breaks[val] -= this.settings.breaks[val].offset;
}

@@ -148,7 +121,7 @@ });

}
CupertinoPane.prototype.drawElements = function () {
drawElements() {
this.parentEl = this.settings.parentElement;
// Wrapper
this.wrapperEl = document.createElement('div');
this.wrapperEl.className = "cupertino-pane-wrapper " + this.el.className;
this.wrapperEl.className = `cupertino-pane-wrapper ${this.el.className}`;
this.wrapperEl.style.position = 'absolute';

@@ -168,4 +141,4 @@ this.wrapperEl.style.top = '0';

this.paneEl.style.overflow = 'hidden';
this.paneEl.style.transform = "translateY(" + (this.settings.initialShow ?
this.breaks[this.settings.initialBreak] : this.screen_height) + "px)";
this.paneEl.style.transform = `translateY(${this.settings.initialShow ?
this.breaks[this.settings.initialBreak] : this.screen_height}px)`;
// Draggable

@@ -186,7 +159,7 @@ this.draggableEl = document.createElement('div');

this.contentEl.style.display = '';
this.contentEl.style.transition = "opacity " + this.settings.animationDuration + "ms " + this.settings.animationType + " 0s";
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.contentEl.style.height = `${this.screen_height
- this.breaks['top'] - 51
- this.settings.topperOverflowOffset + "px";
- this.settings.topperOverflowOffset}px`;
// Backdrop

@@ -214,6 +187,5 @@ this.backdropEl = document.createElement('div');

this.closeEl.style.borderRadius = '100%';
};
CupertinoPane.prototype.present = function () {
var _this = this;
if (document.querySelector(".cupertino-pane-wrapper." + this.el.className.split(' ').join('.'))) {
}
present() {
if (document.querySelector(`.cupertino-pane-wrapper.${this.el.className.split(' ').join('.')}`)) {
this.moveToBreak(this.settings.initialBreak);

@@ -231,9 +203,9 @@ return;

if (!this.settings.initialShow) {
this.paneEl.style.transition = "transform " + this.settings.animationDuration + "ms " + this.settings.animationType + " 0s";
setTimeout(function () {
_this.paneEl.style.transform = "translateY(" + _this.breaks[_this.settings.initialBreak] + "px)";
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);
var initTransitionEv_1 = this.paneEl.addEventListener('transitionend', function (t) {
_this.paneEl.style.transition = "initial";
initTransitionEv_1 = undefined;
let initTransitionEv = this.paneEl.addEventListener('transitionend', (t) => {
this.paneEl.style.transition = `initial`;
initTransitionEv = undefined;
});

@@ -246,3 +218,3 @@ }

if (this.settings.backdropClose) {
this.backdropEl.addEventListener('click', function (t) { return _this.closePane(_this.backdropEl); });
this.backdropEl.addEventListener('click', (t) => this.closePane(this.backdropEl));
}

@@ -260,4 +232,4 @@ }

this.paneEl.appendChild(this.closeEl);
this.closeEl.addEventListener('click', function (t) { return _this.closePane(_this.backdropEl); });
var iconColor = '#7a7a7e';
this.closeEl.addEventListener('click', (t) => this.closePane(this.backdropEl));
let iconColor = '#7a7a7e';
if (this.settings.darkMode) {

@@ -267,3 +239,5 @@ this.closeEl.style.background = '#424246';

}
this.closeEl.innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n <path fill=\"" + iconColor + "\" 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.closeEl.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="${iconColor}" 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"/>
</svg>`;
}

@@ -274,13 +248,13 @@ this.checkOpacityAttr(this.currentBreak);

}
['top', 'middle', 'bottom'].forEach(function (val) {
if (_this.settings.breaks[val].enabled) {
_this.brs.push(_this.breaks[val]);
['top', 'middle', 'bottom'].forEach((val) => {
if (this.settings.breaks[val].enabled) {
this.brs.push(this.breaks[val]);
}
});
// Determinate topper point
this.topper = this.brs.reduce(function (prev, curr) {
this.topper = this.brs.reduce((prev, curr) => {
return (Math.abs(curr) < Math.abs(prev) ? curr : prev);
});
// Determinate bottomer point
this.bottomer = this.brs.reduce(function (prev, curr) {
this.bottomer = this.brs.reduce((prev, curr) => {
return (Math.abs(curr) > Math.abs(prev) ? curr : prev);

@@ -294,8 +268,7 @@ });

/****** Events *******/
this.paneEl.addEventListener('touchstart', function (t) { return _this.touchStart(t); });
this.paneEl.addEventListener('touchmove', function (t) { return _this.touchMove(t); });
this.paneEl.addEventListener('touchend', function (t) { return _this.touchEnd(t); });
};
CupertinoPane.prototype.moveToBreak = function (val) {
var _this = this;
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(val) {
this.checkOpacityAttr(this.breaks[val]);

@@ -309,33 +282,31 @@ if (this.breaks[val] === this.topper

}
this.paneEl.style.transition = "transform " + this.settings.animationDuration + "ms " + this.settings.animationType + " 0s";
this.paneEl.style.transform = "translateY(" + this.breaks[val] + "px)";
var initTransitionEv = this.paneEl.addEventListener('transitionend', function (t) {
_this.paneEl.style.transition = "initial";
this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
this.paneEl.style.transform = `translateY(${this.breaks[val]}px)`;
let initTransitionEv = this.paneEl.addEventListener('transitionend', (t) => {
this.paneEl.style.transition = `initial`;
initTransitionEv = undefined;
});
};
CupertinoPane.prototype.hide = function () {
var _this = this;
this.paneEl.style.transition = "transform " + this.settings.animationDuration + "ms " + this.settings.animationType + " 0s";
this.paneEl.style.transform = "translateY(" + this.screen_height + "px)";
var initTransitionEv = this.paneEl.addEventListener('transitionend', function (t) {
_this.paneEl.style.transition = "initial";
}
hide() {
this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
this.paneEl.style.transform = `translateY(${this.screen_height}px)`;
let initTransitionEv = this.paneEl.addEventListener('transitionend', (t) => {
this.paneEl.style.transition = `initial`;
initTransitionEv = undefined;
});
};
CupertinoPane.prototype.isHidden = function () {
return this.paneEl.style.transform === "translateY(" + this.screen_height + "px)";
};
CupertinoPane.prototype.checkOpacityAttr = function (val) {
var _this = this;
var attrElements = document.querySelectorAll("." + this.el.className + " [hide-on-bottom]");
}
isHidden() {
return this.paneEl.style.transform === `translateY(${this.screen_height}px)`;
}
checkOpacityAttr(val) {
let 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'])
attrElements.forEach((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) {
}
touchStart(t) {
// Event emitter

@@ -345,15 +316,15 @@ this.settings.onDragStart();

this.steps.push(this.startP);
};
CupertinoPane.prototype.touchMove = function (t) {
}
touchMove(t) {
this.settings.onDrag();
var translateYRegex = /\.*translateY\((.*)px\)/i;
var p = parseFloat(translateYRegex.exec(this.paneEl.style.transform)[1]);
const translateYRegex = /\.*translateY\((.*)px\)/i;
const p = parseFloat(translateYRegex.exec(this.paneEl.style.transform)[1]);
// Delta
var n = t.touches[0].screenY;
var diff = n - this.steps[this.steps.length - 1];
var newVal = p + diff;
const n = t.touches[0].screenY;
const diff = n - this.steps[this.steps.length - 1];
const newVal = p + diff;
// Not allow move panel with overflow scroll
var noScroll = false;
let noScroll = false;
if (this.contentEl.style.overflowY === 'auto') {
t.composedPath().forEach(function (item) {
t.composedPath().forEach((item) => {
if (item['className'] && item['className'].includes('cupertino-content')) {

@@ -376,18 +347,17 @@ noScroll = true;

}
this.paneEl.style.transform = "translateY(" + newVal + "px)";
this.paneEl.style.transform = `translateY(${newVal}px)`;
this.steps.push(n);
this.checkOpacityAttr(newVal);
};
CupertinoPane.prototype.touchEnd = function (t) {
var _this = this;
var translateYRegex = /\.*translateY\((.*)px\)/i;
var p = parseFloat(translateYRegex.exec(this.paneEl.style.transform)[1]);
}
touchEnd(t) {
const translateYRegex = /\.*translateY\((.*)px\)/i;
const p = parseFloat(translateYRegex.exec(this.paneEl.style.transform)[1]);
// Determinate nearest point
var closest = this.brs.reduce(function (prev, curr) {
let closest = this.brs.reduce((prev, curr) => {
return (Math.abs(curr - p) < Math.abs(prev - p) ? curr : prev);
});
// Swipe - next (if differ > 10)
var diff = this.steps[this.steps.length - 1] - this.steps[this.steps.length - 2];
const diff = this.steps[this.steps.length - 1] - this.steps[this.steps.length - 2];
// Set sensivity lower for web
var swipeNextSensivity = window.hasOwnProperty('cordova') ? 4 : 3;
const swipeNextSensivity = window.hasOwnProperty('cordova') ? 4 : 3;
if (Math.abs(diff) >= swipeNextSensivity) {

@@ -420,32 +390,30 @@ closest = this.swipeNextPoint(diff, swipeNextSensivity, closest);

if (!this.settings.freeMode) {
this.paneEl.style.transition = "transform " + this.settings.animationDuration + "ms " + this.settings.animationType + " 0s";
this.paneEl.style.transform = "translateY(" + closest + "px)";
var initTransitionEv_2 = this.paneEl.addEventListener('transitionend', function () {
_this.paneEl.style.transition = "initial";
initTransitionEv_2 = undefined;
this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
this.paneEl.style.transform = `translateY(${closest}px)`;
let initTransitionEv = this.paneEl.addEventListener('transitionend', () => {
this.paneEl.style.transition = `initial`;
initTransitionEv = undefined;
});
}
};
CupertinoPane.prototype.closePane = function (backdropEl) {
var _this = this;
}
closePane(backdropEl) {
// Emit event
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)";
backdropEl.style.transition = "transform " + this.settings.animationDuration + "ms " + this.settings.animationType + " 0s";
this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
this.paneEl.style.transform = `translateY(${this.screen_height}px)`;
backdropEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
backdropEl.style.backgroundColor = 'rgba(0,0,0,.0)';
// Reset vars
this.currentBreak = this.breaks[this.settings.initialBreak];
this.paneEl.addEventListener('transitionend', function (t) {
_this.parentEl.appendChild(_this.contentEl);
_this.contentEl.style.display = 'none';
_this.parentEl.removeChild(_this.wrapperEl);
this.paneEl.addEventListener('transitionend', (t) => {
this.parentEl.appendChild(this.contentEl);
this.contentEl.style.display = 'none';
this.parentEl.removeChild(this.wrapperEl);
// Emit event
_this.settings.onDidDismiss();
this.settings.onDidDismiss();
});
};
return CupertinoPane;
}());
}
}
export { CupertinoPane };
//# sourceMappingURL=cupertino-pane.esm.bundle.js.map

772

dist/cupertino-pane.js
/**
* Cupertino Pane 1.0.53
* Cupertino Pane 1.0.61
* 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 27, 2019
* Released on: January 6, 2020
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(global = global || self, factory(global['Cupertino Pane'] = {}));
}(this, (function (exports) { 'use strict';
'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
Object.defineProperty(exports, '__esModule', { value: true });
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
class CupertinoPane {
constructor(el, conf = {}) {
this.el = el;
this.settings = {
initialShow: false,
initialBreak: 'middle',
parentElement: null,
backdrop: false,
backdropClose: false,
animationType: 'ease',
animationDuration: 300,
darkMode: false,
bottomClose: false,
freeMode: false,
buttonClose: true,
topperOverflow: true,
topperOverflowOffset: 0,
showDraggable: true,
clickBottomOpen: true,
breaks: {
top: { enabled: true, offset: 0 },
middle: { enabled: true, offset: 0 },
bottom: { enabled: true, offset: 0 },
},
onDidDismiss: () => { },
onWillDismiss: () => { },
onDidPresent: () => { },
onWillPresent: () => { },
onDragStart: () => { },
onDrag: () => { }
};
return __assign.apply(this, arguments);
};
var CupertinoPane = /** @class */ (function () {
function CupertinoPane(el, conf) {
var _this = this;
if (conf === void 0) { conf = {}; }
this.el = el;
this.settings = {
initialShow: false,
initialBreak: 'middle',
parentElement: null,
backdrop: false,
backdropClose: false,
animationType: 'ease',
animationDuration: 300,
darkMode: false,
bottomClose: false,
freeMode: false,
buttonClose: true,
topperOverflow: true,
topperOverflowOffset: 0,
showDraggable: true,
clickBottomOpen: true,
breaks: {
top: { enabled: true, offset: 0 },
middle: { enabled: true, offset: 0 },
bottom: { enabled: true, 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 - (this.screen_height * 0.35)),
bottom: this.screen_height - 80
};
this.brs = [];
this.swipeNextPoint = function (diff, maxDiff, closest) {
if (_this.currentBreak === _this.breaks['top']) {
if (diff > maxDiff) {
if (_this.settings.breaks['middle'].enabled) {
return _this.breaks['middle'];
}
if (_this.settings.breaks['bottom'].enabled) {
return _this.breaks['bottom'];
}
this.screen_height = window.screen.height;
this.steps = [];
this.breaks = {
top: 50,
middle: Math.round(this.screen_height - (this.screen_height * 0.35)),
bottom: this.screen_height - 80
};
this.brs = [];
this.swipeNextPoint = (diff, maxDiff, closest) => {
if (this.currentBreak === this.breaks['top']) {
if (diff > maxDiff) {
if (this.settings.breaks['middle'].enabled) {
return this.breaks['middle'];
}
return _this.breaks['top'];
if (this.settings.breaks['bottom'].enabled) {
return this.breaks['bottom'];
}
}
if (_this.currentBreak === _this.breaks['middle']) {
if (diff < -maxDiff) {
if (_this.settings.breaks['top'].enabled) {
return _this.breaks['top'];
}
return this.breaks['top'];
}
if (this.currentBreak === this.breaks['middle']) {
if (diff < -maxDiff) {
if (this.settings.breaks['top'].enabled) {
return this.breaks['top'];
}
if (diff > maxDiff) {
if (_this.settings.breaks['bottom'].enabled) {
return _this.breaks['bottom'];
}
}
return _this.breaks['middle'];
}
if (_this.currentBreak === _this.breaks['bottom']) {
if (diff < -maxDiff) {
if (_this.settings.breaks['middle'].enabled) {
return _this.breaks['middle'];
}
if (_this.settings.breaks['top'].enabled) {
return _this.breaks['top'];
}
if (diff > maxDiff) {
if (this.settings.breaks['bottom'].enabled) {
return this.breaks['bottom'];
}
return _this.breaks['bottom'];
}
return closest;
};
this.settings = __assign(__assign({}, this.settings), conf);
this.el = document.querySelector(this.el);
if (this.settings.parentElement) {
this.settings.parentElement = document.querySelector(this.settings.parentElement);
return this.breaks['middle'];
}
else {
this.settings.parentElement = this.el.parentElement;
}
['top', 'middle', 'bottom'].forEach(function (val) {
// If initial break disabled - set first enabled
if (!_this.settings.breaks[_this.settings.initialBreak].enabled) {
if (_this.settings.breaks[val].enabled) {
_this.settings.initialBreak = val;
if (this.currentBreak === this.breaks['bottom']) {
if (diff < -maxDiff) {
if (this.settings.breaks['middle'].enabled) {
return this.breaks['middle'];
}
if (this.settings.breaks['top'].enabled) {
return this.breaks['top'];
}
}
// Add offsets
if (_this.settings.breaks[val]
&& _this.settings.breaks[val].enabled
&& _this.settings.breaks[val].offset) {
_this.breaks[val] -= _this.settings.breaks[val].offset;
}
});
this.currentBreak = this.breaks[this.settings.initialBreak];
if (this.settings.initialShow) {
this.present();
return this.breaks['bottom'];
}
return closest;
};
this.settings = Object.assign(Object.assign({}, this.settings), conf);
this.el = document.querySelector(this.el);
this.el.style.display = 'none';
if (this.settings.parentElement) {
this.settings.parentElement = document.querySelector(this.settings.parentElement);
}
CupertinoPane.prototype.drawElements = function () {
this.parentEl = this.settings.parentElement;
// Wrapper
this.wrapperEl = document.createElement('div');
this.wrapperEl.className = "cupertino-pane-wrapper " + this.el.className;
this.wrapperEl.style.position = 'absolute';
this.wrapperEl.style.top = '0';
// Panel
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)";
// Draggable
this.draggableEl = document.createElement('div');
this.draggableEl.className = 'draggable';
this.draggableEl.style.padding = '5px';
// Move
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';
// Content
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";
// Backdrop
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';
// Close button
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%';
};
CupertinoPane.prototype.present = function () {
var _this = this;
if (document.querySelector(".cupertino-pane-wrapper." + this.el.className.split(' ').join('.'))) {
this.moveToBreak(this.settings.initialBreak);
return;
else {
this.settings.parentElement = this.el.parentElement;
}
['top', 'middle', 'bottom'].forEach((val) => {
// If initial break disabled - set first enabled
if (!this.settings.breaks[this.settings.initialBreak].enabled) {
if (this.settings.breaks[val].enabled) {
this.settings.initialBreak = val;
}
}
// Emit event
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);
if (!this.settings.initialShow) {
this.paneEl.style.transition = "transform " + this.settings.animationDuration + "ms " + this.settings.animationType + " 0s";
setTimeout(function () {
_this.paneEl.style.transform = "translateY(" + _this.breaks[_this.settings.initialBreak] + "px)";
}, 50);
var initTransitionEv_1 = this.paneEl.addEventListener('transitionend', function (t) {
_this.paneEl.style.transition = "initial";
initTransitionEv_1 = undefined;
});
// Add offsets
if (this.settings.breaks[val]
&& this.settings.breaks[val].enabled
&& this.settings.breaks[val].offset) {
this.breaks[val] -= this.settings.breaks[val].offset;
}
// Emit event
this.settings.onDidPresent();
if (this.settings.backdrop) {
this.wrapperEl.appendChild(this.backdropEl);
if (this.settings.backdropClose) {
this.backdropEl.addEventListener('click', function (t) { return _this.closePane(_this.backdropEl); });
}
});
this.currentBreak = this.breaks[this.settings.initialBreak];
if (this.settings.initialShow) {
this.present();
}
}
drawElements() {
this.parentEl = this.settings.parentElement;
// Wrapper
this.wrapperEl = document.createElement('div');
this.wrapperEl.className = `cupertino-pane-wrapper ${this.el.className}`;
this.wrapperEl.style.position = 'absolute';
this.wrapperEl.style.top = '0';
// Panel
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)`;
// Draggable
this.draggableEl = document.createElement('div');
this.draggableEl.className = 'draggable';
this.draggableEl.style.padding = '5px';
// Move
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';
// Content
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`;
// Backdrop
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';
// Close button
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);
return;
}
// Emit event
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);
if (!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 initTransitionEv = this.paneEl.addEventListener('transitionend', (t) => {
this.paneEl.style.transition = `initial`;
initTransitionEv = undefined;
});
}
// Emit event
this.settings.onDidPresent();
if (this.settings.backdrop) {
this.wrapperEl.appendChild(this.backdropEl);
if (this.settings.backdropClose) {
this.backdropEl.addEventListener('click', (t) => this.closePane(this.backdropEl));
}
if (!this.settings.showDraggable) {
this.draggableEl.style.opacity = '0';
}
}
if (!this.settings.showDraggable) {
this.draggableEl.style.opacity = '0';
}
if (this.settings.darkMode) {
this.paneEl.style.background = '#1c1c1d';
this.paneEl.style.color = '#ffffff';
this.moveEl.style.background = '#5a5a5e';
}
if (this.settings.buttonClose) {
this.paneEl.appendChild(this.closeEl);
this.closeEl.addEventListener('click', (t) => this.closePane(this.backdropEl));
let iconColor = '#7a7a7e';
if (this.settings.darkMode) {
this.paneEl.style.background = '#1c1c1d';
this.paneEl.style.color = '#ffffff';
this.moveEl.style.background = '#5a5a5e';
this.closeEl.style.background = '#424246';
iconColor = '#a8a7ae';
}
if (this.settings.buttonClose) {
this.paneEl.appendChild(this.closeEl);
this.closeEl.addEventListener('click', function (t) { return _this.closePane(_this.backdropEl); });
var iconColor = '#7a7a7e';
if (this.settings.darkMode) {
this.closeEl.style.background = '#424246';
iconColor = '#a8a7ae';
}
this.closeEl.innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n <path fill=\"" + iconColor + "\" 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.closeEl.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="${iconColor}" 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"/>
</svg>`;
}
this.checkOpacityAttr(this.currentBreak);
if (this.settings.bottomClose) {
this.settings.breaks.bottom.enabled = true;
}
['top', 'middle', 'bottom'].forEach((val) => {
if (this.settings.breaks[val].enabled) {
this.brs.push(this.breaks[val]);
}
this.checkOpacityAttr(this.currentBreak);
if (this.settings.bottomClose) {
this.settings.breaks.bottom.enabled = true;
}
['top', 'middle', 'bottom'].forEach(function (val) {
if (_this.settings.breaks[val].enabled) {
_this.brs.push(_this.breaks[val]);
});
// Determinate topper point
this.topper = this.brs.reduce((prev, curr) => {
return (Math.abs(curr) < Math.abs(prev) ? curr : prev);
});
// Determinate bottomer point
this.bottomer = this.brs.reduce((prev, curr) => {
return (Math.abs(curr) > Math.abs(prev) ? curr : prev);
});
if (this.currentBreak === this.topper
&& this.settings.topperOverflow) {
this.contentEl.style.overflowY = 'auto';
// headerEl.style.borderBottom = '1px solid #ebebeb';
}
/****** Events *******/
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(val) {
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.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
this.paneEl.style.transform = `translateY(${this.breaks[val]}px)`;
let initTransitionEv = this.paneEl.addEventListener('transitionend', (t) => {
this.paneEl.style.transition = `initial`;
initTransitionEv = undefined;
});
}
hide() {
this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
this.paneEl.style.transform = `translateY(${this.screen_height}px)`;
let initTransitionEv = this.paneEl.addEventListener('transitionend', (t) => {
this.paneEl.style.transition = `initial`;
initTransitionEv = undefined;
});
}
isHidden() {
return this.paneEl.style.transform === `translateY(${this.screen_height}px)`;
}
checkOpacityAttr(val) {
let attrElements = document.querySelectorAll(`.${this.el.className} [hide-on-bottom]`);
if (!attrElements.length)
return;
attrElements.forEach((item) => {
item.style.transition = `opacity ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
item.style.opacity = (val >= this.breaks['bottom'])
? '0' : '1';
});
}
touchStart(t) {
// Event emitter
this.settings.onDragStart();
this.startP = t.touches[0].screenY;
this.steps.push(this.startP);
}
touchMove(t) {
this.settings.onDrag();
const translateYRegex = /\.*translateY\((.*)px\)/i;
const p = parseFloat(translateYRegex.exec(this.paneEl.style.transform)[1]);
// Delta
const n = t.touches[0].screenY;
const diff = n - this.steps[this.steps.length - 1];
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;
}
});
// Determinate topper point
this.topper = this.brs.reduce(function (prev, curr) {
return (Math.abs(curr) < Math.abs(prev) ? curr : prev);
});
// Determinate bottomer point
this.bottomer = this.brs.reduce(function (prev, curr) {
return (Math.abs(curr) > Math.abs(prev) ? curr : prev);
});
if (this.currentBreak === this.topper
&& this.settings.topperOverflow) {
this.contentEl.style.overflowY = 'auto';
// headerEl.style.borderBottom = '1px solid #ebebeb';
if (noScroll && this.contentEl.scrollTop > 20) {
return;
}
/****** Events *******/
this.paneEl.addEventListener('touchstart', function (t) { return _this.touchStart(t); });
this.paneEl.addEventListener('touchmove', function (t) { return _this.touchMove(t); });
this.paneEl.addEventListener('touchend', function (t) { return _this.touchEnd(t); });
};
CupertinoPane.prototype.moveToBreak = function (val) {
var _this = this;
this.checkOpacityAttr(this.breaks[val]);
if (this.breaks[val] === this.topper
&& this.settings.topperOverflow) {
this.contentEl.style.overflowY = 'auto';
if ((p + diff) <= this.topper && noScroll) {
return;
}
else {
this.contentEl.style.overflowY = 'hidden';
}
// 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))) {
return;
}
this.paneEl.style.transform = `translateY(${newVal}px)`;
this.steps.push(n);
this.checkOpacityAttr(newVal);
}
touchEnd(t) {
const translateYRegex = /\.*translateY\((.*)px\)/i;
const p = parseFloat(translateYRegex.exec(this.paneEl.style.transform)[1]);
// Determinate nearest point
let closest = this.brs.reduce((prev, curr) => {
return (Math.abs(curr - p) < Math.abs(prev - p) ? curr : prev);
});
// Swipe - next (if differ > 10)
const diff = this.steps[this.steps.length - 1] - this.steps[this.steps.length - 2];
// Set sensivity lower for web
const swipeNextSensivity = window.hasOwnProperty('cordova') ? 4 : 3;
if (Math.abs(diff) >= swipeNextSensivity) {
closest = this.swipeNextPoint(diff, swipeNextSensivity, closest);
}
// 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'];
}
this.paneEl.style.transition = "transform " + this.settings.animationDuration + "ms " + this.settings.animationType + " 0s";
this.paneEl.style.transform = "translateY(" + this.breaks[val] + "px)";
var initTransitionEv = this.paneEl.addEventListener('transitionend', function (t) {
_this.paneEl.style.transition = "initial";
}
this.steps = [];
this.currentBreak = closest;
this.checkOpacityAttr(this.currentBreak);
if (this.currentBreak === this.topper
&& this.settings.topperOverflow) {
this.contentEl.style.overflowY = 'auto';
}
else {
this.contentEl.style.overflowY = 'hidden';
}
// Bottom closable
if (this.settings.bottomClose && closest === this.breaks['bottom']) {
this.closePane(this.backdropEl);
return;
}
if (!this.settings.freeMode) {
this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
this.paneEl.style.transform = `translateY(${closest}px)`;
let initTransitionEv = this.paneEl.addEventListener('transitionend', () => {
this.paneEl.style.transition = `initial`;
initTransitionEv = undefined;
});
};
CupertinoPane.prototype.hide = function () {
var _this = this;
this.paneEl.style.transition = "transform " + this.settings.animationDuration + "ms " + this.settings.animationType + " 0s";
this.paneEl.style.transform = "translateY(" + this.screen_height + "px)";
var initTransitionEv = this.paneEl.addEventListener('transitionend', function (t) {
_this.paneEl.style.transition = "initial";
initTransitionEv = undefined;
});
};
CupertinoPane.prototype.isHidden = function () {
return this.paneEl.style.transform === "translateY(" + this.screen_height + "px)";
};
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) {
// Event emitter
this.settings.onDragStart();
this.startP = t.touches[0].screenY;
this.steps.push(this.startP);
};
CupertinoPane.prototype.touchMove = function (t) {
this.settings.onDrag();
var translateYRegex = /\.*translateY\((.*)px\)/i;
var p = parseFloat(translateYRegex.exec(this.paneEl.style.transform)[1]);
// Delta
var n = t.touches[0].screenY;
var diff = n - this.steps[this.steps.length - 1];
var newVal = p + diff;
// Not allow move panel with overflow scroll
var noScroll = false;
if (this.contentEl.style.overflowY === 'auto') {
t.composedPath().forEach(function (item) {
if (item['className'] && item['className'].includes('cupertino-content')) {
noScroll = true;
}
});
if (noScroll && this.contentEl.scrollTop > 20) {
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))) {
return;
}
this.paneEl.style.transform = "translateY(" + newVal + "px)";
this.steps.push(n);
this.checkOpacityAttr(newVal);
};
CupertinoPane.prototype.touchEnd = function (t) {
var _this = this;
var translateYRegex = /\.*translateY\((.*)px\)/i;
var p = parseFloat(translateYRegex.exec(this.paneEl.style.transform)[1]);
// Determinate nearest point
var closest = this.brs.reduce(function (prev, curr) {
return (Math.abs(curr - p) < Math.abs(prev - p) ? curr : prev);
});
// Swipe - next (if differ > 10)
var diff = this.steps[this.steps.length - 1] - this.steps[this.steps.length - 2];
// Set sensivity lower for web
var swipeNextSensivity = window.hasOwnProperty('cordova') ? 4 : 3;
if (Math.abs(diff) >= swipeNextSensivity) {
closest = this.swipeNextPoint(diff, swipeNextSensivity, closest);
}
// 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'];
}
}
this.steps = [];
this.currentBreak = closest;
this.checkOpacityAttr(this.currentBreak);
if (this.currentBreak === this.topper
&& this.settings.topperOverflow) {
this.contentEl.style.overflowY = 'auto';
}
else {
this.contentEl.style.overflowY = 'hidden';
}
// Bottom closable
if (this.settings.bottomClose && closest === this.breaks['bottom']) {
this.closePane(this.backdropEl);
return;
}
if (!this.settings.freeMode) {
this.paneEl.style.transition = "transform " + this.settings.animationDuration + "ms " + this.settings.animationType + " 0s";
this.paneEl.style.transform = "translateY(" + closest + "px)";
var initTransitionEv_2 = this.paneEl.addEventListener('transitionend', function () {
_this.paneEl.style.transition = "initial";
initTransitionEv_2 = undefined;
});
}
};
CupertinoPane.prototype.closePane = function (backdropEl) {
var _this = this;
}
}
closePane(backdropEl) {
// Emit event
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)`;
backdropEl.style.transition = `transform ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
backdropEl.style.backgroundColor = 'rgba(0,0,0,.0)';
// Reset vars
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);
// Emit event
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)";
backdropEl.style.transition = "transform " + this.settings.animationDuration + "ms " + this.settings.animationType + " 0s";
backdropEl.style.backgroundColor = 'rgba(0,0,0,.0)';
// Reset vars
this.currentBreak = this.breaks[this.settings.initialBreak];
this.paneEl.addEventListener('transitionend', function (t) {
_this.parentEl.appendChild(_this.contentEl);
_this.contentEl.style.display = 'none';
_this.parentEl.removeChild(_this.wrapperEl);
// Emit event
_this.settings.onDidDismiss();
});
};
return CupertinoPane;
}());
this.settings.onDidDismiss();
});
}
}
exports.CupertinoPane = CupertinoPane;
Object.defineProperty(exports, '__esModule', { value: true });
})));
exports.CupertinoPane = CupertinoPane;
//# sourceMappingURL=cupertino-pane.js.map

22

dist/cupertino-pane.min.js
/**
* Cupertino Pane 1.0.53
* Cupertino Pane 1.0.61
* 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 27, 2019
* Released on: January 6, 2020
*/
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self)["Cupertino Pane"]={})}(this,(function(t){"use strict";
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
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.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}))},t.prototype.isHidden=function(){return this.paneEl.style.transform==="translateY("+this.screen_height+"px)"},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.contentEl.style.display="none",e.parentEl.removeChild(e.wrapperEl),e.settings.onDidDismiss()}))},t}();t.CupertinoPane=s,Object.defineProperty(t,"__esModule",{value:!0})}));
"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;
//# sourceMappingURL=cupertino-pane.min.js.map

181

gulp/build-js.js

@@ -6,140 +6,20 @@ /* eslint import/no-extraneous-dependencies: ["error", {"devDependencies": true}] */

const rollup = require('rollup');
const buble = require('rollup-plugin-buble');
const replace = require('rollup-plugin-replace');
const resolve = require('rollup-plugin-node-resolve');
const Terser = require('terser');
const typescript = require('rollup-plugin-typescript2');
const banner = require('./banner.js');
function es(components, cb) {
function umd(cb) {
const env = process.env.NODE_ENV || 'prod';
// Bundle
rollup.rollup({
input: './src/cupertino-pane.ts',
plugins: [
typescript(),
replace({
delimiters: ['', ''],
'process.env.NODE_ENV': JSON.stringify(env),
'//IMPORT_COMPONENTS': components.map((component) => `import ${component.capitalized} from './components/${component.name}/${component.name}';`).join('\n'),
'//INSTALL_COMPONENTS': components.map((component) => `${component.capitalized}`).join(',\n '),
'//EXPORT': 'export default Cupertino Pane',
}),
resolve({ mainFields: ['module', 'main', 'jsnext'] }),
typescript()
],
}).then((bundle) => bundle.write({
format: 'es',
format: 'cjs',
name: 'Cupertino Pane',
strict: true,
sourcemap: true,
sourcemapFile: `./${env === 'development' ? 'build' : 'dist'}/cupertino-pane.esm.bundle.js.map`,
banner,
file: `./${env === 'development' ? 'build' : 'dist'}/cupertino-pane.esm.bundle.js`,
})).then(() => {
if (cb) cb();
}).catch((err) => {
if (cb) cb();
console.error(err.toString());
});
// // Browser Bundle
// rollup.rollup({
// input: './src/swiper.js',
// plugins: [
// replace({
// delimiters: ['', ''],
// 'process.env.NODE_ENV': JSON.stringify(env),
// '//IMPORT_COMPONENTS': components.map((component) => `import ${component.capitalized} from './components/${component.name}/${component.name}';`).join('\n'),
// '//INSTALL_COMPONENTS': components.map((component) => `${component.capitalized}`).join(',\n '),
// '//EXPORT': 'export default Swiper',
// }),
// resolve({ mainFields: ['module', 'main', 'jsnext'] }),
// ],
// }).then((bundle) => bundle.write({
// format: 'es',
// name: 'Swiper',
// strict: true,
// sourcemap: true,
// sourcemapFile: `./${env === 'development' ? 'build' : 'package'}/js/swiper.esm.browser.bundle.js.map`,
// banner,
// file: `./${env === 'development' ? 'build' : 'package'}/js/swiper.esm.browser.bundle.js`,
// })).then((bundle) => {
// if (env === 'development') {
// if (cb) cb();
// return;
// }
// const result = bundle.output[0];
// const minified = Terser.minify(result.code, {
// sourceMap: {
// content: env === 'development' ? result.map : undefined,
// filename: env === 'development' ? undefined : 'swiper.esm.browser.bundle.min.js',
// url: 'swiper.esm.browser.bundle.min.js.map',
// },
// output: {
// preamble: banner,
// },
// });
// fs.writeFileSync('./package/js/swiper.esm.browser.bundle.min.js', minified.code);
// fs.writeFileSync('./package/js/swiper.esm.browser.bundle.min.js.map', minified.map);
// if (cb) cb();
// }).catch((err) => {
// if (cb) cb();
// console.error(err.toString());
// });
// // Modular
// rollup.rollup({
// input: './src/swiper.js',
// external: ['dom7/dist/dom7.modular', 'ssr-window'],
// plugins: [
// replace({
// delimiters: ['', ''],
// 'process.env.NODE_ENV': JSON.stringify(env),
// '//IMPORT_COMPONENTS': components.map((component) => `import ${component.capitalized} from './components/${component.name}/${component.name}';`).join('\n'),
// '//INSTALL_COMPONENTS': '',
// '//EXPORT': `export { Swiper, ${components.map((component) => component.capitalized).join(', ')} }`,
// }),
// resolve({ mainFields: ['module', 'main', 'jsnext'] }),
// ],
// }).then((bundle) => bundle.write({
// format: 'es',
// name: 'Swiper',
// strict: true,
// banner,
// sourcemap: true,
// sourcemapFile: `./${env === 'development' ? 'build' : 'package'}/js/swiper.esm.js.map`,
// file: `./${env === 'development' ? 'build' : 'package'}/js/swiper.esm.js`,
// })).then(() => {
// if (cb) cb();
// }).catch((err) => {
// if (cb) cb();
// console.error(err.toString());
// });
}
function umd(components, cb) {
const env = process.env.NODE_ENV || 'prod';
rollup.rollup({
input: './src/cupertino-pane.ts',
plugins: [
typescript(),
replace({
delimiters: ['', ''],
'process.env.NODE_ENV': JSON.stringify(env),
'//IMPORT_COMPONENTS': components.map((component) => `import ${component.capitalized} from './components/${component.name}/${component.name}';`).join('\n'),
'//INSTALL_COMPONENTS': components.map((component) => `${component.capitalized}`).join(',\n '),
'//EXPORT': 'export default Cupertino Pane;',
}),
resolve({ mainFields: ['module', 'main', 'jsnext'] }),
buble(),
],
}).then((bundle) => bundle.write({
format: 'umd',
name: 'Cupertino Pane',
strict: true,
sourcemap: true,
exports: 'named',
sourcemapFile: `./${env === 'development' ? 'build' : 'dist'}/cupertino-pane.js.map`,

@@ -175,35 +55,42 @@ banner,

function build(cb) {
function es(cb) {
const env = process.env.NODE_ENV || 'prod';
const components = [];
// config.components.forEach((name) => {
// // eslint-disable-next-line
// const capitalized = name.split('-').map((word) => {
// return word.split('').map((char, index) => {
// if (index === 0) return char.toUpperCase();
// return char;
// }).join('');
// }).join('');
// const jsFilePath = `./src/components/${name}/${name}.js`;
// if (fs.existsSync(jsFilePath)) {
// components.push({ name, capitalized });
// }
// });
// Bundle
rollup.rollup({
input: './src/cupertino-pane.ts',
plugins: [
typescript()
],
}).then((bundle) => bundle.write({
format: 'es',
name: 'Cupertino Pane',
strict: true,
sourcemap: true,
sourcemapFile: `./${env === 'development' ? 'build' : 'dist'}/cupertino-pane.esm.bundle.js.map`,
banner,
file: `./${env === 'development' ? 'build' : 'dist'}/cupertino-pane.esm.bundle.js`,
})).then(() => {
if (cb) cb();
}).catch((err) => {
if (cb) cb();
console.error(err.toString());
});
}
const expectCbs = env === 'development' ? 1 : 2;
function build(cb) {
const expectCbs = 2;
let cbs = 0;
umd(components, () => {
umd(() => {
cbs += 1;
if (cbs === expectCbs) cb();
});
if (env !== 'development') {
es(components, () => {
cbs += 1;
if (cbs === expectCbs) cb();
});
}
es(() => {
cbs += 1;
if (cbs === expectCbs) cb();
});
}
module.exports = build;

5

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

@@ -21,5 +21,2 @@ "homepage": "https://github.com/roman-rr/cupertino-pane/",

"rollup": "^1.27.5",
"rollup-plugin-buble": "^0.19.8",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-replace": "^2.2.0",
"rollup-plugin-typescript2": "^0.25.3",

@@ -26,0 +23,0 @@ "terser": "^4.4.0",

1

src/cupertino-pane.ts

@@ -58,2 +58,3 @@ export class CupertinoPane {

this.el = <HTMLDivElement>document.querySelector(this.el);
this.el.style.display = 'none';

@@ -60,0 +61,0 @@ if (this.settings.parentElement) {

2

tsconfig.json

@@ -12,3 +12,3 @@ {

"experimentalDecorators": true,
"target": "es5",
"target": "es6",
"typeRoots": [

@@ -15,0 +15,0 @@ "node_modules/@types"

dist/cupertino-pane.esm.bundle.js.map

Sorry, the diff of this file is not supported yet

dist/cupertino-pane.js.map

Sorry, the diff of this file is not supported yet

dist/cupertino-pane.min.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc