{"id":12345,"date":"2022-06-16T11:44:06","date_gmt":"2022-06-16T02:44:06","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=12345"},"modified":"2023-06-08T13:15:01","modified_gmt":"2023-06-08T04:15:01","slug":"gwccreatemodaldialog%ec%9d%98-resizing-%ec%bd%94%eb%93%9c-%ec%98%88-js-%ec%bd%94%eb%93%9c-%ec%b5%9c%ec%86%8c%ed%99%94","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=12345","title":{"rendered":"gwcCreateModalDialog\uc758 resizing \ucf54\ub4dc \uc608 (JS \ucf54\ub4dc \ucd5c\uc18c\ud654)"},"content":{"rendered":"<p>gwcCreateModalDialog\uc5d0\uc11c \ud06c\uae30 \uc870\uc808 \uc2dc UI\uac00 \uc801\uc808\ud558\uac8c \ubc30\uce58\ub418\ub3c4\ub85d \ud558\uae30 \uc704\ud55c \ucf54\ub4dc\ub97c \uc815\ub9ac\ud574 \ubd05\ub2c8\ub2e4.<\/p>\n<p>\uba3c\uc800 \ub9cc\ub4e4\uace0\uc790 \ud558\ub294 UI\ub294 \ub2e4\uc74c \uc601\uc0c1\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<p><center><video controls=\"controls\" ><source src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2022\/06\/gwcCreateModalDialog-resize.mp4\" \/>\ube44\ub514\uc624\ub97c \uc9c0\uc6d0\ud558\uc9c0 \uc54a\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc838\uc785\ub2c8\ub2e4.<\/video><\/center><\/p>\n<p>\uba3c\uc800 JS \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nclass GeocodingTool {\r\n    constructor() {\r\n        const dlg = gwcCreateModalDialog(\"\uc9c0\uc624\ucf54\ub529\");\r\n\r\n        dlg.content = `\r\n            <div class=\"geocoding-tool-dialog\">\r\n                <div class=\"content vertical-linear-layout\">\r\n                    <div class=\"horizontal-linear-layout v-center\">\r\n                        <gwc-space size=\"3px\"><\/gwc-space>\r\n                        <gwc-toolbutton class=\"archive\" icon=\"..\/images\/load.svg\" \r\n                            title=\"\uc544\uce74\uc774\ube0c\uc5d0\uc11c \ub370\uc774\ud130 \ubd88\ub7ec\uc624\uae30\"><\/gwc-toolbutton>\r\n                        <gwc-space size=\"10px\"><\/gwc-space>\r\n                        <gwc-select class=\"address-column\" label=\"\uc8fc\uc18c \uceec\ub7fc\"><\/gwc-select>\r\n                        <gwc-space size=\"5px\"><\/gwc-space>\r\n                        <gwc-checkbox title=\"\uc815\uc88c\ud45c\" class=\"coord-correct\" checked=\"true\"><\/gwc-checkbox>\r\n                        <gwc-checkbox title=\"\uc778\uadfc\uc88c\ud45c\" class=\"coord-nearby\" checked=\"true\"><\/gwc-checkbox>\r\n                        <gwc-checkbox title=\"\ub300\ud45c\uc88c\ud45c\" class=\"coord-represent\" checked=\"false\"><\/gwc-checkbox>\r\n                        <gwc-toolbutton class=\"run\" icon=\"..\/images\/done.svg\" title=\"\uc9c0\uc624\ucf54\ub529 \uc2e4\ud589\"><\/gwc-toolbutton>\r\n                        <gwc-space size=\"3px\"><\/gwc-space>\r\n                    <\/div>\r\n                    <gwc-grid><\/gwc-grid>\r\n                    <div class=\"grid-navigator horizontal-linear-layout v-center h-center\">\r\n                        <gwc-toolbutton class=\"move-first\" icon=\"..\/images\/move_first.svg\"><\/gwc-toolbutton>\r\n                        <gwc-toolbutton class=\"move-prev\" icon=\"..\/images\/move_prev.svg\"><\/gwc-toolbutton>\r\n                        <gwc-label class=\"progress-label\" content=\"65%\"><\/gwc-label>\r\n                        <gwc-toolbutton class=\"move-next\" icon=\"..\/images\/move_next.svg\"><\/gwc-toolbutton>\r\n                        <gwc-toolbutton class=\"move-last\" icon=\"..\/images\/move_last.svg\"><\/gwc-toolbutton>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        `;\r\n\r\n        dlg.width = \"70em\"; \/\/ \ud06c\uae30 \uc870\uc808 \uae30\ub2a5\uc744 \uc704\ud574\uc11c\ub294 \ubc18\ub4dc\uc2dc \ud06c\uae30\ub97c \uc9c0\uc815\ud574\uc918\uc57c \ud568\r\n        dlg.height = \"50em\"; \/\/ \ud06c\uae30 \uc870\uc808 \uae30\ub2a5\uc744 \uc704\ud574\uc11c\ub294 \ubc18\ub4dc\uc2dc \ud06c\uae30\ub97c \uc9c0\uc815\ud574\uc918\uc57c \ud568\r\n\r\n        dlg.resizablePanel.minWidth = 550;\r\n        dlg.resizablePanel.minHeight = 300;\r\n\r\n        dlg.resizablePanel.resizableRight = true;\r\n        dlg.resizablePanel.resizableBottom = true;\r\n        \r\n        dlg.show();\r\n        GeoServiceWebComponentManager.instance.update();\r\n    }\r\n}\r\n<\/pre>\n<p>CSS \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\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.geocoding-tool-dialog {\r\n    padding: 0.5em;\r\n    height: 100%;\r\n}\r\n\r\n.geocoding-tool-dialog .content {\r\n    height: 100%;\r\n}\r\n\r\n.geocoding-tool-dialog gwc-grid {\r\n    flex: 1;\r\n}\r\n\r\n.geocoding-tool-dialog .address-column {\r\n    width: 250px;\r\n}\r\n\r\n.geocoding-tool-dialog .run {\r\n    margin-left: auto;\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>gwcCreateModalDialog\uc5d0\uc11c \ud06c\uae30 \uc870\uc808 \uc2dc UI\uac00 \uc801\uc808\ud558\uac8c \ubc30\uce58\ub418\ub3c4\ub85d \ud558\uae30 \uc704\ud55c \ucf54\ub4dc\ub97c \uc815\ub9ac\ud574 \ubd05\ub2c8\ub2e4. \uba3c\uc800 \ub9cc\ub4e4\uace0\uc790 \ud558\ub294 UI\ub294 \ub2e4\uc74c \uc601\uc0c1\uacfc \uac19\uc2b5\ub2c8\ub2e4. \ube44\ub514\uc624\ub97c \uc9c0\uc6d0\ud558\uc9c0 \uc54a\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc838\uc785\ub2c8\ub2e4. \uba3c\uc800 JS \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4. class GeocodingTool { constructor() { const dlg = gwcCreateModalDialog(&#8220;\uc9c0\uc624\ucf54\ub529&#8221;); dlg.content = ` `; dlg.width = &#8220;70em&#8221;; \/\/ \ud06c\uae30 \uc870\uc808 \uae30\ub2a5\uc744 \uc704\ud574\uc11c\ub294 \ubc18\ub4dc\uc2dc \ud06c\uae30\ub97c \uc9c0\uc815\ud574\uc918\uc57c \ud568 dlg.height = &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=12345\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;gwcCreateModalDialog\uc758 resizing \ucf54\ub4dc \uc608 (JS \ucf54\ub4dc \ucd5c\uc18c\ud654)&#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-12345","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\/12345","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=12345"}],"version-history":[{"count":5,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/12345\/revisions"}],"predecessor-version":[{"id":12349,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/12345\/revisions\/12349"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12345"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=12345"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=12345"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}