Drawerjs

Drawerjs

A navigation drawer for mobile and web applications.

Constructor

new Drawerjs(options)

Source:

Create a Drawer.

Examples

The Drawer basic template looks like:

<main id="wrapper">
  <!-- the Drawer -->
  <aside id="drawerjs" class="drawerjs">
    <h1>Drawerjs</h1>
  </aside>
  <!-- the Holder -->
  <section id="drawerjs-holder" class="drawerjs-holder">
    <h2>Site content</h2>
  </section>
</main>

Instance the Drawer:

var drawer = new Drawerjs();
Parameters:
Name Type Description
options Object

An object containing key:value that representing the current Drawer.

Members

options :Object

Source:
Properties:
Name Type Default Description
align String 'left'

The Drawer position (left/right).

compact Boolean false

The Drawer compact mode.

fixed Boolean false

The Drawer fixed mode.

forcePos Boolean | Object false

CSS to force the Drawer positions and dimensions. Only support top, right, bottom, left, width, height.

holder String '#drawerjs-holder'

The Holder element selector, usually targeted to site/app main content. Set to false if you haven't a holder, the Drawer will refer to document body.

holderClass String 'drawerjs-holder'

The css class name that will added to holder selector automatically.

nested Boolean false

Indicator for nested Drawer. Set to true to use nested Drawer.

open Boolean false

Open/close the Drawer.

pinned Boolean false

If true, it's transform the Drawer to push/pull navigation when open/close the Drawer.

selector String '#drawerjs'

The Drawer element selector.

selectorClass String 'drawerjs'

The css class name that will be added to the Drawer and used for css prefix classes.

width Number | String '200px'

The Drawer width for default size. Support for any css units like rem, em, or %.

compactWidth Number | String '60px'

The Drawer width for compact size. Support for any css units like rem, em, or %.

useCustom Boolean | Object false

Use custom skins on the Drawer and the Holder. Both are support backgroundColor and color properties.

holderBehavior Boolean true

If Activated, the Holder will translate the content when screen width < toggleScreen instead of using content space (You may want to disable this behavior when work with multiple drawer).

toggleScreen Number | String '992px'

The Drawer use it to initialize the default options, depend on screen sizes. When screen width < toggleScreen the Drawer will used default options for mobile.

backdrop Boolean true

Enable/disable the Drawer backdrop. When this property is false the unpinned drawer will not automatically closed on outside click.

The Drawer options.

Type:
  • Object
Example
var options = {
  align: 'left',
  compact: true,
  fixed: true,
  useCustom: {
    drawer: {
      backgroundColor: '#fff',
      color: '#000'
    },
    holder: {
      backgroundColor: '#fff',
      color: '#000'
    }
  }
};

var drawer = new Drawerjs(options);

selector :Element

Source:

The Drawer element.

Type:
  • Element

holder :Element

Source:

The Drawer holder. If option set to false, the Holder will be refer to document body. Its usefull for multiple drawer instance.

Type:
  • Element

wrapper :Element

Source:

The Drawer wrapper.

Type:
  • Element

hash :String

Source:

The Drawer uniq ID.

Type:
  • String

classes :Object

Source:

Lists of feature classes that will be added to the Drawer depend to current options. Used selectorClass for prefix.

Type:
  • Object

Methods

(private) _onReady(handler) → {void}

Source:

Listen on document when the page is ready.

Parameters:
Name Type Description
handler function

The callback function when page is ready.

Returns:
Type
void

(private) _extend(obj) → {Object}

Source:

Merge the contents of two or more objects together into the first object.

Parameters:
Name Type Description
obj Object

An object containing additional properties to merge in.

Returns:

The merged object.

Type
Object

(private) _validateUnit(unit) → {Boolean}

Source:

Validate unit value to support Drawer rules.

Parameters:
Name Type Description
unit Number | String

Unit value to validate.

Returns:

Has valid unit.

Type
Boolean

(private) _emit(type, data) → {void}

Source:

Attach an event to Drawer selector.

Parameters:
Name Type Description
type String

The name of the event (case-insensitive).

data Boolean | Number | String | Array | Object

The custom data that will be added to event.

Returns:
Type
void

(private) _on(el, type, handler) → {void}

Source:

Registers the specified listener on the element.

Parameters:
Name Type Description
el Element

The element target.

type String

The name of the event.

handler function

The callback function when event type is fired.

Returns:
Type
void

(private) _off(el, type, handler) → {void}

Source:

Removes the event listener previously registered with _on() method.

Parameters:
Name Type Description
el Element

The element target.

type String

The name of the event.

handler function

The callback function when event type is fired.

Returns:
Type
void

(private) _addClass(el, className) → {void}

Source:

Adds one or more class names to the target element.

Parameters:
Name Type Description
el Element

The target element.

className String

Specifies one or more class names to be added.

Returns:
Type
void

(private) _removeClass(el, className) → {void}

Source:

Removes one or more class names to the target element.

Parameters:
Name Type Description
el Element

The target element.

className String

