AdminLTE/build/js/Treeview.js

180 lines
4.6 KiB
JavaScript
Raw Normal View History

2015-11-11 19:29:54 +00:00
/**
* --------------------------------------------
* AdminLTE Treeview.js
* License MIT
* --------------------------------------------
*/
2020-06-02 13:23:22 +00:00
import $ from 'jquery'
2015-11-11 19:29:54 +00:00
2020-06-02 13:23:22 +00:00
/**
* Constants
* ====================================================
*/
2015-11-11 19:29:54 +00:00
2020-06-02 13:23:22 +00:00
const NAME = 'Treeview'
const DATA_KEY = 'lte.treeview'
const EVENT_KEY = `.${DATA_KEY}`
const JQUERY_NO_CONFLICT = $.fn[NAME]
const EVENT_EXPANDED = `expanded${EVENT_KEY}`
const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
const EVENT_LOAD_DATA_API = `load${EVENT_KEY}`
2020-06-02 13:23:22 +00:00
const SELECTOR_LI = '.nav-item'
const SELECTOR_LINK = '.nav-link'
const SELECTOR_TREEVIEW_MENU = '.nav-treeview'
const SELECTOR_OPEN = '.menu-open'
const SELECTOR_DATA_WIDGET = '[data-widget="treeview"]'
2020-06-02 13:23:22 +00:00
const CLASS_NAME_OPEN = 'menu-open'
const CLASS_NAME_IS_OPENING = 'menu-is-opening'
const CLASS_NAME_SIDEBAR_COLLAPSED = 'sidebar-collapse'
2020-06-02 13:23:22 +00:00
const Default = {
trigger: `${SELECTOR_DATA_WIDGET} ${SELECTOR_LINK}`,
2020-06-02 13:23:22 +00:00
animationSpeed: 300,
accordion: true,
expandSidebar: false,
sidebarButtonSelector: '[data-widget="pushmenu"]'
}
2016-01-16 16:27:23 +00:00
2020-06-02 13:23:22 +00:00
/**
* Class Definition
* ====================================================
*/
class Treeview {
constructor(element, config) {
this._config = config
this._element = element
2016-01-16 16:27:23 +00:00
}
2020-06-02 13:23:22 +00:00
// Public
2015-11-11 19:29:54 +00:00
_init() {
2020-12-30 07:29:46 +00:00
$(`${SELECTOR_LI}${SELECTOR_OPEN} ${SELECTOR_TREEVIEW_MENU}${SELECTOR_OPEN}`).css('display', 'block')
2020-06-02 13:23:22 +00:00
this._setupListeners()
}
2016-01-16 16:27:23 +00:00
2020-06-02 13:23:22 +00:00
expand(treeviewMenu, parentLi) {
const expandedEvent = $.Event(EVENT_EXPANDED)
2016-01-16 16:27:23 +00:00
2020-06-02 13:23:22 +00:00
if (this._config.accordion) {
const openMenuLi = parentLi.siblings(SELECTOR_OPEN).first()
const openTreeview = openMenuLi.find(SELECTOR_TREEVIEW_MENU).first()
2020-06-02 13:23:22 +00:00
this.collapse(openTreeview, openMenuLi)
}
2016-01-16 16:27:23 +00:00
parentLi.addClass(CLASS_NAME_IS_OPENING)
2020-06-02 13:23:22 +00:00
treeviewMenu.stop().slideDown(this._config.animationSpeed, () => {
parentLi.addClass(CLASS_NAME_OPEN)
2020-06-02 13:23:22 +00:00
$(this._element).trigger(expandedEvent)
})
2020-06-02 13:23:22 +00:00
if (this._config.expandSidebar) {
this._expandSidebar()
2016-01-16 16:27:23 +00:00
}
2020-06-02 13:23:22 +00:00
}
2016-01-16 16:27:23 +00:00
2020-06-02 13:23:22 +00:00
collapse(treeviewMenu, parentLi) {
const collapsedEvent = $.Event(EVENT_COLLAPSED)
2016-01-16 16:27:23 +00:00
parentLi.removeClass(`${CLASS_NAME_IS_OPENING} ${CLASS_NAME_OPEN}`)
2020-06-02 13:23:22 +00:00
treeviewMenu.stop().slideUp(this._config.animationSpeed, () => {
$(this._element).trigger(collapsedEvent)
treeviewMenu.find(`${SELECTOR_OPEN} > ${SELECTOR_TREEVIEW_MENU}`).slideUp()
treeviewMenu.find(SELECTOR_OPEN).removeClass(`${CLASS_NAME_IS_OPENING} ${CLASS_NAME_OPEN}`)
2020-06-02 13:23:22 +00:00
})
}
2016-01-16 16:27:23 +00:00
2020-06-02 13:23:22 +00:00
toggle(event) {
const $relativeTarget = $(event.currentTarget)
const $parent = $relativeTarget.parent()
2019-09-19 07:57:49 +00:00
2020-06-13 12:34:10 +00:00
let treeviewMenu = $parent.find(`> ${SELECTOR_TREEVIEW_MENU}`)
2016-01-16 16:27:23 +00:00
if (!treeviewMenu.is(SELECTOR_TREEVIEW_MENU)) {
if (!$parent.is(SELECTOR_LI)) {
2020-06-13 12:34:10 +00:00
treeviewMenu = $parent.parent().find(`> ${SELECTOR_TREEVIEW_MENU}`)
2020-06-02 13:23:22 +00:00
}
2019-09-16 12:40:38 +00:00
if (!treeviewMenu.is(SELECTOR_TREEVIEW_MENU)) {
2020-06-02 13:23:22 +00:00
return
2016-01-16 16:27:23 +00:00
}
2020-06-02 13:23:22 +00:00
}
2020-05-30 13:44:20 +00:00
2020-06-02 13:23:22 +00:00
event.preventDefault()
2016-01-16 16:27:23 +00:00
const parentLi = $relativeTarget.parents(SELECTOR_LI).first()
const isOpen = parentLi.hasClass(CLASS_NAME_OPEN)
2016-01-16 16:27:23 +00:00
2020-06-02 13:23:22 +00:00
if (isOpen) {
this.collapse($(treeviewMenu), parentLi)
} else {
this.expand($(treeviewMenu), parentLi)
2016-01-16 16:27:23 +00:00
}
2020-06-02 13:23:22 +00:00
}
2016-01-16 16:27:23 +00:00
2020-06-02 13:23:22 +00:00
// Private
2015-11-11 19:29:54 +00:00
2020-06-02 13:23:22 +00:00
_setupListeners() {
const elementId = this._element.attr('id') !== undefined ? `#${this._element.attr('id')}` : ''
$(document).on('click', `${elementId}${this._config.trigger}`, event => {
2020-06-02 13:23:22 +00:00
this.toggle(event)
})
}
2016-01-16 16:27:23 +00:00
2020-06-02 13:23:22 +00:00
_expandSidebar() {
if ($('body').hasClass(CLASS_NAME_SIDEBAR_COLLAPSED)) {
2020-06-02 13:23:22 +00:00
$(this._config.sidebarButtonSelector).PushMenu('expand')
}
2020-06-02 13:23:22 +00:00
}
2020-06-02 13:23:22 +00:00
// Static
static _jQueryInterface(config) {
return this.each(function () {
let data = $(this).data(DATA_KEY)
const _config = $.extend({}, Default, typeof config === 'object' ? config : $(this).data())
2015-11-11 19:29:54 +00:00
2020-06-02 13:23:22 +00:00
if (!data) {
data = new Treeview($(this), _config)
2020-06-02 13:23:22 +00:00
$(this).data(DATA_KEY, data)
data._init()
} else if (typeof config === 'string') {
if (typeof data[config] === 'undefined') {
throw new TypeError(`No method named "${config}"`)
}
2016-01-16 16:27:23 +00:00
2020-06-02 13:23:22 +00:00
data[config]()
} else if (typeof config === 'undefined') {
data._init()
2020-06-02 13:23:22 +00:00
}
})
2015-11-11 19:29:54 +00:00
}
2020-06-02 13:23:22 +00:00
}
2015-11-11 19:29:54 +00:00
2020-06-02 13:23:22 +00:00
/**
* Data API
* ====================================================
*/
2016-01-16 16:27:23 +00:00
$(window).on(EVENT_LOAD_DATA_API, () => {
$(SELECTOR_DATA_WIDGET).each(function () {
2020-06-02 13:23:22 +00:00
Treeview._jQueryInterface.call($(this), 'init')
2016-01-16 16:27:23 +00:00
})
2020-06-02 13:23:22 +00:00
})
2016-01-16 16:27:23 +00:00
2020-06-02 13:23:22 +00:00
/**
* jQuery API
* ====================================================
*/
2015-11-11 19:29:54 +00:00
2020-06-02 13:23:22 +00:00
$.fn[NAME] = Treeview._jQueryInterface
$.fn[NAME].Constructor = Treeview
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT
return Treeview._jQueryInterface
}
2018-02-03 23:45:19 +00:00
export default Treeview