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