Specifies one or more class names to be added.

Returns:
Type
void

(private) _drawerWidth(isCompact) → {String}

Source:

Get the current Drawer width.

Parameters:
Name Type Description
isCompact Boolean

The current value of compact value.

Returns:

The current Drawer width.

Type
String

(private) _renderWidth() → {void}

Source:

Apply the current Drawer width.

Returns:
Type
void

(private) _clearSpace() → {void}

Source:

Clear the Holder space.

Returns:
Type
void

(private) _holderSpace() → {void}

Source:

Give space to the Holder.

Returns:
Type
void

(private) _backdrop() → {void}

Source:

Add/remove the current Drawer backdrop depend with pinned option.

Returns:
Type
void

(private) _transitionIn() → {void}

Source:

A transition that is used when open the Drawer.

Returns:
Type
void

(private) _transitionOut() → {void}

Source:

A transition that is used when close the Drawer.

Returns:
Type
void

(private) _transitionEnd(el) → {String}

Source:

Get the correct transitionend event for any browser.

Parameters:
Name Type Description
el Element

The target element.

Returns:

The name of the transitionend.

Type
String

(private) _addFakeHeight() → {void}

Source:

Set the Drawer wrapper background color same as the Drawer.

Returns:
Type
void

(private) _removeFakeHeight() → {void}

Source:

Remove the Drawer wrapper background color given by _addFakeHeight() method.

Returns:
Type
void

init() → {void}

Source:

The first process that called after constructs the Drawer instance.

Fires:
Returns:
Type
void

align(position) → {Object}

Source:

Set the Drawer position to left or right.

Example
drawer.align('right');
Parameters:
Name Type Description
position String

The position that will be set to the Drawer.

Fires:
Returns:

The Drawer instance.

Type
Object

isCompact() → {Boolean}

Source:

Whether the Drawer is currently compact.

Example
var isCompact = drawer.isCompact();
Returns:

is compact.

Type
Boolean

compact(isCompact) → {Object}

Source:

Toggle the Drawer compact mode.

Example
drawer.compact(true);
Parameters:
Name Type Description
isCompact Boolean

The compact mode.

Fires:
Returns:

The Drawer instance.

Type
Object

isFixed() → {Boolean}

Source:

Whether the Drawer is currently fixed.

Example
var isFixed = drawer.isFixed();
Returns:

Is fixed.

Type
Boolean

fixed(isFixed) → {Object}

Source:

Toggle the Drawer fixed mode.

Example
drawer.fixed(true);
Parameters:
Name Type Description
isFixed Boolean

The fixed mode.

Fires:
Returns:

The Drawer instance.

Type
Object

isOpen() → {Boolean}

Source:

Whether the Drawer is currently open.

Example
var isOpen = drawer.isOpen();
Returns:

Is open.

Type
Boolean

open() → {Object}

Source:

Open/show the Drawer.

Example
drawer.open();
Fires:
Returns:

The Drawer instance.

Type
Object

close() → {Object}

Source:

Close/hide the Drawer.

Example
drawer.close();
Fires:
Returns:

The Drawer instance.

Type
Object

toggle() → {Object}

Source:

Toggle open/close the Drawer. This method trigger both open and close event.

Example
drawer.toggle();
Fires:
Returns:

The Drawer instance.

Type
Object

isPinned() → {Boolean}

Source:

Whether the drawer is currently pinned.

Example
var isPinned = drawer.isPinned();
Returns:

Is pinned.

Type
Boolean

pinned(isPinned) → {Object}

Source:

Toggle the Drawer pinned mode.

Example
drawer.pinned(true);
Parameters:
Name Type Description
isPinned Boolean

The pinned mode.

Fires:
Returns:

The Drawer instance.

Type
Object

getWidth() → {String}

Source:

Get the default Drawer width.

Example
var width = drawer.getWidth();
Returns:

CSS unit value.

Type
String

setWidth(width) → {Object}

Source:

Set the default Drawer width.

Example
drawer.setWidth('300px');
Parameters:
Name Type Description
width Number | String

The Drawer width.

Fires:
Returns:

The Drawer instance.

Type
Object

getCompactWidth() → {String}

Source:

Get the compact Drawer width.

Example
var compactWidth = drawer.getCompactWidth();
Returns:

CSS unit value.

Type
String

setCompactWidth(width) → {Object}

Source:

Set the compact Drawer width.

Example
drawer.setCompactWidth(100);
Parameters:
Name Type Description
width Number | String

The Drawer width.

Fires:
Returns:

The Drawer instance.

Type
Object

forcePos(pos) → {Object}

Source:

Adds css property to force Drawer positions and dimentions.

Example
drawer.forcePos({
  top: '60px'
});
Parameters:
Name Type Description
pos Boolean | Object

Only support CSS properties below:

Properties
Name Type Description
top Number | String

CSS top property (default unit is px).

right Number | String

CSS right property (default unit is px).

bottom Number | String

CSS bottom property (default unit is px).

left Number | String

