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