resizable-drawer.js

A simple implementation of a resizable drawer using only native JS and CSS.

Includes support for ES6, ES5, AMD, CommonJS, and global inclusion via an HTML script tag and is mobile friendly!.

Install

• NPM: $ npm install --save resizable-drawer
• Bower: $ bower install --save resizable-drawer
• CDN - ES6:

<script src="//unpkg.com/resizable-drawer@1.0.2/dist/resizable-drawer.js"></script>
<link rel="stylesheet" type="text/css" src="//unpkg.com/resizable-drawer@1.0.2/dist/resizable-drawer.min.css">

• CDN - ES5:

<script src="//unpkg.com/resizable-drawer@1.0.2/dist/resizable-drawer.es5.js"></script>`
<link rel="stylesheet" type="text/css" src="//unpkg.com/resizable-drawer@1.0.2/dist/resizable-drawer.min.css">

• Download

Basic Usage

JSBin Demo

JavaScript

import ResizableDrawer from 'resizable-drawer';


let myResizableDrawer = new ResizableDrawer(document.querySelector('#myResizableDrawerElement'));

...

myResizableDrawer.destroy();

HTML

<link rel="stylesheet" type="text/css" src="resizable-drawer.min.css">

...

<div id="myResizableDrawerElement" class="resizable-drawer">
  <div class="resizable-drawer-content">...</div>
  <div class="resizable-drawer-handle">&hellip;</div>
</div>

Advanced Usage

JavaScript

import ResizableDrawer from 'resizable-drawer';


let myResizableDrawer = new ResizableDrawer({
  el:           document.querySelector('#myResizableDrawerElement'),
  startEnabled: false,
  startOpen:    false
});

...

myResizableDrawer.destroy();

HTML

<link rel="stylesheet" type="text/css" src="resizable-drawer.min.css">

...

<div id="myResizableDrawerElement" class="resizable-drawer">
  <div class="resizable-drawer-content">...</div>
  <div class="resizable-drawer-handle">&hellip;</div>
</div>

Building the Project

The project is built using Gulp.js. To install Gulp.js, see the Gulp.js "Getting Started" docs.

Run the following at the root of the project for a list of available gulp tasks:

$ gulp help