Constructor
new Drawerjs(options)
- Source:
Create a Drawer.
Examples
<main id="wrapper">
<!-- the Drawer -->
<aside id="drawerjs" class="drawerjs">
<!-- your awesome navigations here... -->
<h1>Drawerjs</h1>
</aside>
<!-- the Holder -->
<section id="drawerjs-holder" class="drawerjs-holder">
<h2>Site content</h2>
</section>
</main>
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 |
holder |
String |
'#drawerjs-holder'
|
The Holder element selector, usually targeted to site/app main content. Set to |
holderClass |
String |
'drawerjs-holder'
|
The css class name that will added to holder selector automatically. |
nested |
Boolean |
false
|
Indicator for nested Drawer. Set to |
open |
Boolean |
false
|
Open/close the Drawer. |
pinned |
Boolean |
false
|
If |
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 |
compactWidth |
Number | String |
'60px'
|
The Drawer width for compact size. Support for any css units like |
useCustom |
Boolean | Object |
false
|
Use custom skins on the Drawer and the Holder. Both are support |
holderBehavior |
Boolean |
true
|
If Activated, the Holder will translate the content when screen width < |
toggleScreen |
Number | String |
'992px'
|
The Drawer use it to initialize the default options, depend on screen sizes. When screen width < |
backdrop |
Boolean |
true
|
Enable/disable the Drawer backdrop. When this property is |
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 target element. |
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 target element. |
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:
Determine 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:
Determine 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:
Determine 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
|
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
|
Fires:
Returns:
The Drawer instance.
- Type
- Object
Events
drawer: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('drawer:init', function(e) {
console.log(e.data);
});
$('#drawerjs').on('drawer:init', function() {
console.log('fired on drawer:init!!');
});
drawer: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('drawer:align', function(e) {
console.log(e.data);
});
$('#drawerjs').on('drawer:align', function() {
console.log('fired on drawer:align!!');
});
drawer: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('drawer:compact', function(e) {
console.log(e.data);
});
$('#drawerjs').on('drawer:compact', function() {
console.log('fired on drawer:compact!!');
});
drawer: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('drawer:fixed', function(e) {
console.log(e.data);
});
$('#drawerjs').on('drawer:fixed', function() {
console.log('fired on drawer:fixed!!');
});
drawer: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('drawer:open', function(e) {
console.log(e.data);
});
$('#drawerjs').on('drawer:open', function() {
console.log('fired on drawer:open!!');
});
drawer: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('drawer:close', function(e) {
console.log(e.data);
});
$('#drawerjs').on('drawer:close', function() {
console.log('fired on drawer:close!!');
});
drawer: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('drawer:pinned', function(e) {
console.log(e.data);
});
$('#drawerjs').on('drawer:pinned', function() {
console.log('fired on drawer:pinned!!');
});
drawer: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('drawer:changeWidth', function(e) {
console.log(e.data);
});
$('#drawerjs').on('drawer:changeWidth', function() {
console.log('fired on drawer:changeWidth!!');
});
drawer: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('drawer:changeCompactWidth', function(e) {
console.log(e.data);
});
$('#drawerjs').on('drawer:changeCompactWidth', function() {
console.log('fired on drawer:changeCompactWidth!!');
});
drawer: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('drawer:forcePos', function(e) {
console.log(e.data);
});
$('#drawerjs').on('drawer:forcePos', function() {
console.log('fired on drawer:forcePos!!');
});
drawer: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('drawer:custom', function(e) {
console.log(e.data);
});
$('#drawerjs').on('drawer:custom', function() {
console.log('fired on drawer:custom!!');
});