mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-16 14:47:14 +03:00
47 lines
1.5 KiB
JavaScript
47 lines
1.5 KiB
JavaScript
function clearDrawerClasses($container) {
|
|
var classes = ["mdb-drawer-pos-f-l", "mdb-drawer-pos-f-r", "mdb-drawer-pos-f-t", "mdb-drawer-pos-f-b"];
|
|
|
|
$.each(classes, function (index, value) {
|
|
$container.removeClass(value)
|
|
})
|
|
}
|
|
|
|
function setDrawerPosition(position) {
|
|
var $container = $('.mdb-layout-container')
|
|
|
|
clearDrawerClasses($container)
|
|
$container.addClass(position)
|
|
}
|
|
|
|
$(document).ready(function() { // document ready is a little convoluted because this executes before jquery.
|
|
var buttons = ["drawer-pos-f-l", "drawer-pos-f-r", "drawer-pos-f-t", "drawer-pos-f-b"]
|
|
|
|
$.each(buttons, function (index, position) {
|
|
$('#' + position).click(function() {
|
|
setDrawerPosition('mdb-' + position)
|
|
})
|
|
})
|
|
|
|
// add a toggle for drawer visibility that shows anytime
|
|
$('#drawer-visibility').click(function () {
|
|
var $container = $('.mdb-layout-container')
|
|
|
|
// once clicked, just do away with responsive marker
|
|
//$container.removeClass('mdb-drawer-in-md')
|
|
|
|
var $btn = $(this)
|
|
var $icon = $btn.find('.material-icons')
|
|
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_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')
|
|
$btn.attr('title', 'Drawer force closed')
|
|
}
|
|
})
|
|
})
|
|
|