no message
parent
89ac95b3c2
commit
dde14015b5
@ -1,54 +0,0 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
|
||||
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<%@include file="/WEB-INF/jsp/include/fims/tail-biz.jsp" %>
|
||||
<script type="text/javaScript">
|
||||
var popup = null;
|
||||
var unblockUI = () => $.unblockUI();
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<!-- <body> -->
|
||||
<body>
|
||||
|
||||
<div id="skipnavigation">
|
||||
<ul>
|
||||
<li><a href="#content-box">본문 바로가기</a></li>
|
||||
<li><a href="#lnb">주 메뉴 바로가기</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- //skipnavigation -->
|
||||
<div id="wrap">
|
||||
<div class="bind-contents">
|
||||
<t:insertAttribute name="header"/>
|
||||
|
||||
<div class="cont main">
|
||||
<div class="cont_container">
|
||||
<article class="main" id="content-box">
|
||||
<p class="history"><%@include file="/WEB-INF/jsp/include/fims/breadcrumb.jsp" %></p>
|
||||
<div class="container-window-header1">
|
||||
<img src="${ctx }/resources/image/fims/biz/common/titleLogo_01.png"/>
|
||||
<p class="container-window-header-title">${urlInfoMap.menuName}</p>
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<t:insertAttribute name="content"/>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<!-- //cont main -->
|
||||
</div>
|
||||
<!-- //bind-contents -->
|
||||
<t:insertAttribute name="footer"/>
|
||||
</div>
|
||||
<!-- //wrap -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@ -0,0 +1,182 @@
|
||||
/**메뉴의 생성과 선택 시 동작을 지원한다.
|
||||
*/
|
||||
class FimsMenuSupport {
|
||||
/**새 MenuSupport를 생성한다.
|
||||
* @param selector {string} 메뉴를 담을 컨테이너에 대한 css selector
|
||||
*/
|
||||
constructor(selector) {
|
||||
this._container = document.querySelector(this._selector = selector);
|
||||
this._horizontal = this._container && this._container.classList.contains('menu-horizontal');
|
||||
this._orientation = this._horizontal ? "horizontal" : "vertical";
|
||||
this._template = this._orientation + "-menu-template";
|
||||
|
||||
this._menuItem = '<li data-key="{menuID}" class="menu-item">'
|
||||
+'<a href="#" data-url="{url}" onclick="openMenu(this)" class="menu-link{toggle}">'
|
||||
+'<i class="menu-icon tf-icons bx bx-layout"></i>'
|
||||
+'<div data-i18n="{menuName}">{menuName}</div>'
|
||||
+'</a>'
|
||||
+'{menuSub}'
|
||||
+'</li>';
|
||||
|
||||
this._menuSub = '<ul class="menu-sub">{children}</ul>';
|
||||
this._menus = [];
|
||||
}
|
||||
|
||||
/**메뉴를 생성할 정보를 설정한다.
|
||||
* @param menus {array} 메뉴 정보 배열<br />
|
||||
* 각 메뉴 정보의 레이아웃은 다음과 같다.<br />
|
||||
* {"id":메뉴 아이디, "name":"메뉴 이름", "url":"실행 url", "parentID":"상위 메뉴 아이디", "description":"메뉴 설명", "imagePath":"이미지 경로", "displayWindow":"표시 창", "children":[하위 메뉴 배열]}
|
||||
* @returns MenuSupport
|
||||
*/
|
||||
setMenuInfo(menus) {
|
||||
let setParent = menu => {
|
||||
let children = menu.children || [];
|
||||
if (children.length < 1) return;
|
||||
|
||||
children.forEach(child => {
|
||||
child.parent = menu;
|
||||
setParent(child);
|
||||
});
|
||||
};
|
||||
menus.forEach(menu => setParent(menu));
|
||||
this._menus = menus;
|
||||
|
||||
let menuItemTag = menu => {
|
||||
let tag = this._menuItem
|
||||
.replace(/{menuID}/gi, menu.id)
|
||||
.replace(/{menuName}/gi, menu.name)
|
||||
.replace(/{url}/gi, !menu.url ? "javascript:void(0);" : wctx.url(menu.url));
|
||||
let parent = menu.children && menu.children.length > 0;
|
||||
tag = tag.replace(/{toggle}/gi, !parent ? "" : " menu-toggle");
|
||||
if (!parent)
|
||||
return tag.replace(/{menuSub}/gi, "");
|
||||
|
||||
let children = menu.children.map(child => menuItemTag(child)).join("\n\t")
|
||||
return tag.replace(/{menuSub}/gi, this._menuSub.replace(/{children}/gi, children));
|
||||
}
|
||||
let tags = (menus || []).map(menu => menuItemTag(menu));
|
||||
document.querySelector("#menus").innerHTML = tags.join("");
|
||||
|
||||
return this._init();
|
||||
}
|
||||
|
||||
_init() {
|
||||
document.querySelectorAll(this._selector).forEach(element => {
|
||||
let menu = new Menu(element, {
|
||||
orientation: this._orientation,
|
||||
closeChildren: this._horizontal,
|
||||
showDropdownOnHover: localStorage.getItem('templateCustomizer-' + this._template + '--ShowDropdownOnHover')
|
||||
? localStorage.getItem('templateCustomizer-' + this._template + '--ShowDropdownOnHover') === 'true'
|
||||
: window.templateCustomizer !== undefined
|
||||
? window.templateCustomizer.settings.defaultShowDropdownOnHover
|
||||
: true
|
||||
});
|
||||
|
||||
window.Helpers.scrollToActive(false); //animate = false
|
||||
window.Helpers.mainMenu = menu;
|
||||
});
|
||||
//Sets toggler
|
||||
document.querySelectorAll('.layout-menu-toggle').forEach(item => {
|
||||
item.addEventListener('click', event => {
|
||||
event.preventDefault();
|
||||
window.Helpers.toggleCollapsed();
|
||||
if (config.enableMenuLocalStorage && !window.Helpers.isSmallScreen()) {
|
||||
try {
|
||||
localStorage.setItem(
|
||||
'templateCustomizer-' + this._template + '--LayoutCollapsed',
|
||||
String(window.Helpers.isCollapsed())
|
||||
);
|
||||
} catch (e) {}
|
||||
}
|
||||
});
|
||||
});
|
||||
// Display menu toggle (layout-menu-toggle) on hover with delay
|
||||
let delay = (elem, callback) => {
|
||||
let timeout = null;
|
||||
elem.onmouseenter = () => {
|
||||
// Set timeout to be a timer which will invoke callback after 300ms (not for small screen)
|
||||
timeout = !Helpers.isSmallScreen() ? setTimeout(callback, 300) : setTimeout(callback, 0);
|
||||
};
|
||||
|
||||
elem.onmouseleave = () => {
|
||||
// Clear any timers set to timeout
|
||||
document.querySelector('.layout-menu-toggle').classList.remove('d-block');
|
||||
clearTimeout(timeout);
|
||||
};
|
||||
};
|
||||
if (this._container) {
|
||||
delay(this._container, () => {
|
||||
// not for small screen
|
||||
if (!Helpers.isSmallScreen()) {
|
||||
document.querySelector('.layout-menu-toggle').classList.add('d-block');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
/**지정한 url의 메뉴를 활성화 한다.
|
||||
* @param url {string} 메뉴 url
|
||||
* @returns MenuSupport
|
||||
*/
|
||||
setActive(url) {
|
||||
document
|
||||
.querySelectorAll(this._selector + " li")
|
||||
.forEach(li => li.classList.remove("active", "open"));
|
||||
|
||||
let a = document.querySelector(this._selector + ' a[href=\"' + wctx.url(url) + '\"]');
|
||||
if (!a) return this;
|
||||
|
||||
let activate = (e, open) => {
|
||||
let p = e.parentNode;
|
||||
let tag = (p != this._container ? p : null) ? p.tagName : "";
|
||||
if (!tag) return;
|
||||
|
||||
if ("li" == tag.toLowerCase()) {
|
||||
p.classList.add("active");
|
||||
if (open)
|
||||
p.classList.add("open");
|
||||
}
|
||||
activate(p, true);
|
||||
|
||||
};
|
||||
|
||||
activate(a);
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
/**지정하는 url의 메뉴 정보를 반환한다.
|
||||
* @param url {string} 메뉴 url
|
||||
* @returns 지정하는 url의 메뉴 정보
|
||||
*/
|
||||
getMenu(url) {
|
||||
let find = menus => {
|
||||
for (let i = 0; i < menus.length; ++i) {
|
||||
let menu = menus[i];
|
||||
if (url == menu.url)
|
||||
return menu;
|
||||
let found = find(menu.children || []);
|
||||
if (found)
|
||||
return found;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
return find(this._menus);
|
||||
}
|
||||
|
||||
breadcrumb(url, separator = " / ") {
|
||||
let menu = this.getMenu(url);
|
||||
if (!menu)
|
||||
return "";
|
||||
|
||||
let getName = menu => {
|
||||
let name = menu.name;
|
||||
let parent = !menu.parent ? "" : getName(menu.parent);
|
||||
return parent ? parent + separator + name : name;
|
||||
}
|
||||
|
||||
return getName(menu);
|
||||
}
|
||||
}
|
||||
@ -1,135 +0,0 @@
|
||||
/* ====================
|
||||
* 2023.03.22 이범준
|
||||
* 동적 메뉴 렌더링 함수
|
||||
====================*/
|
||||
class FimsMenuSupport {
|
||||
constructor(selector) {
|
||||
|
||||
this.rootUlAttrDraw = function(element){
|
||||
element.className = "menu-inner";
|
||||
};
|
||||
this.ulAttrDraw = function(element, menuObj){
|
||||
element.className = "menu-sub";
|
||||
};
|
||||
this.liAttrDraw = function(element, menuObj){
|
||||
element.className = "menu-item";
|
||||
};
|
||||
this.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+"')");
|
||||
}
|
||||
|
||||
// 아이콘
|
||||
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);
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
//메뉴 렌더링
|
||||
menuDraw(allMenuList){
|
||||
let rootUl = document.getElementById("menus");
|
||||
this.rootUlAttrDraw(rootUl);
|
||||
|
||||
for(let status1 = 0; status1 < allMenuList.length; status1++){
|
||||
let dep1 = allMenuList[status1];
|
||||
if(dep1.menuDepth == 1){
|
||||
let li = document.createElement("li");
|
||||
this.liAttrDraw(li,dep1);
|
||||
this.liContentDraw(li,dep1);
|
||||
|
||||
if(Number(dep1.childCnt) > 0){
|
||||
let ul = document.createElement("ul");
|
||||
this.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");
|
||||
this.liAttrDraw(li,dep2);
|
||||
this.liContentDraw(li,dep2);
|
||||
|
||||
if(Number(dep2.childCnt) > 0){
|
||||
let ul = document.createElement("ul");
|
||||
this.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");
|
||||
this.liAttrDraw(li,dep3);
|
||||
this.liContentDraw(li,dep3);
|
||||
|
||||
if(Number(dep3.childCnt) > 0){
|
||||
let ul = document.createElement("ul");
|
||||
this.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");
|
||||
this.liAttrDraw(li,dep4);
|
||||
this.liContentDraw(li,dep4);
|
||||
|
||||
ul.appendChild(li);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.appendChild(li);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.appendChild(li);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
rootUl.append(li);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
const menu1 = document.querySelector("#layout-menu");
|
||||
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 });
|
||||
}
|
||||
|
||||
|
||||
//스크롤바 추가
|
||||
new PerfectScrollbar(document.querySelector('.menu-inner'), {
|
||||
wheelPropagation: false
|
||||
});
|
||||
|
||||
};
|
||||
};
|
||||
Loading…
Reference in New Issue