https://www.megagong.net/common/js/ui.js?now=202610022341

1/*!
2 * ui.js
3 * Design System UI Components
4 */
5
6window.ui = (function() {
7    // util
8
9    var ui = {
10        init: function() {
11            this.dialog.init();
12            this.input.init();
13            this.textarea.init();
14            this.tooltip.init();
15        },
16
17        dialog: {
18            defaults: {
19                "dim": true,
20                "overlay-close": true,
21                "esc-close": true,
22                "scroll-lock": true,
23                "width": "100%"
24            },
25            
26            init: function() { 
27                this.bind();
28            },
29
30            bind: function() {
31                var self = this;
32
33                // Dialog ¿­±â
34                $(document).on("click", ".ds-dialog-trigger", function(e) {
35                    e.preventDefault();
36
37                    var target = $(this).data("dialog-target");
38                    var $dialog = $(target);
39
40                    if (!$dialog.length) {
41                        return;
42                    }
43
44                    self.open($dialog);
45                });
46
47                // Dialog ´Ý±â
48                $(document).on("click", ".ds-dialog .ds-dialog-close", function(e) {
49                    e.preventDefault();
50
51                    self.close($(this).closest(".ds-dialog-wrap"));
52                });
53
54                // Overlay Ŭ¸¯À¸·Î ´Ý±â
55                $(document).on("click", ".ds-dialog-overlay", function() {
56                    var $dialog = $(this).closest(".ds-dialog-wrap");
57
58                    if (self.getOption($dialog, "overlay-close")) {
59                        self.close($dialog);
60                    }
61                });
62
63                // ESC·Î ´Ý±â
64                $(document).on("keydown", function(e) {
65                    if (e.key !== "Escape") {
66                        return;
67                    }
68
69                    var $dialog = $(".ds-dialog-wrap:not(.is-closed)").last();
70
71                    if (!$dialog.length) {
72                        return;
73                    }
74
75                    if (self.getOption($dialog, "esc-close")) {
76                        self.close($dialog);
77                    }
78                });
79            },
80
81            getOption: function($dialog, option) {
82                var value = $dialog.data(option);
83
84                return value !== undefined ? value : this.defaults[option];
85            },
86
87            open: function($dialog) {
88                var width = this.getOption($dialog, "width");
89
90                $dialog.removeClass("is-closed");
91                $dialog.children(".ds-dialog").css("width", width);
92
93                if (this.getOption($dialog, "scroll-lock")) {
94                    $("body").addClass("is-dialog-scroll-locked");
95                }
96            },
97
98            close: function($dialog) {
99                $dialog.addClass("is-closed");
100
101                if (this.getOption($dialog, "scroll-lock")) {
102                    $("body").removeClass("is-dialog-scroll-locked");
103                }
104            }
105        },
106
107        input: {
108            init: function() {
109                this.bindValue();
110                this.bindClear();
111                this.updateAll();
112            },
113
114            // °ª À¯¹«¿¡ µû¶ó has-value »óÅ °ü¸®
115            bindValue: function() {
116                var self = this;
117
118                $(document).on('input change', '.ds-input', function() {
119                    self.updateValue($(this));
120                });
121            },
122
123            updateValue: function($input) {
124                var $wrap = $input.closest('.ds-input-wrap');
125
126                $wrap.toggleClass('has-value', $input.val() !== '');
127            },
128
129            updateAll: function() {
130                var self = this;
131
132                $('.ds-input').each(function() {
133                    self.updateValue($(this));
134                });
135            },
136
137            // Clear ¹öÆ°
138            bindClear: function() {
139                $(document).on('click', '.ds-input-clear', function () {
140                    var $button = $(this);

141                    var $wrap = $button.closest('.ds-input-wrap');
142                    var $input = $wrap.find('.ds-input');
143
144                    if (!$input.val()) {
145                        return;
146                    }
147
148                    // ±âº»°ª: confirm »ç¿ë
149                    var confirmEnabled = $wrap.attr('data-clear-confirm') !== 'false';
150
151                    // ±âº» confirm ¸Þ½ÃÁö
152                    var confirmMessage = $wrap.attr('data-clear-confirm-message')
153                        || 'ÀÔ·ÂÇÑ ³»¿ëÀ» »èÁ¦ÇϽðڽÀ´Ï±î?';
154
155                    if (confirmEnabled && !window.confirm(confirmMessage)) {
156                        return;
157                    }
158
159                    $input.val('').trigger('input');
160
161                    if (!$input.is(':read-only')) {
162                        $input.focus();
163                    }
164
165                    // ¼­ºñ½ºº° callback
166                    var callback = $button.attr('data-clear-callback');
167
168                    if (callback && typeof window[callback] === 'function') {
169                        window[callback]();
170                    }
171                });
172            }
173        },
174
175        textarea: {
176            init: function() {
177                var self = this;
178
179                $(".ds-textarea").each(function() {
180                    self.update(this);
181                });
182
183                $(document)
184                    .off("input.ui.textarea")
185                    .on("input.ui.textarea", ".ds-textarea", function() {
186                        self.update(this);
187                    });
188            },
189
190            update: function(target) {
191                var $textarea = $(target);
192                var $field = $textarea.closest(".ds-field");
193                var $count = $textarea.siblings(".ds-textarea-count");
194
195                var length = $textarea.val().length;
196                var maxLength = Number($textarea.attr("maxlength")) || 0;
197
198                $count.find("strong").text(length.toLocaleString());
199
200                if (maxLength) {
201                    $count.find("span").text("/ " + maxLength.toLocaleString() + "ÀÚ");
202                } else {
203                    $count.find("span").empty();
204                }
205
206                $field.toggleClass(
207                    "is-error",
208                    maxLength > 0 && length > maxLength
209                );
210            },
211
212            refresh: function(selector) {
213                var self = this;
214
215                $(selector).each(function() {
216                    self.update(this);
217                })
218            }
219        },
220
221        tooltip: {
222            init: function() {
223                this.bind();
224            },
225
226            bind: function() {
227                $(document).on("click", ".ds-tooltip-trigger", function() {
228                    $(this).closest(".ds-tooltip-wrap").removeClass("is-closed");
229                });
230
231                $(document).on("click", ".ds-tooltip .ds-close", function(e) {
232                    e.preventDefault();
233
234                    $(this).closest(".ds-tooltip-wrap").addClass("is-closed");
235                });
236            }
237        }
238
239    };
240
241    return ui;
242    
243})();