Cupertino Pane Drawer

Stable version 1.0.1 (Compatible with OutSystems 11)

Uploaded

on 28 September 2020

5.0

(2 ratings)

Documentation

1.0.1

Getting Started

Use from CDN

If you don't want to include Cupertino Pane files in your project, you may use it from CDN. The following files are available:

<script src="https://unpkg.com/cupertino-pane/dist/cupertino-pane.js"></script>
<script src="https://unpkg.com/cupertino-pane/dist/cupertino-pane.min.js"></script>

Include Files To App/Website

<!DOCTYPE html>
<html lang="en">
<body>
    ...
    <script src="path/to/cupertino-pane.min.js"></script>
</body>
</html>

Add HTML Layout

<div class="cupertino-pane">
    <h1>Header</h1>
    <div class="content">Content</div>    
</div>

Additional CSS Styles

.cupertino-pane {
    margin: 20px;
}

Initialize Cupertino Pane

<body>
  ...
  <script>
  window.onload = function () {
    var myPane = new CupertinoPane(
      '.cupertino-pane', // Pane container selector
      { 
        parentElement: 'body', // Parent container
        initialShow: false,
        breaks: {
            top: { enabled: false, offset: -70 },
            middle: { enabled: true, offset: 0 },
            bottom: { enabled: true, offset: 0 },
        },
        onDrag: () => console.log('Drag event')
      }
    );
    myPane.present();
  };
  </script>
</body>

jQuery example

$(document).ready(function () {
  //initialize pane when document ready
  var myPane = new CupertinoPane('.cupertino-pane', { /* ... */ });
  myPane.present();
});

As an ES module

Cupertino Pane package comes with ES module version which can be used where supported or with bundlers like Webpack or Rollup:

import { CupertinoPane } from 'cupertino-pane';

var myPane = new CupertinoPane('.cupertino-pane', { /* ... */ });
    myPane.present();

Settings

Common configuration

parentElement | string | Element selector where pane will appended (by default using parent element where html layout placed)
initialShow | boolean: false | Determinate if pane will rendered with animation or immediately
initialBreak | (top|middle|bottom): 'middle' | Initial pane position
darkMode | boolean: false | Initial pane styles
backdrop | boolean: false | Dimmed overlay will rendered with pane if true
backdropClose | boolean: false | Close pane with click to backdrop element
animationType | (ease | ease-in | ease-out | ease-in-out | cubic-bezier): 'ease' | Transition property animation type
animationDuration | number: 300 | Transition property duration
bottomClose | boolean: false | Close pane with drag to bottom breakpoint
freeMode | boolean: false | On true will remove automatical magnetic effects to near breakpoint.
buttonClose | boolean: true | Determinate whetever close button will render or not
topperOverflow | boolean: true | Ability to scroll content inside pane if topper point reached
topperOverflowOffset | number: 0 | Offset from screen bottom to the end of overflow content
showDraggable | boolean: true | Render rectangular shape on the top of pane
clickBottomOpen | boolean: true | If bottom position reached, simple click to pane will open pane to the next upper point
Breakpoints
breaks | {} | Using to override default pane breakpoints. Note that necessary to define all three breakpoints when override, with new enabled and offset if needs.
- top | {} | Topper point that pane can reach
  - enabled | boolean: true | Enable or disable breakpoint
  - offset | number: 0 | Additional bottom margin if needs
- middle | {} | Middle point that pane can reach
  - enabled | boolean: true | Enable or disable breakpoint
  - offset | number: 0 | Additional bottom margin if needs
- bottom | {} | Bottom point that pane can reach
  - enabled | boolean: true | Enable or disable breakpoint
  - offset | number: 0 | Additional bottom margin if needs
    Callbacks
    The function that executes when the event fires.
onDidDismiss | void: () => {} | Call after pane will dissapeared
onWillDismiss | void: () => {} | Call before pane will dissapeared
onDidPresent | void: () => {} | Call after pane will present
onWillPresent | void: () => {} | Call before panel will present
onDragStart | void: () => {} | Call when detect user drag event on pane
onDrag | void: () => {} | Call executes on each new pane position

Public Methods

present()

Will render pane DOM and show pane with setted params.

myPane.present();

moveToBreak('top' | 'middle' | 'bottom')

Will change pane position with animation to selected breakpoint.

myPane.moveToBreak('top');

hide()

Dissappear pane from screen, still keep pane in DOM.

myPane.hide();

isHidden()

Determinate if pane position was moved out of screen, but pane still exist in DOM.

if (myPane.isHidden()) {
    myPane.moveToBreak('top');
}

Attributes

hide-on-bottom

Set for element to automaticaly hide on reach bottom breakpoint.

<div class="cupertino-pane">
    <h1>Header</h1>
    <div class="content" hide-on-bottom>Content</div>    
</div>

overflow-y

Set for element with overflow ability. By default using for full pane area, but in some cases good useful with header.

<div class="cupertino-pane">
    <h1>Header</h1>
    <div class="content" overflow-y>Content</div>    
</div>

original source : https://www.pika.dev/npm/cupertino-pane