2015-07-15 12:30:11 +08:00
|
|
|
/**
|
|
|
|
* The `Drawer` class controls the page's drawer. The drawer is the area the
|
|
|
|
* slides out from the left on mobile devices; it contains the header and the
|
|
|
|
* footer.
|
|
|
|
*/
|
2015-06-24 10:14:53 +08:00
|
|
|
export default class Drawer {
|
2015-07-15 12:30:11 +08:00
|
|
|
constructor() {
|
|
|
|
// Set up an event handler so that whenever the content area is tapped,
|
|
|
|
// the drawer will close.
|
2020-04-17 17:57:55 +08:00
|
|
|
$('#content').click((e) => {
|
2015-07-15 12:30:11 +08:00
|
|
|
if (this.isOpen()) {
|
|
|
|
e.preventDefault();
|
|
|
|
this.hide();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Check whether or not the drawer is currently open.
|
|
|
|
*
|
|
|
|
* @return {Boolean}
|
|
|
|
* @public
|
|
|
|
*/
|
|
|
|
isOpen() {
|
2015-07-17 13:17:49 +08:00
|
|
|
return $('#app').hasClass('drawerOpen');
|
2015-07-15 12:30:11 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Hide the drawer.
|
|
|
|
*
|
|
|
|
* @public
|
|
|
|
*/
|
2015-06-24 10:14:53 +08:00
|
|
|
hide() {
|
2015-07-17 13:17:49 +08:00
|
|
|
$('#app').removeClass('drawerOpen');
|
|
|
|
|
|
|
|
if (this.$backdrop) this.$backdrop.remove();
|
2015-06-24 10:14:53 +08:00
|
|
|
}
|
|
|
|
|
2015-07-15 12:30:11 +08:00
|
|
|
/**
|
|
|
|
* Show the drawer.
|
|
|
|
*
|
|
|
|
* @public
|
|
|
|
*/
|
2015-06-24 10:14:53 +08:00
|
|
|
show() {
|
2015-07-17 13:17:49 +08:00
|
|
|
$('#app').addClass('drawerOpen');
|
2015-06-24 10:14:53 +08:00
|
|
|
|
2015-07-17 13:17:49 +08:00
|
|
|
this.$backdrop = $('<div/>')
|
|
|
|
.addClass('drawer-backdrop fade')
|
|
|
|
.appendTo('body')
|
|
|
|
.click(() => this.hide());
|
|
|
|
|
|
|
|
setTimeout(() => this.$backdrop.addClass('in'));
|
2015-06-24 10:14:53 +08:00
|
|
|
}
|
|
|
|
}
|