diff --git a/bower.json b/bower.json index 8a99dfd..2bfe951 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "ax5ui-dialog", - "version": "0.6.4", + "version": "0.6.5", "authors": [ "ThomasJ " ], diff --git a/dist/ax5dialog.js b/dist/ax5dialog.js index b904cad..76a611c 100644 --- a/dist/ax5dialog.js +++ b/dist/ax5dialog.js @@ -6,7 +6,7 @@ /** * @class ax5.ui.dialog * @classdesc - * @version 0.6.4 + * @version 0.6.5 * @author tom@axisj.com * @example * ``` @@ -60,6 +60,150 @@ } }; return ax5.mustache.render(getContentTmpl(), data); + }, + open = function open(opts, callBack) { + var pos = {}, + box; + + opts.id = opts.id || cfg.id; + + box = { + width: opts.width + }; + jQuery(document.body).append(getContent.call(this, opts.id, opts)); + + this.activeDialog = jQuery('#' + opts.id); + this.activeDialog.css({ width: box.width }); + + // dialog 높이 구하기 - 너비가 정해지면 높이가 변경 될 것. + opts.height = box.height = this.activeDialog.height(); + + //- position 정렬 + if (typeof opts.position === "undefined" || opts.position === "center") { + pos.top = jQuery(window).height() / 2 - box.height / 2; + pos.left = jQuery(window).width() / 2 - box.width / 2; + } else { + pos.left = opts.position.left || 0; + pos.top = opts.position.top || 0; + } + this.activeDialog.css(pos); + + // bind button event + if (opts.dialogType === "prompt") { + this.activeDialog.find("[data-dialog-prompt]").get(0).focus(); + } else { + this.activeDialog.find("[data-dialog-btn]").get(0).focus(); + } + + this.activeDialog.find("[data-dialog-btn]").on(cfg.clickEventName, function (e) { + btnOnClick.call(this, e || window.event, opts, callBack); + }.bind(this)); + + // bind key event + jQuery(window).bind("keydown.ax5dialog", function (e) { + onKeyup.call(this, e || window.event, opts, callBack); + }.bind(this)); + + jQuery(window).bind("resize.ax5dialog", function (e) { + align.call(this, e || window.event); + }.bind(this)); + + onStateChanged.call(this, opts, { + self: this, + state: "open" + }); + }, + align = function align(e) { + if (!this.activeDialog) return this; + var opts = self.dialogConfig, + box = { + width: opts.width, + height: opts.height + }; + //- position 정렬 + if (typeof opts.position === "undefined" || opts.position === "center") { + box.top = window.innerHeight / 2 - box.height / 2; + box.left = window.innerWidth / 2 - box.width / 2; + } else { + box.left = opts.position.left || 0; + box.top = opts.position.top || 0; + } + this.activeDialog.css(box); + return this; + }, + btnOnClick = function btnOnClick(e, opts, callBack, target, k) { + if (e.srcElement) e.target = e.srcElement; + + target = U.findParentNode(e.target, function (target) { + if (target.getAttribute("data-dialog-btn")) { + return true; + } + }); + + if (target) { + k = target.getAttribute("data-dialog-btn"); + + var that = { + self: this, + key: k, value: opts.btns[k], + dialogId: opts.id, + btnTarget: target + }; + if (opts.dialogType === "prompt") { + var emptyKey = null; + for (var oi in opts.input) { + that[oi] = this.activeDialog.find('[data-dialog-prompt=' + oi + ']').val(); + if (that[oi] == "" || that[oi] == null) { + emptyKey = oi; + break; + } + } + } + if (opts.btns[k].onClick) { + opts.btns[k].onClick.call(that, k); + } else if (opts.dialogType === "alert") { + if (callBack) callBack.call(that, k); + this.close(); + } else if (opts.dialogType === "confirm") { + if (callBack) callBack.call(that, k); + this.close(); + } else if (opts.dialogType === "prompt") { + if (k === 'ok') { + if (emptyKey) { + this.activeDialog.find('[data-dialog-prompt="' + emptyKey + '"]').get(0).focus(); + return false; + } + } + if (callBack) callBack.call(that, k); + this.close(); + } + } + }, + onKeyup = function onKeyup(e, opts, callBack, target, k) { + if (e.keyCode == ax5.info.eventKeys.ESC) { + this.close(); + } + if (opts.dialogType === "prompt") { + if (e.keyCode == ax5.info.eventKeys.RETURN) { + var that = { + self: this, + key: k, value: opts.btns[k], + dialogId: opts.id, + btnTarget: target + }; + var emptyKey = null; + for (var oi in opts.input) { + that[oi] = this.activeDialog.find('[data-dialog-prompt=' + oi + ']').val(); + if (that[oi] == "" || that[oi] == null) { + emptyKey = oi; + break; + } + } + if (emptyKey) return false; + if (callBack) callBack.call(that, k); + this.close(); + } + } }; /** @@ -106,8 +250,7 @@ } self.dialogConfig = {}; - jQuery.extend(true, self.dialogConfig, cfg); - jQuery.extend(true, self.dialogConfig, opts); + jQuery.extend(true, self.dialogConfig, cfg, opts); opts = self.dialogConfig; opts.dialogType = "alert"; @@ -116,7 +259,7 @@ ok: { label: cfg.lang["ok"], theme: opts.theme } }; } - this.open(opts, callBack); + open.call(this, opts, callBack); return this; }; @@ -148,8 +291,7 @@ } self.dialogConfig = {}; - jQuery.extend(true, self.dialogConfig, cfg); - jQuery.extend(true, self.dialogConfig, opts); + jQuery.extend(true, self.dialogConfig, cfg, opts); opts = self.dialogConfig; opts.dialogType = "confirm"; @@ -160,7 +302,7 @@ cancel: { label: cfg.lang["cancel"] } }; } - this.open(opts, callBack); + open.call(this, opts, callBack); return this; }; @@ -192,8 +334,7 @@ } self.dialogConfig = {}; - jQuery.extend(true, self.dialogConfig, cfg); - jQuery.extend(true, self.dialogConfig, opts); + jQuery.extend(true, self.dialogConfig, cfg, opts); opts = self.dialogConfig; opts.dialogType = "prompt"; @@ -210,168 +351,10 @@ cancel: { label: cfg.lang["cancel"] } }; } - this.open(opts, callBack); + open.call(this, opts, callBack); return this; }; - this.open = function (opts, callBack) { - var pos = {}, - that, - box; - - opts.id = opts.id || cfg.id; - - box = { - width: opts.width - }; - jQuery(document.body).append(getContent.call(this, opts.id, opts)); - - this.activeDialog = jQuery('#' + opts.id); - this.activeDialog.css({ width: box.width }); - - // dialog 높이 구하기 - 너비가 정해지면 높이가 변경 될 것. - opts.height = box.height = this.activeDialog.height(); - - //- position 정렬 - if (typeof opts.position === "undefined" || opts.position === "center") { - var w = window.innerWidth; - var h = window.innerHeight; - - pos.top = h / 2 - box.height / 2; - pos.left = w / 2 - box.width / 2; - } else { - pos.left = opts.position.left || 0; - pos.top = opts.position.top || 0; - } - this.activeDialog.css(pos); - - // bind button event - if (opts.dialogType === "prompt") { - this.activeDialog.find("[data-dialog-prompt]").get(0).focus(); - } else { - this.activeDialog.find("[data-dialog-btn]").get(0).focus(); - } - - this.activeDialog.find("[data-dialog-btn]").on(cfg.clickEventName, function (e) { - this.btnOnClick(e || window.event, opts, callBack); - }.bind(this)); - - // bind key event - jQuery(window).bind("keydown.ax5dialog", function (e) { - this.onKeyup(e || window.event, opts, callBack); - }.bind(this)); - - jQuery(window).bind("resize.ax5dialog", function (e) { - this.align(e || window.event); - }.bind(this)); - - that = { - self: this, - state: "open" - }; - if (opts && opts.onStateChanged) { - opts.onStateChanged.call(that, that); - } else if (this.onStateChanged) { - this.onStateChanged.call(that, that); - } - return this; - }; - - this.align = function (e) { - if (!this.activeDialog) return this; - var opts = self.dialogConfig, - box = { - width: opts.width, - height: opts.height - }; - //- position 정렬 - if (typeof opts.position === "undefined" || opts.position === "center") { - box.top = window.innerHeight / 2 - box.height / 2; - box.left = window.innerWidth / 2 - box.width / 2; - } else { - box.left = opts.position.left || 0; - box.top = opts.position.top || 0; - } - this.activeDialog.css(box); - return this; - }; - - this.btnOnClick = function (e, opts, callBack, target, k) { - if (e.srcElement) e.target = e.srcElement; - - target = U.findParentNode(e.target, function (target) { - if (target.getAttribute("data-dialog-btn")) { - return true; - } - }); - - if (target) { - k = target.getAttribute("data-dialog-btn"); - - var that = { - self: this, - key: k, value: opts.btns[k], - dialogId: opts.id, - btnTarget: target - }; - if (opts.dialogType === "prompt") { - var emptyKey = null; - for (var oi in opts.input) { - that[oi] = this.activeDialog.find('[data-dialog-prompt=' + oi + ']').val(); - if (that[oi] == "" || that[oi] == null) { - emptyKey = oi; - break; - } - } - } - if (opts.btns[k].onClick) { - opts.btns[k].onClick.call(that, k); - } else if (opts.dialogType === "alert") { - if (callBack) callBack.call(that, k); - this.close(); - } else if (opts.dialogType === "confirm") { - if (callBack) callBack.call(that, k); - this.close(); - } else if (opts.dialogType === "prompt") { - if (k === 'ok') { - if (emptyKey) { - this.activeDialog.find('[data-dialog-prompt="' + emptyKey + '"]').get(0).focus(); - return false; - } - } - if (callBack) callBack.call(that, k); - this.close(); - } - } - }; - - this.onKeyup = function (e, opts, callBack, target, k) { - if (e.keyCode == ax5.info.eventKeys.ESC) { - this.close(); - } - if (opts.dialogType === "prompt") { - if (e.keyCode == ax5.info.eventKeys.RETURN) { - var that = { - self: this, - key: k, value: opts.btns[k], - dialogId: opts.id, - btnTarget: target - }; - var emptyKey = null; - for (var oi in opts.input) { - that[oi] = this.activeDialog.find('[data-dialog-prompt=' + oi + ']').val(); - if (that[oi] == "" || that[oi] == null) { - emptyKey = oi; - break; - } - } - if (emptyKey) return false; - if (callBack) callBack.call(that, k); - this.close(); - } - } - }; - /** * close the dialog * @method ax5.ui.dialog.close diff --git a/dist/ax5dialog.min.js b/dist/ax5dialog.min.js index 7504d4d..a16437d 100644 --- a/dist/ax5dialog.min.js +++ b/dist/ax5dialog.min.js @@ -1 +1 @@ -"use strict";!function(i,t){var e=ax5.util,n=function(){var i,n=this;t&&t.call(this),this.activeDialog=null,this.config={clickEventName:"click",theme:"default",width:300,title:"",msg:"",lang:{ok:"ok",cancel:"cancel"},animateTime:250},i=this.config,i.id="ax5-dialog-"+ax5.getGuid();var a=function(){return'\n
\n
\n {{{title}}}\n
\n
\n
{{{msg}}}
\n \n {{#input}}\n
\n {{#@each}}\n
\n {{#@value.label}}\n \n {{/@value.label}}\n \n {{#@value.help}}\n

{{#_crlf}}{{.}}{{/_crlf}}

\n {{/@value.help}}\n
\n {{/@each}}\n
\n {{/input}}\n \n
\n
\n {{#btns}}\n {{#@each}}\n \n {{/@each}}\n {{/btns}}\n
\n
\n
\n
\n '},o=function(t,e){var n={dialogId:t,title:e.title||i.title||"",msg:(e.msg||i.msg||"").replace(/\n/g,"
"),input:e.input,btns:e.btns,_crlf:function(){return this.replace(/\n/g,"
")}};return ax5.mustache.render(a(),n)};this.init=function(){this.onStateChanged=i.onStateChanged},this.alert=function(t,a){return e.isString(t)&&(t={title:i.title,msg:t}),this.activeDialog?(console.log(ax5.info.getError("ax5dialog","501","alert")),this):(n.dialogConfig={},jQuery.extend(!0,n.dialogConfig,i),jQuery.extend(!0,n.dialogConfig,t),t=n.dialogConfig,t.dialogType="alert","undefined"==typeof t.btns&&(t.btns={ok:{label:i.lang.ok,theme:t.theme}}),this.open(t,a),this)},this.confirm=function(t,a){return e.isString(t)&&(t={title:i.title,msg:t}),this.activeDialog?(console.log(ax5.info.getError("ax5dialog","501","confirm")),this):(n.dialogConfig={},jQuery.extend(!0,n.dialogConfig,i),jQuery.extend(!0,n.dialogConfig,t),t=n.dialogConfig,t.dialogType="confirm",t.theme=t.theme||i.theme||"","undefined"==typeof t.btns&&(t.btns={ok:{label:i.lang.ok,theme:t.theme},cancel:{label:i.lang.cancel}}),this.open(t,a),this)},this.prompt=function(t,a){return e.isString(t)&&(t={title:i.title,msg:t}),this.activeDialog?(console.log(ax5.info.getError("ax5dialog","501","prompt")),this):(n.dialogConfig={},jQuery.extend(!0,n.dialogConfig,i),jQuery.extend(!0,n.dialogConfig,t),t=n.dialogConfig,t.dialogType="prompt",t.theme=t.theme||i.theme||"","undefined"==typeof t.input&&(t.input={value:{label:""}}),"undefined"==typeof t.btns&&(t.btns={ok:{label:i.lang.ok,theme:t.theme},cancel:{label:i.lang.cancel}}),this.open(t,a),this)},this.open=function(t,e){var n,a,l={};if(t.id=t.id||i.id,a={width:t.width},jQuery(document.body).append(o.call(this,t.id,t)),this.activeDialog=jQuery("#"+t.id),this.activeDialog.css({width:a.width}),t.height=a.height=this.activeDialog.height(),"undefined"==typeof t.position||"center"===t.position){var s=window.innerWidth,d=window.innerHeight;l.top=d/2-a.height/2,l.left=s/2-a.width/2}else l.left=t.position.left||0,l.top=t.position.top||0;return this.activeDialog.css(l),"prompt"===t.dialogType?this.activeDialog.find("[data-dialog-prompt]").get(0).focus():this.activeDialog.find("[data-dialog-btn]").get(0).focus(),this.activeDialog.find("[data-dialog-btn]").on(i.clickEventName,function(i){this.btnOnClick(i||window.event,t,e)}.bind(this)),jQuery(window).bind("keydown.ax5dialog",function(i){this.onKeyup(i||window.event,t,e)}.bind(this)),jQuery(window).bind("resize.ax5dialog",function(i){this.align(i||window.event)}.bind(this)),n={self:this,state:"open"},t&&t.onStateChanged?t.onStateChanged.call(n,n):this.onStateChanged&&this.onStateChanged.call(n,n),this},this.align=function(i){if(!this.activeDialog)return this;var t=n.dialogConfig,e={width:t.width,height:t.height};return"undefined"==typeof t.position||"center"===t.position?(e.top=window.innerHeight/2-e.height/2,e.left=window.innerWidth/2-e.width/2):(e.left=t.position.left||0,e.top=t.position.top||0),this.activeDialog.css(e),this},this.btnOnClick=function(i,t,n,a,o){if(i.srcElement&&(i.target=i.srcElement),a=e.findParentNode(i.target,function(i){return i.getAttribute("data-dialog-btn")?!0:void 0})){o=a.getAttribute("data-dialog-btn");var l={self:this,key:o,value:t.btns[o],dialogId:t.id,btnTarget:a};if("prompt"===t.dialogType){var s=null;for(var d in t.input)if(l[d]=this.activeDialog.find("[data-dialog-prompt="+d+"]").val(),""==l[d]||null==l[d]){s=d;break}}if(t.btns[o].onClick)t.btns[o].onClick.call(l,o);else if("alert"===t.dialogType)n&&n.call(l,o),this.close();else if("confirm"===t.dialogType)n&&n.call(l,o),this.close();else if("prompt"===t.dialogType){if("ok"===o&&s)return this.activeDialog.find('[data-dialog-prompt="'+s+'"]').get(0).focus(),!1;n&&n.call(l,o),this.close()}}},this.onKeyup=function(i,t,e,n,a){if(i.keyCode==ax5.info.eventKeys.ESC&&this.close(),"prompt"===t.dialogType&&i.keyCode==ax5.info.eventKeys.RETURN){var o={self:this,key:a,value:t.btns[a],dialogId:t.id,btnTarget:n},l=null;for(var s in t.input)if(o[s]=this.activeDialog.find("[data-dialog-prompt="+s+"]").val(),""==o[s]||null==o[s]){l=s;break}if(l)return!1;e&&e.call(o,a),this.close()}},this.close=function(t,e){return this.activeDialog&&(t=n.dialogConfig,this.activeDialog.addClass("destroy"),jQuery(window).unbind("keydown.ax5dialog"),jQuery(window).unbind("resize.ax5dialog"),setTimeout(function(){this.activeDialog.remove(),this.activeDialog=null,e={self:this,state:"close"},t&&t.onStateChanged?t.onStateChanged.call(e,e):this.onStateChanged&&this.onStateChanged.call(e,e)}.bind(this),i.animateTime)),this},this.main=function(){arguments&&e.isObject(arguments[0])&&this.setConfig(arguments[0])}.apply(this,arguments)};i.dialog=function(){return e.isFunction(t)&&(n.prototype=new t),n}()}(ax5.ui,ax5.ui.root); \ No newline at end of file +"use strict";!function(t,i){var e=ax5.util,n=function(){var t,n=this;i&&i.call(this),this.activeDialog=null,this.config={clickEventName:"click",theme:"default",width:300,title:"",msg:"",lang:{ok:"ok",cancel:"cancel"},animateTime:250},t=this.config,t.id="ax5-dialog-"+ax5.getGuid();var a=function(t,i){return t&&t.onStateChanged?t.onStateChanged.call(i,i):this.onStateChanged&&this.onStateChanged.call(i,i),!0},l=function(){return'\n
\n
\n {{{title}}}\n
\n
\n
{{{msg}}}
\n \n {{#input}}\n
\n {{#@each}}\n
\n {{#@value.label}}\n \n {{/@value.label}}\n \n {{#@value.help}}\n

{{#_crlf}}{{.}}{{/_crlf}}

\n {{/@value.help}}\n
\n {{/@each}}\n
\n {{/input}}\n \n
\n
\n {{#btns}}\n {{#@each}}\n \n {{/@each}}\n {{/btns}}\n
\n
\n
\n
\n '},o=function(i,e){var n={dialogId:i,title:e.title||t.title||"",msg:(e.msg||t.msg||"").replace(/\n/g,"
"),input:e.input,btns:e.btns,_crlf:function(){return this.replace(/\n/g,"
")}};return ax5.mustache.render(l(),n)},s=function(i,e){var n,l={};i.id=i.id||t.id,n={width:i.width},jQuery(document.body).append(o.call(this,i.id,i)),this.activeDialog=jQuery("#"+i.id),this.activeDialog.css({width:n.width}),i.height=n.height=this.activeDialog.height(),"undefined"==typeof i.position||"center"===i.position?(l.top=jQuery(window).height()/2-n.height/2,l.left=jQuery(window).width()/2-n.width/2):(l.left=i.position.left||0,l.top=i.position.top||0),this.activeDialog.css(l),"prompt"===i.dialogType?this.activeDialog.find("[data-dialog-prompt]").get(0).focus():this.activeDialog.find("[data-dialog-btn]").get(0).focus(),this.activeDialog.find("[data-dialog-btn]").on(t.clickEventName,function(t){g.call(this,t||window.event,i,e)}.bind(this)),jQuery(window).bind("keydown.ax5dialog",function(t){c.call(this,t||window.event,i,e)}.bind(this)),jQuery(window).bind("resize.ax5dialog",function(t){d.call(this,t||window.event)}.bind(this)),a.call(this,i,{self:this,state:"open"})},d=function(t){if(!this.activeDialog)return this;var i=n.dialogConfig,e={width:i.width,height:i.height};return"undefined"==typeof i.position||"center"===i.position?(e.top=window.innerHeight/2-e.height/2,e.left=window.innerWidth/2-e.width/2):(e.left=i.position.left||0,e.top=i.position.top||0),this.activeDialog.css(e),this},g=function(t,i,n,a,l){if(t.srcElement&&(t.target=t.srcElement),a=e.findParentNode(t.target,function(t){return t.getAttribute("data-dialog-btn")?!0:void 0})){l=a.getAttribute("data-dialog-btn");var o={self:this,key:l,value:i.btns[l],dialogId:i.id,btnTarget:a};if("prompt"===i.dialogType){var s=null;for(var d in i.input)if(o[d]=this.activeDialog.find("[data-dialog-prompt="+d+"]").val(),""==o[d]||null==o[d]){s=d;break}}if(i.btns[l].onClick)i.btns[l].onClick.call(o,l);else if("alert"===i.dialogType)n&&n.call(o,l),this.close();else if("confirm"===i.dialogType)n&&n.call(o,l),this.close();else if("prompt"===i.dialogType){if("ok"===l&&s)return this.activeDialog.find('[data-dialog-prompt="'+s+'"]').get(0).focus(),!1;n&&n.call(o,l),this.close()}}},c=function(t,i,e,n,a){if(t.keyCode==ax5.info.eventKeys.ESC&&this.close(),"prompt"===i.dialogType&&t.keyCode==ax5.info.eventKeys.RETURN){var l={self:this,key:a,value:i.btns[a],dialogId:i.id,btnTarget:n},o=null;for(var s in i.input)if(l[s]=this.activeDialog.find("[data-dialog-prompt="+s+"]").val(),""==l[s]||null==l[s]){o=s;break}if(o)return!1;e&&e.call(l,a),this.close()}};this.init=function(){this.onStateChanged=t.onStateChanged},this.alert=function(i,a){return e.isString(i)&&(i={title:t.title,msg:i}),this.activeDialog?(console.log(ax5.info.getError("ax5dialog","501","alert")),this):(n.dialogConfig={},jQuery.extend(!0,n.dialogConfig,t,i),i=n.dialogConfig,i.dialogType="alert","undefined"==typeof i.btns&&(i.btns={ok:{label:t.lang.ok,theme:i.theme}}),s.call(this,i,a),this)},this.confirm=function(i,a){return e.isString(i)&&(i={title:t.title,msg:i}),this.activeDialog?(console.log(ax5.info.getError("ax5dialog","501","confirm")),this):(n.dialogConfig={},jQuery.extend(!0,n.dialogConfig,t,i),i=n.dialogConfig,i.dialogType="confirm",i.theme=i.theme||t.theme||"","undefined"==typeof i.btns&&(i.btns={ok:{label:t.lang.ok,theme:i.theme},cancel:{label:t.lang.cancel}}),s.call(this,i,a),this)},this.prompt=function(i,a){return e.isString(i)&&(i={title:t.title,msg:i}),this.activeDialog?(console.log(ax5.info.getError("ax5dialog","501","prompt")),this):(n.dialogConfig={},jQuery.extend(!0,n.dialogConfig,t,i),i=n.dialogConfig,i.dialogType="prompt",i.theme=i.theme||t.theme||"","undefined"==typeof i.input&&(i.input={value:{label:""}}),"undefined"==typeof i.btns&&(i.btns={ok:{label:t.lang.ok,theme:i.theme},cancel:{label:t.lang.cancel}}),s.call(this,i,a),this)},this.close=function(i,e){return this.activeDialog&&(i=n.dialogConfig,this.activeDialog.addClass("destroy"),jQuery(window).unbind("keydown.ax5dialog"),jQuery(window).unbind("resize.ax5dialog"),setTimeout(function(){this.activeDialog.remove(),this.activeDialog=null,e={self:this,state:"close"},i&&i.onStateChanged?i.onStateChanged.call(e,e):this.onStateChanged&&this.onStateChanged.call(e,e)}.bind(this),t.animateTime)),this},this.main=function(){arguments&&e.isObject(arguments[0])&&this.setConfig(arguments[0])}.apply(this,arguments)};t.dialog=function(){return e.isFunction(i)&&(n.prototype=new i),n}()}(ax5.ui,ax5.ui.root); \ No newline at end of file diff --git a/package.json b/package.json index 601a6a5..38c54f9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ax5ui-dialog", - "version": "0.6.4", + "version": "0.6.5", "description": "A dialog plugin that works with Bootstrap & jQuery", "license": "apache 2.0", "repository": { diff --git a/src/ax5dialog.js b/src/ax5dialog.js index 25a3adc..78c5123 100644 --- a/src/ax5dialog.js +++ b/src/ax5dialog.js @@ -4,7 +4,7 @@ /** * @class ax5.ui.dialog * @classdesc - * @version 0.6.4 + * @version 0.6.5 * @author tom@axisj.com * @example * ``` @@ -46,7 +46,7 @@ } return true; }, - getContentTmpl = function(){ + getContentTmpl = function () { return `
@@ -84,7 +84,7 @@
`; }, - getContent = function(dialogId, opts){ + getContent = function (dialogId, opts) { var data = { dialogId: dialogId, @@ -92,11 +92,164 @@ msg: (opts.msg || cfg.msg || "").replace(/\n/g, "
"), input: opts.input, btns: opts.btns, - '_crlf': function(){ + '_crlf': function () { return this.replace(/\n/g, "
"); } }; return ax5.mustache.render(getContentTmpl(), data); + }, + open = function (opts, callBack) { + var + pos = {}, + box + ; + + opts.id = (opts.id || cfg.id); + + box = { + width: opts.width + }; + jQuery(document.body).append(getContent.call(this, opts.id, opts)); + + this.activeDialog = jQuery('#' + opts.id); + this.activeDialog.css({width: box.width}); + + // dialog 높이 구하기 - 너비가 정해지면 높이가 변경 될 것. + opts.height = box.height = this.activeDialog.height(); + + //- position 정렬 + if (typeof opts.position === "undefined" || opts.position === "center") { + pos.top = jQuery(window).height() / 2 - box.height / 2; + pos.left = jQuery(window).width() / 2 - box.width / 2; + } + else { + pos.left = opts.position.left || 0; + pos.top = opts.position.top || 0; + } + this.activeDialog.css(pos); + + // bind button event + if (opts.dialogType === "prompt") { + this.activeDialog.find("[data-dialog-prompt]").get(0).focus(); + } + else { + this.activeDialog.find("[data-dialog-btn]").get(0).focus(); + } + + this.activeDialog.find("[data-dialog-btn]").on(cfg.clickEventName, (function (e) { + btnOnClick.call(this, e || window.event, opts, callBack); + }).bind(this)); + + // bind key event + jQuery(window).bind("keydown.ax5dialog", (function (e) { + onKeyup.call(this, e || window.event, opts, callBack); + }).bind(this)); + + jQuery(window).bind("resize.ax5dialog", (function (e) { + align.call(this, e || window.event); + }).bind(this)); + + onStateChanged.call(this, opts, { + self: this, + state: "open" + }); + }, + align = function (e) { + if (!this.activeDialog) return this; + var + opts = self.dialogConfig, + box = { + width: opts.width, + height: opts.height + }; + //- position 정렬 + if (typeof opts.position === "undefined" || opts.position === "center") { + box.top = window.innerHeight / 2 - box.height / 2; + box.left = window.innerWidth / 2 - box.width / 2; + } + else { + box.left = opts.position.left || 0; + box.top = opts.position.top || 0; + } + this.activeDialog.css(box); + return this; + }, + btnOnClick = function (e, opts, callBack, target, k) { + if (e.srcElement) e.target = e.srcElement; + + target = U.findParentNode(e.target, function (target) { + if (target.getAttribute("data-dialog-btn")) { + return true; + } + }); + + if (target) { + k = target.getAttribute("data-dialog-btn"); + + var that = { + self: this, + key: k, value: opts.btns[k], + dialogId: opts.id, + btnTarget: target + }; + if (opts.dialogType === "prompt") { + var emptyKey = null; + for (var oi in opts.input) { + that[oi] = this.activeDialog.find('[data-dialog-prompt=' + oi + ']').val(); + if (that[oi] == "" || that[oi] == null) { + emptyKey = oi; + break; + } + } + } + if (opts.btns[k].onClick) { + opts.btns[k].onClick.call(that, k); + } + else if (opts.dialogType === "alert") { + if (callBack) callBack.call(that, k); + this.close(); + } + else if (opts.dialogType === "confirm") { + if (callBack) callBack.call(that, k); + this.close(); + } + else if (opts.dialogType === "prompt") { + if (k === 'ok') { + if (emptyKey) { + this.activeDialog.find('[data-dialog-prompt="' + emptyKey + '"]').get(0).focus(); + return false; + } + } + if (callBack) callBack.call(that, k); + this.close(); + } + } + }, + onKeyup = function (e, opts, callBack, target, k) { + if (e.keyCode == ax5.info.eventKeys.ESC) { + this.close(); + } + if (opts.dialogType === "prompt") { + if (e.keyCode == ax5.info.eventKeys.RETURN) { + var that = { + self: this, + key: k, value: opts.btns[k], + dialogId: opts.id, + btnTarget: target + }; + var emptyKey = null; + for (var oi in opts.input) { + that[oi] = this.activeDialog.find('[data-dialog-prompt=' + oi + ']').val(); + if (that[oi] == "" || that[oi] == null) { + emptyKey = oi; + break; + } + } + if (emptyKey) return false; + if (callBack) callBack.call(that, k); + this.close(); + } + } }; /** @@ -144,8 +297,7 @@ } self.dialogConfig = {}; - jQuery.extend(true, self.dialogConfig, cfg); - jQuery.extend(true, self.dialogConfig, opts); + jQuery.extend(true, self.dialogConfig, cfg, opts); opts = self.dialogConfig; opts.dialogType = "alert"; @@ -154,7 +306,7 @@ ok: {label: cfg.lang["ok"], theme: opts.theme} }; } - this.open(opts, callBack); + open.call(this, opts, callBack); return this; }; @@ -186,8 +338,7 @@ } self.dialogConfig = {}; - jQuery.extend(true, self.dialogConfig, cfg); - jQuery.extend(true, self.dialogConfig, opts); + jQuery.extend(true, self.dialogConfig, cfg, opts); opts = self.dialogConfig; opts.dialogType = "confirm"; @@ -198,7 +349,7 @@ cancel: {label: cfg.lang["cancel"]} }; } - this.open(opts, callBack); + open.call(this, opts, callBack); return this; }; @@ -230,8 +381,7 @@ } self.dialogConfig = {}; - jQuery.extend(true, self.dialogConfig, cfg); - jQuery.extend(true, self.dialogConfig, opts); + jQuery.extend(true, self.dialogConfig, cfg, opts); opts = self.dialogConfig; opts.dialogType = "prompt"; @@ -248,178 +398,10 @@ cancel: {label: cfg.lang["cancel"]} }; } - this.open(opts, callBack); + open.call(this, opts, callBack); return this; }; - this.open = function (opts, callBack) { - var - pos = {}, - that, - box - ; - - opts.id = (opts.id || cfg.id); - - box = { - width: opts.width - }; - jQuery(document.body).append(getContent.call(this, opts.id, opts)); - - this.activeDialog = jQuery('#' + opts.id); - this.activeDialog.css({width: box.width}); - - // dialog 높이 구하기 - 너비가 정해지면 높이가 변경 될 것. - opts.height = box.height = this.activeDialog.height(); - - //- position 정렬 - if (typeof opts.position === "undefined" || opts.position === "center") { - var w = window.innerWidth; - var h = window.innerHeight; - - pos.top = h / 2 - box.height / 2; - pos.left = w / 2 - box.width / 2; - } - else { - pos.left = opts.position.left || 0; - pos.top = opts.position.top || 0; - } - this.activeDialog.css(pos); - - // bind button event - if (opts.dialogType === "prompt") { - this.activeDialog.find("[data-dialog-prompt]").get(0).focus(); - } - else { - this.activeDialog.find("[data-dialog-btn]").get(0).focus(); - } - - this.activeDialog.find("[data-dialog-btn]").on(cfg.clickEventName, (function (e) { - this.btnOnClick(e || window.event, opts, callBack); - }).bind(this)); - - // bind key event - jQuery(window).bind("keydown.ax5dialog", (function (e) { - this.onKeyup(e || window.event, opts, callBack); - }).bind(this)); - - jQuery(window).bind("resize.ax5dialog", (function (e) { - this.align(e || window.event); - }).bind(this)); - - that = { - self: this, - state: "open" - }; - if (opts && opts.onStateChanged) { - opts.onStateChanged.call(that, that); - } - else if (this.onStateChanged) { - this.onStateChanged.call(that, that); - } - return this; - }; - - this.align = function (e) { - if (!this.activeDialog) return this; - var - opts = self.dialogConfig, - box = { - width: opts.width, - height: opts.height - }; - //- position 정렬 - if (typeof opts.position === "undefined" || opts.position === "center") { - box.top = window.innerHeight / 2 - box.height / 2; - box.left = window.innerWidth / 2 - box.width / 2; - } - else { - box.left = opts.position.left || 0; - box.top = opts.position.top || 0; - } - this.activeDialog.css(box); - return this; - }; - - this.btnOnClick = function (e, opts, callBack, target, k) { - if (e.srcElement) e.target = e.srcElement; - - target = U.findParentNode(e.target, function (target) { - if (target.getAttribute("data-dialog-btn")) { - return true; - } - }); - - if (target) { - k = target.getAttribute("data-dialog-btn"); - - var that = { - self: this, - key: k, value: opts.btns[k], - dialogId: opts.id, - btnTarget: target - }; - if (opts.dialogType === "prompt") { - var emptyKey = null; - for (var oi in opts.input) { - that[oi] = this.activeDialog.find('[data-dialog-prompt=' + oi + ']').val(); - if (that[oi] == "" || that[oi] == null) { - emptyKey = oi; - break; - } - } - } - if (opts.btns[k].onClick) { - opts.btns[k].onClick.call(that, k); - } - else if (opts.dialogType === "alert") { - if (callBack) callBack.call(that, k); - this.close(); - } - else if (opts.dialogType === "confirm") { - if (callBack) callBack.call(that, k); - this.close(); - } - else if (opts.dialogType === "prompt") { - if (k === 'ok') { - if (emptyKey) { - this.activeDialog.find('[data-dialog-prompt="' + emptyKey + '"]').get(0).focus(); - return false; - } - } - if (callBack) callBack.call(that, k); - this.close(); - } - } - }; - - this.onKeyup = function (e, opts, callBack, target, k) { - if (e.keyCode == ax5.info.eventKeys.ESC) { - this.close(); - } - if (opts.dialogType === "prompt") { - if (e.keyCode == ax5.info.eventKeys.RETURN) { - var that = { - self: this, - key: k, value: opts.btns[k], - dialogId: opts.id, - btnTarget: target - }; - var emptyKey = null; - for (var oi in opts.input) { - that[oi] = this.activeDialog.find('[data-dialog-prompt=' + oi + ']').val(); - if (that[oi] == "" || that[oi] == null) { - emptyKey = oi; - break; - } - } - if (emptyKey) return false; - if (callBack) callBack.call(that, k); - this.close(); - } - } - }; - /** * close the dialog * @method ax5.ui.dialog.close