You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 lines
16 KiB
1 lines
16 KiB
{"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})();"]}
|