refactor : 메뉴렌더링 자바스크립트 함수 별도 파일로 생성
parent
6601c0dc02
commit
9fe48cc8e9
@ -0,0 +1,155 @@
|
||||
/* ====================
|
||||
* 2023.03.22 이범준
|
||||
* 동적 메뉴 렌더링 함수
|
||||
====================*/
|
||||
function MenuRender() {
|
||||
let _self = this;
|
||||
_self.template = null;
|
||||
|
||||
_self.rootUlAttrDraw = null;
|
||||
_self.ulAttrDraw = null;
|
||||
_self.liAttrDraw = null;
|
||||
_self.liContentDraw = null;
|
||||
|
||||
//메뉴 렌더링 설정 초기화
|
||||
this.init = function(){
|
||||
|
||||
switch(_self.template){
|
||||
case "sneat" :
|
||||
_self.rootUlAttrDraw = function(element){
|
||||
element.className = "menu-inner";
|
||||
};
|
||||
_self.ulAttrDraw = function(element, menuObj){
|
||||
element.className = "menu-sub";
|
||||
};
|
||||
_self.liAttrDraw = function(element, menuObj){
|
||||
element.className = "menu-item";
|
||||
};
|
||||
_self.liContentDraw = function(element, menuObj){
|
||||
|
||||
let a = document.createElement("a");
|
||||
a.href = "javascript:void(0)";
|
||||
a.classList.add("menu-link");
|
||||
if(menuObj.childCnt > 0){ //하위메뉴가 있으면
|
||||
a.classList.add("menu-toggle");
|
||||
} else {
|
||||
a.setAttribute("onclick", "openMenu('"+menuObj.menuSid+"', '"+menuObj.menuName+"', '"+menuObj.menuUrl+"')");
|
||||
}
|
||||
|
||||
// 아이콘
|
||||
let i = document.createElement("i");
|
||||
i.classList.add("menu-icon");
|
||||
i.classList.add("bx");
|
||||
if(menuObj.iconClass != null && menuObj.iconClass != ""){
|
||||
i.classList.add(menuObj.iconClass);
|
||||
} else {
|
||||
menuObj.childCnt > 0 ? i.classList.add("bx-folder-plus") : i.classList.add("bx-file");
|
||||
}
|
||||
|
||||
a.appendChild(i);
|
||||
|
||||
let div = document.createElement("div");
|
||||
let text = document.createTextNode(menuObj.menuName);
|
||||
div.appendChild(text);
|
||||
a.appendChild(div);
|
||||
element.appendChild(a);
|
||||
};
|
||||
break;
|
||||
default :
|
||||
_self.rootUlAttrDraw = function(element){};
|
||||
_self.ulAttrDraw = function(element, menuObj){};
|
||||
_self.liAttrDraw = function(element, menuObj){};
|
||||
_self.liContentDraw = function(element, menuObj){};
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
//메뉴 렌더링
|
||||
this.menuDraw = function(allMenuList){
|
||||
let rootUl = document.getElementById("sneatMenuUl");
|
||||
_self.rootUlAttrDraw(rootUl);
|
||||
|
||||
for(let status1 = 0; status1 < allMenuList.length; status1++){
|
||||
let dep1 = allMenuList[status1];
|
||||
if(dep1.menuDepth == 1){
|
||||
let li = document.createElement("li");
|
||||
_self.liAttrDraw(li,dep1);
|
||||
_self.liContentDraw(li,dep1);
|
||||
|
||||
if(Number(dep1.childCnt) > 0){
|
||||
let ul = document.createElement("ul");
|
||||
_self.ulAttrDraw(ul,dep1);
|
||||
li.appendChild(ul);
|
||||
|
||||
for(let status2 = 0; status2 < allMenuList.length; status2++){
|
||||
let dep2 = allMenuList[status2];
|
||||
if(dep2.menuDepth == 2 && dep1.menuSid == dep2.parentSid) {
|
||||
let li = document.createElement("li");
|
||||
_self.liAttrDraw(li,dep2);
|
||||
_self.liContentDraw(li,dep2);
|
||||
|
||||
if(Number(dep2.childCnt) > 0){
|
||||
let ul = document.createElement("ul");
|
||||
_self.ulAttrDraw(ul,dep2);
|
||||
li.appendChild(ul);
|
||||
|
||||
for(let status3 = 0; status3 < allMenuList.length; status3++){
|
||||
let dep3 = allMenuList[status3];
|
||||
if(dep3.menuDepth == 3 && dep2.menuSid == dep3.parentSid) {
|
||||
let li = document.createElement("li");
|
||||
_self.liAttrDraw(li,dep3);
|
||||
_self.liContentDraw(li,dep3);
|
||||
|
||||
if(Number(dep3.childCnt) > 0){
|
||||
let ul = document.createElement("ul");
|
||||
_self.ulAttrDraw(ul,dep3);
|
||||
li.appendChild(ul);
|
||||
|
||||
for(let status4 = 0; status4 < allMenuList.length; status4++) {
|
||||
let dep4 = allMenuList[status4];
|
||||
if(dep4.menuDepth == 4 && dep3.menuSid == dep4.parentSid){
|
||||
let li = document.createElement("li");
|
||||
_self.liAttrDraw(li,dep4);
|
||||
_self.liContentDraw(li,dep4);
|
||||
|
||||
ul.appendChild(li);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.appendChild(li);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.appendChild(li);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
rootUl.append(li);
|
||||
}
|
||||
}
|
||||
|
||||
if(_self.template == "sneat"){
|
||||
|
||||
const menu1 = document.querySelector("#sneatMenu");
|
||||
menu1.classList.add("menu");
|
||||
menu1.classList.add("menu-vertical");
|
||||
menu1.classList.add("bg-menu-theme");
|
||||
menu1.classList.add("overflow-hidden");
|
||||
|
||||
if (menu1) {
|
||||
new Menu(menu1 , { closeChildren : false, accordion : false });
|
||||
}
|
||||
} else {
|
||||
|
||||
}
|
||||
|
||||
//스크롤바 추가
|
||||
new PerfectScrollbar(document.querySelector('.menu-inner'), {
|
||||
wheelPropagation: false
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue