{"id":12090,"date":"2022-02-24T21:43:59","date_gmt":"2022-02-24T12:43:59","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=12090"},"modified":"2022-03-10T08:48:54","modified_gmt":"2022-03-09T23:48:54","slug":"gwc-ui-library-gwccreatemodaldialog-%ed%95%a8%ec%88%98-2","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=12090","title":{"rendered":"#GWC UI Library : gwcCreateModalDialog \ud568\uc218"},"content":{"rendered":"<p>\uc6f9 UI \ub77c\uc774\ube0c\ub7ec\ub9ac\uc778 GWC\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 gwcCreateModalDialog \ud568\uc218\uc5d0 \ub300\ud55c \uc608\uc81c \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n<p>\uba3c\uc800 DOM \uad6c\uc131\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">\r\n<div class=\"center\">\r\n    <gwc-button id=\"btn\" title=\"\ub300\ud654\uc0c1\uc790 \ud45c\uc2dc\"><\/gwc-button>\r\n<\/div>\r\n<\/pre>\n<p>\uadf8\ub9ac\uace0 CSS \uad6c\uc131\uc740 \ub2e4\uc74c\uacfc \uac19\uad6c\uc694.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">\r\n.center {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    flex-direction: column;\r\n    width: 100%;\r\n    height: 100vh;\r\n}\r\n\r\n.hcenter {\r\n    display: flex;\r\n    align-items: center;\r\n    flex-direction: column;\r\n    gap: 0.5em;\r\n}\r\n \r\n.content {\r\n    padding: .5em;\r\n}\r\n\r\n.vcenter {\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n\r\ngwc-textinput {\r\n    width: 20em;\r\n}\r\n\r\n.something {\r\n    width: 100%;\r\n    height: 100px;\r\n    background: rgba(0,0,0,0.4);\r\n    border: 1px dashed rgba(255,255,255,0.5);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: wheat;\r\n    padding: 20px;\r\n}\r\n<\/pre>\n<p>js \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nwindow.onload = () => {\r\n    btn.addEventListener(\"click\", () => {\r\n        const dlg = gwcCreateModalDialog(\"\ubaa8\ub2ec \ub300\ud654\uc0c1\uc790\");\r\n        dlg.content = `\r\n            <div class=\"hcenter content\">\r\n                <div class=\"vcenter\">\r\n                    <gwc-label content=\"\uc88c\uc6b0\uba85\" outline-type=\"concave\"><\/gwc-label>\r\n                    <gwc-textinput value=\"\uc778\uac04\uc740 \ub9d0\uc774 \uc544\ub2cc \ud589\uc704\ub85c \uc815\uc758\ub41c\ub2e4.\"><\/gwc-textinput>\r\n                <\/div>\r\n                <div class=\"something\">\r\n                    \uc568\ub4e0\ub9c1(Elden Ring).. <br>\uadf8\ub300\uac00 \uc655\uc774\ub420\uc9c0.. \uc544\ub2c8 \uc5b4\uca4c\uba74 \uc2e0\uc774\ub420\uc9c0..\r\n                <\/div>\r\n                <div class=\"hcenter\">\r\n                    <gwc-button title=\"\ud655\uc778\"><\/gwc-button>\r\n                <\/div>\r\n            <\/div>\r\n        `;\r\n\r\n        dlg.resizablePanel.style.width = \"30em\"; \/\/ \ub300\ud654\uc0c1\uc790\uc758 \ud06c\uae30 \uc9c0\uc815(\ub300\ud654\uc0c1\uc790 \uc790\uccb4\uc5d0 \ub300\ud55c \ud06c\uae30 \uc870\uc808\ub85c\ub294 \uc548\ub428)\r\n        dlg.resizablePanel.minWidth = 400; \/\/ \ub300\ud654\ucc3d\uc758 \ud06c\uae30 \uc870\uc808 \uc2dc \uac00\ub85c \ucd5c\uc18c \ud06c\uae30\r\n        dlg.resizablePanel.minHeight = 200; \/\/ \ub300\ud654\ucc3d\uc758 \ud06c\uae30 \uc870\uc808 \uc2dc \uc138\ub85c \ucd5c\uc18c \ud06c\uae30\r\n\r\n        \/\/ \ub300\ud654 \uc0c1\uc790\uc758 \ud06c\uae30 \uc870\uc808\uc5d0 \ub530\ub978 \uad6c\uc131 UI\uc758 \ud06c\uae30 \uc870\uc808\r\n        \/\/ CSS \ub9cc\uc73c\ub85c \uc81c\uc5b4\ud560 \uc218 \uc5c6\ub294 \uad6c\uc131 UI\ub294 \ud06c\uae30 \ubcc0\uacbd \uc774\ubca4\ud2b8\ub97c \ud1b5\ud574 \uc81c\uc5b4\ud560 \uc218 \uc788\uc74c\r\n        dlg.resizablePanel.addEventListener(\"change\", (event) => {\r\n            const { mode, oldHeight, newHeight } = event.detail;\r\n            if(mode === \"BOTTOM\" || mode == \"TOP\") {\r\n                const domSomething = dlg.content.querySelector(\".something\");\r\n                const height = parseFloat(window.getComputedStyle(domSomething).getPropertyValue(\"height\"));\r\n                domSomething.style.height = `${height - (oldHeight - newHeight)}px`;\r\n            }\r\n        });\r\n\r\n        dlg.content.querySelector(\"gwc-button\").addEventListener(\"click\", () => {\r\n            dlg.remove();\r\n        });\r\n       \r\n        dlg.show();\r\n        GeoServiceWebComponentManager.instance.update();\r\n    \r\n    });    \r\n};\r\n<\/pre>\n<p>\uc2e4\ud589 \uacb0\uacfc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<p><center><video controls=\"controls\" ><source src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2022\/02\/gwc-createmodaldialog.mp4\" \/>\ube44\ub514\uc624\ub97c \uc9c0\uc6d0\ud558\uc9c0 \uc54a\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc838\uc785\ub2c8\ub2e4.<\/video><\/center><\/p>\n<p>\ub300\ud654\ucc3d\uc744 \uad6c\uc131\ud558\ub294 UI\uc758 \uc0c1\ud0dc(\uac12)\uc774 \ubcc0\uacbd\ub418\uba74 \ubcc0\uacbd\uc5d0 \ub300\ud55c \ucc98\ub9ac\ub97c \ud55c\uacf3\uc5d0\uc11c \ucc98\ub9ac\ud560 \uc218 \uc788\ub294 state \uad00\ub9ac\uac00 \uac00\ub2a5\ud569\ub2c8\ub2e4. \ucf54\ub4dc\uc758 \uc608\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\ndlg.setState((ui) => {\r\n    console.log(\"\ubcc0\uacbd\ud1b5\uc9c0\", typeof ui);\r\n});\r\n<\/pre>\n<p>setState\ub85c \uc0c1\ud0dc \ubcc0\uacbd\uc5d0 \ub300\ud55c \uc774\ubca4\ud2b8\ub97c \ub4f1\ub85d\ud560 \uc218 \uc788\uc73c\uba70 \ubcc0\uacbd \uc774\ubca4\ud2b8\ub294 \ub2e4\uc74c\ucc98\ub7fc \uc9c1\uc811\uc801\uc73c\ub85c \ud638\ucd9c\ud560 \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nthis.#dialog.state.change(this.#selectedFile);\r\n<\/pre>\n<p>\ub300\ud654\ucc3d\uc774 \ub2eb\ud790\ub54c \uc218\ub3d9\uc774\ub4e0 \uc790\ub3d9\uc774\ub4e0 remove \ub9e4\uc11c\ub4dc\uac00 \ud638\ucd9c\ub418\ub294\ub370\uc694. \uc774\ub54c close \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud569\ub2c8\ub2e4. \uc774 \uc774\ubca4\ud2b8\ub97c \ud1b5\ud574 \ucc3d\uc774 \ub2eb\ud790\ub54c \ubb34\uc5b8\uac00\ub97c \ucc98\ub9ac\ud560 \uc218 \uc788\uace0, \ucc3d\uc744 \uc815\ub9d0\ub85c \ub2eb\uc744\uc9c0 \uc81c\uc5b4\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nthis.#dialog.addEventListener(\"close\", (event) => {\r\n    \/\/ cancel\uc744 true\ub85c \uc124\uc815\ud558\uba74 \ub300\ud654\ucc3d\uc774 \ub2eb\ud788\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.\r\n    event.cancel = true;\r\n});\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\uc6f9 UI \ub77c\uc774\ube0c\ub7ec\ub9ac\uc778 GWC\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 gwcCreateModalDialog \ud568\uc218\uc5d0 \ub300\ud55c \uc608\uc81c \ucf54\ub4dc\uc785\ub2c8\ub2e4. \uba3c\uc800 DOM \uad6c\uc131\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4. \uadf8\ub9ac\uace0 CSS \uad6c\uc131\uc740 \ub2e4\uc74c\uacfc \uac19\uad6c\uc694. .center { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 100vh; } .hcenter { display: flex; align-items: center; flex-direction: column; gap: 0.5em; } .content { padding: .5em; } .vcenter { display: flex; &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=12090\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;#GWC UI Library : gwcCreateModalDialog \ud568\uc218&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[140],"tags":[],"class_list":["post-12090","post","type-post","status-publish","format-standard","hentry","category-gwc"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/12090","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12090"}],"version-history":[{"count":6,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/12090\/revisions"}],"predecessor-version":[{"id":12112,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/12090\/revisions\/12112"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12090"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=12090"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=12090"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}