CSS left property (default unit is px).

width Number | String

CSS width property (default unit is px).

height Number | String

CSS height property (default unit is px).

Fires:
Returns:

The Drawer instance.

Type
Object

custom(useCustom) → {Object}

Source:

Custom using css property for the Drawer and the Holder.

Example
drawer.custom({
  drawer: {
    backgroundColor: '#f7f7f7',
    color: '#333'
  }
});
Parameters:
Name Type Description
useCustom Boolean | Object

The Drawer custom property.

Properties
Name Type Description
drawer.backgroundColor String

The Drawer backgroundColor property.

drawer.color String

The Drawer color property.

holder.backgroundColor String

The Holder backgroundColor property.

holder.color String

The Holder color property.

Fires:
Returns:

The Drawer instance.

Type
Object

Events

init

Source:
Properties:
Name Type Description
data Object

The Drawerjs data instance.

This event is fired when the drawer has completed init.

Type:
  • Object
Examples
document.querySelector('#drawerjs').addEventListener('open', function(e) {
  console.log(e.data);
});

Or using jQuery:

$('#drawerjs').on('init', function() {
  console.log('fired on init!!');
});

align

Source:
Properties:
Name Type Description
data Object

The Drawerjs data instance.

This event is fired when the drawer has changed position.

Type:
  • Object
Examples
document.querySelector('#drawerjs').addEventListener('align', function(e) {
  console.log(e.data);
});

Or using jQuery:

$('#drawerjs').on('align', function() {
  console.log('fired on align!!');
});

compact

Source:
Properties:
Name Type Description
data Object

The Drawerjs data instance.

This event is fired when the drawer has completed toggle compact mode.

Type:
  • Object
Examples
document.querySelector('#drawerjs').addEventListener('compact', function(e) {
  console.log(e.data);
});

Or using jQuery:

$('#drawerjs').on('compact', function() {
  console.log('fired on compact!!');
});

fixed

Source:
Properties:
Name Type Description
data Object

The Drawerjs data instance.

This event is fired when the drawer has completed toggle fixed mode.

Type:
  • Object
Examples
document.querySelector('#drawerjs').addEventListener('fixed', function(e) {
  console.log(e.data);
});

Or using jQuery:

$('#drawerjs').on('fixed', function() {
  console.log('fired on fixed!!');
});

open

Source:
Properties:
Name Type Description
data Object

The Drawerjs data instance.

This event is fired when the drawer has open.

Type:
  • Object
Examples
document.querySelector('#drawerjs').addEventListener('open', function(e) {
  console.log(e.data);
});

Or using jQuery:

$('#drawerjs').on('open', function() {
  console.log('fired on open!!');
});

close

Source:
Properties:
Name Type Description
data Object

The Drawerjs data instance.

This event is fired when the drawer has close.

Type:
  • Object
Examples
document.querySelector('#drawerjs').addEventListener('close', function(e) {
  console.log(e.data);
});

Or using jQuery:

$('#drawerjs').on('close', function() {
  console.log('fired on close!!');
});

pinned

Source:
Properties:
Name Type Description
data Object

The Drawerjs data instance.

This event is fired when the drawer has completed toggle pinned.

Type:
  • Object
Examples
document.querySelector('#drawerjs').addEventListener('pinned', function(e) {
  console.log(e.data);
});

Or using jQuery:

$('#drawerjs').on('pinned', function() {
  console.log('fired on pinned!!');
});

changeWidth

Source:
Properties:
Name Type Description
data Object

The Drawerjs data instance.

This event is fired when the drawer has changed width.

Type:
  • Object
Examples
document.querySelector('#drawerjs').addEventListener('changeWidth', function(e) {
  console.log(e.data);
});

Or using jQuery:

$('#drawerjs').on('changeWidth', function() {
  console.log('fired on changeWidth!!');
});

changeCompactWidth

Source:
Properties:
Name Type Description
data Object

The Drawerjs data instance.

This event is fired when the drawer has changed compact width.

Type:
  • Object
Examples
document.querySelector('#drawerjs').addEventListener('changeCompactWidth', function(e) {
  console.log(e.data);
});

Or using jQuery:

$('#drawerjs').on('changeCompactWidth', function() {
  console.log('fired on changeCompactWidth!!');
});

forcePos

Source:
Properties:
Name Type Description
data Object

The Drawerjs data instance.

This event is fired when the drawer has force position.

Type:
  • Object
Examples
document.querySelector('#drawerjs').addEventListener('forcePos', function(e) {
  console.log(e.data);
});

Or using jQuery:

$('#drawerjs').on('forcePos', function() {
  console.log('fired on forcePos!!');
});

custom

Source:
Properties:
Name Type Description
data Object

The Drawerjs data instance.

This event is fired when the drawer has customized.

Type:
  • Object
Examples
document.querySelector('#drawerjs').addEventListener('custom', function(e) {
  console.log(e.data);
});

Or using jQuery:

$('#drawerjs').on('custom', function() {
  console.log('fired on custom!!');
});