Skip to content

Commit

Permalink
[email protected] refactoring
Browse files Browse the repository at this point in the history
thomasJang committed Apr 4, 2016
1 parent 8278226 commit 0add3d7
Showing 5 changed files with 284 additions and 270 deletions.
2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ax5ui-modal",
"version": "0.5.3",
"version": "0.5.4",
"authors": [
"ThomasJ <[email protected]>"
],
165 changes: 82 additions & 83 deletions dist/ax5modal.js
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@
/**
* @class ax5.ui.modal
* @classdesc
* @version 0.5.3
* @version 0.5.4
* @author [email protected]
* @example
* ```
@@ -40,71 +40,39 @@
cfg = this.config; // extended config copy cfg
cfg.id = 'ax5-modal-' + ax5.getGuid(); // instance id

/**
* Preferences of modal UI
* @method ax5.ui.modal.setConfig
* @param {Object} config - 클래스 속성값
* @returns {ax5.ui.modal}
* @example
* ```
* ```
*/
//== class body start
this.init = function () {
this.onStateChanged = cfg.onStateChanged;
};

this.getContent = function (modalId, opts) {
var po = [],
styles = [];

if (opts.zIndex) {
styles.push("z-index:" + opts.zIndex);
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;
},
getContentTmpl = function getContentTmpl() {
return "\n <div id=\"{{modalId}}\" data-modal-els=\"root\" class=\"ax5-ui-modal {{theme}} {{fullscreen}}\" style=\"{{styles}}\">\n <div class=\"ax-modal-body\" data-modal-els=\"body\">\n {{#iframe}}\n <div data-modal-els=\"iframe-wrap\" style=\"-webkit-overflow-scrolling: touch; overflow: auto;position: relative;\">\n <iframe name=\"{{modalId}}-frame\" src=\"\" width=\"100%\" height=\"100%\" frameborder=\"0\" data-modal-els=\"iframe\" style=\"position: absolute;left:0;top:0;\"></iframe>\n </div>\n <form name=\"{{modalId}}-form\" data-modal-els=\"iframe-form\">\n <input type=\"hidden\" name=\"modalId\" value=\"{{modalId}}\" />\n {{#param}}\n {{#@each}}\n <input type=\"hidden\" name=\"{{@key}}\" value=\"{{@value}}\" />\n {{/@each}}\n {{/param}}\n </form>\n {{/iframe}}\n </div>\n </div>\n ";
},
getContent = function getContent(modalId, opts) {
var data = {
modalId: modalId,
theme: opts.theme,
fullScreen: opts.fullScreen ? "fullscreen" : "",
styles: [],
iframe: opts.iframe
};

po.push('<div id="' + modalId + '" data-modal-els="root" class="ax5-ui-modal ' + opts.theme + ' ' + (opts.fullScreen ? "fullscreen" : "") + '" style="' + styles.join(";") + '">');
po.push('<div class="ax-modal-body" data-modal-els="body">');
// use iframe
if (opts.iframe) {
po.push('<div data-modal-els="iframe-wrap" style="-webkit-overflow-scrolling: touch; overflow: auto;position: relative;">');
po.push('<iframe name="' + modalId + '-frame" src="" width="100%" height="100%" frameborder="0" data-modal-els="iframe" style="position: absolute;left:0;top:0;"></iframe>');
po.push('</div>');
po.push('<form name="' + modalId + '-form" data-modal-els="iframe-form">');
po.push('<input type="hidden" name="modalId" value="' + modalId + '" />');
if (typeof opts.iframe.param === "string") {
opts.iframe.param = ax5.util.param(opts.iframe.param);
}
for (var p in opts.iframe.param) {
po.push('<input type="hidden" name="' + p + '" value="' + opts.iframe.param[p] + '" />');
}
po.push('</form>');
if (opts.zIndex) {
data.styles.push("z-index:" + opts.zIndex);
}
po.push('</div>');
po.push('</div>');
return po.join('');
};

this.open = function (opts, callBack) {
if (U.isString(opts)) {
opts = {
title: cfg.title,
msg: opts
};
if (typeof data.iframe.param === "string") {
data.iframe.param = ax5.util.param(data.iframe.param);
}

self.modalConfig = {};
jQuery.extend(true, self.modalConfig, cfg);
jQuery.extend(true, self.modalConfig, opts);
opts = self.modalConfig;

this._open(opts, callBack);
return this;
};

this._open = function (opts, callBack) {
return ax5.mustache.render(getContentTmpl(), data);
},
open = function open(opts, callBack) {
var that;

jQuery(document.body).append(this.getContent(opts.id, opts));
jQuery(document.body).append(getContent.call(this, opts.id, opts));

this.activeModal = jQuery('#' + opts.id);

@@ -121,7 +89,7 @@
}

//- position 정렬
this.align();
align.call(this);

that = {
self: this,
@@ -144,34 +112,25 @@
this.$["iframe-form"].attr({ "action": opts.iframe.url });
this.$["iframe"].on("load", function () {
that.state = "load";
if (opts && opts.onStateChanged) {
opts.onStateChanged.call(that, that);
} else if (this.onStateChanged) {
this.onStateChanged.call(that, that);
}
onStateChanged.call(this, opts, that);
}.bind(this));
this.$["iframe-form"].submit();
}

if (callBack) callBack.call(that);
if (opts && opts.onStateChanged) {
opts.onStateChanged.call(that, that);
} else if (this.onStateChanged) {
this.onStateChanged.call(that, that);
}
onStateChanged.call(this, opts, that);

// bind key event
if (opts.closeToEsc) {
jQuery(window).bind("keydown.ax-modal", function (e) {
this.onkeyup(e || window.event);
onkeyup.call(this, e || window.event);
}.bind(this));
}
jQuery(window).bind("resize.ax-modal", function (e) {
this.align(null, e || window.event);
align.call(this, null, e || window.event);
}.bind(this));
};

this.align = function (position, e) {
},
align = function align(position, e) {
if (!this.activeModal) return this;
var opts = self.modalConfig,
box = {
@@ -219,14 +178,55 @@

this.activeModal.css(box);
return this;
};

this.onkeyup = function (e) {
},
onkeyup = function onkeyup(e) {
if (e.keyCode == ax5.info.eventKeys.ESC) {
this.close();
}
};

/// private end

/**
* Preferences of modal UI
* @method ax5.ui.modal.setConfig
* @param {Object} config - 클래스 속성값
* @returns {ax5.ui.modal}
* @example
* ```
* ```
*/
//== class body start
this.init = function () {
this.onStateChanged = cfg.onStateChanged;
};

/**
* open the modal
* @method ax5.ui.modal.open
* @returns {ax5.ui.modal}
* @example
* ```
* my_modal.open();
* ```
*/
this.open = function (opts, callBack) {
if (U.isString(opts)) {
opts = {
title: cfg.title,
msg: opts
};
}

self.modalConfig = {};
jQuery.extend(true, self.modalConfig, cfg);
jQuery.extend(true, self.modalConfig, opts);
opts = self.modalConfig;

open.call(this, opts, callBack);
return this;
};

/**
* close the modal
* @method ax5.ui.modal.close
@@ -250,11 +250,10 @@
self: this,
state: "close"
};
if (opts && opts.onStateChanged) {
opts.onStateChanged.call(that, that);
} else if (this.onStateChanged) {
this.onStateChanged.call(that, that);
}
onStateChanged.call(this, opts, {
self: this,
state: "close"
});
}.bind(this), cfg.animateTime);
}
return this;
2 changes: 1 addition & 1 deletion dist/ax5modal.min.js

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
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ax5ui-modal",
"version": "0.5.3",
"version": "0.5.4",
"description": "A modal plugin that works with Bootstrap & jQuery",
"license": "Apache 2.0",
"repository": {
383 changes: 199 additions & 184 deletions src/ax5modal.js
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
// ax5.ui.modal
(function (root, _SUPER_) {

/**
* @class ax5.ui.modal
* @classdesc
* @version 0.5.3
* @version 0.5.4
* @author tom@axisj.com
* @example
* ```
* var my_modal = new ax5.ui.modal();
* ```
*/

var U = ax5.util;

//== UI Class
var axClass = function () {
var
@@ -38,7 +38,182 @@
};
cfg = this.config; // extended config copy cfg
cfg.id = 'ax5-modal-' + ax5.getGuid(); // instance id


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;
},
getContentTmpl = function () {
return `
<div id="{{modalId}}" data-modal-els="root" class="ax5-ui-modal {{theme}} {{fullscreen}}" style="{{styles}}">
<div class="ax-modal-body" data-modal-els="body">
{{#iframe}}
<div data-modal-els="iframe-wrap" style="-webkit-overflow-scrolling: touch; overflow: auto;position: relative;">
<iframe name="{{modalId}}-frame" src="" width="100%" height="100%" frameborder="0" data-modal-els="iframe" style="position: absolute;left:0;top:0;"></iframe>
</div>
<form name="{{modalId}}-form" data-modal-els="iframe-form">
<input type="hidden" name="modalId" value="{{modalId}}" />
{{#param}}
{{#@each}}
<input type="hidden" name="{{@key}}" value="{{@value}}" />
{{/@each}}
{{/param}}
</form>
{{/iframe}}
</div>
</div>
`;
},
getContent = function (modalId, opts) {
var
data = {
modalId: modalId,
theme: opts.theme,
fullScreen: (opts.fullScreen ? "fullscreen" : ""),
styles: [],
iframe: opts.iframe
};

if (opts.zIndex) {
data.styles.push("z-index:" + opts.zIndex);
}
if (typeof data.iframe.param === "string") {
data.iframe.param = ax5.util.param(data.iframe.param);
}

return ax5.mustache.render(getContentTmpl(), data);
},
open = function (opts, callBack) {
var that;

jQuery(document.body).append(getContent.call(this, opts.id, opts));

this.activeModal = jQuery('#' + opts.id);

// 파트수집
this.$ = {
"root": this.activeModal.find('[data-modal-els="root"]'),
"body": this.activeModal.find('[data-modal-els="body"]')
};

if (opts.iframe) {
this.$["iframe-wrap"] = this.activeModal.find('[data-modal-els="iframe-wrap"]');
this.$["iframe"] = this.activeModal.find('[data-modal-els="iframe"]');
this.$["iframe-form"] = this.activeModal.find('[data-modal-els="iframe-form"]');
}

//- position 정렬
align.call(this);

that = {
self: this,
id: opts.id,
theme: opts.theme,
width: opts.width,
height: opts.height,
state: "open",
$: this.$
};

if (opts.iframe) {

this.$["iframe-wrap"].css({height: opts.height});
this.$["iframe"].css({height: opts.height});

// iframe content load
this.$["iframe-form"].attr({"method": opts.iframe.method});
this.$["iframe-form"].attr({"target": opts.id + "-frame"});
this.$["iframe-form"].attr({"action": opts.iframe.url});
this.$["iframe"].on("load", (function () {
that.state = "load";
onStateChanged.call(this, opts, that);
}).bind(this));
this.$["iframe-form"].submit();
}

if (callBack) callBack.call(that);
onStateChanged.call(this, opts, that);

// bind key event
if (opts.closeToEsc) {
jQuery(window).bind("keydown.ax-modal", (function (e) {
onkeyup.call(this, e || window.event);
}).bind(this));
}
jQuery(window).bind("resize.ax-modal", (function (e) {
align.call(this, null, e || window.event);
}).bind(this));
},
align = function (position, e) {
if (!this.activeModal) return this;
var opts = self.modalConfig,
box = {
width: opts.width,
height: opts.height
};

if (opts.fullScreen) {
box.width = jQuery(window).width();
box.height = jQuery(window).height();
box.left = 0;
box.top = 0;

if (opts.iframe) {
this.$["iframe-wrap"].css({height: box.height});
this.$["iframe"].css({height: box.height});
}
}
else {
if (position) {
jQuery.extend(true, opts.position, position);
}

//- position 정렬
if (opts.position.left == "left") {
box.left = (opts.position.margin || 0);
}
else if (opts.position.left == "right") {
// window.innerWidth;
box.left = jQuery(window).width() - box.width - (opts.position.margin || 0);
}
else if (opts.position.left == "center") {
box.left = jQuery(window).width() / 2 - box.width / 2;
}
else {
box.left = opts.position.left || 0;
}

if (opts.position.top == "top") {
box.top = (opts.position.margin || 0);
}
else if (opts.position.top == "bottom") {
box.top = jQuery(window).height() - box.height - (opts.position.margin || 0);
}
else if (opts.position.top == "middle") {
box.top = jQuery(window).height() / 2 - box.height / 2;
}
else {
box.top = opts.position.top || 0;
}
}

this.activeModal.css(box);
return this;
},
onkeyup = function (e) {
if (e.keyCode == ax5.info.eventKeys.ESC) {
this.close();
}
};

/// private end

/**
* Preferences of modal UI
* @method ax5.ui.modal.setConfig
@@ -48,42 +223,20 @@
* ```
* ```
*/
//== class body start
//== class body start
this.init = function () {
this.onStateChanged = cfg.onStateChanged;
};

this.getContent = function (modalId, opts) {
var
po = [],
styles = [];

if(opts.zIndex){
styles.push("z-index:" + opts.zIndex);
}

po.push('<div id="' + modalId + '" data-modal-els="root" class="ax5-ui-modal ' + opts.theme + ' ' + (opts.fullScreen ? "fullscreen" : "") + '" style="' + styles.join(";") + '">');
po.push('<div class="ax-modal-body" data-modal-els="body">');
// use iframe
if (opts.iframe) {
po.push('<div data-modal-els="iframe-wrap" style="-webkit-overflow-scrolling: touch; overflow: auto;position: relative;">');
po.push('<iframe name="' + modalId + '-frame" src="" width="100%" height="100%" frameborder="0" data-modal-els="iframe" style="position: absolute;left:0;top:0;"></iframe>');
po.push('</div>');
po.push('<form name="' + modalId + '-form" data-modal-els="iframe-form">');
po.push('<input type="hidden" name="modalId" value="' + modalId + '" />');
if(typeof opts.iframe.param === "string"){
opts.iframe.param = ax5.util.param(opts.iframe.param);
}
for (var p in opts.iframe.param) {
po.push('<input type="hidden" name="' + p + '" value="' + opts.iframe.param[p] + '" />');
}
po.push('</form>');
}
po.push('</div>');
po.push('</div>');
return po.join('');
};

/**
* open the modal
* @method ax5.ui.modal.open
* @returns {ax5.ui.modal}
* @example
* ```
* my_modal.open();
* ```
*/
this.open = function (opts, callBack) {
if (U.isString(opts)) {
opts = {
@@ -97,146 +250,10 @@
jQuery.extend(true, self.modalConfig, opts);
opts = self.modalConfig;

this._open(opts, callBack);
open.call(this, opts, callBack);
return this;
};

this._open = function (opts, callBack) {
var
that;

jQuery(document.body).append(this.getContent(opts.id, opts));

this.activeModal = jQuery('#' + opts.id);

// 파트수집
this.$ = {
"root": this.activeModal.find('[data-modal-els="root"]'),
"body": this.activeModal.find('[data-modal-els="body"]')
};

if (opts.iframe) {
this.$["iframe-wrap"] = this.activeModal.find('[data-modal-els="iframe-wrap"]');
this.$["iframe"] = this.activeModal.find('[data-modal-els="iframe"]');
this.$["iframe-form"] = this.activeModal.find('[data-modal-els="iframe-form"]');
}

//- position 정렬
this.align();

that = {
self: this,
id: opts.id,
theme: opts.theme,
width: opts.width,
height: opts.height,
state: "open",
$: this.$
};

if (opts.iframe) {

this.$["iframe-wrap"].css({height: opts.height});
this.$["iframe"].css({height: opts.height});

// iframe content load
this.$["iframe-form"].attr({"method": opts.iframe.method});
this.$["iframe-form"].attr({"target": opts.id + "-frame"});
this.$["iframe-form"].attr({"action": opts.iframe.url});
this.$["iframe"].on("load", (function () {
that.state = "load";
if (opts && opts.onStateChanged) {
opts.onStateChanged.call(that, that);
}
else if (this.onStateChanged) {
this.onStateChanged.call(that, that);
}
}).bind(this));
this.$["iframe-form"].submit();
}

if (callBack) callBack.call(that);
if (opts && opts.onStateChanged) {
opts.onStateChanged.call(that, that);
}
else if (this.onStateChanged) {
this.onStateChanged.call(that, that);
}

// bind key event
if (opts.closeToEsc) {
jQuery(window).bind("keydown.ax-modal", (function (e) {
this.onkeyup(e || window.event);
}).bind(this));
}
jQuery(window).bind("resize.ax-modal", (function (e) {
this.align(null, e || window.event);
}).bind(this));
};

this.align = function (position, e) {
if (!this.activeModal) return this;
var opts = self.modalConfig,
box = {
width: opts.width,
height: opts.height
};

if(opts.fullScreen){
box.width = jQuery(window).width();
box.height = jQuery(window).height();
box.left = 0;
box.top = 0;

if (opts.iframe) {
this.$["iframe-wrap"].css({height: box.height});
this.$["iframe"].css({height: box.height});
}
}
else{
if (position) {
jQuery.extend(true, opts.position, position);
}

//- position 정렬
if (opts.position.left == "left") {
box.left = (opts.position.margin || 0);
}
else if (opts.position.left == "right") {
// window.innerWidth;
box.left = jQuery(window).width() - box.width - (opts.position.margin || 0);
}
else if (opts.position.left == "center") {
box.left = jQuery(window).width() / 2 - box.width / 2;
}
else {
box.left = opts.position.left || 0;
}

if (opts.position.top == "top") {
box.top = (opts.position.margin || 0);
}
else if (opts.position.top == "bottom") {
box.top = jQuery(window).height() - box.height - (opts.position.margin || 0);
}
else if (opts.position.top == "middle") {
box.top = jQuery(window).height() / 2 - box.height / 2;
}
else {
box.top = opts.position.top || 0;
}
}

this.activeModal.css(box);
return this;
};

this.onkeyup = function (e) {
if (e.keyCode == ax5.info.eventKeys.ESC) {
this.close();
}
};

/**
* close the modal
* @method ax5.ui.modal.close
@@ -260,12 +277,10 @@
self: this,
state: "close"
};
if (opts && opts.onStateChanged) {
opts.onStateChanged.call(that, that);
}
else if (this.onStateChanged) {
this.onStateChanged.call(that, that);
}
onStateChanged.call(this, opts, {
self: this,
state: "close"
});
}).bind(this), cfg.animateTime);
}
return this;
@@ -285,7 +300,7 @@
}
if (css.height) {
self.modalConfig.height = this.activeModal.height();
if(this.$["iframe"]) {
if (this.$["iframe"]) {
this.$["iframe-wrap"].css({height: self.modalConfig.height});
this.$["iframe"].css({height: self.modalConfig.height});
}
@@ -296,16 +311,16 @@

// 클래스 생성자
this.main = (function () {
if(arguments && U.isObject(arguments[0])) {
if (arguments && U.isObject(arguments[0])) {
this.setConfig(arguments[0]);
}
}).apply(this, arguments);
};
//== UI Class

root.modal = (function(){
root.modal = (function () {
if (U.isFunction(_SUPER_)) axClass.prototype = new _SUPER_(); // 상속
return axClass;
})(); // ax5.ui에 연결

})(ax5.ui, ax5.ui.root);

0 comments on commit 0add3d7

Please sign in to comment.