github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

add collapsed-done event for control-sidebar and pushmenu

pull/3950/head
REJack 2021-09-18 00:21:26 +02:00
parent 791a8462ed
commit 9e1de03c2d
4 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
build/js/ControlSidebar.js
View File

@ -18,6 +18,7 @@ const EVENT_KEY = `.${DATA_KEY}`
const JQUERY_NO_CONFLICT = $.fn[NAME]
const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
const EVENT_COLLAPSED_DONE = `collapsed-done${EVENT_KEY}`
const EVENT_EXPANDED = `expanded${EVENT_KEY}`
const SELECTOR_CONTROL_SIDEBAR = '.control-sidebar'
@ -45,7 +46,8 @@ const Default = {
controlsidebarSlide: true,
scrollbarTheme: 'os-theme-light',
scrollbarAutoHide: 'l',
target: SELECTOR_CONTROL_SIDEBAR
target: SELECTOR_CONTROL_SIDEBAR,
animationSpeed: 300
}
/**
@ -79,6 +81,10 @@ class ControlSidebar {
}
$(this._element).trigger($.Event(EVENT_COLLAPSED))
setTimeout(() => {
$(this._element).trigger($.Event(EVENT_COLLAPSED_DONE))
}, this._config.animationSpeed)
}
show() {

8
build/js/PushMenu.js
View File

@ -18,6 +18,7 @@ const EVENT_KEY = `.${DATA_KEY}`
const JQUERY_NO_CONFLICT = $.fn[NAME]
const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
const EVENT_COLLAPSED_DONE = `collapsed-done${EVENT_KEY}`
const EVENT_SHOWN = `shown${EVENT_KEY}`
const SELECTOR_TOGGLE_BUTTON = '[data-widget="pushmenu"]'
@ -33,7 +34,8 @@ const CLASS_NAME_CLOSED = 'sidebar-closed'
const Default = {
autoCollapseSize: 992,
enableRemember: false,
noTransitionAfterReload: true
noTransitionAfterReload: true,
animationSpeed: 300
}
/**
@ -88,6 +90,10 @@ class PushMenu {
}
$(this._element).trigger($.Event(EVENT_COLLAPSED))
setTimeout(() => {
$(this._element).trigger($.Event(EVENT_COLLAPSED_DONE))
}, this._options.animationSpeed)
}
toggle() {

2
docs/javascript/control-sidebar.md
View File

@ -42,6 +42,7 @@ $("#my-toggle-button").ControlSidebar('toggle');
|scrollbarTheme | Boolean | `os-theme-light` | Scrollbar Theme used while SideBar Fixed
|scrollbarAutoHide | Boolean | `l` | Scrollbar auto-hide trigger
|target | String | `.control-sidebar` | Target control-sidebar to handle multiple control-sidebars.
|animationSpeed | Boolean | `300` | Set the animation/transition speed equals to the scss transition speed.
{: .table .table-bordered .bg-light}
> ##### Tip!
@ -59,6 +60,7 @@ $("#my-toggle-button").ControlSidebar('toggle');
|-|-
|expanded.lte.controlsidebar | Triggered after a control sidebar expands.
|collapsed.lte.controlsidebar | Triggered after a control sidebar collapses.
|collapsed-done.lte.controlsidebar | Triggered after a control sidebar is fully collapsed.
{: .table .table-bordered .bg-light}
Example: `$('#toggle-button').on('expanded.lte.controlsidebar', handleExpandedEvent)`

2
docs/javascript/push-menu.md
View File

@ -30,6 +30,7 @@ $('.sidebar-toggle-btn').PushMenu(options)
|autoCollapseSize | Boolean/Number | FALSE | Screen width in pixels to trigger auto collapse sidebar
|enableRemember | Boolean | FALSE | Remember sidebar state and set after page refresh.
|noTransitionAfterReload | Boolean | TRUE | Hold Transition after page refresh.
|animationSpeed | Boolean | `300` | Set the animation/transition speed equals to the scss transition speed.
{: .table .table-bordered .bg-light}
> ##### Tip!
@ -47,6 +48,7 @@ $('.sidebar-toggle-btn').PushMenu(options)
| Event Type | Description
|-|-
|collapsed.lte.pushmenu | Fired when the sidebar collapsed.
|collapsed-data.lte.pushmenu | Fired when the sidebar is fully collapsed.
|shown.lte.pushmenu | Fired when the sidebar shown.
{: .table .table-bordered .bg-light}