소스정리
parent
44b101218d
commit
ffb4c20071
@ -1,119 +0,0 @@
|
|||||||
class ActionGroupControl {
|
|
||||||
constructor(linked) {
|
|
||||||
this.linked = false !== linked;
|
|
||||||
this.groups = new DatasetControl({
|
|
||||||
prefix:"group",
|
|
||||||
prefixName:"기능그룹",
|
|
||||||
keymapper:info => info.GRP_ID,
|
|
||||||
dataGetter:obj => obj.groupList,
|
|
||||||
formats: {
|
|
||||||
REG_DT:datetimeFormat
|
|
||||||
},
|
|
||||||
urls:{
|
|
||||||
load:wctx.url("/actionGroup/list.do"),
|
|
||||||
getInfo:wctx.url("/actionGroup/info.do"),
|
|
||||||
create:wctx.url("/actionGroup/create.do"),
|
|
||||||
update:wctx.url("/actionGroup/update.do"),
|
|
||||||
remove:wctx.url("/actionGroup/remove.do")
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
this.actions = new DatasetControl({
|
|
||||||
prefix:"action",
|
|
||||||
prefixName:"기능",
|
|
||||||
keymapper:info => info.GRP_ID + "-" + info.ACTION,
|
|
||||||
dataGetter:obj => obj.actionList,
|
|
||||||
formats: {
|
|
||||||
REG_DT:datetimeFormat
|
|
||||||
},
|
|
||||||
urls:{
|
|
||||||
load:wctx.url("/actionGroup/action/list.do")
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this.actions.urls.load = wctx.url("/actionGroup/action/list.do")
|
|
||||||
|
|
||||||
this.groups.onDatasetChange = obj => this.onGroupListChange(obj);
|
|
||||||
this.groups.onCurrentChange = item => {
|
|
||||||
this.onCurrentGroupChange(item);
|
|
||||||
if (!this.linked) return;
|
|
||||||
|
|
||||||
let row = item ? item.data : null;
|
|
||||||
if (row)
|
|
||||||
this.getActions(row.GRP_ID, 1);
|
|
||||||
else
|
|
||||||
this.actions.dataset.clear();
|
|
||||||
};
|
|
||||||
this.groups.onSelectionChange = selected => this.onGroupSelect(selected);
|
|
||||||
|
|
||||||
this.actions.onDatasetChange = obj => this.onActionListChange(obj);
|
|
||||||
this.actions.onCurrentChange = item => this.onCurrentActionChange(item);
|
|
||||||
this.actions.onSelectionChange = selected => this.onActionSelect(selected);
|
|
||||||
}
|
|
||||||
|
|
||||||
onGroupListChange(obj) {}
|
|
||||||
|
|
||||||
onCurrentGroupChange(item) {}
|
|
||||||
|
|
||||||
onGroupSelect(selected) {}
|
|
||||||
|
|
||||||
async selectActionGroup() {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
ajax.get({
|
|
||||||
url:wctx.url("/actionGroup/select.do"),
|
|
||||||
data:{multiple:true},
|
|
||||||
success:resp => {
|
|
||||||
dialog.open({
|
|
||||||
title:"기능그룹 선택",
|
|
||||||
content:resp,
|
|
||||||
size: "lg",
|
|
||||||
getData:() => {return getSelectedActionGroup();},
|
|
||||||
onOK:(selected) => resolve(selected)
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
onActionListChange(obj) {}
|
|
||||||
|
|
||||||
onCurrentActionChange(item) {}
|
|
||||||
|
|
||||||
onActionSelect(selected) {}
|
|
||||||
|
|
||||||
getActions(groupID, pageNum) {
|
|
||||||
this.actions.query.groupIDs = groupID;
|
|
||||||
this.actions.load(pageNum);
|
|
||||||
}
|
|
||||||
|
|
||||||
async addActions() {
|
|
||||||
let actions = await selectURL(true);
|
|
||||||
actions = actions.filter(a => "/" == a || a.endsWith(".do"));
|
|
||||||
let groupID = this.groups.dataset.getCurrent().GRP_ID;
|
|
||||||
json.post({
|
|
||||||
url:wctx.url("/actionGroup/action/add.do"),
|
|
||||||
data:{
|
|
||||||
groupID:groupID,
|
|
||||||
actions:actions.join(",")
|
|
||||||
},
|
|
||||||
success:resp => {
|
|
||||||
this.actions._load();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
removeActions() {
|
|
||||||
let selected = this.actions.dataset.getDataset("selected").map(info => info.ACTION);
|
|
||||||
let groupID = this.groups.dataset.getCurrent().GRP_ID;
|
|
||||||
json.post({
|
|
||||||
url:wctx.url("/actionGroup/action/remove.do"),
|
|
||||||
data:{
|
|
||||||
groupID:groupID,
|
|
||||||
actions:selected.join(",")
|
|
||||||
},
|
|
||||||
success:resp => {
|
|
||||||
if (resp.saved)
|
|
||||||
this.actions._load();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,47 +0,0 @@
|
|||||||
class CommonCodes {
|
|
||||||
constructor(codeList, asObject) {
|
|
||||||
codeList.forEach(item => this[item.code] = !asObject ? item.value : item);
|
|
||||||
this.codes = () => codeList.map(item => item.code);
|
|
||||||
this.list = () => codeList;
|
|
||||||
this.format = (code) => {
|
|
||||||
return this.value(code, "");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
_value(code, field) {
|
|
||||||
let found = this[code];
|
|
||||||
if (!found)
|
|
||||||
return null;
|
|
||||||
|
|
||||||
return "string" == typeof found ? found : found[field]
|
|
||||||
}
|
|
||||||
|
|
||||||
value(code, nt) {
|
|
||||||
return ifEmpty(this._value(code, "value"), nt);
|
|
||||||
}
|
|
||||||
|
|
||||||
format(code) {
|
|
||||||
return this.value(code, "");
|
|
||||||
}
|
|
||||||
|
|
||||||
parse(value) {
|
|
||||||
for (let code in this) {
|
|
||||||
let val = this.value(code);
|
|
||||||
if (value == val)
|
|
||||||
return code;
|
|
||||||
}
|
|
||||||
return "";
|
|
||||||
}
|
|
||||||
|
|
||||||
etc1(code) {
|
|
||||||
return this._value(code, "etc1");
|
|
||||||
}
|
|
||||||
|
|
||||||
etc2(code) {
|
|
||||||
return this._value(code, "etc2");
|
|
||||||
}
|
|
||||||
|
|
||||||
etc3(code) {
|
|
||||||
return this._value(code, "etc3");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,232 +0,0 @@
|
|||||||
function treeSupport(conf) {
|
|
||||||
var selector = conf.selector,
|
|
||||||
dur = 200,
|
|
||||||
support = {
|
|
||||||
_tree: $(selector).jstree(true),
|
|
||||||
_folding: "collapsed",
|
|
||||||
setData:function(elements) {
|
|
||||||
|
|
||||||
if (support._obj) {
|
|
||||||
support._obj.jstree("destroy").empty();
|
|
||||||
}
|
|
||||||
|
|
||||||
support._obj = $(selector).html(conf.data = elements).jstree(conf);
|
|
||||||
support._tree = $(selector).jstree(true);
|
|
||||||
support._tree.refresh();
|
|
||||||
support.bindEvent();
|
|
||||||
return support;
|
|
||||||
},
|
|
||||||
log:function(msg) {
|
|
||||||
if (conf.trace)
|
|
||||||
console.log(msg);
|
|
||||||
},
|
|
||||||
open: function(id) {
|
|
||||||
if (!id) {
|
|
||||||
support._tree.open_all(null, dur);
|
|
||||||
this._folding = "expand";
|
|
||||||
return support.log("All nodes opened.");
|
|
||||||
}
|
|
||||||
|
|
||||||
if ("string" == typeof(id)) {
|
|
||||||
support._tree.open_node(id, null, dur);
|
|
||||||
var parent = support._tree.get_parent(id);
|
|
||||||
if (parent)
|
|
||||||
support.open(parent);
|
|
||||||
support.log("The node('" + id + "') opened.");
|
|
||||||
} else if ("number" == typeof(id)) {
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
close: function(id) {
|
|
||||||
if (!id) {
|
|
||||||
support._tree.close_all(null, dur);
|
|
||||||
this._folding = "collapsed";
|
|
||||||
return support.log("All nodes closed.");
|
|
||||||
}
|
|
||||||
if ("string" == typeof(id)) {
|
|
||||||
support._tree.close_node(id, null, dur);
|
|
||||||
support.log("The node('" + id + "') closed.");
|
|
||||||
}
|
|
||||||
if ("number" == typeof(id)) {
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
toggleFolding: function(expand, handler) {
|
|
||||||
if (this._folding == "collapsed") {
|
|
||||||
this.open();
|
|
||||||
} else {
|
|
||||||
this.close();
|
|
||||||
}
|
|
||||||
return support._folding;
|
|
||||||
/*
|
|
||||||
if (!expand)
|
|
||||||
support.close();
|
|
||||||
else
|
|
||||||
support.open();
|
|
||||||
if (handler)
|
|
||||||
handler(support._folding = !expand ? "collapsed" : "expanded");
|
|
||||||
return support._folding;
|
|
||||||
*/
|
|
||||||
},
|
|
||||||
getChildIDs:function(parentID) {
|
|
||||||
var parent = support.getNode(parentID);
|
|
||||||
return parent.children;
|
|
||||||
},
|
|
||||||
getNode: function(id) {return support._tree.get_node(id);},
|
|
||||||
selectNode: function(obj) {return support._tree.select_node(obj);},
|
|
||||||
checkNodes: function(obj, check) {
|
|
||||||
if (obj == false)
|
|
||||||
return support._tree.uncheck_all();
|
|
||||||
if (obj == true || !obj)
|
|
||||||
return support._tree.check_all();
|
|
||||||
|
|
||||||
if (check != false) {
|
|
||||||
support._tree.check_node(obj);
|
|
||||||
} else {
|
|
||||||
support._tree.uncheck_node(obj);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
selectedNodes: function() {return support._tree.get_selected();},
|
|
||||||
checkedNodes: function() {return support._tree.get_checked();},
|
|
||||||
add: function(parent, label, onAdd) {
|
|
||||||
if ($.isFunction(parent)) {
|
|
||||||
onAdd = parent;
|
|
||||||
parent = label = null;
|
|
||||||
}
|
|
||||||
if (!parent) {
|
|
||||||
var selected = support.selectedNodes();
|
|
||||||
if (selected)
|
|
||||||
parent = selected[0];
|
|
||||||
}
|
|
||||||
if (!parent)
|
|
||||||
return support.log("A parent node is required.");
|
|
||||||
|
|
||||||
if (!label)
|
|
||||||
label = "New node";
|
|
||||||
var added = support._tree.create_node(parent, label, "last", null, true);
|
|
||||||
support._tree.open_node(parent);
|
|
||||||
support._tree.edit(added, null, function(node){
|
|
||||||
support.log("A node added: " + JSON.stringify(node));
|
|
||||||
if (onAdd)
|
|
||||||
onAdd(node);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
edit: function(node, onEdit) {
|
|
||||||
if ($.isFunction(node)) {
|
|
||||||
onEdit = node;
|
|
||||||
node = null;
|
|
||||||
}
|
|
||||||
if (!node) {
|
|
||||||
var selected = support.selectedNodes();
|
|
||||||
if (selected)
|
|
||||||
node = selected[0];
|
|
||||||
}
|
|
||||||
if (!node)
|
|
||||||
return support.log("A node is required to edit.");
|
|
||||||
|
|
||||||
support._tree.edit(node, null, function(node, status, cancel) {
|
|
||||||
if (cancel) return;
|
|
||||||
support.log("A node edited: " + JSON.stringify(node));
|
|
||||||
if (onEdit)
|
|
||||||
onEdit(node);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
remove: function(id, onRemove) {
|
|
||||||
if ($.isFunction(id)) {
|
|
||||||
onRemove = id;
|
|
||||||
id = null;
|
|
||||||
}
|
|
||||||
if (!id) {
|
|
||||||
var selected = support.selectedNodes();
|
|
||||||
if (selected)
|
|
||||||
id = selected[0];
|
|
||||||
}
|
|
||||||
if (!id)
|
|
||||||
return support.log("A node is required to remove.");
|
|
||||||
|
|
||||||
var node = support.getNode(id),
|
|
||||||
parent = support.getNode(node.parent),
|
|
||||||
temp = node.original && node.original.temp;
|
|
||||||
support._tree.delete_node(node);
|
|
||||||
if (!temp)
|
|
||||||
support.log("A node removed: " + JSON.stringify(node));
|
|
||||||
if (onRemove)
|
|
||||||
onRemove(node);
|
|
||||||
if (!temp)
|
|
||||||
support.selectNode(parent);
|
|
||||||
},
|
|
||||||
dragStart: function(evt, dragged, onDrop) {
|
|
||||||
support._ondrop = onDrop;
|
|
||||||
return $.vakata.dnd.start(evt, {jstree:true, nodes:[{id:true, text:"temporary", dragged:dragged, temp:true}]});
|
|
||||||
},
|
|
||||||
onNodeSelect: conf.onNodeSelect,
|
|
||||||
onNodeCheck: conf.onNodeCheck,
|
|
||||||
onNodeReorder: conf.onNodeReorder,
|
|
||||||
onNodeMove: conf.onNodeMove,
|
|
||||||
bindEvent: function() {
|
|
||||||
$(selector)
|
|
||||||
.on("changed.jstree", function(e, data){
|
|
||||||
var selected = !data || !data.selected ? [] : data.selected;
|
|
||||||
support.log("Node(s) selected: " + selected);
|
|
||||||
if (support.onNodeSelect)
|
|
||||||
support.onNodeSelect(selected);
|
|
||||||
}).on("move_node.jstree", function(e, data) {
|
|
||||||
var move = data.old_parent != data.parent;
|
|
||||||
if (move) {
|
|
||||||
support.log(data.node.id + " moved to " + data.parent);
|
|
||||||
if (support.onNodeMove)
|
|
||||||
support.onNodeMove({node:data.node, parent:data.parent});
|
|
||||||
} else {
|
|
||||||
if (data.old_position == data.position) return;
|
|
||||||
|
|
||||||
var offset = data.position - data.old_position;
|
|
||||||
support.log(data.node.id + " reorderd in " + data.parent + " with offset: " + offset + ".");
|
|
||||||
if (support.onNodeReorder)
|
|
||||||
support.onNodeReorder({node:data.node, parent:data.parent, offset:offset});
|
|
||||||
}
|
|
||||||
}).on("copy_node.jstree", function(e, data) {
|
|
||||||
var node = data.node,
|
|
||||||
org = node.original;
|
|
||||||
if (!node || !org || !org.temp) return;
|
|
||||||
|
|
||||||
var target = support.getNode(node.parent),
|
|
||||||
dragged = org.dragged;
|
|
||||||
support.remove(node.id);
|
|
||||||
support.log(dragged + " dropped onto " + JSON.stringify(target) + ".");
|
|
||||||
if (support._ondrop)
|
|
||||||
support._ondrop({dragged:dragged, target:target});
|
|
||||||
delete support._ondrop;
|
|
||||||
}).on("check_node.jstree", function(e, data) {
|
|
||||||
if (support.onNodeCheck)
|
|
||||||
support.onNodeCheck({node:data.node, checked:true});
|
|
||||||
}).on("uncheck_node.jstree", function(e, data) {
|
|
||||||
if (support.onNodeCheck)
|
|
||||||
support.onNodeCheck({node:data.node, checked:false});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
if (conf.data)
|
|
||||||
support._obj = $(selector).html(conf.data).jstree(conf);
|
|
||||||
support.bindEvent();
|
|
||||||
return support;
|
|
||||||
}
|
|
||||||
|
|
||||||
function treeHtml(elements, getters) {
|
|
||||||
var length = !elements ? 0 : elements.length;
|
|
||||||
if (!length) return "";
|
|
||||||
|
|
||||||
if (!getters)
|
|
||||||
getters = {
|
|
||||||
id:function(e){return e.id;},
|
|
||||||
text:function(e){return e.name;}
|
|
||||||
};
|
|
||||||
|
|
||||||
var result = "<ul>";
|
|
||||||
for (var i = 0; i < length; ++i) {
|
|
||||||
var e = elements[i];
|
|
||||||
result += "<li id=\"" + getters.id(e) + "\">" + getters.text(e);
|
|
||||||
result += treeHtml(e.children, getters);
|
|
||||||
result += "</li>";
|
|
||||||
}
|
|
||||||
return result + "</ul>";
|
|
||||||
}
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
class UserControl extends DatasetControl {
|
|
||||||
constructor(conf) {
|
|
||||||
super(conf || {
|
|
||||||
prefix:"user",
|
|
||||||
prefixName:"사용자",
|
|
||||||
infoSize:"xl",
|
|
||||||
keymapper:info => info ? info.USER_ID : "",
|
|
||||||
dataGetter:obj => obj.userList,
|
|
||||||
formats: {
|
|
||||||
REG_DT:datetimeFormat
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async selectUser(multiple) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
ajax.get({
|
|
||||||
url:this.url("/select.do"),
|
|
||||||
data:{multiple:multiple},
|
|
||||||
success:resp => {
|
|
||||||
dialog.open({
|
|
||||||
title:"사용자 선택",
|
|
||||||
content:resp,
|
|
||||||
size:"xl",
|
|
||||||
getData:() => {return getSelectedUser();},
|
|
||||||
onOK:(selected) => resolve(selected)
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,50 +0,0 @@
|
|||||||
/**
|
|
||||||
* Config
|
|
||||||
* -------------------------------------------------------------------------------------
|
|
||||||
* ! IMPORTANT: Make sure you clear the browser local storage In order to see the config changes in the template.
|
|
||||||
* ! To clear local storage: (https://www.leadshook.com/help/how-to-clear-local-storage-in-google-chrome-browser/).
|
|
||||||
*/
|
|
||||||
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
// JS global variables
|
|
||||||
let config = {
|
|
||||||
colors: {
|
|
||||||
primary: '#696cff',
|
|
||||||
secondary: '#8592a3',
|
|
||||||
success: '#71dd37',
|
|
||||||
info: '#03c3ec',
|
|
||||||
warning: '#ffab00',
|
|
||||||
danger: '#ff3e1d',
|
|
||||||
dark: '#233446',
|
|
||||||
black: '#000',
|
|
||||||
white: '#fff',
|
|
||||||
cardColor: '#fff',
|
|
||||||
bodyBg: '#f5f5f9',
|
|
||||||
bodyColor: '#697a8d',
|
|
||||||
headingColor: '#566a7f',
|
|
||||||
textMuted: '#a1acb8',
|
|
||||||
borderColor: '#eceef1'
|
|
||||||
},
|
|
||||||
colors_label: {
|
|
||||||
primary: '#666ee81a',
|
|
||||||
secondary: '#8897aa1a',
|
|
||||||
success: '#28d0941a',
|
|
||||||
info: '#1e9ff21a',
|
|
||||||
warning: '#ff91491a',
|
|
||||||
danger: '#ff49611a',
|
|
||||||
dark: '#181c211a'
|
|
||||||
},
|
|
||||||
colors_dark: {
|
|
||||||
cardColor: '#2b2c40',
|
|
||||||
bodyBg: '#232333',
|
|
||||||
bodyColor: '#a3a4cc',
|
|
||||||
headingColor: '#cbcbe2',
|
|
||||||
textMuted: '#7071a4',
|
|
||||||
borderColor: '#444564'
|
|
||||||
},
|
|
||||||
enableMenuLocalStorage: true // Enable menu state with local storage support
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,986 +0,0 @@
|
|||||||
const TRANSITION_EVENTS = ['transitionend', 'webkitTransitionEnd', 'oTransitionEnd']
|
|
||||||
// const TRANSITION_PROPERTIES = ['transition', 'MozTransition', 'webkitTransition', 'WebkitTransition', 'OTransition']
|
|
||||||
const DELTA = 5
|
|
||||||
|
|
||||||
class Menu {
|
|
||||||
constructor(el, config = {}, _PS = null) {
|
|
||||||
this._el = el
|
|
||||||
this._horizontal = config.orientation === 'horizontal'
|
|
||||||
this._animate = config.animate !== false
|
|
||||||
this._accordion = config.accordion !== false
|
|
||||||
this._showDropdownOnHover = Boolean(config.showDropdownOnHover)
|
|
||||||
this._closeChildren = Boolean(config.closeChildren)
|
|
||||||
this._rtl = document.documentElement.getAttribute('dir') === 'rtl' || document.body.getAttribute('dir') === 'rtl'
|
|
||||||
|
|
||||||
this._onOpen = config.onOpen || (() => {})
|
|
||||||
this._onOpened = config.onOpened || (() => {})
|
|
||||||
this._onClose = config.onClose || (() => {})
|
|
||||||
this._onClosed = config.onClosed || (() => {})
|
|
||||||
|
|
||||||
this._psScroll = null
|
|
||||||
this._topParent = null
|
|
||||||
this._menuBgClass = null
|
|
||||||
|
|
||||||
el.classList.add('menu')
|
|
||||||
el.classList[this._animate ? 'remove' : 'add']('menu-no-animation')
|
|
||||||
|
|
||||||
if (!this._horizontal) {
|
|
||||||
el.classList.add('menu-vertical')
|
|
||||||
el.classList.remove('menu-horizontal')
|
|
||||||
|
|
||||||
const PerfectScrollbarLib = _PS || window.PerfectScrollbar
|
|
||||||
|
|
||||||
if (PerfectScrollbarLib) {
|
|
||||||
this._scrollbar = new PerfectScrollbarLib(el.querySelector('.menu-inner'), {
|
|
||||||
suppressScrollX: true,
|
|
||||||
wheelPropagation: !Menu._hasClass('layout-menu-fixed layout-menu-fixed-offcanvas')
|
|
||||||
})
|
|
||||||
|
|
||||||
window.Helpers.menuPsScroll = this._scrollbar
|
|
||||||
} else {
|
|
||||||
el.querySelector('.menu-inner').classList.add('overflow-auto')
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
el.classList.add('menu-horizontal')
|
|
||||||
el.classList.remove('menu-vertical')
|
|
||||||
|
|
||||||
this._inner = el.querySelector('.menu-inner')
|
|
||||||
const container = this._inner.parentNode
|
|
||||||
|
|
||||||
this._prevBtn = el.querySelector('.menu-horizontal-prev')
|
|
||||||
if (!this._prevBtn) {
|
|
||||||
this._prevBtn = document.createElement('a')
|
|
||||||
this._prevBtn.href = '#'
|
|
||||||
this._prevBtn.className = 'menu-horizontal-prev'
|
|
||||||
container.appendChild(this._prevBtn)
|
|
||||||
}
|
|
||||||
|
|
||||||
this._wrapper = el.querySelector('.menu-horizontal-wrapper')
|
|
||||||
if (!this._wrapper) {
|
|
||||||
this._wrapper = document.createElement('div')
|
|
||||||
this._wrapper.className = 'menu-horizontal-wrapper'
|
|
||||||
this._wrapper.appendChild(this._inner)
|
|
||||||
container.appendChild(this._wrapper)
|
|
||||||
}
|
|
||||||
|
|
||||||
this._nextBtn = el.querySelector('.menu-horizontal-next')
|
|
||||||
if (!this._nextBtn) {
|
|
||||||
this._nextBtn = document.createElement('a')
|
|
||||||
this._nextBtn.href = '#'
|
|
||||||
this._nextBtn.className = 'menu-horizontal-next'
|
|
||||||
container.appendChild(this._nextBtn)
|
|
||||||
}
|
|
||||||
|
|
||||||
this._innerPosition = 0
|
|
||||||
this.update()
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add data attribute for bg color class of menu
|
|
||||||
const menuClassList = el.classList
|
|
||||||
|
|
||||||
for (let i = 0; i < menuClassList.length; i++) {
|
|
||||||
if (menuClassList[i].startsWith('bg-')) {
|
|
||||||
this._menuBgClass = menuClassList[i]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
el.setAttribute('data-bg-class', this._menuBgClass)
|
|
||||||
|
|
||||||
// Switch to vertical menu on small screen for horizontal menu layout on page load
|
|
||||||
if (this._horizontal && window.innerWidth < window.Helpers.LAYOUT_BREAKPOINT) this.switchMenu('vertical')
|
|
||||||
|
|
||||||
this._bindEvents()
|
|
||||||
|
|
||||||
// Link menu instance to element
|
|
||||||
el.menuInstance = this
|
|
||||||
}
|
|
||||||
|
|
||||||
_bindEvents() {
|
|
||||||
// Click Event
|
|
||||||
this._evntElClick = e => {
|
|
||||||
// Find top parent element
|
|
||||||
if (e.target.closest('ul') && e.target.closest('ul').classList.contains('menu-inner')) {
|
|
||||||
const menuItem = Menu._findParent(e.target, 'menu-item', false)
|
|
||||||
|
|
||||||
// eslint-disable-next-line prefer-destructuring
|
|
||||||
if (menuItem) this._topParent = menuItem.childNodes[0]
|
|
||||||
}
|
|
||||||
|
|
||||||
const toggleLink = e.target.classList.contains('menu-toggle')
|
|
||||||
? e.target
|
|
||||||
: Menu._findParent(e.target, 'menu-toggle', false)
|
|
||||||
|
|
||||||
if (toggleLink) {
|
|
||||||
e.preventDefault()
|
|
||||||
|
|
||||||
if (toggleLink.getAttribute('data-hover') !== 'true') {
|
|
||||||
this.toggle(toggleLink)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if ((!this._showDropdownOnHover && this._horizontal) || !this._horizontal || window.Helpers.isMobileDevice)
|
|
||||||
this._el.addEventListener('click', this._evntElClick)
|
|
||||||
|
|
||||||
this._evntWindowResize = () => {
|
|
||||||
this.update()
|
|
||||||
if (this._lastWidth !== window.innerWidth) {
|
|
||||||
this._lastWidth = window.innerWidth
|
|
||||||
this.update()
|
|
||||||
}
|
|
||||||
|
|
||||||
const horizontalMenuTemplate = document.querySelector("[data-template^='horizontal-menu']")
|
|
||||||
if (!this._horizontal && !horizontalMenuTemplate) this.manageScroll()
|
|
||||||
}
|
|
||||||
window.addEventListener('resize', this._evntWindowResize)
|
|
||||||
|
|
||||||
if (this._horizontal) {
|
|
||||||
this._evntPrevBtnClick = e => {
|
|
||||||
e.preventDefault()
|
|
||||||
if (this._prevBtn.classList.contains('disabled')) return
|
|
||||||
this._slide('prev')
|
|
||||||
}
|
|
||||||
this._prevBtn.addEventListener('click', this._evntPrevBtnClick)
|
|
||||||
|
|
||||||
this._evntNextBtnClick = e => {
|
|
||||||
e.preventDefault()
|
|
||||||
if (this._nextBtn.classList.contains('disabled')) return
|
|
||||||
this._slide('next')
|
|
||||||
}
|
|
||||||
this._nextBtn.addEventListener('click', this._evntNextBtnClick)
|
|
||||||
|
|
||||||
this._evntBodyClick = e => {
|
|
||||||
if (!this._inner.contains(e.target) && this._el.querySelectorAll('.menu-inner > .menu-item.open').length)
|
|
||||||
this.closeAll()
|
|
||||||
}
|
|
||||||
document.body.addEventListener('click', this._evntBodyClick)
|
|
||||||
|
|
||||||
if (this._showDropdownOnHover) {
|
|
||||||
/** ***********************************************
|
|
||||||
* Horizontal Menu Mouse Over Event
|
|
||||||
* ? e.target !== e.currentTarget condition to disable mouseover event on whole menu navbar
|
|
||||||
* ? !e.target.parentNode.classList.contains('open') to disable mouseover events on icon, text and dropdown arrow
|
|
||||||
*/
|
|
||||||
this._evntElMouseOver = e => {
|
|
||||||
if (e.target !== e.currentTarget && !e.target.parentNode.classList.contains('open')) {
|
|
||||||
const toggleLink = e.target.classList.contains('menu-toggle') ? e.target : null
|
|
||||||
|
|
||||||
if (toggleLink) {
|
|
||||||
e.preventDefault()
|
|
||||||
|
|
||||||
if (toggleLink.getAttribute('data-hover') !== 'true') {
|
|
||||||
this.toggle(toggleLink)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
e.stopPropagation()
|
|
||||||
}
|
|
||||||
if (this._horizontal && window.screen.width > window.Helpers.LAYOUT_BREAKPOINT) {
|
|
||||||
this._el.addEventListener('mouseover', this._evntElMouseOver)
|
|
||||||
}
|
|
||||||
|
|
||||||
/** ***********************************************
|
|
||||||
* Horizontal Menu Mouse Out Event
|
|
||||||
* ? e.target !== e.currentTarget condition to disable mouseout event on whole menu navbar
|
|
||||||
* ? mouseOutEl.parentNode.classList.contains('open') to check if the mouseout element has open class or not
|
|
||||||
* ? !mouseOutEl.classList.contains('menu-toggle') to check if mouseout was from single menu item and not from the one which has submenu
|
|
||||||
* ? !mouseOverEl.parentNode.classList.contains('menu-link') to disable mouseout event for icon, text and dropdown arrow
|
|
||||||
*/
|
|
||||||
this._evntElMouseOut = e => {
|
|
||||||
const mainEl = e.currentTarget
|
|
||||||
const mouseOutEl = e.target
|
|
||||||
const mouseOverEl = e.toElement || e.relatedTarget
|
|
||||||
|
|
||||||
// Find absolute parent of any menu item from which mouseout event triggered
|
|
||||||
if (mouseOutEl.closest('ul') && mouseOutEl.closest('ul').classList.contains('menu-inner')) {
|
|
||||||
this._topParent = mouseOutEl
|
|
||||||
}
|
|
||||||
|
|
||||||
if (
|
|
||||||
mouseOutEl !== mainEl &&
|
|
||||||
(mouseOutEl.parentNode.classList.contains('open') || !mouseOutEl.classList.contains('menu-toggle')) &&
|
|
||||||
mouseOverEl &&
|
|
||||||
mouseOverEl.parentNode &&
|
|
||||||
!mouseOverEl.parentNode.classList.contains('menu-link')
|
|
||||||
) {
|
|
||||||
// When mouse goes totally out of menu items, check mouse over element to confirm it's not the child of menu, once confirmed close the menu
|
|
||||||
if (this._topParent && !Menu.childOf(mouseOverEl, this._topParent.parentNode)) {
|
|
||||||
const toggleLink = this._topParent.classList.contains('menu-toggle') ? this._topParent : null
|
|
||||||
|
|
||||||
if (toggleLink) {
|
|
||||||
e.preventDefault()
|
|
||||||
|
|
||||||
if (toggleLink.getAttribute('data-hover') !== 'true') {
|
|
||||||
this.toggle(toggleLink)
|
|
||||||
this._topParent = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// When mouse enter the sub menu, check if it's child of the initially mouse overed menu item(Actual Parent),
|
|
||||||
// if it's the parent do not close the sub menu else close the sub menu
|
|
||||||
if (Menu.childOf(mouseOverEl, mouseOutEl.parentNode)) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const toggleLink = mouseOutEl.classList.contains('menu-toggle') ? mouseOutEl : null
|
|
||||||
|
|
||||||
if (toggleLink) {
|
|
||||||
e.preventDefault()
|
|
||||||
|
|
||||||
if (toggleLink.getAttribute('data-hover') !== 'true') {
|
|
||||||
this.toggle(toggleLink)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
e.stopPropagation()
|
|
||||||
}
|
|
||||||
if (this._horizontal && window.screen.width > window.Helpers.LAYOUT_BREAKPOINT) {
|
|
||||||
this._el.addEventListener('mouseout', this._evntElMouseOut)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
static childOf(/* child node */ c, /* parent node */ p) {
|
|
||||||
// returns boolean
|
|
||||||
if (c.parentNode) {
|
|
||||||
while ((c = c.parentNode) && c !== p);
|
|
||||||
return !!c
|
|
||||||
}
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
_unbindEvents() {
|
|
||||||
if (this._evntElClick) {
|
|
||||||
this._el.removeEventListener('click', this._evntElClick)
|
|
||||||
this._evntElClick = null
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this._evntElMouseOver) {
|
|
||||||
this._el.removeEventListener('mouseover', this._evntElMouseOver)
|
|
||||||
this._evntElMouseOver = null
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this._evntElMouseOut) {
|
|
||||||
this._el.removeEventListener('mouseout', this._evntElMouseOut)
|
|
||||||
this._evntElMouseOut = null
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this._evntWindowResize) {
|
|
||||||
window.removeEventListener('resize', this._evntWindowResize)
|
|
||||||
this._evntWindowResize = null
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this._evntBodyClick) {
|
|
||||||
document.body.removeEventListener('click', this._evntBodyClick)
|
|
||||||
this._evntBodyClick = null
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this._evntInnerMousemove) {
|
|
||||||
this._inner.removeEventListener('mousemove', this._evntInnerMousemove)
|
|
||||||
this._evntInnerMousemove = null
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this._evntInnerMouseleave) {
|
|
||||||
this._inner.removeEventListener('mouseleave', this._evntInnerMouseleave)
|
|
||||||
this._evntInnerMouseleave = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
static _isRoot(item) {
|
|
||||||
return !Menu._findParent(item, 'menu-item', false)
|
|
||||||
}
|
|
||||||
|
|
||||||
static _findParent(el, cls, throwError = true) {
|
|
||||||
if (el.tagName.toUpperCase() === 'BODY') return null
|
|
||||||
el = el.parentNode
|
|
||||||
while (el.tagName.toUpperCase() !== 'BODY' && !el.classList.contains(cls)) {
|
|
||||||
el = el.parentNode
|
|
||||||
}
|
|
||||||
|
|
||||||
el = el.tagName.toUpperCase() !== 'BODY' ? el : null
|
|
||||||
|
|
||||||
if (!el && throwError) throw new Error(`Cannot find \`.${cls}\` parent element`)
|
|
||||||
|
|
||||||
return el
|
|
||||||
}
|
|
||||||
|
|
||||||
static _findChild(el, cls) {
|
|
||||||
const items = el.childNodes
|
|
||||||
const found = []
|
|
||||||
|
|
||||||
for (let i = 0, l = items.length; i < l; i++) {
|
|
||||||
if (items[i].classList) {
|
|
||||||
let passed = 0
|
|
||||||
|
|
||||||
for (let j = 0; j < cls.length; j++) {
|
|
||||||
if (items[i].classList.contains(cls[j])) passed += 1
|
|
||||||
}
|
|
||||||
|
|
||||||
if (cls.length === passed) found.push(items[i])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return found
|
|
||||||
}
|
|
||||||
|
|
||||||
static _findMenu(item) {
|
|
||||||
let curEl = item.childNodes[0]
|
|
||||||
let menu = null
|
|
||||||
|
|
||||||
while (curEl && !menu) {
|
|
||||||
if (curEl.classList && curEl.classList.contains('menu-sub')) menu = curEl
|
|
||||||
curEl = curEl.nextSibling
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!menu) throw new Error('Cannot find `.menu-sub` element for the current `.menu-toggle`')
|
|
||||||
|
|
||||||
return menu
|
|
||||||
}
|
|
||||||
|
|
||||||
// Has class
|
|
||||||
static _hasClass(cls, el = window.Helpers.ROOT_EL) {
|
|
||||||
let result = false
|
|
||||||
|
|
||||||
cls.split(' ').forEach(c => {
|
|
||||||
if (el.classList.contains(c)) result = true
|
|
||||||
})
|
|
||||||
|
|
||||||
return result
|
|
||||||
}
|
|
||||||
|
|
||||||
open(el, closeChildren = this._closeChildren) {
|
|
||||||
const item = this._findUnopenedParent(Menu._getItem(el, true), closeChildren)
|
|
||||||
|
|
||||||
if (!item) return
|
|
||||||
|
|
||||||
const toggleLink = Menu._getLink(item, true)
|
|
||||||
|
|
||||||
Menu._promisify(this._onOpen, this, item, toggleLink, Menu._findMenu(item))
|
|
||||||
.then(() => {
|
|
||||||
if (!this._horizontal || !Menu._isRoot(item)) {
|
|
||||||
if (this._animate && !this._horizontal) {
|
|
||||||
window.requestAnimationFrame(() => this._toggleAnimation(true, item, false))
|
|
||||||
if (this._accordion) this._closeOther(item, closeChildren)
|
|
||||||
} else if (this._animate) {
|
|
||||||
this._toggleDropdown(true, item, closeChildren)
|
|
||||||
// eslint-disable-next-line no-unused-expressions
|
|
||||||
this._onOpened && this._onOpened(this, item, toggleLink, Menu._findMenu(item))
|
|
||||||
} else {
|
|
||||||
item.classList.add('open')
|
|
||||||
// eslint-disable-next-line no-unused-expressions
|
|
||||||
this._onOpened && this._onOpened(this, item, toggleLink, Menu._findMenu(item))
|
|
||||||
if (this._accordion) this._closeOther(item, closeChildren)
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
this._toggleDropdown(true, item, closeChildren)
|
|
||||||
// eslint-disable-next-line no-unused-expressions
|
|
||||||
this._onOpened && this._onOpened(this, item, toggleLink, Menu._findMenu(item))
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(() => {})
|
|
||||||
}
|
|
||||||
|
|
||||||
close(el, closeChildren = this._closeChildren, _autoClose = false) {
|
|
||||||
const item = Menu._getItem(el, true)
|
|
||||||
const toggleLink = Menu._getLink(el, true)
|
|
||||||
|
|
||||||
if (!item.classList.contains('open') || item.classList.contains('disabled')) return
|
|
||||||
|
|
||||||
Menu._promisify(this._onClose, this, item, toggleLink, Menu._findMenu(item), _autoClose)
|
|
||||||
.then(() => {
|
|
||||||
if (!this._horizontal || !Menu._isRoot(item)) {
|
|
||||||
if (this._animate && !this._horizontal) {
|
|
||||||
window.requestAnimationFrame(() => this._toggleAnimation(false, item, closeChildren))
|
|
||||||
} else {
|
|
||||||
item.classList.remove('open')
|
|
||||||
|
|
||||||
if (closeChildren) {
|
|
||||||
const opened = item.querySelectorAll('.menu-item.open')
|
|
||||||
for (let i = 0, l = opened.length; i < l; i++) opened[i].classList.remove('open')
|
|
||||||
}
|
|
||||||
|
|
||||||
// eslint-disable-next-line no-unused-expressions
|
|
||||||
this._onClosed && this._onClosed(this, item, toggleLink, Menu._findMenu(item))
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
this._toggleDropdown(false, item, closeChildren)
|
|
||||||
// eslint-disable-next-line no-unused-expressions
|
|
||||||
this._onClosed && this._onClosed(this, item, toggleLink, Menu._findMenu(item))
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(() => {})
|
|
||||||
}
|
|
||||||
|
|
||||||
_closeOther(item, closeChildren) {
|
|
||||||
const opened = Menu._findChild(item.parentNode, ['menu-item', 'open'])
|
|
||||||
|
|
||||||
for (let i = 0, l = opened.length; i < l; i++) {
|
|
||||||
if (opened[i] !== item) this.close(opened[i], closeChildren)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
toggle(el, closeChildren = this._closeChildren) {
|
|
||||||
const item = Menu._getItem(el, true)
|
|
||||||
// const toggleLink = Menu._getLink(el, true)
|
|
||||||
|
|
||||||
if (item.classList.contains('open')) this.close(item, closeChildren)
|
|
||||||
else this.open(item, closeChildren)
|
|
||||||
}
|
|
||||||
|
|
||||||
_toggleDropdown(show, item, closeChildren) {
|
|
||||||
const menu = Menu._findMenu(item)
|
|
||||||
const actualItem = item
|
|
||||||
let subMenuItem = false
|
|
||||||
|
|
||||||
if (show) {
|
|
||||||
if (Menu._findParent(item, 'menu-sub', false)) {
|
|
||||||
subMenuItem = true
|
|
||||||
item = this._topParent ? this._topParent.parentNode : item
|
|
||||||
}
|
|
||||||
|
|
||||||
const wrapperWidth = Math.round(this._wrapper.getBoundingClientRect().width)
|
|
||||||
const position = this._innerPosition
|
|
||||||
const itemOffset = this._getItemOffset(item)
|
|
||||||
const itemWidth = Math.round(item.getBoundingClientRect().width)
|
|
||||||
|
|
||||||
if (itemOffset - DELTA <= -1 * position) {
|
|
||||||
this._innerPosition = -1 * itemOffset
|
|
||||||
} else if (itemOffset + position + itemWidth + DELTA >= wrapperWidth) {
|
|
||||||
if (itemWidth > wrapperWidth) {
|
|
||||||
this._innerPosition = -1 * itemOffset
|
|
||||||
} else {
|
|
||||||
this._innerPosition = -1 * (itemOffset + itemWidth - wrapperWidth)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
actualItem.classList.add('open')
|
|
||||||
|
|
||||||
const menuWidth = Math.round(menu.getBoundingClientRect().width)
|
|
||||||
|
|
||||||
if (subMenuItem) {
|
|
||||||
if (
|
|
||||||
itemOffset + this._innerPosition + menuWidth * 2 > wrapperWidth &&
|
|
||||||
menuWidth < wrapperWidth &&
|
|
||||||
menuWidth >= itemWidth
|
|
||||||
) {
|
|
||||||
menu.style.left = [this._rtl ? '100%' : '-100%']
|
|
||||||
}
|
|
||||||
} else if (
|
|
||||||
itemOffset + this._innerPosition + menuWidth > wrapperWidth &&
|
|
||||||
menuWidth < wrapperWidth &&
|
|
||||||
menuWidth > itemWidth
|
|
||||||
) {
|
|
||||||
menu.style[this._rtl ? 'marginRight' : 'marginLeft'] = `-${menuWidth - itemWidth}px`
|
|
||||||
}
|
|
||||||
|
|
||||||
this._closeOther(actualItem, closeChildren)
|
|
||||||
this._updateSlider()
|
|
||||||
} else {
|
|
||||||
const toggle = Menu._findChild(item, ['menu-toggle'])
|
|
||||||
|
|
||||||
// eslint-disable-next-line no-unused-expressions
|
|
||||||
toggle.length && toggle[0].removeAttribute('data-hover', 'true')
|
|
||||||
item.classList.remove('open')
|
|
||||||
menu.style[this._rtl ? 'marginRight' : 'marginLeft'] = null
|
|
||||||
|
|
||||||
if (closeChildren) {
|
|
||||||
const opened = menu.querySelectorAll('.menu-item.open')
|
|
||||||
|
|
||||||
for (let i = 0, l = opened.length; i < l; i++) opened[i].classList.remove('open')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
_slide(direction) {
|
|
||||||
const wrapperWidth = Math.round(this._wrapper.getBoundingClientRect().width)
|
|
||||||
const innerWidth = this._innerWidth
|
|
||||||
let newPosition
|
|
||||||
|
|
||||||
if (direction === 'next') {
|
|
||||||
newPosition = this._getSlideNextPos()
|
|
||||||
|
|
||||||
if (innerWidth + newPosition < wrapperWidth) {
|
|
||||||
newPosition = wrapperWidth - innerWidth
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
newPosition = this._getSlidePrevPos()
|
|
||||||
|
|
||||||
if (newPosition > 0) newPosition = 0
|
|
||||||
}
|
|
||||||
|
|
||||||
this._innerPosition = newPosition
|
|
||||||
this.update()
|
|
||||||
}
|
|
||||||
|
|
||||||
_getSlideNextPos() {
|
|
||||||
const wrapperWidth = Math.round(this._wrapper.getBoundingClientRect().width)
|
|
||||||
const position = this._innerPosition
|
|
||||||
let curItem = this._inner.childNodes[0]
|
|
||||||
let left = 0
|
|
||||||
|
|
||||||
while (curItem) {
|
|
||||||
if (curItem.tagName) {
|
|
||||||
const curItemWidth = Math.round(curItem.getBoundingClientRect().width)
|
|
||||||
|
|
||||||
if (left + position - DELTA <= wrapperWidth && left + position + curItemWidth + DELTA >= wrapperWidth) {
|
|
||||||
if (curItemWidth > wrapperWidth && left === -1 * position) left += curItemWidth
|
|
||||||
break
|
|
||||||
}
|
|
||||||
|
|
||||||
left += curItemWidth
|
|
||||||
}
|
|
||||||
|
|
||||||
curItem = curItem.nextSibling
|
|
||||||
}
|
|
||||||
|
|
||||||
return -1 * left
|
|
||||||
}
|
|
||||||
|
|
||||||
_getSlidePrevPos() {
|
|
||||||
const wrapperWidth = Math.round(this._wrapper.getBoundingClientRect().width)
|
|
||||||
const position = this._innerPosition
|
|
||||||
let curItem = this._inner.childNodes[0]
|
|
||||||
let left = 0
|
|
||||||
|
|
||||||
while (curItem) {
|
|
||||||
if (curItem.tagName) {
|
|
||||||
const curItemWidth = Math.round(curItem.getBoundingClientRect().width)
|
|
||||||
|
|
||||||
if (left - DELTA <= -1 * position && left + curItemWidth + DELTA >= -1 * position) {
|
|
||||||
if (curItemWidth <= wrapperWidth) left = left + curItemWidth - wrapperWidth
|
|
||||||
break
|
|
||||||
}
|
|
||||||
|
|
||||||
left += curItemWidth
|
|
||||||
}
|
|
||||||
|
|
||||||
curItem = curItem.nextSibling
|
|
||||||
}
|
|
||||||
|
|
||||||
return -1 * left
|
|
||||||
}
|
|
||||||
|
|
||||||
static _getItem(el, toggle) {
|
|
||||||
let item = null
|
|
||||||
const selector = toggle ? 'menu-toggle' : 'menu-link'
|
|
||||||
|
|
||||||
if (el.classList.contains('menu-item')) {
|
|
||||||
if (Menu._findChild(el, [selector]).length) item = el
|
|
||||||
} else if (el.classList.contains(selector)) {
|
|
||||||
item = el.parentNode.classList.contains('menu-item') ? el.parentNode : null
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!item) {
|
|
||||||
throw new Error(`${toggle ? 'Toggable ' : ''}\`.menu-item\` element not found.`)
|
|
||||||
}
|
|
||||||
|
|
||||||
return item
|
|
||||||
}
|
|
||||||
|
|
||||||
static _getLink(el, toggle) {
|
|
||||||
let found = []
|
|
||||||
const selector = toggle ? 'menu-toggle' : 'menu-link'
|
|
||||||
|
|
||||||
if (el.classList.contains(selector)) found = [el]
|
|
||||||
else if (el.classList.contains('menu-item')) found = Menu._findChild(el, [selector])
|
|
||||||
|
|
||||||
if (!found.length) throw new Error(`\`${selector}\` element not found.`)
|
|
||||||
|
|
||||||
return found[0]
|
|
||||||
}
|
|
||||||
|
|
||||||
_findUnopenedParent(item, closeChildren) {
|
|
||||||
let tree = []
|
|
||||||
let parentItem = null
|
|
||||||
|
|
||||||
while (item) {
|
|
||||||
if (item.classList.contains('disabled')) {
|
|
||||||
parentItem = null
|
|
||||||
tree = []
|
|
||||||
} else {
|
|
||||||
if (!item.classList.contains('open')) parentItem = item
|
|
||||||
tree.push(item)
|
|
||||||
}
|
|
||||||
|
|
||||||
item = Menu._findParent(item, 'menu-item', false)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!parentItem) return null
|
|
||||||
if (tree.length === 1) return parentItem
|
|
||||||
|
|
||||||
tree = tree.slice(0, tree.indexOf(parentItem))
|
|
||||||
|
|
||||||
for (let i = 0, l = tree.length; i < l; i++) {
|
|
||||||
tree[i].classList.add('open')
|
|
||||||
|
|
||||||
if (this._accordion) {
|
|
||||||
const openedItems = Menu._findChild(tree[i].parentNode, ['menu-item', 'open'])
|
|
||||||
|
|
||||||
for (let j = 0, k = openedItems.length; j < k; j++) {
|
|
||||||
if (openedItems[j] !== tree[i]) {
|
|
||||||
openedItems[j].classList.remove('open')
|
|
||||||
|
|
||||||
if (closeChildren) {
|
|
||||||
const openedChildren = openedItems[j].querySelectorAll('.menu-item.open')
|
|
||||||
for (let x = 0, z = openedChildren.length; x < z; x++) {
|
|
||||||
openedChildren[x].classList.remove('open')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return parentItem
|
|
||||||
}
|
|
||||||
|
|
||||||
_toggleAnimation(open, item, closeChildren) {
|
|
||||||
const toggleLink = Menu._getLink(item, true)
|
|
||||||
const menu = Menu._findMenu(item)
|
|
||||||
|
|
||||||
Menu._unbindAnimationEndEvent(item)
|
|
||||||
|
|
||||||
const linkHeight = Math.round(toggleLink.getBoundingClientRect().height)
|
|
||||||
|
|
||||||
item.style.overflow = 'hidden'
|
|
||||||
|
|
||||||
const clearItemStyle = () => {
|
|
||||||
item.classList.remove('menu-item-animating')
|
|
||||||
item.classList.remove('menu-item-closing')
|
|
||||||
item.style.overflow = null
|
|
||||||
item.style.height = null
|
|
||||||
|
|
||||||
if (!this._horizontal) this.update()
|
|
||||||
}
|
|
||||||
|
|
||||||
if (open) {
|
|
||||||
item.style.height = `${linkHeight}px`
|
|
||||||
item.classList.add('menu-item-animating')
|
|
||||||
item.classList.add('open')
|
|
||||||
|
|
||||||
Menu._bindAnimationEndEvent(item, () => {
|
|
||||||
clearItemStyle()
|
|
||||||
this._onOpened(this, item, toggleLink, menu)
|
|
||||||
})
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
item.style.height = `${linkHeight + Math.round(menu.getBoundingClientRect().height)}px`
|
|
||||||
}, 50)
|
|
||||||
} else {
|
|
||||||
item.style.height = `${linkHeight + Math.round(menu.getBoundingClientRect().height)}px`
|
|
||||||
item.classList.add('menu-item-animating')
|
|
||||||
item.classList.add('menu-item-closing')
|
|
||||||
|
|
||||||
Menu._bindAnimationEndEvent(item, () => {
|
|
||||||
item.classList.remove('open')
|
|
||||||
clearItemStyle()
|
|
||||||
|
|
||||||
if (closeChildren) {
|
|
||||||
const opened = item.querySelectorAll('.menu-item.open')
|
|
||||||
for (let i = 0, l = opened.length; i < l; i++) opened[i].classList.remove('open')
|
|
||||||
}
|
|
||||||
|
|
||||||
this._onClosed(this, item, toggleLink, menu)
|
|
||||||
})
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
item.style.height = `${linkHeight}px`
|
|
||||||
}, 50)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
static _bindAnimationEndEvent(el, handler) {
|
|
||||||
const cb = e => {
|
|
||||||
if (e.target !== el) return
|
|
||||||
Menu._unbindAnimationEndEvent(el)
|
|
||||||
handler(e)
|
|
||||||
}
|
|
||||||
|
|
||||||
let duration = window.getComputedStyle(el).transitionDuration
|
|
||||||
duration = parseFloat(duration) * (duration.indexOf('ms') !== -1 ? 1 : 1000)
|
|
||||||
|
|
||||||
el._menuAnimationEndEventCb = cb
|
|
||||||
TRANSITION_EVENTS.forEach(ev => el.addEventListener(ev, el._menuAnimationEndEventCb, false))
|
|
||||||
|
|
||||||
el._menuAnimationEndEventTimeout = setTimeout(() => {
|
|
||||||
cb({ target: el })
|
|
||||||
}, duration + 50)
|
|
||||||
}
|
|
||||||
|
|
||||||
_getItemOffset(item) {
|
|
||||||
let curItem = this._inner.childNodes[0]
|
|
||||||
let left = 0
|
|
||||||
|
|
||||||
while (curItem !== item) {
|
|
||||||
if (curItem.tagName) {
|
|
||||||
left += Math.round(curItem.getBoundingClientRect().width)
|
|
||||||
}
|
|
||||||
|
|
||||||
curItem = curItem.nextSibling
|
|
||||||
}
|
|
||||||
|
|
||||||
return left
|
|
||||||
}
|
|
||||||
|
|
||||||
_updateSlider(wrapperWidth = null, innerWidth = null, position = null) {
|
|
||||||
const _wrapperWidth = wrapperWidth !== null ? wrapperWidth : Math.round(this._wrapper.getBoundingClientRect().width)
|
|
||||||
const _innerWidth = innerWidth !== null ? innerWidth : this._innerWidth
|
|
||||||
const _position = position !== null ? position : this._innerPosition
|
|
||||||
|
|
||||||
if (_innerWidth < _wrapperWidth || window.innerWidth < window.Helpers.LAYOUT_BREAKPOINT) {
|
|
||||||
this._prevBtn.classList.add('d-none')
|
|
||||||
this._nextBtn.classList.add('d-none')
|
|
||||||
} else {
|
|
||||||
this._prevBtn.classList.remove('d-none')
|
|
||||||
this._nextBtn.classList.remove('d-none')
|
|
||||||
}
|
|
||||||
if (_innerWidth > _wrapperWidth && window.innerWidth > window.Helpers.LAYOUT_BREAKPOINT) {
|
|
||||||
if (_position === 0) this._prevBtn.classList.add('disabled')
|
|
||||||
else this._prevBtn.classList.remove('disabled')
|
|
||||||
|
|
||||||
if (_innerWidth + _position <= _wrapperWidth) this._nextBtn.classList.add('disabled')
|
|
||||||
else this._nextBtn.classList.remove('disabled')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
static _promisify(fn, ...args) {
|
|
||||||
const result = fn(...args)
|
|
||||||
if (result instanceof Promise) {
|
|
||||||
return result
|
|
||||||
}
|
|
||||||
if (result === false) {
|
|
||||||
return Promise.reject()
|
|
||||||
}
|
|
||||||
return Promise.resolve()
|
|
||||||
}
|
|
||||||
|
|
||||||
get _innerWidth() {
|
|
||||||
const items = this._inner.childNodes
|
|
||||||
let width = 0
|
|
||||||
|
|
||||||
for (let i = 0, l = items.length; i < l; i++) {
|
|
||||||
if (items[i].tagName) {
|
|
||||||
width += Math.round(items[i].getBoundingClientRect().width)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return width
|
|
||||||
}
|
|
||||||
|
|
||||||
get _innerPosition() {
|
|
||||||
return parseInt(this._inner.style[this._rtl ? 'marginRight' : 'marginLeft'] || '0px', 10)
|
|
||||||
}
|
|
||||||
|
|
||||||
set _innerPosition(value) {
|
|
||||||
this._inner.style[this._rtl ? 'marginRight' : 'marginLeft'] = `${value}px`
|
|
||||||
return value
|
|
||||||
}
|
|
||||||
|
|
||||||
static _unbindAnimationEndEvent(el) {
|
|
||||||
const cb = el._menuAnimationEndEventCb
|
|
||||||
|
|
||||||
if (el._menuAnimationEndEventTimeout) {
|
|
||||||
clearTimeout(el._menuAnimationEndEventTimeout)
|
|
||||||
el._menuAnimationEndEventTimeout = null
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!cb) return
|
|
||||||
|
|
||||||
TRANSITION_EVENTS.forEach(ev => el.removeEventListener(ev, cb, false))
|
|
||||||
el._menuAnimationEndEventCb = null
|
|
||||||
}
|
|
||||||
|
|
||||||
closeAll(closeChildren = this._closeChildren) {
|
|
||||||
const opened = this._el.querySelectorAll('.menu-inner > .menu-item.open')
|
|
||||||
|
|
||||||
for (let i = 0, l = opened.length; i < l; i++) this.close(opened[i], closeChildren)
|
|
||||||
}
|
|
||||||
|
|
||||||
static setDisabled(el, disabled) {
|
|
||||||
Menu._getItem(el, false).classList[disabled ? 'add' : 'remove']('disabled')
|
|
||||||
}
|
|
||||||
|
|
||||||
static isActive(el) {
|
|
||||||
return Menu._getItem(el, false).classList.contains('active')
|
|
||||||
}
|
|
||||||
|
|
||||||
static isOpened(el) {
|
|
||||||
return Menu._getItem(el, false).classList.contains('open')
|
|
||||||
}
|
|
||||||
|
|
||||||
static isDisabled(el) {
|
|
||||||
return Menu._getItem(el, false).classList.contains('disabled')
|
|
||||||
}
|
|
||||||
|
|
||||||
update() {
|
|
||||||
if (!this._horizontal) {
|
|
||||||
if (this._scrollbar) {
|
|
||||||
this._scrollbar.update()
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
this.closeAll()
|
|
||||||
|
|
||||||
const wrapperWidth = Math.round(this._wrapper.getBoundingClientRect().width)
|
|
||||||
const innerWidth = this._innerWidth
|
|
||||||
let position = this._innerPosition
|
|
||||||
|
|
||||||
if (wrapperWidth - position > innerWidth) {
|
|
||||||
position = wrapperWidth - innerWidth
|
|
||||||
if (position > 0) position = 0
|
|
||||||
this._innerPosition = position
|
|
||||||
}
|
|
||||||
|
|
||||||
this._updateSlider(wrapperWidth, innerWidth, position)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
manageScroll() {
|
|
||||||
const { PerfectScrollbar } = window
|
|
||||||
const menuInner = document.querySelector('.menu-inner')
|
|
||||||
|
|
||||||
if (window.innerWidth < window.Helpers.LAYOUT_BREAKPOINT) {
|
|
||||||
if (this._scrollbar !== null) {
|
|
||||||
// window.Helpers.menuPsScroll.destroy()
|
|
||||||
this._scrollbar.destroy()
|
|
||||||
this._scrollbar = null
|
|
||||||
}
|
|
||||||
menuInner.classList.add('overflow-auto')
|
|
||||||
} else {
|
|
||||||
if (this._scrollbar === null) {
|
|
||||||
const menuScroll = new PerfectScrollbar(document.querySelector('.menu-inner'), {
|
|
||||||
suppressScrollX: true,
|
|
||||||
wheelPropagation: false
|
|
||||||
})
|
|
||||||
// window.Helpers.menuPsScroll = menuScroll
|
|
||||||
this._scrollbar = menuScroll
|
|
||||||
}
|
|
||||||
menuInner.classList.remove('overflow-auto')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
switchMenu(menu) {
|
|
||||||
// Unbind Events
|
|
||||||
this._unbindEvents()
|
|
||||||
|
|
||||||
// const html = document.documentElement
|
|
||||||
const navbar = document.querySelector('nav.layout-navbar')
|
|
||||||
const navbarCollapse = document.querySelector('#navbar-collapse')
|
|
||||||
/* const fullNavbar = document.querySelector('.layout-navbar-full')
|
|
||||||
const contentNavbar = document.querySelector('.layout-content-navbar')
|
|
||||||
const contentWrapper = document.querySelector('.content-wrapper') */
|
|
||||||
const asideMenuWrapper = document.querySelector('#layout-menu div')
|
|
||||||
const asideMenu = document.querySelector('#layout-menu')
|
|
||||||
const horzMenuClasses = ['layout-menu-horizontal', 'menu', 'menu-horizontal', 'container-fluid', 'flex-grow-0']
|
|
||||||
const vertMenuClasses = ['layout-menu', 'menu', 'menu-vertical']
|
|
||||||
const horzMenuWrapper = document.querySelector('.menu-horizontal-wrapper')
|
|
||||||
const menuInner = document.querySelector('.menu-inner')
|
|
||||||
const brand = document.querySelector('.app-brand')
|
|
||||||
const menuToggler = document.querySelector('.layout-menu-toggle')
|
|
||||||
const activeMenuItems = document.querySelectorAll('.menu-inner .active')
|
|
||||||
/* const layoutPage = document.querySelector('.layout-page')
|
|
||||||
const layoutContainer = document.querySelector('.layout-container')
|
|
||||||
const content = document.querySelector('.container-fluid') */
|
|
||||||
|
|
||||||
// const { PerfectScrollbar } = window
|
|
||||||
|
|
||||||
if (menu === 'vertical') {
|
|
||||||
this._horizontal = false
|
|
||||||
asideMenuWrapper.insertBefore(brand, horzMenuWrapper)
|
|
||||||
asideMenuWrapper.insertBefore(menuInner, horzMenuWrapper)
|
|
||||||
asideMenuWrapper.classList.add('flex-column', 'p-0')
|
|
||||||
asideMenu.classList.remove(...asideMenu.classList)
|
|
||||||
asideMenu.classList.add(...vertMenuClasses, this._menuBgClass)
|
|
||||||
brand.classList.remove('d-none', 'd-lg-flex')
|
|
||||||
menuToggler.classList.remove('d-none')
|
|
||||||
// if (PerfectScrollbar !== undefined) {
|
|
||||||
// this._psScroll = new PerfectScrollbar(document.querySelector('.menu-inner'), {
|
|
||||||
// suppressScrollX: true,
|
|
||||||
// wheelPropagation: !Menu._hasClass('layout-menu-fixed layout-menu-fixed-offcanvas')
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
|
|
||||||
menuInner.classList.add('overflow-auto')
|
|
||||||
|
|
||||||
// Add open class to active items
|
|
||||||
for (let i = 0; i < activeMenuItems.length - 1; ++i) {
|
|
||||||
activeMenuItems[i].classList.add('open')
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
this._horizontal = true
|
|
||||||
navbar.children[0].insertBefore(brand, navbarCollapse)
|
|
||||||
brand.classList.add('d-none', 'd-lg-flex')
|
|
||||||
horzMenuWrapper.appendChild(menuInner)
|
|
||||||
asideMenuWrapper.classList.remove('flex-column', 'p-0')
|
|
||||||
asideMenu.classList.remove(...asideMenu.classList)
|
|
||||||
asideMenu.classList.add(...horzMenuClasses, this._menuBgClass)
|
|
||||||
menuToggler.classList.add('d-none')
|
|
||||||
menuInner.classList.remove('overflow-auto')
|
|
||||||
|
|
||||||
// if (PerfectScrollbar !== undefined && this._psScroll !== null) {
|
|
||||||
// this._psScroll.destroy()
|
|
||||||
// this._psScroll = null
|
|
||||||
// }
|
|
||||||
|
|
||||||
// Remove open class from active items
|
|
||||||
for (let i = 0; i < activeMenuItems.length; ++i) {
|
|
||||||
activeMenuItems[i].classList.remove('open')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this._bindEvents()
|
|
||||||
}
|
|
||||||
|
|
||||||
destroy() {
|
|
||||||
if (!this._el) return
|
|
||||||
|
|
||||||
this._unbindEvents()
|
|
||||||
|
|
||||||
const items = this._el.querySelectorAll('.menu-item')
|
|
||||||
for (let i = 0, l = items.length; i < l; i++) {
|
|
||||||
Menu._unbindAnimationEndEvent(items[i])
|
|
||||||
items[i].classList.remove('menu-item-animating')
|
|
||||||
items[i].classList.remove('open')
|
|
||||||
items[i].style.overflow = null
|
|
||||||
items[i].style.height = null
|
|
||||||
}
|
|
||||||
|
|
||||||
const menus = this._el.querySelectorAll('.menu-menu')
|
|
||||||
for (let i2 = 0, l2 = menus.length; i2 < l2; i2++) {
|
|
||||||
menus[i2].style.marginRight = null
|
|
||||||
menus[i2].style.marginLeft = null
|
|
||||||
}
|
|
||||||
|
|
||||||
this._el.classList.remove('menu-no-animation')
|
|
||||||
|
|
||||||
if (this._wrapper) {
|
|
||||||
this._prevBtn.parentNode.removeChild(this._prevBtn)
|
|
||||||
this._nextBtn.parentNode.removeChild(this._nextBtn)
|
|
||||||
this._wrapper.parentNode.insertBefore(this._inner, this._wrapper)
|
|
||||||
this._wrapper.parentNode.removeChild(this._wrapper)
|
|
||||||
this._inner.style.marginLeft = null
|
|
||||||
this._inner.style.marginRight = null
|
|
||||||
}
|
|
||||||
|
|
||||||
this._el.menuInstance = null
|
|
||||||
delete this._el.menuInstance
|
|
||||||
|
|
||||||
this._el = null
|
|
||||||
this._horizontal = null
|
|
||||||
this._animate = null
|
|
||||||
this._accordion = null
|
|
||||||
this._showDropdownOnHover = null
|
|
||||||
this._closeChildren = null
|
|
||||||
this._rtl = null
|
|
||||||
this._onOpen = null
|
|
||||||
this._onOpened = null
|
|
||||||
this._onClose = null
|
|
||||||
this._onClosed = null
|
|
||||||
if (this._scrollbar) {
|
|
||||||
this._scrollbar.destroy()
|
|
||||||
this._scrollbar = null
|
|
||||||
}
|
|
||||||
this._inner = null
|
|
||||||
this._prevBtn = null
|
|
||||||
this._wrapper = null
|
|
||||||
this._nextBtn = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue