JSFiddle - React, Tailwind, and code Playground

by romantonoff

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css">
<script src="https://unpkg.com/cupertino-pane/dist/cupertino-pane.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<html dir="ltr" mode="ios">
<body>
  <ion-app>
  <ion-content scroll-y="false">
        <ion-drawer>
          <h1>Header</h1>
          <p hide-on-bottom>Content</p> 
        </ion-drawer>
        
        <ion-button expand="block" color="danger" onclick="presentDrawer()">Present Drawer</ion-button>
        <ion-button expand="block" color="danger" onclick="destroyDrawer()">Destroy Drawer</ion-button>
        <ion-button expand="block" onclick="hideDrawer()">Hide Drawer</ion-button>
        <ion-button expand="block" onclick="isHiddenDrawer()">Drawer is hidden</ion-button>
        <ion-button expand="block" color="secondary" onclick="setTopDrawer()">Set Top</ion-button>
        <ion-button expand="block" color="secondary" onclick="setMiddleDrawer()">Set Moddle</ion-button>
        <ion-button expand="block" color="secondary" onclick="setBottomDrawer()">Set bottom</ion-button>
      </ion-content>
    </ion-app>
  </body>
</html>

CSS

ion-drawer {
  padding: 0 20px;
}

JavaScript

const topPosition = 600;
const backdropOpacity = 1;

var drawer = new CupertinoPane('ion-drawer', { 
    backdrop: true,
    initialBreak: 'middle',
    breaks: {
        top: {enabled: true, height: topPosition},
        middle: {enabled: true, height: 300},
        bottom: {enabled: false}
    },
    backdropOpacity, 
    events: {
      onBackdropTap: () => destroyDrawer(),
      onDrag: () => changeOpacity(getPaneTransformY(), 'unset'),
      onTransitionStart: (e) => changeOpacity(e.translateY.new, 'all 300ms ease 0s')
    }
}); 

window.onload = async function () {
  await document.querySelector('ion-app').componentOnReady();
  presentDrawer();
}

function changeOpacity(val, transition) {
    const backdrop = document.querySelector('.backdrop');
    const topScreen = topPosition;
    const newScreen = window.screen.height - val;
    const opacity = (backdropOpacity * newScreen) / topScreen;
    if (transition) backdrop.style.transition = transition;
    backdrop.style.backgroundColor = `rgba(0, 0, 0, ${opacity})`;
}

function getPaneTransformY() {
    const translateYRegex = /\.*translateY\((.*)px\)/i;
    const paneEl = document.querySelector('.pane');
    return paneEl ? parseFloat(translateYRegex.exec(paneEl.style.transform)[1]) : 0;
}

async function presentDrawer() {
  drawer.present({animate: true});
};

async function destroyDrawer() {
  drawer.destroy({animate: true});
};

async function hideDrawer() {
  drawer.hide();
};

async function isHiddenDrawer() {
    console.log(await drawer.isHidden());
};

async function setTopDrawer() {
  drawer.moveToBreak('top');
};

async function setMiddleDrawer() {
  drawer.moveToBreak('middle');
};

async function setBottomDrawer() {
  drawer.moveToBreak('bottom');
};