AdminLTE/build/js/Dropdown.js

147 lines
3.2 KiB
JavaScript
Raw Normal View History

/**
* --------------------------------------------
* AdminLTE Dropdown.js
* License MIT
* --------------------------------------------
*/
2020-06-02 13:23:22 +00:00
import $ from 'jquery'
2020-06-02 13:23:22 +00:00
/**
* Constants
* ====================================================
*/
const NAME = 'Dropdown'
const DATA_KEY = 'lte.dropdown'
const JQUERY_NO_CONFLICT = $.fn[NAME]
const SELECTOR_NAVBAR = '.navbar'
const SELECTOR_DROPDOWN_MENU = '.dropdown-menu'
const SELECTOR_DROPDOWN_MENU_ACTIVE = '.dropdown-menu.show'
const SELECTOR_DROPDOWN_TOGGLE = '[data-toggle="dropdown"]'
2020-06-02 13:23:22 +00:00
const CLASS_NAME_DROPDOWN_RIGHT = 'dropdown-menu-right'
const CLASS_NAME_DROPDOWN_SUBMENU = 'dropdown-submenu'
// TODO: this is unused; should be removed along with the extend?
const Default = {}
2020-06-02 13:23:22 +00:00
/**
* Class Definition
* ====================================================
*/
class Dropdown {
constructor(element, config) {
this._config = config
this._element = element
}
2020-06-02 13:23:22 +00:00
// Public
toggleSubmenu() {
this._element.siblings().show().toggleClass('show')
2020-06-02 13:23:22 +00:00
if (!this._element.next().hasClass('show')) {
this._element.parents(SELECTOR_DROPDOWN_MENU).first().find('.show').removeClass('show').hide()
}
2020-06-02 13:23:22 +00:00
this._element.parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', () => {
$('.dropdown-submenu .show').removeClass('show').hide()
})
}
2020-06-02 13:23:22 +00:00
fixPosition() {
const $element = $(SELECTOR_DROPDOWN_MENU_ACTIVE)
2020-06-03 16:05:36 +00:00
if ($element.length === 0) {
return
}
if ($element.hasClass(CLASS_NAME_DROPDOWN_RIGHT)) {
$element.css({
left: 'inherit',
right: 0
})
2020-06-03 16:05:36 +00:00
} else {
$element.css({
left: 0,
right: 'inherit'
})
2020-06-03 16:05:36 +00:00
}
const offset = $element.offset()
const width = $element.width()
const visiblePart = $(window).width() - offset.left
if (offset.left < 0) {
$element.css({
left: 'inherit',
right: offset.left - 5
})
2020-06-03 16:05:36 +00:00
} else if (visiblePart < width) {
$element.css({
left: 'inherit',
right: 0
})
}
2020-06-02 13:23:22 +00:00
}
2020-06-02 13:23:22 +00:00
// Static
2020-06-02 13:23:22 +00:00
static _jQueryInterface(config) {
return this.each(function () {
let data = $(this).data(DATA_KEY)
const _config = $.extend({}, Default, $(this).data())
2020-06-02 13:23:22 +00:00
if (!data) {
data = new Dropdown($(this), _config)
$(this).data(DATA_KEY, data)
}
2020-06-02 13:23:22 +00:00
if (config === 'toggleSubmenu' || config === 'fixPosition') {
data[config]()
}
})
}
2020-06-02 13:23:22 +00:00
}
2020-06-02 13:23:22 +00:00
/**
* Data API
* ====================================================
*/
2020-06-13 12:34:10 +00:00
$(`${SELECTOR_DROPDOWN_MENU} ${SELECTOR_DROPDOWN_TOGGLE}`).on('click', function (event) {
2020-06-02 13:23:22 +00:00
event.preventDefault()
event.stopPropagation()
2020-06-02 13:23:22 +00:00
Dropdown._jQueryInterface.call($(this), 'toggleSubmenu')
})
2020-06-13 12:34:10 +00:00
$(`${SELECTOR_NAVBAR} ${SELECTOR_DROPDOWN_TOGGLE}`).on('click', event => {
2020-06-02 13:23:22 +00:00
event.preventDefault()
if ($(event.target).parent().hasClass(CLASS_NAME_DROPDOWN_SUBMENU)) {
return
}
2020-06-02 13:23:22 +00:00
setTimeout(function () {
Dropdown._jQueryInterface.call($(this), 'fixPosition')
}, 1)
})
2020-06-02 13:23:22 +00:00
/**
* jQuery API
* ====================================================
*/
2020-06-02 13:23:22 +00:00
$.fn[NAME] = Dropdown._jQueryInterface
$.fn[NAME].Constructor = Dropdown
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT
return Dropdown._jQueryInterface
}
export default Dropdown