Skip to content

Commit

Permalink
[email protected] refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
@thomasJang
thomasJang committed Apr 4, 2016
1 parent cb7498f commit 434aca0
Show file tree
Hide file tree
Showing 6 changed files with 112 additions and 104 deletions.
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ax5ui-mask",
"version": "0.6.3",
"version": "0.6.4",
"authors": [
"ThomasJ <[email protected]>"
],
Expand Down
97 changes: 47 additions & 50 deletions dist/ax5mask.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,8 @@
/**
* @class ax5.ui.mask
* @classdesc
* @version v0.0.1
* @version 0.6.4
* @author [email protected]
* @logs
* 2014-04-01 tom : 시작
* 2015-12-27 tom : refactoring
* @example
* ```
* var my_mask = new ax5.ui.mask();
Expand All @@ -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 = '';
Expand All @@ -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 <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 ';
},
setBody = function setBody(content) {
this.maskContent = content;
};

/**
* Preferences of Mask UI
Expand All @@ -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);
};

/**
Expand All @@ -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,
Expand All @@ -98,20 +105,15 @@
css = {},
that = {};

po.push('<div class="ax-mask ' + config.theme + '" id="' + maskId + '">');
po.push('<div class="ax-mask-bg"></div>');
po.push('<div class="ax-mask-content">');
po.push('<div class="ax-mask-body">');
po.push(self.getBody());
po.push('</div>');
po.push('</div>');
po.push('</div>');

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(),
Expand All @@ -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;
};

Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion dist/ax5mask.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -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": {
Expand Down
111 changes: 61 additions & 50 deletions src/ax5mask.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,8 @@
/**
* @class ax5.ui.mask
* @classdesc
* @version v0.0.1
* @version 0.6.4
* @author [email protected]
* @logs
* 2014-04-01 tom : 시작
* 2015-12-27 tom : refactoring
* @example
* ```
* var my_mask = new ax5.ui.mask();
Expand All @@ -17,7 +14,8 @@

var axClass = function () {
var
self = this
self = this,
cfg
;

if (_SUPER_) _SUPER_.call(this); // 부모호출
Expand All @@ -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 `
<div class="ax-mask {{theme}}" id="{{maskId}}">
<div class="ax-mask-bg"></div>
<div class="ax-mask-content">
<div class="ax-mask-body">
{{{body}}}
</div>
</div>
</div>
`;
},
setBody = function (content) {
this.maskContent = content;
};

/**
* Preferences of Mask UI
Expand All @@ -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);
};

/**
Expand All @@ -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('<div class="ax-mask ' + config.theme + '" id="' + maskId + '">');
po.push('<div class="ax-mask-bg"></div>');
po.push('<div class="ax-mask-content">');
po.push('<div class="ax-mask-body">');
po.push(self.getBody());
po.push('</div>');
po.push('</div>');
po.push('</div>');

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(),
Expand All @@ -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;
};

Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion test/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<button type="button" id="mask-open">mask-open</button>
<script>
$(document.body).ready(function(){
var mask = new ax5.ui.mask();
window.mask = new ax5.ui.mask();
$("#mask-open").click(function(){
mask.open({
position: "fixed",
Expand Down

0 comments on commit 434aca0

Please sign in to comment.