https://sea.cc.ntpu.edu.tw/pls/ntpu_cof/suggestion_test_js.mo_overlay_suggest

1import {inputSearchBar} from './suggestion_test_js.mo_search'
2import {getDataToDisplay} from './suggestion_test_js.mo_appendix'
3var openState = false
4
5            function toggleOverlay(e) {
6               let o_flag = this?.dataset?.[`overlay`]?.trim();
7               if(!o_flag) return;
8
9               fetchOverlayTemp(this,o_flag)
10 
11            }
12        
13
14            //³B²zÃö³¬«ö¶s
15            function closeOverlay() {
16                if(!openState) return; // ¦pªG¨S¦³¥´¶}overlay¤£Ä²µo
17                let overCloseBtn = document?.querySelectorAll(`.overClose_btn`);
18                
19                over_page.addEventListener(`click`,(e) => overlayClear(e,over_page));
20                overCloseBtn ? [...overCloseBtn].forEach(btn => btn.addEventListener(`click`,(e) => overlayClear(e,over_page))) : null;
21                
22                openState = false;
23            }
24        
25
26            //§ìoverlayª©«¬
27            function fetchOverlayTemp(el=null,flag) {
28                let temp = `suggestion_test_html.popup_html?flag=${flag}`
29                axios.get(temp)
30                .then(res => res.data)
31                .then(data => overlayOpen(el,data))
32            }
33        
34
35            function overlayOpen(el=null,temp) {
36               over_page.innerHTML = temp;
37               openState = true;
38               document.body.style.overflow = `hidden`;
39               el ? getDataToDisplay(el) : null; //³B²zªþ¥ó
40               
41                // overlay page­×§ïdisplay
42               over_page.style.display = `block`;
43               inputSearchBar(); //«Ø¨¥¶°·j´M
44               closeOverlay();
45            }
46        
47
48            function overlayClear(e,par) {
49                let page = document?.querySelector(`.overlay_wrap`);
50                if(e.target.closest(`.overlay_wrap`) === page) return; //±Æ°£¤º³¡ªº³¡¤À
51                
52                par.style.display = `none`;
53                let children = par?.children;
54                children ? [...children].forEach(el => el.remove()) : null;
55                document.body.style.overflow = `auto`;
56            }
57        
58export {toggleOverlay,fetchOverlayTemp}