{"version":3,"sources":["ax5mask.js","ax5mask-tmpl.js"],"names":["UI","ax5","ui","U","util","MASK","addClass","className","self","this","cfg","instanceId","getGuid","config","theme","target","jQuery","document","body","get","animateTime","maskContent","status","onStateChanged","opts","that","call","getBodyTmpl","data","templateName","tmpl","setBody","content","init","onClick","open","options","close","maskConfig","extend","_cfg","$target","maskId","$mask","css","append","position","left","offset","top","width","outerWidth","height","outerHeight","window","on","_$target","align","bind","zIndex","e","state","type","_delay","_close","remove","removeClass","off","setTimeout","fadeOut","pullRequest","console","log","main","mask_instance","push","arguments","isObject","setConfig","apply","mask","defaultMask","columnKeys","tmplName","mustache","render"],"mappings":"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","file":"ax5mask.min.js","sourcesContent":["// ax5.ui.mask\n(function () {\n\n    const UI = ax5.ui;\n    const U = ax5.util;\n    let MASK;\n\n    UI.addClass({\n        className: \"mask\"\n    }, (function () {\n        /**\n         * @class ax5mask\n         * @classdesc\n         * @author tom@axisj.com\n         * @example\n         * ```js\n         * var customMask = function customMask() {\n         *     var cTmpl = '' +\n         *         '<div class=\"ax-mask\" id=\"{{maskId}}\" >' +\n         *         '    <div class=\"ax-mask-bg\" style=\"background-color:red !important;\"></div>' +\n         *         '    <div class=\"ax-mask-content\">' +\n         *         '        {{{body}}}' +\n         *         '    </div>' +\n         *         '</div>';\n         *     return cTmpl;\n         * };\n         * ax5.ui.mask.tmpl.customMask = customMask;\n         *\n         * var mask = new ax5.ui.mask();\n         *\n         * mask.open({\n         *     templateName: 'customMask',\n         *     content: 'custom MASK on target',\n         *     target: $(\"#user-content\").get(0),\n         *     onClick: function(){\n         *         console.log(this);\n         *     }\n         * });\n         * ```\n         */\n        return function () {\n            let self = this,\n                cfg;\n\n            this.instanceId = ax5.getGuid();\n            this.config = {\n                theme: '',\n                target: jQuery(document.body).get(0),\n                animateTime: 250\n            };\n            this.maskContent = '';\n            this.status = \"off\";\n\n            cfg = this.config;\n\n            const onStateChanged = function (opts, that) {\n                if (opts && opts.onStateChanged) {\n                    opts.onStateChanged.call(that, that);\n                }\n                else if (this.onStateChanged) {\n                    this.onStateChanged.call(that, that);\n                }\n\n                opts = null;\n                that = null;\n                return true;\n            };\n            const getBodyTmpl = function (data) {\n                if (typeof data.templateName === \"undefined\") data.templateName = \"defaultMask\";\n                return MASK.tmpl.get.call(this, data.templateName, data);\n            };\n            const setBody = function (content) {\n                this.maskContent = content;\n            };\n\n            /**\n             * Preferences of Mask UI\n             * @method ax5mask.setConfig\n             * @param {Object} config - 클래스 속성값\n             * @returns {ax5mask}\n             * @example\n             * ```\n             * setConfig({\n             *      target : {Element|AX5 nodelist}, // 마스크 처리할 대상\n             *      content : {String}, // 마스크안에 들어가는 내용물\n             *      onStateChanged: function(){} // 마스크 상태변경 시 호출되는 함수 this.type으로 예외처리 가능\n             * }\n             * ```\n             */\n            this.init = function () {\n                // after setConfig();\n                this.onStateChanged = cfg.onStateChanged;\n                this.onClick = cfg.onClick;\n                if (this.config.content) setBody.call(this, this.config.content);\n            };\n\n            /**\n             * open mask\n             * target 을 주지 않으면 기본적으로 body 에 마스크가 적용되고 원하는 타겟을 지정해서 마스크를 씌울 수 있습니다.\n             * 기본 정의된 마스크 외에 사용자가 템플릿을 정의해서 마스크를 사용 가능합니다.\n             * @method ax5mask.open\n             * @param {Object} config\n             * @param {String} config\n             * @returns {ax5mask}\n             * @example\n             * ```js\n             * my_mask.open({\n             *     target: document.body,\n             *     content: \"<h1>Loading..</h1>\",\n             *     onStateChanged: function () {\n             *\n             *     }\n             * });\n             *\n             * my_mask.open({\n             *     target: $(\"#mask-target\").get(0), // dom Element\n             *     content: \"<h1>Loading..</h1>\",\n             *     onStateChanged: function () {\n             *\n             *     }\n             * });\n             *\n             *\n             * var customMask = function customMask() {\n             *     var cTmpl = '' +\n             *             '<div class=\"ax-mask\" id=\"{{maskId}}\" >' +\n             *             '    <div class=\"ax-mask-bg\" style=\"background-color:red   !important;\"></div>' +\n             *             '    <div class=\"ax-mask-content\">' +\n             *             '        {{{body}}}' +\n             *             '    </div>' +\n             *             '</div>';\n             *     return cTmpl;\n             * };\n             * ax5.ui.mask.tmpl.customMask = customMask;\n             *\n             * my_mask.open({\n             *     target: $(\"#mask-target\").get(0), // dom Element\n             *     content: \"<h1>Loading..</h1>\",\n             *     \n             *     onStateChanged: function () {\n             *\n             *     }\n             * });\n             * ```\n             */\n            this.open = function (options) {\n\n                if (this.status === \"on\") this.close();\n                if (options && options.content) setBody.call(this, options.content);\n                if (options && typeof options.templateName === \"undefined\") options.templateName = \"defaultMask\";\n                self.maskConfig = jQuery.extend(true, {}, this.config, options);\n\n                let _cfg = self.maskConfig,\n                    target = _cfg.target,\n                    $target = jQuery(target),\n                    maskId = 'ax-mask-' + ax5.getGuid(),\n                    $mask,\n                    css = {},\n                    that = {},\n                    templateName = _cfg.templateName,\n                    body = getBodyTmpl({\n                        theme: _cfg.theme,\n                        maskId: maskId,\n                        body: this.maskContent,\n                        templateName: templateName\n                    });\n\n                jQuery(document.body).append(body);\n\n                // 마스크의 타겟이 html body 가 아니라면\n                if (target && target !== jQuery(document.body).get(0)) {\n                    css = {\n                        position: _cfg.position || \"absolute\",\n                        left: $target.offset().left,\n                        top: $target.offset().top,\n                        width: $target.outerWidth(),\n                        height: $target.outerHeight()\n                    };\n\n\n                    $target.addClass(\"ax-masking\");\n\n                    // 마스크의 타겟이 html body가 아닌경우 window resize 이벤트를 추적하여 엘리먼트 마스크의 CSS 속성 변경\n                    jQuery(window).on(\"resize.ax5mask-\" + this.instanceId, (function (_$target) {\n                        this.align();\n                    }).bind(this));\n                }\n\n                if (typeof self.maskConfig.zIndex !== \"undefined\") {\n                    css[\"z-index\"] = self.maskConfig.zIndex;\n                }\n\n                this.$mask = $mask = jQuery(\"#\" + maskId);\n                this.$target = $target;\n                this.status = \"on\";\n                $mask.css(css);\n\n                if (_cfg.onClick) {\n                    $mask.on(\"click\", function (e) {\n                        that = {\n                            self: self,\n                            state: \"open\",\n                            type: \"click\"\n                        };\n                        self.maskConfig.onClick.call(that, that);\n                    });\n                }\n\n                onStateChanged.call(this, null, {\n                    self: this,\n                    state: \"open\"\n                });\n\n                options = null;\n                _cfg = null;\n                target = null;\n                $target = null;\n                maskId = null;\n                $mask = null;\n                css = null;\n                that = null;\n                templateName = null;\n                body = null;\n\n                return this;\n            };\n\n            /**\n             * close mask\n             * @method ax5mask.close\n             * @param {Number} [_delay=0]\n             * @returns {ax5mask}\n             * @example\n             * ```\n             * my_mask.close();\n             * ```\n             */\n            this.close = function (_delay) {\n                if (this.$mask) {\n                    let _close = function () {\n                        this.status = \"off\";\n                        this.$mask.remove();\n                        this.$target.removeClass(\"ax-masking\");\n\n                        onStateChanged.call(this, null, {\n                            self: this,\n                            state: \"close\"\n                        });\n\n                        jQuery(window).off(\"resize.ax5mask-\" + this.instanceId);\n                    };\n\n                    if (_delay) {\n                        setTimeout((function () {\n                            _close.call(this);\n                        }).bind(this), _delay);\n                    } else {\n                        _close.call(this);\n                    }\n                }\n                return this;\n            };\n\n            /**\n             * @method ax5mask.fadeOut\n             * @returns {ax5mask}\n             */\n            this.fadeOut = function () {\n                if (this.$mask) {\n                    let _close = function () {\n                        this.status = \"off\";\n                        this.$mask.remove();\n                        this.$target.removeClass(\"ax-masking\");\n\n                        onStateChanged.call(this, null, {\n                            self: this,\n                            state: \"close\"\n                        });\n\n                        jQuery(window).off(\"resize.ax5mask-\" + this.instanceId);\n                    };\n\n\n                    this.$mask.addClass(\"fade-out\");\n                    setTimeout((function () {\n                        _close.call(this);\n                    }).bind(this), cfg.animateTime);\n                }\n                return this;\n            };\n\n            /**\n             * @method ax5mask.align\n             * @returns {ax5mask}\n             */\n            this.align = function () {\n                if (this.maskConfig && this.maskConfig.target && this.maskConfig.target !== jQuery(document.body).get(0)) {\n                    try {\n                        var css = {\n                            position: this.maskConfig.position || \"absolute\",\n                            left: this.$target.offset().left,\n                            top: this.$target.offset().top,\n                            width: this.$target.outerWidth(),\n                            height: this.$target.outerHeight()\n                        };\n                        this.$mask.css(css);\n                    } catch (e) {\n\n                    }\n                }\n                return this;\n            };\n\n\n            this.pullRequest = function () {\n                console.log(\"test pullRequest01\");\n                console.log(\"test pullRequest02\");\n            };\n\n            // 클래스 생성자\n            this.main = (function () {\n\n                UI.mask_instance = UI.mask_instance || [];\n                UI.mask_instance.push(this);\n\n                if (arguments && U.isObject(arguments[0])) {\n                    this.setConfig(arguments[0]);\n                }\n            }).apply(this, arguments);\n        };\n    })());\n    MASK = ax5.ui.mask;\n})();","// ax5.ui.mask.tmpl\n(function () {\n\n    var MASK = ax5.ui.mask;\n\n    var defaultMask = function(columnKeys) {\n        return `\n            <div class=\"ax-mask {{theme}}\" id=\"{{maskId}}\">\n                <div class=\"ax-mask-bg\"></div>\n                <div class=\"ax-mask-content\">\n                    <div class=\"ax-mask-body\">\n                    {{{body}}}\n                    </div>\n                </div>\n            </div>\n        `;\n    };\n\n    MASK.tmpl = {\n        \"defaultMask\": defaultMask,\n\n        get: function (tmplName, data, columnKeys) {\n            return ax5.mustache.render(MASK.tmpl[tmplName].call(this, columnKeys), data);\n        }\n    };\n\n})();"]}