diff --git a/src/main/webapp/WEB-INF/jsp/include/userMenus.jsp b/src/main/webapp/WEB-INF/jsp/include/userMenus.jsp index 67fef2d9..2b1e68c2 100644 --- a/src/main/webapp/WEB-INF/jsp/include/userMenus.jsp +++ b/src/main/webapp/WEB-INF/jsp/include/userMenus.jsp @@ -72,7 +72,7 @@ - + let userMenus = ${userMenus}; <%--if (menus.length < 1) @@ -87,6 +87,12 @@ {"id":4, "name": "메뉴", "url":"/menu/list.do", "parentID":null, "description":"메뉴 관리", "imagePath":null, "displayWindow":"_self"} ];--%> -let mr = new FimsMenuSupport(''); -mr.menuDraw(userMenus); +function setUserMenus(menus) { + let menuSupport = new FimsMenuSupport("#layout-menu").setMenuInfo(menus).setActive(wctx.current()); + let currentMenu = menuSupport.getMenu(wctx.current()); + if (currentMenu) + setPageTitle(currentMenu.name); +} + +setUserMenus(userMenus); \ No newline at end of file diff --git a/src/main/webapp/WEB-INF/jsp/template/fims/layout-biz-org.jsp b/src/main/webapp/WEB-INF/jsp/template/fims/layout-biz-org.jsp deleted file mode 100644 index e8009ddf..00000000 --- a/src/main/webapp/WEB-INF/jsp/template/fims/layout-biz-org.jsp +++ /dev/null @@ -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" %> - - - - - <%@include file="/WEB-INF/jsp/include/fims/tail-biz.jsp" %> - - - - - - -
- -
- -
-
- - -
-
-
-

<%@include file="/WEB-INF/jsp/include/fims/breadcrumb.jsp" %>

-
- -

${urlInfoMap.menuName}

-
- -
- -
-
-
-
- -
- - -
- - - - - diff --git a/src/main/webapp/WEB-INF/jsp/template/fims/layout-biz-root.jsp b/src/main/webapp/WEB-INF/jsp/template/fims/layout-biz-root.jsp index 2791d484..52ecc91a 100644 --- a/src/main/webapp/WEB-INF/jsp/template/fims/layout-biz-root.jsp +++ b/src/main/webapp/WEB-INF/jsp/template/fims/layout-biz-root.jsp @@ -28,7 +28,7 @@ <%@include file="/WEB-INF/jsp/include/fims/tail-biz.jsp" %> - + diff --git a/src/main/webapp/resources/js/fims/biz/layout/ifrTabs.js b/src/main/webapp/resources/js/base/menu-support-fims-ifrTabs.js similarity index 75% rename from src/main/webapp/resources/js/fims/biz/layout/ifrTabs.js rename to src/main/webapp/resources/js/base/menu-support-fims-ifrTabs.js index 60215eab..d5ecc58c 100644 --- a/src/main/webapp/resources/js/fims/biz/layout/ifrTabs.js +++ b/src/main/webapp/resources/js/base/menu-support-fims-ifrTabs.js @@ -4,19 +4,25 @@ const iframeMap = {}, openMax = 8; -function openMenu(menuId, menuNm, params) { +function openMenu(obj, menuNm, params) { + + let menuNm = $(obj).find("div")[0].dataSet.i18n; + + let dataKey = obj.parent.dataSet.dataKey; + + const OPEN_TAB_CNT = $('div#ifrTabs > ul > li').length; - if(iframeMap[menuId]){ + if(iframeMap[dataKey]){ // 해당 tab 활성화 $("#ifrTabs").find("ul li button.nav-link").each((idx, data) => { - if(data.dataset.bsTarget == ("#tab-"+menuId)) { + if(data.dataset.bsTarget == ("#tab-"+dataKey)) { $(data).trigger("click"); } }); - let iframeObj = document.getElementById(menuId); + let iframeObj = document.getElementById(dataKey); return iframeObj; } if(OPEN_TAB_CNT === openMax){ @@ -27,26 +33,26 @@ function openMenu(menuId, menuNm, params) { const num_tabs = OPEN_TAB_CNT + 1; - let liEl = ''; $('div#ifrTabs ul').append(liEl); - $('div#ifrTabContents').append(''); + $('div#ifrTabContents').append('
'); - let menuUrl = "/framework/biz/cmm/goTo/byMenuNo?menuNo=" + menuId; + let menuUrl = "/framework/biz/cmm/goTo/byMenuNo?menuNo=" + dataKey; if(params != null){ menuUrl = menuUrl + params; } const $iframe = $(""); - $iframe.attr("id" , menuId) + $iframe.attr("id" , dataKey) .attr("name" , menuNm) .attr("title" , menuNm) .attr("frameborder" , "0") @@ -62,13 +68,13 @@ function openMenu(menuId, menuNm, params) { ; - $("#tab-" + menuId).append($iframe); + $("#tab-" + dataKey).append($iframe); - iframeMap[menuId] = $iframe; + iframeMap[dataKey] = $iframe; $("div#ifrTabs ul li button.nav-link").last().trigger("click"); - let iframeObj = document.getElementById(menuId); + let iframeObj = document.getElementById(dataKey); return iframeObj; } diff --git a/src/main/webapp/resources/js/base/menu-support-fims.js b/src/main/webapp/resources/js/base/menu-support-fims.js new file mode 100644 index 00000000..106cf91a --- /dev/null +++ b/src/main/webapp/resources/js/base/menu-support-fims.js @@ -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 = '
  • ' + +'' + +'' + +'
    {menuName}
    ' + +'    ' + +'{menuSub}' + +'
    • '; + + this._menuSub = ''; + this._menus = []; + } + + /**메뉴를 생성할 정보를 설정한다. + * @param menus {array} 메뉴 정보 배열
    + * 각 메뉴 정보의 레이아웃은 다음과 같다.
    + * {"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); + } +} \ No newline at end of file diff --git a/src/main/webapp/resources/js/fims/biz/layout/menu-support-fims.js b/src/main/webapp/resources/js/fims/biz/layout/menu-support-fims.js deleted file mode 100644 index 419f10bc..00000000 --- a/src/main/webapp/resources/js/fims/biz/layout/menu-support-fims.js +++ /dev/null @@ -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 - }); - - }; -}; \ No newline at end of file