added ability for auto collapse sidebar option
This commit is contained in:
parent
42568b9b8d
commit
9c640e0f6f
|
@ -187,4 +187,4 @@ const Layout = (($) => {
|
|||
return Layout
|
||||
})(jQuery)
|
||||
|
||||
export default Layout
|
||||
export default Layout
|
||||
|
|
|
@ -22,6 +22,7 @@ const PushMenu = (($) => {
|
|||
}
|
||||
|
||||
const Default = {
|
||||
autoCollapseSize: false,
|
||||
screenCollapseSize: 768
|
||||
}
|
||||
|
||||
|
@ -51,6 +52,8 @@ const PushMenu = (($) => {
|
|||
this._element = element
|
||||
this._options = $.extend({}, Default, options)
|
||||
|
||||
this._init()
|
||||
|
||||
if (!$(Selector.OVERLAY).length) {
|
||||
this._addOverlay()
|
||||
}
|
||||
|
@ -72,23 +75,48 @@ const PushMenu = (($) => {
|
|||
$(this._element).trigger(collapsedEvent)
|
||||
}
|
||||
|
||||
toggle() {
|
||||
let isShown
|
||||
|
||||
isShown() {
|
||||
if ($(window).width() >= this._options.screenCollapseSize) {
|
||||
isShown = !$(Selector.BODY).hasClass(ClassName.COLLAPSED)
|
||||
return !$(Selector.BODY).hasClass(ClassName.COLLAPSED)
|
||||
} else {
|
||||
isShown = $(Selector.BODY).hasClass(ClassName.OPEN)
|
||||
return $(Selector.BODY).hasClass(ClassName.OPEN)
|
||||
}
|
||||
|
||||
if (isShown) {
|
||||
}
|
||||
|
||||
toggle() {
|
||||
if (this.isShown()) {
|
||||
this.collapse()
|
||||
} else {
|
||||
this.show()
|
||||
}
|
||||
}
|
||||
|
||||
autoCollapse() {
|
||||
console.log(this._options)
|
||||
if (this._options.autoCollapseSize) {
|
||||
if ($(window).width() <= this._options.autoCollapseSize) {
|
||||
if (this.isShown()) {
|
||||
this.toggle()
|
||||
}
|
||||
} else {
|
||||
if (!this.isShown()) {
|
||||
this.toggle()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Private
|
||||
|
||||
_init() {
|
||||
this.autoCollapse()
|
||||
|
||||
$(window).resize(() => {
|
||||
this.autoCollapse()
|
||||
})
|
||||
}
|
||||
|
||||
_addOverlay() {
|
||||
const overlay = $('<div />', {
|
||||
id: 'sidebar-overlay'
|
||||
|
@ -113,7 +141,7 @@ const PushMenu = (($) => {
|
|||
$(this).data(DATA_KEY, data)
|
||||
}
|
||||
|
||||
if (operation) {
|
||||
if (operation === 'init') {
|
||||
data[operation]()
|
||||
}
|
||||
})
|
||||
|
@ -137,6 +165,10 @@ const PushMenu = (($) => {
|
|||
PushMenu._jQueryInterface.call($(button), 'toggle')
|
||||
})
|
||||
|
||||
$(window).on('load', () => {
|
||||
PushMenu._jQueryInterface.call($(Selector.TOGGLE_BUTTON))
|
||||
})
|
||||
|
||||
/**
|
||||
* jQuery API
|
||||
* ====================================================
|
||||
|
|
49
dist/js/adminlte.js
vendored
49
dist/js/adminlte.js
vendored
|
@ -382,6 +382,7 @@ var PushMenu = function ($) {
|
|||
};
|
||||
|
||||
var Default = {
|
||||
autoCollapseSize: false,
|
||||
screenCollapseSize: 768
|
||||
};
|
||||
|
||||
|
@ -413,6 +414,8 @@ var PushMenu = function ($) {
|
|||
this._element = element;
|
||||
this._options = $.extend({}, Default, options);
|
||||
|
||||
this._init();
|
||||
|
||||
if (!$(Selector.OVERLAY).length) {
|
||||
this._addOverlay();
|
||||
}
|
||||
|
@ -434,34 +437,58 @@ var PushMenu = function ($) {
|
|||
$(this._element).trigger(collapsedEvent);
|
||||
};
|
||||
|
||||
PushMenu.prototype.toggle = function toggle() {
|
||||
var isShown = void 0;
|
||||
|
||||
PushMenu.prototype.isShown = function isShown() {
|
||||
if ($(window).width() >= this._options.screenCollapseSize) {
|
||||
isShown = !$(Selector.BODY).hasClass(ClassName.COLLAPSED);
|
||||
return !$(Selector.BODY).hasClass(ClassName.COLLAPSED);
|
||||
} else {
|
||||
isShown = $(Selector.BODY).hasClass(ClassName.OPEN);
|
||||
return $(Selector.BODY).hasClass(ClassName.OPEN);
|
||||
}
|
||||
};
|
||||
|
||||
if (isShown) {
|
||||
PushMenu.prototype.toggle = function toggle() {
|
||||
if (this.isShown()) {
|
||||
this.collapse();
|
||||
} else {
|
||||
this.show();
|
||||
}
|
||||
};
|
||||
|
||||
PushMenu.prototype.autoCollapse = function autoCollapse() {
|
||||
console.log(this._options);
|
||||
if (this._options.autoCollapseSize) {
|
||||
if ($(window).width() <= this._options.autoCollapseSize) {
|
||||
if (this.isShown()) {
|
||||
this.toggle();
|
||||
}
|
||||
} else {
|
||||
if (!this.isShown()) {
|
||||
this.toggle();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Private
|
||||
|
||||
PushMenu.prototype._init = function _init() {
|
||||
var _this = this;
|
||||
|
||||
this.autoCollapse();
|
||||
|
||||
$(window).resize(function () {
|
||||
_this.autoCollapse();
|
||||
});
|
||||
};
|
||||
|
||||
PushMenu.prototype._addOverlay = function _addOverlay() {
|
||||
var _this = this;
|
||||
var _this2 = this;
|
||||
|
||||
var overlay = $('<div />', {
|
||||
id: 'sidebar-overlay'
|
||||
});
|
||||
|
||||
overlay.on('click', function () {
|
||||
_this.collapse();
|
||||
_this2.collapse();
|
||||
});
|
||||
|
||||
$(Selector.WRAPPER).append(overlay);
|
||||
|
@ -479,7 +506,7 @@ var PushMenu = function ($) {
|
|||
$(this).data(DATA_KEY, data);
|
||||
}
|
||||
|
||||
if (operation) {
|
||||
if (operation === 'init') {
|
||||
data[operation]();
|
||||
}
|
||||
});
|
||||
|
@ -505,6 +532,10 @@ var PushMenu = function ($) {
|
|||
PushMenu._jQueryInterface.call($(button), 'toggle');
|
||||
});
|
||||
|
||||
$(window).on('load', function () {
|
||||
PushMenu._jQueryInterface.call($(Selector.TOGGLE_BUTTON));
|
||||
});
|
||||
|
||||
/**
|
||||
* jQuery API
|
||||
* ====================================================
|
||||
|
|
2
dist/js/adminlte.js.map
vendored
2
dist/js/adminlte.js.map
vendored
File diff suppressed because one or more lines are too long
2
dist/js/adminlte.min.js
vendored
2
dist/js/adminlte.min.js
vendored
File diff suppressed because one or more lines are too long
2
dist/js/adminlte.min.js.map
vendored
2
dist/js/adminlte.min.js.map
vendored
File diff suppressed because one or more lines are too long
|
@ -37,7 +37,7 @@
|
|||
<!-- Left navbar links -->
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-widget="pushmenu" data-screen-collapse-size="768" href="#"><i class="fas fa-bars"></i></a>
|
||||
<a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a>
|
||||
</li>
|
||||
<li class="nav-item d-none d-sm-inline-block">
|
||||
<a href="index3.html" class="nav-link">Home</a>
|
||||
|
@ -549,7 +549,7 @@
|
|||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-right">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active">Dashboard v2</li>
|
||||
<li class="breadcrumb-item active">Dashboard v1</li>
|
||||
</ol>
|
||||
</div><!-- /.col -->
|
||||
</div><!-- /.row -->
|
||||
|
|
Loading…
Reference in a new issue