fixed semantics of a drawer that is forced closed

This commit is contained in:
Kevin Ross 2016-01-20 17:47:37 -06:00
parent 60b085280e
commit 0b9e7f53ab
3 changed files with 10 additions and 5 deletions

View File

@ -31,14 +31,14 @@ $(document).ready(function() { // document ready is a little convoluted because
var $btn = $(this)
var $icon = $btn.find('.material-icons')
if ($icon.text() == 'visibility_off') {
if ($icon.text() == 'visibility') {
$container.addClass('mdb-drawer-out') // demo only, regardless of the responsive class, we want to force it close
$icon.text('visibility')
$icon.text('visibility_off')
$btn.attr('title', 'Drawer allow responsive opening')
}
else {
$container.removeClass('mdb-drawer-out') // demo only, regardless of the responsive class, we want to force it open
$icon.text('visibility_off')
$icon.text('visibility')
$btn.attr('title', 'Drawer force closed')
}
})

View File

@ -32,7 +32,7 @@ js: example.js
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<button class="btn mdb-btn-icon" title="Drawer force close" id="drawer-visibility">
<i class="material-icons">visibility_off</i>
<i class="material-icons">visibility</i>
</button>
</li>
<li class="nav-item">

View File

@ -21,6 +21,7 @@ const Drawer = (($) => {
const ClassName = {
IN: 'in',
DRAWER_IN: `mdb-drawer-in`,
DRAWER_OUT: `mdb-drawer-out`,
DRAWER: 'mdb-layout-drawer',
CONTAINER: 'mdb-layout-container'
}
@ -81,7 +82,7 @@ const Drawer = (($) => {
}
show() {
if (this._isOpen()) {
if (this._isForcedClosed() || this._isOpen()) {
return
}
@ -121,6 +122,10 @@ const Drawer = (($) => {
return this.$container.hasClass(ClassName.DRAWER_IN)
}
_isForcedClosed() {
return this.$container.hasClass(ClassName.DRAWER_OUT)
}
_addAria() {
let isOpen = this._isOpen()
this.$element.attr('aria-expanded', isOpen)