JSFiddle - React, Tailwind, and code Playground

by romantonoff

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.2.2/css/ionic.bundle.css">
<script src="https://unpkg.com/cupertino-pane@1.3.1/dist/cupertino-pane.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@ionic/core@6.2.2/dist/ionic/ionic.js"></script>
<!DOCTYPE html>
<html dir="ltr" mode="ios">
<body class="dark">
  <ion-app>
  <ion-content scroll-y="false">
      <ion-slides>
        <ion-slide>
          <ion-button id="button-1" expand="full" onclick="activatePane(1, this, true);" color="light">#1</ion-button>
        </ion-slide>
        <ion-slide>
          <ion-button id="button-2" expand="full" onclick="activatePane(2, this, true);" color="light">#2</ion-button>
        </ion-slide>
        <ion-slide>
          <ion-button id="button-3" expand="full" onclick="activatePane(3, this, true);" color="medium">#3</ion-button>
        </ion-slide>
        <ion-slide>
          <ion-button id="button-4" expand="full" onclick="activatePane(4, this, true);" color="light">#4</ion-button>
        </ion-slide>
        <ion-slide>
          <ion-button id="button-5" expand="full" onclick="activatePane(5, this, true);" color="light">#5</ion-button>
        </ion-slide>
      </ion-slides>

    <div class="main-content">
      <ion-drawer class="card-1">
        <h1>Card #1</h1>
        <p hide-on-bottom>Content</p> 
      </ion-drawer>
      <ion-drawer class="card-2">
        <h1>Card #2</h1>
        <p hide-on-bottom>Content</p> 
      </ion-drawer>
      <ion-drawer class="card-3">
        <h1>Card #3</h1>
        <p hide-on-bottom>Content</p> 
      </ion-drawer>
      <ion-drawer class="card-4">
        <h1>Card #4</h1>
        <p hide-on-bottom>Content</p> 
      </ion-drawer>
      <ion-drawer class="card-5">
        <h1>Card #5</h1>
        <p hide-on-bottom>Content</p> 
      </ion-drawer>
    </div>
  </ion-content>
  </ion-app>
</body>
</html>

CSS

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...

JavaScript

let activeNum = 3;
let maxHeight = 500;
let swiper = document.querySelector('ion-slides');
    swiper.options = { 
      slidesPerView: 5,
      spaceBetween: -30
    };
let settings = { 
    initialBreak: 'top',
    parentElement: 'ion-content',
    breaks: {
      top: { enabled: true, height: maxHeight },
      middle: { enabled: false }
    },
    darkMode: true,
    showDraggable: false,
    buttonDestroy: false,
    bottomClose: true,
    zStack: {
      cardYOffset: 16,
      pushElements: null,
      minPushHeight: 100
    }
};

let drawers = { '1': null, '2': null, '3': null, '4': null, '5': null};
Object.keys(drawers).forEach((key) => {
  key = parseInt(key);
  let itemSettings = {
    ...settings,
    cssClass: `card-${key}`,
    events: {
      onDrag: (e) => onDragFunc(key, e),
      onDragStart: (e) => onDragStartFunc(key, e),
      onDidDismiss: () => onDidDismissFunc(key)
    }
  }

  if (key !== 1) {
    itemSettings.zStack = { ...itemSettings.zStack, pushElements: [`.cupertino-pane-wrapper.card-${(key - 1)}`] };
  }

  if (key === 1) {
    itemSettings.breaks = {...settings.breaks, ...{bottom: {enabled: false}}};
    itemSettings.bottomClose = false;
    itemSettings.zStack = null;
  }

  drawers[key] = new CupertinoPane(`.card-${key}`, itemSettings);
});

window.onload = async function () {
  await document.querySelector('ion-app').componentOnReady();
        // activate default here
    activatePane(3, document.getElementById(`button-${activeNum}`), false);
}

async function onDragStartFunc(num, t) {
  const targetTouch = t.type === 'touchstart' && t.targetTouches && (t.targetTouches[0] || t.changedTouches[0]);
  const screenY = t.type === 'touchstart' ? targetTouch.clientY : t.clientY;
  firstPoint = screenY;
}

async function onDragFunc(num, t) {
  if (num === drawers.length - 1) {
    return;
  }

  if (t.delta > 70) {
    activatePane(num + 1, document.getElementById(`button-${num + 1}`), true);
  }
}

async function onDidDismissFunc(num)...