{"id":12114,"date":"2022-03-03T04:36:10","date_gmt":"2022-03-02T19:36:10","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=12114"},"modified":"2022-06-16T11:01:05","modified_gmt":"2022-06-16T02:01:05","slug":"gwccreatemodaldialog%ec%9d%98-resizing-%ec%bd%94%eb%93%9c-%ec%98%88","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=12114","title":{"rendered":"gwcCreateModalDialog\uc758 resizing \ucf54\ub4dc \uc608 (gwc-card\uc5d0\ub3c4 \uc801\uc6a9\ub428)"},"content":{"rendered":"<p>\ud558\ub098\uc758 \ubaa8\ub2ec \ub300\ud654\uc0c1\uc790\ub97c gwcCreateModalDialog \ud568\uc218\ub97c \uc774\uc6a9\ud574 \ub9cc\ub4e4\ub54c class \ub2e8\uc704\ub85c \ub9cc\ub4e4\uba74 \uc804\uccb4\uc801\uc778 \uc2dc\uc2a4\ud15c\uc758 UI \uae30\ub2a5\uc774 \ud6a8\uacfc\uc801\uc73c\ub85c \ubd84\ub9ac\ub429\ub2c8\ub2e4. \uba3c\uc800 \ubaa8\ub2ec \ub300\ud654\uc0c1\uc790\uc5d0 \ub300\ud55c \ucf54\ub4dc\ub97c class\ub85c \ub9cc\ub4ed\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nclass ArchiveManagerDialog {\r\n    constructor() {\r\n        const dlg = gwcCreateModalDialog(\"\uc544\uce74\uc774\ube0c \uad00\ub9ac\uc790\");\r\n        dlg.content = `\r\n            <div class=\"archive-manager-dialog h-center content\">\r\n                <div class=\"vertical-linear-layout\">\r\n                    <div class=\"horizontal-linear-layout v-center\">\r\n                        <gwc-toolbutton icon=\"..\/images\/add.svg\"><\/gwc-toolbutton>\r\n                        <gwc-toolbutton icon=\"..\/images\/search.svg\"><\/gwc-toolbutton>\r\n                        <gwc-space size=\"10px\"><\/gwc-space>\r\n                        <div class=\"horizontal-linear-layout v-center search-part\">\r\n                            <gwc-label content=\"\uc18c\uc720\uc790 \uc774\ub984\" outline-type=\"none\"><\/gwc-label>\r\n                            <gwc-textinput><\/gwc-textinput>\r\n                            <gwc-toolbutton icon=\"..\/images\/reset.svg\"><\/gwc-toolbutton>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <gwc-vscrollview>\r\n                        <content>\r\n                            <gwc-tree><\/gwc-tree>\r\n                        <\/content>\r\n                    <\/gwc-vscrollview>\r\n                <\/div>\r\n            <\/div>\r\n        `;\r\n       \r\n        dlg.width = \"50em\";\r\n\r\n        dlg.resizablePanel.resizableLeft = true;\r\n        dlg.resizablePanel.resizableRight = true;\r\n        dlg.resizablePanel.resizableTop = true;\r\n        dlg.resizablePanel.resizableBottom = true;\r\n\r\n        dlg.resizablePanel.minWidth = 450;\r\n        dlg.resizablePanel.minHeight = 300;\r\n        dlg.resizablePanel.addEventListener(\"change\", (event) => {\r\n            if(event.target === dlg.resizablePanel) {\r\n                const { mode, oldHeight, newHeight } = event.detail;\r\n                if(mode === \"BOTTOM\" || mode == \"TOP\") {\r\n                    const domScrollView = dlg.content.querySelector(\"gwc-vscrollview\");\r\n                    const height = parseFloat(window.getComputedStyle(domScrollView).getPropertyValue(\"height\"));\r\n                    domScrollView.style.height = `${height - (oldHeight - newHeight)}px`;\r\n                    domScrollView.refresh();\r\n                }\r\n            }\r\n        });\r\n\r\n        dlg.show();\r\n        GeoServiceWebComponentManager.instance.update();\r\n    }\r\n}\r\n<\/pre>\n<p>CSS\uc5d0 \ub300\ud55c \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">\r\n.vertical-linear-layout {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 0.3em;\r\n}\r\n\r\n.horizontal-linear-layout {\r\n    display: flex;\r\n    gap: 0.3em;\r\n    flex-direction: row;\r\n    _padding: 0 1em;\r\n}\r\n\r\n.v-center {\r\n    align-items: center;\r\n}\r\n\r\n.h-center {\r\n    justify-content: center;\r\n}\r\n\r\n.v-space {\r\n    margin-top: 0.5em;\r\n    margin-bottom: 0.5em;\r\n}\r\n\r\n.archive-manager-dialog {\r\n    padding: 0.5em 0.5em 0.5em 0.5em;\r\n}\r\n\r\n.archive-manager-dialog gwc-textinput {\r\n    width: 10em;\r\n}\r\n\r\n.archive-manager-dialog .search-part {\r\n    margin-left: auto;\r\n}\r\n\r\n.archive-manager-dialog gwc-vscrollview {\r\n    height: 30em; \/* js \ucf54\ub4dc\ub85c \ud06c\uae30\ub97c \uc870\uc815\ud574\uc57c \ud568 *\/\r\n    margin: 0 0.2em;\r\n    background: rgba(0,0,0,0.3);\r\n    box-shadow: inset -0.6px -0.6px 0.6px rgba(255,255,255,0.4), \r\n        inset 0.6px 0.6px 0.6px rgba(0,0,0,0.5);\r\n    border-radius: 0.5em;    \r\n}\r\n\r\n.archive-manager-dialog gwc-tree {\r\n    width: 100%;\r\n    padding: 0.5em 0.5em 0.5em 0.5em;\r\n    _border: 1px solid red;    \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\/03\/gwc-modal-ex.mp4\" \/>\ube44\ub514\uc624\ub97c \uc9c0\uc6d0\ud558\uc9c0 \uc54a\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc838\uc785\ub2c8\ub2e4.<\/video><\/center><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ud558\ub098\uc758 \ubaa8\ub2ec \ub300\ud654\uc0c1\uc790\ub97c gwcCreateModalDialog \ud568\uc218\ub97c \uc774\uc6a9\ud574 \ub9cc\ub4e4\ub54c class \ub2e8\uc704\ub85c \ub9cc\ub4e4\uba74 \uc804\uccb4\uc801\uc778 \uc2dc\uc2a4\ud15c\uc758 UI \uae30\ub2a5\uc774 \ud6a8\uacfc\uc801\uc73c\ub85c \ubd84\ub9ac\ub429\ub2c8\ub2e4. \uba3c\uc800 \ubaa8\ub2ec \ub300\ud654\uc0c1\uc790\uc5d0 \ub300\ud55c \ucf54\ub4dc\ub97c class\ub85c \ub9cc\ub4ed\ub2c8\ub2e4. class ArchiveManagerDialog { constructor() { const dlg = gwcCreateModalDialog(&#8220;\uc544\uce74\uc774\ube0c \uad00\ub9ac\uc790&#8221;); dlg.content = ` `; dlg.width = &#8220;50em&#8221;; dlg.resizablePanel.resizableLeft = true; dlg.resizablePanel.resizableRight = true; dlg.resizablePanel.resizableTop = true; dlg.resizablePanel.resizableBottom = true; dlg.resizablePanel.minWidth = 450; &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=12114\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;gwcCreateModalDialog\uc758 resizing \ucf54\ub4dc \uc608 (gwc-card\uc5d0\ub3c4 \uc801\uc6a9\ub428)&#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,1],"tags":[],"class_list":["post-12114","post","type-post","status-publish","format-standard","hentry","category-gwc","category-uncategorized"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/12114","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=12114"}],"version-history":[{"count":5,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/12114\/revisions"}],"predecessor-version":[{"id":12344,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/12114\/revisions\/12344"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=12114"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=12114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}