const cardsValue = document.getElementById('cardsValue');
const angleValue = document.getElementById('angleValue');
const offsetYValue = document.getElementById('offsetYValue');
const scaleValue = document.getElementById('scaleValue');
const contrastValue = document.getElementById('contrastValue');
const stackEl = document.getElementById('z-stack');
// defaults
cardsValue.value = 5;
angleValue.value= 160;
offsetYValue.value = 12;
scaleValue.value = 93;
contrastValue.value = 93;
let cardsArray = {};
const ranges = [cardsValue, angleValue, offsetYValue, scaleValue, contrastValue];
for (let i = 0; i < ranges.length; i++) {
let el = ranges[i];
updateRangeResult(el);
el.addEventListener('ionChange', function (ev) {
updateRangeResult(ev.target);
render();
});
}
function updateRangeResult(el) {
var resultEl = document.getElementById(`${el.id}Result`);
if (el.id === 'scaleValue' || el.id === 'contrastValue') {
resultEl.innerHTML = Math.round(el.value) / 100;
return;
}
resultEl.innerHTML = Math.round(el.value);
}
function openCardZStack(index, animate) {
for (let i = cardsValue.value - 1; i > index; i--) {
let isCardExist = (!!document.querySelector(`.cupertino-pane-wrapper.card-${i}`));
if (isCardExist) {
cardsArray[i].destroy({animate});
}
}
for (let i = 0; i <= index; i++) {
let isCardExist = (!!document.querySelector(`.cupertino-pane-wrapper.card-${i}`));
if (!isCardExist) {
cardsArray[i].present({ animate });
}
}
}
function dragZStack(ev, current) {
if (current === cardsValue.value - 1) {
return;
}
if (ev.delta > 70) {
cardsArray[current].disableDrag();
openCardZStack(current + 1, true);
}
}
function dismissZStack(ev, current) {
cardsArray[current - 1]?.enableDrag();
}
function render() {
cardsArray = {};
stackEl.innerHTML = '';
let settings = {
initialBreak: 'top',
breaks: {
top: { enabled: true, height: window.innerHeight - 330 },
middle: { enabled: false }
},
showDraggable: false,
buttonClose: false,
zStack: {
stackZAngle: angleValue.value,
cardYOffset: offsetYValue.value,
cardContrast: contrastValue.value / 100,
cardZScale: scaleValue.value / 100,
pushElements: null,
minPushHeight: 100
},
topperOverflow: false,
bottomClose: true
};
for (let i = 0; i < cardsValue.value; i++) {
// Insert html card
stackEl.insertAdjacentHTML( 'beforeend', `<div id="pane-${i}"><h1>Card #${i + 1}</h1></div>`);
let itemSettings = {
...settings,
cssClass: `card-${i}`,
onDrag: (e) => dragZStack(e, i),
onDidDismiss: (e) => dismissZStack(e, i)
}
let pushedEls = new Array(i).fill('.cupertino-pane-wrapper.card-');
pushedEls = pushedEls.map((item, index) => `${item}${index}`);
if (pushedEls.length) {
itemSettings.zStack = { ...itemSettings.zStack, pushElements: pushedEls };
}
if (i === 0) {
itemSettings.breaks = {...settings.breaks, ...{bottom: {enabled: false}}};
itemSettings.bottomClose = false;
itemSettings.zStack = null;
}
cardsArray[i] = new CupertinoPane(`#pane-${i}`, itemSettings);
}
openCardZStack(cardsValue.value - 1, false);
}
render();
<!DOCTYPE html>
<html dir="ltr" mode="ios">
<body class="dark">
<ion-content scroll-y="false">
<ion-list>
<ion-item>
<ion-range color="medium" min="1" max="20" step="1" id="cardsValue">
<ion-label color="medium" slot="start">Cards</ion-label>
<ion-label color="medium" slot="end" id="cardsValueResult"></ion-label>
</ion-range>
</ion-item>
<ion-item>
<ion-range color="medium" min="0" max="3000" step="5" id="angleValue">
<ion-label color="medium" slot="start">Angle</ion-label>
<ion-label color="medium" slot="end" id="angleValueResult"></ion-label>
</ion-range>
</ion-item>
<ion-item>
<ion-range color="medium" min="0" max="100" step="1" id="offsetYValue">
<ion-label color="medium" slot="start">Offset Y</ion-label>
<ion-label color="medium" slot="end" id="offsetYValueResult"></ion-label>
</ion-range>
</ion-item>
<ion-item>
<ion-range color="medium" min="0" max="100" step="1" id="scaleValue">
<ion-label color="medium" slot="start">Scale</ion-label>
<ion-label color="medium" slot="end" id="scaleValueResult"></ion-label>
</ion-range>
</ion-item>
<ion-item>
<ion-range color="medium" min="0" max="100" step="1" id="contrastValue">
<ion-label color="medium" slot="start">Contrast</ion-label>
<ion-label color="medium" slot="end" id="contrastValueResult"></ion-label>
</ion-range>
</ion-item>
</ion-list>
<div id="z-stack"></div>
</ion-content>
</body>
</html>
body.dark{--ion-color-primary:#428cff;--ion-color-primary-rgb:66,140,255;--ion-color-primary-contrast:#ffffff;--ion-color-primary-contrast-rgb:255,255,255;--ion-color-primary-shade:#3a7be0;--ion-color-primary-tint:#5598ff;--ion-color-secondary:#50c8ff;--ion-color-secondary-rgb:80,200,255;--ion-color-secondary-contrast:#ffffff;--ion-color-secondary-contrast-rgb:255,255,255;--ion-color-secondary-shade:#46b0e0;--ion-color-secondary-tint:#62ceff;--ion-color-tertiary:#6a64ff;--ion-color-tertiary-rgb:106,100,255;--ion-color-tertiary-contrast:#ffffff;--ion-color-tertiary-contrast-rgb:255,255,255;--ion-color-tertiary-shade:#5d58e0;--ion-color-tertiary-tint:#7974ff;--ion-color-success:#2fdf75;--ion-color-success-rgb:47,223,117;--ion-color-success-contrast:#000000;--ion-color-success-contrast-rgb:0,0,0;--ion-color-success-shade:#29c467;--ion-color-success-tint:#44e283;--ion-color-warning:#ffd534;--ion-color-warning-rgb:255,213,52;--ion-color-warning-contrast:#000000;--ion-color-warning-contrast-rgb:0,0,0;--ion-color-warning-shade:#e0bb2e;--ion-color-warning-tint:#ffd948;--ion-color-danger:#ff4961;--ion-color-danger-rgb:255,73,97;--ion-color-danger-contrast:#ffffff;--ion-color-danger-contrast-rgb:255,255,255;--ion-color-danger-shade:#e04055;--ion-color-danger-tint:#ff5b71;--ion-color-dark:#f4f5f8;--ion-color-dark-rgb:244,245,248;--ion-color-dark-contrast:#000000;--ion-color-dark-contrast-rgb:0,0,0;--ion-color-dark-shade:#d7d8da;--ion-color-dark-tint:#f5f6f9;--ion-color-medium:#989aa2;--ion-color-medium-rgb:152,154,162;--ion-color-medium-contrast:#000000;--ion-color-medium-contrast-rgb:0,0,0;--ion-color-medium-shade:#86888f;--ion-color-medium-tint:#a2a4ab;--ion-color-light:#222428;--ion-color-light-rgb:34,36,40;--ion-color-light-contrast:#ffffff;--ion-color-light-contrast-rgb:255,255,255;--ion-color-light-shade:#1e2023;--ion-color-light-tint:#383a3e}.ios body.dark{--ion-background-color:#000000;--ion-background-color-rgb:0,0,0;--ion-text-color:#ffffff;--ion-text-color-rgb:255,255,255;--ion-color-step-50:#0d0d0d;--ion-color-step-100:#1a1a1a;--ion-color-step-150:#262626;--ion-color-step-200:#333333;--ion-color-step-250:#404040;--ion-color-step-300:#4d4d4d;--ion-color-step-350:#595959;--ion-color-step-400:#666666;--ion-color-step-450:#737373;--ion-color-step-500:#808080;--ion-color-step-550:#8c8c8c;--ion-color-step-600:#999999;--ion-color-step-650:#a6a6a6;--ion-color-step-700:#b3b3b3;--ion-color-step-750:#bfbfbf;--ion-color-step-800:#cccccc;--ion-color-step-850:#d9d9d9;--ion-color-step-900:#e6e6e6;--ion-color-step-950:#f2f2f2;--ion-toolbar-background:#0d0d0d;--ion-item-background:#000000;--ion-card-background:#1c1c1d}.md body.dark{--ion-background-color:#121212;--ion-background-color-rgb:18,18,18;--ion-text-color:#ffffff;--ion-text-color-rgb:255,255,255;--ion-border-color:#222222;--ion-color-step-50:#1e1e1e;--ion-color-step-100:#2a2a2a;--ion-color-step-150:#363636;--ion-color-step-200:#414141;--ion-color-step-250:#4d4d4d;--ion-color-step-300:#595959;--ion-color-step-350:#656565;--ion-color-step-400:#717171;--ion-color-step-450:#7d7d7d;--ion-color-step-500:#898989;--ion-color-step-550:#949494;--ion-color-step-600:#a0a0a0;--ion-color-step-650:#acacac;--ion-color-step-700:#b8b8b8;--ion-color-step-750:#c4c4c4;--ion-color-step-800:#d0d0d0;--ion-color-step-850:#dbdbdb;--ion-color-step-900:#e7e7e7;--ion-color-step-950:#f3f3f3;--ion-item-background:#1e1e1e;--ion-toolbar-background:#1f1f1f;--ion-tab-bar-background:#1f1f1f;--ion-card-background:#1e1e1e}
.cupertino-pane-wrapper {
width: 100%;
height: 100%;
}
.cupertino-pane-wrapper .pane {
padding: 0px 20px;
}
.cupertino-pane-wrapper .pane h1 {
font-size: 18px;
color: #b9b9b9;
}
body.dark {
--cupertino-pane-icon-close-color: #a8a7ae;
--cupertino-pane-background: #1c1c1d;
--cupertino-pane-color: #ffffff;
--cupertino-pane-shadow: 0 4px 16px rgb(0 0 0 / 12%);
--cupertino-pane-border-radius: 20px;
--cupertino-pane-move-background: #424246;
--cupertino-pane-destroy-button-background: #424246;
}
ion-range {
padding: 0;
--knob-size: 18px;
--knob-background: #dddddd;
}
ion-list {
z-index: 100;
position: relative;
}