From 434aca0063ad459dffab2009b5d3900076ae9947 Mon Sep 17 00:00:00 2001 From: Thomas Jang Date: Mon, 4 Apr 2016 21:14:03 +0900 Subject: [PATCH] ax5ui-mask@0.6.4 refactoring --- bower.json | 2 +- dist/ax5mask.js | 97 +++++++++++++++++++------------------- dist/ax5mask.min.js | 2 +- package.json | 2 +- src/ax5mask.js | 111 ++++++++++++++++++++++++-------------------- test/index.html | 2 +- 6 files changed, 112 insertions(+), 104 deletions(-) diff --git a/bower.json b/bower.json index 76dcdab..20b3a3a 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "ax5ui-mask", - "version": "0.6.3", + "version": "0.6.4", "authors": [ "ThomasJ " ], diff --git a/dist/ax5mask.js b/dist/ax5mask.js index fd4634c..a6eac6b 100644 --- a/dist/ax5mask.js +++ b/dist/ax5mask.js @@ -5,11 +5,8 @@ /** * @class ax5.ui.mask * @classdesc - * @version v0.0.1 + * @version 0.6.4 * @author tom@axisj.com - * @logs - * 2014-04-01 tom : 시작 - * 2015-12-27 tom : refactoring * @example * ``` * var my_mask = new ax5.ui.mask(); @@ -18,7 +15,8 @@ var U = ax5.util; var axClass = function axClass() { - var self = this; + var self = this, + cfg; if (_SUPER_) _SUPER_.call(this); // 부모호출 this.maskContent = ''; @@ -27,7 +25,23 @@ theme: '', target: jQuery(document.body).get(0) }; - var cfg = this.config; + + cfg = this.config; + + var onStateChanged = function onStateChanged(opts, that) { + if (opts && opts.onStateChanged) { + opts.onStateChanged.call(that, that); + } else if (this.onStateChanged) { + this.onStateChanged.call(that, that); + } + return true; + }, + getBodyTmpl = function getBodyTmpl() { + return '\n
\n
\n
\n
\n {{{body}}}\n
\n
\n
\n '; + }, + setBody = function setBody(content) { + this.maskContent = content; + }; /** * Preferences of Mask UI @@ -45,15 +59,9 @@ */ this.init = function () { // after setConfig(); - if (this.config.content) this.setBody(this.config.content); - }; - - this.setBody = function (content) { - this.maskContent = content; - }; - - this.getBody = function () { - return this.maskContent; + this.onStateChanged = cfg.onStateChanged; + this.onClick = cfg.onClick; + if (this.config.content) setBody.call(this, this.config.content); }; /** @@ -80,16 +88,15 @@ * }); * ``` */ - this.open = function (config) { + this.open = function (options) { if (this.status === "on") this.close(); - if (config && config.content) this.setBody(config.content); + if (options && options.content) setBody.call(this, options.content); self.maskConfig = {}; - jQuery.extend(true, self.maskConfig, this.config); - jQuery.extend(true, self.maskConfig, config); + jQuery.extend(true, self.maskConfig, this.config, options); - var config = self.maskConfig, - target = config.target, + var _cfg = self.maskConfig, + target = _cfg.target, $target = jQuery(target), po = [], css, @@ -98,20 +105,15 @@ css = {}, that = {}; - po.push('
'); - po.push('
'); - po.push('
'); - po.push('
'); - po.push(self.getBody()); - po.push('
'); - po.push('
'); - po.push('
'); - - jQuery(document.body).append(po.join('')); + jQuery(document.body).append(ax5.mustache.render(getBodyTmpl(), { + theme: _cfg.theme, + maskId: maskId, + body: this.maskContent + })); if (target && target !== jQuery(document.body).get(0)) { css = { - position: config.position || "absolute", + position: _cfg.position || "absolute", left: $target.offset().left, top: $target.offset().top, width: $target.outerWidth(), @@ -128,22 +130,21 @@ this.status = "on"; $mask.css(css); - if (config.onClick) { + if (this.onClick) { $mask.click(function () { that = { + self: this, state: "open", type: "click" }; - config.onClick.call(that, that); + this.onClick.call(that, that); }); } - if (config.onStateChanged) { - that = { - self: this, - state: "open" - }; - config.onStateChanged.call(that, that); - } + + onStateChanged.call(this, null, { + self: this, + state: "open" + }); return this; }; @@ -157,17 +158,13 @@ * ``` */ this.close = function () { - var config = this.maskConfig, - that; this.$mask.remove(); this.$target.removeClass("ax-masking"); - if (config && config.onStateChanged) { - that = { - self: this, - state: "close" - }; - config.onStateChanged.call(that, that); - } + + onStateChanged.call(this, null, { + self: this, + state: "close" + }); return this; }; //== class body end diff --git a/dist/ax5mask.min.js b/dist/ax5mask.min.js index 5e81dc9..7beeee9 100644 --- a/dist/ax5mask.min.js +++ b/dist/ax5mask.min.js @@ -1 +1 @@ -"use strict";!function(t,s){var i=ax5.util,n=function(){var t=this;s&&s.call(this),this.maskContent="",this.status="off",this.config={theme:"",target:jQuery(document.body).get(0)};this.config;this.init=function(){this.config.content&&this.setBody(this.config.content)},this.setBody=function(t){this.maskContent=t},this.getBody=function(){return this.maskContent},this.open=function(s){"on"===this.status&&this.close(),s&&s.content&&this.setBody(s.content),t.maskConfig={},jQuery.extend(!0,t.maskConfig,this.config),jQuery.extend(!0,t.maskConfig,s);var i,n,s=t.maskConfig,e=s.target,o=jQuery(e),a=[],h="ax-mask-"+ax5.getGuid(),i={},u={};return a.push('
'),a.push('
'),a.push('
'),a.push('
'),a.push(t.getBody()),a.push("
"),a.push("
"),a.push("
"),jQuery(document.body).append(a.join("")),e&&e!==jQuery(document.body).get(0)&&(i={position:s.position||"absolute",left:o.offset().left,top:o.offset().top,width:o.outerWidth(),height:o.outerHeight()},"undefined"!=typeof t.maskConfig.zIndex&&(i["z-index"]=t.maskConfig.zIndex),o.addClass("ax-masking")),this.$mask=n=jQuery("#"+h),this.$target=o,this.status="on",n.css(i),s.onClick&&n.click(function(){u={state:"open",type:"click"},s.onClick.call(u,u)}),s.onStateChanged&&(u={self:this,state:"open"},s.onStateChanged.call(u,u)),this},this.close=function(){var t,s=this.maskConfig;return this.$mask.remove(),this.$target.removeClass("ax-masking"),s&&s.onStateChanged&&(t={self:this,state:"close"},s.onStateChanged.call(t,t)),this},this.main=function(){arguments&&i.isObject(arguments[0])&&this.setConfig(arguments[0])}.apply(this,arguments)};t.mask=function(){return i.isFunction(s)&&(n.prototype=new s),n}()}(ax5.ui,ax5.ui.root); \ No newline at end of file +"use strict";!function(t,n){var s=ax5.util,i=function(){var t,i=this;n&&n.call(this),this.maskContent="",this.status="off",this.config={theme:"",target:jQuery(document.body).get(0)},t=this.config;var e=function(t,n){return t&&t.onStateChanged?t.onStateChanged.call(n,n):this.onStateChanged&&this.onStateChanged.call(n,n),!0},a=function(){return'\n
\n
\n
\n
\n {{{body}}}\n
\n
\n
\n '},o=function(t){this.maskContent=t};this.init=function(){this.onStateChanged=t.onStateChanged,this.onClick=t.onClick,this.config.content&&o.call(this,this.config.content)},this.open=function(t){"on"===this.status&&this.close(),t&&t.content&&o.call(this,t.content),i.maskConfig={},jQuery.extend(!0,i.maskConfig,this.config,t);var n,s,h=i.maskConfig,c=h.target,u=jQuery(c),l="ax-mask-"+ax5.getGuid(),n={},d={};return jQuery(document.body).append(ax5.mustache.render(a(),{theme:h.theme,maskId:l,body:this.maskContent})),c&&c!==jQuery(document.body).get(0)&&(n={position:h.position||"absolute",left:u.offset().left,top:u.offset().top,width:u.outerWidth(),height:u.outerHeight()},"undefined"!=typeof i.maskConfig.zIndex&&(n["z-index"]=i.maskConfig.zIndex),u.addClass("ax-masking")),this.$mask=s=jQuery("#"+l),this.$target=u,this.status="on",s.css(n),this.onClick&&s.click(function(){d={self:this,state:"open",type:"click"},this.onClick.call(d,d)}),e.call(this,null,{self:this,state:"open"}),this},this.close=function(){return this.$mask.remove(),this.$target.removeClass("ax-masking"),e.call(this,null,{self:this,state:"close"}),this},this.main=function(){arguments&&s.isObject(arguments[0])&&this.setConfig(arguments[0])}.apply(this,arguments)};t.mask=function(){return s.isFunction(n)&&(i.prototype=new n),i}()}(ax5.ui,ax5.ui.root); \ No newline at end of file diff --git a/package.json b/package.json index 8ec5773..b6dd784 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ax5ui-mask", - "version": "0.6.3", + "version": "0.6.4", "description": "A mask plugin that works with Bootstrap & jQuery", "license": "MIT", "repository": { diff --git a/src/ax5mask.js b/src/ax5mask.js index a8d3e99..817a11a 100644 --- a/src/ax5mask.js +++ b/src/ax5mask.js @@ -3,11 +3,8 @@ /** * @class ax5.ui.mask * @classdesc - * @version v0.0.1 + * @version 0.6.4 * @author tom@axisj.com - * @logs - * 2014-04-01 tom : 시작 - * 2015-12-27 tom : refactoring * @example * ``` * var my_mask = new ax5.ui.mask(); @@ -17,7 +14,8 @@ var axClass = function () { var - self = this + self = this, + cfg ; if (_SUPER_) _SUPER_.call(this); // 부모호출 @@ -27,7 +25,34 @@ theme: '', target: jQuery(document.body).get(0) }; - var cfg = this.config; + + cfg = this.config; + + var + onStateChanged = function (opts, that) { + if (opts && opts.onStateChanged) { + opts.onStateChanged.call(that, that); + } + else if (this.onStateChanged) { + this.onStateChanged.call(that, that); + } + return true; + }, + getBodyTmpl = function(){ + return ` +
+
+
+
+ {{{body}}} +
+
+
+ `; + }, + setBody = function (content) { + this.maskContent = content; + }; /** * Preferences of Mask UI @@ -45,15 +70,9 @@ */ this.init = function () { // after setConfig(); - if (this.config.content) this.setBody(this.config.content); - }; - - this.setBody = function (content) { - this.maskContent = content; - }; - - this.getBody = function () { - return this.maskContent; + this.onStateChanged = cfg.onStateChanged; + this.onClick = cfg.onClick; + if (this.config.content) setBody.call(this, this.config.content); }; /** @@ -80,33 +99,29 @@ * }); * ``` */ - this.open = function (config) { + this.open = function (options) { if (this.status === "on") this.close(); - if (config && config.content) this.setBody(config.content); + if (options && options.content) setBody.call(this, options.content); self.maskConfig = {}; - jQuery.extend(true, self.maskConfig, this.config); - jQuery.extend(true, self.maskConfig, config); + jQuery.extend(true, self.maskConfig, this.config, options); - var config = self.maskConfig, - target = config.target, $target = jQuery(target), + var _cfg = self.maskConfig, + target = _cfg.target, $target = jQuery(target), po = [], css, maskId = 'ax-mask-' + ax5.getGuid(), $mask, css = {}, that = {}; - po.push('
'); - po.push('
'); - po.push('
'); - po.push('
'); - po.push(self.getBody()); - po.push('
'); - po.push('
'); - po.push('
'); - - jQuery(document.body).append(po.join('')); + jQuery(document.body).append( + ax5.mustache.render(getBodyTmpl(), { + theme: _cfg.theme, + maskId: maskId, + body: this.maskContent + }) + ); if (target && target !== jQuery(document.body).get(0)) { css = { - position: config.position || "absolute", + position: _cfg.position || "absolute", left: $target.offset().left, top: $target.offset().top, width: $target.outerWidth(), @@ -123,22 +138,21 @@ this.status = "on"; $mask.css(css); - if (config.onClick) { - $mask.click(function(){ + if (this.onClick) { + $mask.click(function () { that = { + self: this, state: "open", type: "click" }; - config.onClick.call(that, that); + this.onClick.call(that, that); }); } - if (config.onStateChanged) { - that = { - self: this, - state: "open" - }; - config.onStateChanged.call(that, that); - } + + onStateChanged.call(this, null, { + self: this, + state: "open" + }); return this; }; @@ -152,16 +166,13 @@ * ``` */ this.close = function () { - var config = this.maskConfig, that; this.$mask.remove(); this.$target.removeClass("ax-masking"); - if (config && config.onStateChanged) { - that = { - self: this, - state: "close" - }; - config.onStateChanged.call(that, that); - } + + onStateChanged.call(this, null, { + self: this, + state: "close" + }); return this; }; //== class body end diff --git a/test/index.html b/test/index.html index ef15567..de2412e 100644 --- a/test/index.html +++ b/test/index.html @@ -17,7 +17,7 @@