mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-02-09 00:00:41 +03:00
Code Issues Packages Projects Releases Wiki Activity

fixed semantics of a drawer that is forced closed

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/examples/dashboard/example.js
View File

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

2
docs/examples/dashboard/index.html
View File

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

7
js/src/drawer.js
View File

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