https://unhr.co.kr/asset/un/js/header.js

1function _defineProperty(obj, key, value) {
2    if (key in obj) {
3        Object.defineProperty(obj, key, {
4            value: value,
5            enumerable: true,
6            configurable: true,
7            writable: true
8        });
9    } else {
10        obj[key] = value;
11    }
12    return obj;
13}
14const ANIMATION_DURATION = 300;
15
16const SIDEBAR_EL = document.getElementById("sidebar");
17
18const SUB_MENU_ELS = document.querySelectorAll(
19    ".menu > ul > .menu-item.sub-menu");
20
21
22const FIRST_SUB_MENUS_BTN = document.querySelectorAll(
23    ".menu > ul > .menu-item.sub-menu > a");
24
25
26const INNER_SUB_MENUS_BTN = document.querySelectorAll(
27    ".menu > ul > .menu-item.sub-menu .menu-item.sub-menu > a");
28
29
30class PopperObject {
31
32
33
34
35    constructor(reference, popperTarget) {
36        _defineProperty(this, "instance", null);
37        _defineProperty(this, "reference", null);
38        _defineProperty(this, "popperTarget", null);
39        this.init(reference, popperTarget);
40    }
41
42    init(reference, popperTarget) {
43        this.reference = reference;
44        this.popperTarget = popperTarget;
45        this.instance = Popper.createPopper(this.reference, this.popperTarget, {
46            placement: "right",
47            strategy: "fixed",
48            resize: true,
49            modifiers: [{
50                    name: "computeStyles",
51                    options: {
52                        adaptive: false
53                    }
54                },
55
56
57                {
58                    name: "flip",
59                    options: {
60                        fallbackPlacements: ["left", "right"]
61                    }
62                }
63            ]
64        });
65
66
67
68
69
70        document.addEventListener(
71            "click",
72            e => this.clicker(e, this.popperTarget, this.reference),
73            false);
74
75
76        const ro = new ResizeObserver(() => {
77            this.instance.update();
78        });
79
80        ro.observe(this.popperTarget);
81        ro.observe(this.reference);
82    }
83
84    clicker(event, popperTarget, reference) {
85        if (
86            SIDEBAR_EL.classList.contains("collapsed") &&
87            !popperTarget.contains(event.target) &&
88            !reference.contains(event.target)) {
89            this.hide();
90        }
91    }
92
93    hide() {
94        this.instance.state.elements.popper.style.visibility = "hidden";
95    }
96}
97
98
99class Poppers {
100
101
102    constructor() {
103        _defineProperty(this, "subMenuPoppers", []);
104        this.init();
105    }
106
107    init() {
108        SUB_MENU_ELS.forEach(element => {
109            this.subMenuPoppers.push(
110                new PopperObject(element, element.lastElementChild));
111
112            this.closePoppers();
113        });
114    }
115
116    togglePopper(target) {
117        if (window.getComputedStyle(target).visibility === "hidden")
118            target.style.visibility = "visible";
119        else
120            target.style.visibility = "hidden";
121    }
122
123    updatePoppers() {
124        this.subMenuPoppers.forEach(element => {
125            element.instance.state.elements.popper.style.display = "none";
126            element.instance.update();
127        });
128    }
129
130    closePoppers() {
131        this.subMenuPoppers.forEach(element => {
132            element.hide();
133        });
134    }
135}
136
137
138const slideUp = (target, duration = ANIMATION_DURATION) => {
139    const {
140        parentElement
141    } = target;
142    parentElement.classList.remove("open");
143    target.style.transitionProperty = "height, margin, padding";
144    target.style.transitionDuration = `${duration}ms`;
145    target.style.boxSizing = "border-box";
146    target.style.height = `${target.offsetHeight}px`;
147    target.offsetHeight;
148    target.style.overflow = "hidden";
149    target.style.height = 0;
150    target.style.paddingTop = 0;
151    target.style.paddingBottom = 0;
152    target.style.marginTop = 0;
153    target.style.marginBottom = 0;
154    window.setTimeout(() => {
155        target.style.display = "none";
156        target.style.removeProperty("height");
157        target.style.removeProperty("padding-top");
158        target.style.removeProperty("padding-bottom");
159        target.style.removeProperty("margin-top");
160        target.style.removeProperty("margin-bottom");
161        target.style.removeProperty("overflow");
162        target.style.removeProperty("transition-duration");
163        target.style.removeProperty("transition-property");
164    }, duration);
165};
166const slideDown = (target, duration = ANIMATION_DURATION) => {
167    const {
168        parentElement
169    } = target;
170    parentElement.classList.add("open");
171    target.style.removeProperty("display");
172    let {
173        display
174    } = window.getComputedStyle(target);
175    if (display === "none") display = "block";
176    target.style.display = display;
177    const height = target.offsetHeight;
178    target.style.overflow = "hidden";
179    target.style.height = 0;
180    target.style.paddingTop = 0;
181    target.style.paddingBottom = 0;
182    target.style.marginTop = 0;
183    target.style.marginBottom = 0;
184    target.offsetHeight;
185    target.style.boxSizing = "border-box";
186    target.style.transitionProperty = "height, margin, padding";
187    target.style.transitionDuration = `${duration}ms`;
188    target.style.height = `${height}px`;
189    target.style.removeProperty("padding-top");
190    target.style.removeProperty("padding-bottom");
191    target.style.removeProperty("margin-top");
192    target.style.removeProperty("margin-bottom");
193    window.setTimeout(() => {
194        target.style.removeProperty("height");
195        target.style.removeProperty("overflow");
196        target.style.removeProperty("transition-duration");
197        target.style.removeProperty("transition-property");
198    }, duration);
199};
200
201const slideToggle = (target, duration = ANIMATION_DURATION) => {
202    if (window.getComputedStyle(target).display === "none")
203        return slideDown(target, duration);
204    return slideUp(target, duration);
205};
206
207const PoppersInstance = new Poppers();
208
209/**
210 * wait for the current animation to finish and update poppers position
211 */
212const updatePoppersTimeout = () => {
213    setTimeout(() => {
214        PoppersInstance.updatePoppers();
215    }, ANIMATION_DURATION);
216};
217
218/**
219 * sidebar collapse handler
220 */
221document.getElementById("btn-collapse").addEventListener("click", () => {
222    SIDEBAR_EL.classList.toggle("collapsed");
223    PoppersInstance.closePoppers();
224    if (SIDEBAR_EL.classList.contains("collapsed"))

225        FIRST_SUB_MENUS_BTN.forEach(element => {
226            element.parentElement.classList.remove("open");
227        });
228
229    updatePoppersTimeout();
230});
231
232/**
233 * sidebar toggle handler (on break point )
234 */
235document.getElementById("btn-toggle").addEventListener("click", () => {
236    SIDEBAR_EL.classList.toggle("toggled");
237
238    updatePoppersTimeout();
239});
240
241/**
242 * toggle sidebar on overlay click
243 */
244document.getElementById("overlay").addEventListener("click", () => {
245    SIDEBAR_EL.classList.toggle("toggled");
246});
247
248const defaultOpenMenus = document.querySelectorAll(".menu-item.sub-menu.open");
249
250defaultOpenMenus.forEach(element => {
251    element.lastElementChild.style.display = "block";
252});
253
254/**
255 * handle top level submenu click
256 */
257FIRST_SUB_MENUS_BTN.forEach(element => {
258    element.addEventListener("click", () => {
259        if (SIDEBAR_EL.classList.contains("collapsed"))
260            PoppersInstance.togglePopper(element.nextElementSibling);
261        else {
262            const parentMenu = element.closest(".menu.open-current-submenu");
263            if (parentMenu)
264                parentMenu.
265            querySelectorAll(":scope > ul > .menu-item.sub-menu > a").
266            forEach(
267                (el) =>
268                window.getComputedStyle(el.nextElementSibling).display !==
269                "none" && slideUp(el.nextElementSibling));
270
271            slideToggle(element.nextElementSibling);
272        }
273    });
274});
275
276/**
277 * handle inner submenu click
278 */
279INNER_SUB_MENUS_BTN.forEach(element => {
280    element.addEventListener("click", () => {
281        slideToggle(element.nextElementSibling);
282    });
283});