mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-09-21 03:19:09 +03:00
#822 drawer - removed mdb-drawer-out, it's always out unless it is a) responsively in, or b) marked with mdb-drawer-in
This commit is contained in:
Kevin Ross
parent
2cc4f7aa15
commit
0c073ef5ef
|
|
@ -31,12 +31,10 @@ $(document).ready(function() { // document ready is a little convoluted because
|
|||
|
||||
var $icon = $(this).find('.material-icons')
|
||||
if ($icon.text() == 'visibility_off') {
|
||||
$container.addClass('mdb-drawer-out')
|
||||
$container.removeClass('mdb-drawer-in') // demo only, regardless of the responsive class, we want to force it close
|
||||
$icon.text('visibility')
|
||||
}
|
||||
else {
|
||||
$container.removeClass('mdb-drawer-out')
|
||||
$container.addClass('mdb-drawer-in') // demo only, regardless of the responsive class, we want to force it open
|
||||
$icon.text('visibility_off')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -61,6 +61,8 @@ const DrawerToggle = (($) => {
|
|||
this.$layoutContainer = null
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ------------------------------------------------------------------------
|
||||
// private
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,9 @@ const Layout = (($) => {
|
|||
DRAWER: 'mdb-layout-drawer',
|
||||
CONTENT: 'mdb-layout-content',
|
||||
DRAWER_BTN: 'mdb-layout-drawer-button', // FIXME: swithch to data-drawer attr finder or something like that, see navbar toggler
|
||||
BACKDROP: 'mdb-layout-backdrop'
|
||||
BACKDROP: 'mdb-layout-backdrop',
|
||||
|
||||
DRAWER_IN: `mdb-drawer-in`
|
||||
}
|
||||
|
||||
const Selector = {
|
||||
|
|
@ -119,6 +121,54 @@ const Layout = (($) => {
|
|||
//}
|
||||
}
|
||||
|
||||
|
||||
|
||||
toggleDrawer() {
|
||||
if ($(this._element).hasClass(ClassName.DRAWER_IN)) {
|
||||
this.hide()
|
||||
} else {
|
||||
this.show()
|
||||
}
|
||||
}
|
||||
|
||||
show() {
|
||||
if ($(this._element).hasClass(ClassName.IN)) {
|
||||
return
|
||||
}
|
||||
|
||||
this._element.setAttribute('aria-expanded', true)
|
||||
|
||||
if (this._triggerArray.length) {
|
||||
$(this._triggerArray)
|
||||
.removeClass(ClassName.COLLAPSED)
|
||||
.attr('aria-expanded', true)
|
||||
}
|
||||
|
||||
$(this._element)
|
||||
.removeClass(ClassName.COLLAPSING)
|
||||
.addClass(ClassName.COLLAPSE)
|
||||
.addClass(ClassName.IN)
|
||||
}
|
||||
|
||||
hide() {
|
||||
if (this._isTransitioning || !$(this._element).hasClass(ClassName.IN)) {
|
||||
return
|
||||
}
|
||||
|
||||
this._element.setAttribute('aria-expanded', false)
|
||||
|
||||
if (this._triggerArray.length) {
|
||||
$(this._triggerArray)
|
||||
.addClass(ClassName.COLLAPSED)
|
||||
.attr('aria-expanded', false)
|
||||
}
|
||||
|
||||
$(this._element)
|
||||
.removeClass(ClassName.COLLAPSING)
|
||||
.addClass(ClassName.COLLAPSE)
|
||||
.trigger(Event.HIDDEN)
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------------
|
||||
// private
|
||||
|
||||
|
|
|
|||
|
|
@ -55,11 +55,6 @@
|
|||
// NOTE: mdb-drawer-in-* uses media-breakpoint-up()
|
||||
//
|
||||
//
|
||||
// mdb-drawer-out
|
||||
// A marker class that will _force_ the drawer closed regardless of the responsive class present. If (for some
|
||||
// strange reason) both mdb-drawer-out and mdb-drawer-in are present, it appears that the closed option wins.
|
||||
//
|
||||
//
|
||||
// mdb-drawer-overlay, mdb-drawer-overlay-sm, mdb-drawer-overlay-md, mdb-drawer-overlay-lg
|
||||
// We iterate over the standard grid breakpoints, but we also need styles for the simpler `mdb-drawer-overlay`.
|
||||
// Since the xs size is 0, instead of using `mdb-drawer-overlay-xs`, we create `mdb-drawer-overlay` meaning always overlay.
|
||||
|
|
@ -70,26 +65,23 @@
|
|||
//
|
||||
// Drawer open positioning, and style options (push is default, overlay is optional)
|
||||
// - first eliminate positioning or sizing rules if the drawer is already forced closed (which is the default behavior above)
|
||||
:not(.mdb-drawer-out) {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include mdb-drawer-x-open-up($mdb-layout-drawer-x-size, $breakpoint);
|
||||
@include mdb-drawer-y-open-up($mdb-layout-drawer-y-size, $breakpoint);
|
||||
|
||||
@include mdb-drawer-x-open-up($mdb-layout-drawer-x-size, $breakpoint);
|
||||
@include mdb-drawer-y-open-up($mdb-layout-drawer-y-size, $breakpoint);
|
||||
|
||||
@include mdb-drawer-x-overlay-down($breakpoint);
|
||||
@include mdb-drawer-y-overlay-down($breakpoint);
|
||||
}
|
||||
@include mdb-drawer-x-overlay-down($breakpoint);
|
||||
@include mdb-drawer-y-overlay-down($breakpoint);
|
||||
}
|
||||
|
||||
////----
|
||||
//// Example 1: creates a media responsive kitchen-sink-drawer that pairs with mdb-drawer-in-lg and allows for triggers mdb-drawer-in && mdb-drawer-out
|
||||
////
|
||||
//// Used with <div class="mdb-layout-container mdb-drawer-pos-f-l mdb-drawer-overlay-md-down mdb-drawer-in-lg-up kitchen-sink-drawer">
|
||||
////
|
||||
//.kitchen-sink-drawer:not(.mdb-drawer-out) {
|
||||
//----
|
||||
// Example 1: creates a media responsive kitchen-sink-drawer that pairs with mdb-drawer-in-lg and allows for the mdb-drawer-in trigger
|
||||
//
|
||||
// Used with <div class="mdb-layout-container mdb-drawer-pos-f-l mdb-drawer-overlay-md-down mdb-drawer-in-lg-up kitchen-sink-drawer">
|
||||
//
|
||||
//.kitchen-sink-drawer {
|
||||
// @each $breakpoint in (xs lg) {
|
||||
// // xs gives us the static marker class i.e. mdb-drawer-in && mdb-drawer-out, while lg gives us a responsive open/overlay
|
||||
// // xs gives us the static marker class i.e. mdb-drawer-in, while lg gives us a responsive open/overlay
|
||||
// @include mdb-drawer-x-closed(500px);
|
||||
// @include mdb-drawer-x-open-up(500px, $breakpoint);
|
||||
// }
|
||||
|
|
@ -97,13 +89,13 @@
|
|||
// @include mdb-drawer-x-overlay-down(md);
|
||||
//}
|
||||
//
|
||||
////----
|
||||
//// Example 2: creates a NON-responsive kitchen-sink-drawer and allows for triggers mdb-drawer-in && mdb-drawer-out
|
||||
////
|
||||
//// Used with <div class="mdb-layout-container mdb-drawer-pos-f-l mdb-drawer-in kitchen-sink-drawer-triggered">
|
||||
////
|
||||
//.kitchen-sink-drawer-triggered:not(.mdb-drawer-out) {
|
||||
// @include mdb-drawer-x-closed(500px); // closed by default, also can be triggered with mdb-drawer-out
|
||||
//----
|
||||
// Example 2: creates a NON-responsive kitchen-sink-drawer and allows for the mdb-drawer-in trigger
|
||||
//
|
||||
// Used with <div class="mdb-layout-container mdb-drawer-pos-f-l mdb-drawer-in kitchen-sink-drawer-triggered">
|
||||
//
|
||||
//.kitchen-sink-drawer-triggered {
|
||||
// @include mdb-drawer-x-closed(500px); // closed by default
|
||||
// @include mdb-drawer-x-open(500px); // triggered with mdb-drawer-in
|
||||
// @include mdb-drawer-x-overlay(); // overlay by default, no other classes necessary
|
||||
//}
|
||||
|
|
|
|||
|
|
@ -2,30 +2,30 @@
|
|||
//
|
||||
|
||||
//----
|
||||
// Example 1: creates a media responsive kitchen-sink-drawer that pairs with mdb-drawer-in-lg and allows for triggers mdb-drawer-in && mdb-drawer-out
|
||||
// Example 1: creates a media responsive kitchen-sink-drawer that pairs with mdb-drawer-in-lg and allows for the mdb-drawer-in trigger
|
||||
//
|
||||
// Used with <div class="mdb-layout-container mdb-drawer-pos-f-l mdb-drawer-overlay-md mdb-drawer-in-lg kitchen-sink-drawer">
|
||||
// Used with <div class="mdb-layout-container mdb-drawer-pos-f-l mdb-drawer-overlay-md-down mdb-drawer-in-lg-up kitchen-sink-drawer">
|
||||
//
|
||||
//.kitchen-sink-drawer {
|
||||
// @each $breakpoint in (xs lg) {
|
||||
// // xs gives us the static marker class i.e. mdb-drawer-in, while lg gives us a responsive open/overlay
|
||||
// @include mdb-drawer-x-closed(500px);
|
||||
// @include mdb-drawer-x-open-up(500px, $breakpoint);
|
||||
// }
|
||||
// // Create a responsive overlay at mdb-drawer-overlay-md-down - this specificity is required
|
||||
// @include mdb-drawer-x-overlay-down(md);
|
||||
//}
|
||||
//
|
||||
// .kitchen-sink-drawer:not(.mdb-drawer-out) {
|
||||
// @each $breakpoint in (xs lg) {
|
||||
// // xs gives us the static marker class i.e. mdb-drawer-in && mdb-drawer-out, while lg gives us a responsive open/overlay
|
||||
// @include mdb-drawer-x-closed(500px);
|
||||
// @include mdb-drawer-x-open-up(500px, $breakpoint);
|
||||
// }
|
||||
// // Create a responsive overlay at mdb-drawer-overlay-md - this specificity is required
|
||||
// @include mdb-drawer-x-overlay-down(md);
|
||||
// }
|
||||
|
||||
//----
|
||||
// Example 2: creates a NON-responsive kitchen-sink-drawer and allows for triggers mdb-drawer-in && mdb-drawer-out
|
||||
// Example 2: creates a NON-responsive kitchen-sink-drawer and allows for the mdb-drawer-in trigger
|
||||
//
|
||||
// Used with <div class="mdb-layout-container mdb-drawer-pos-f-l mdb-drawer-in kitchen-sink-drawer-triggered">
|
||||
//
|
||||
// .kitchen-sink-drawer-triggered:not(.mdb-drawer-out) {
|
||||
// @include mdb-drawer-x-closed(500px); // closed by default, also can be triggered with mdb-drawer-out
|
||||
// @include mdb-drawer-x-open(500px); // triggered with mdb-drawer-in
|
||||
// @include mdb-drawer-x-overlay(); // overlay by default, no other classes necessary
|
||||
// }
|
||||
//.kitchen-sink-drawer-triggered {
|
||||
// @include mdb-drawer-x-closed(500px); // closed by default
|
||||
// @include mdb-drawer-x-open(500px); // triggered with mdb-drawer-in
|
||||
// @include mdb-drawer-x-overlay(); // overlay by default, no other classes necessary
|
||||
//}
|
||||
|
||||
@mixin mdb-drawer-x-closed($size) {
|
||||
@each $side, $abbrev in (left: l, right: r) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user