From 501829499261c83d756a1819b1644f134078cb13 Mon Sep 17 00:00:00 2001 From: ThomasJ Date: Thu, 14 Jan 2016 16:52:23 +0900 Subject: [PATCH] ax5dialog 0.5.0 / ax5modal test --- bower.json | 2 +- dist/ax5dialog.css | 2 +- dist/ax5dialog.js | 67 ++++++++++++++++++++---------- dist/ax5dialog.min.js | 2 +- package.json | 2 +- src/ax5dialog.js | 67 ++++++++++++++++++++---------- src/scss/_ax5dialog.scss | 18 +++++++- src/scss/_ax5dialog_variables.scss | 4 +- test/bower.json | 2 +- 9 files changed, 115 insertions(+), 51 deletions(-) diff --git a/bower.json b/bower.json index abc3115..0279229 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "bootstrap-ax5dialog", - "version": "0.4.0", + "version": "0.5.0", "authors": [ "ThomasJ " ], diff --git a/dist/ax5dialog.css b/dist/ax5dialog.css index f947fb3..b268eac 100644 --- a/dist/ax5dialog.css +++ b/dist/ax5dialog.css @@ -1 +1 @@ -@-webkit-keyframes ax-dialog{0%{opacity:0.0;-webkit-transform:scale(1)}1%{opacity:0.0;-webkit-transform:scale(0.3)}100%{opacity:1.0;-webkit-transform:scale(1)}}@-moz-keyframes ax-dialog{0%{opacity:0.0;-moz-transform:scale(1)}1%{opacity:0.0;-moz-transform:scale(0.3)}100%{opacity:1.0;-moz-transform:scale(1)}}@keyframes ax-dialog{0%{opacity:0.0;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}1%{opacity:0.0;-webkit-transform:scale(0.3);-moz-transform:scale(0.3);-ms-transform:scale(0.3);-o-transform:scale(0.3);transform:scale(0.3)}100%{opacity:1.0;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}.ax5-ui-dialog{-webkit-animation:ax-dialog 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);-moz-animation:ax-dialog 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:ax-dialog 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);box-sizing:border-box;background-color:#fff;border:1px solid #ddd;box-shadow:0px 0px 5px 0px rgba(0,0,0,0.6);z-index:2000;position:fixed;left:0px;top:0px;border:1px solid #ddd}.ax5-ui-dialog .ax-dialog-heading{font-weight:600;padding:10px 15px;border-bottom:1px solid transparent}.ax5-ui-dialog .ax-dialog-heading .badge{font-size:0.8em;color:#f5f5f5;background-color:#333}.ax5-ui-dialog .ax-dialog-body{padding:15px;text-align:center}.ax5-ui-dialog .ax-dialog-body .ax-dialog-msg{padding-top:15px;padding-bottom:15px}.ax5-ui-dialog .ax-dialog-body .ax-dialog-prompt{text-align:left;padding-bottom:7.5px}.ax5-ui-dialog .ax-dialog-body .ax-dialog-buttons{margin-top:15px}.ax5-ui-dialog .ax-dialog-body .ax-dialog-buttons button:not(:last-child){margin-right:3px}.ax5-ui-dialog .ax-dialog-heading{color:#333;background:#f5f5f5}.ax5-ui-dialog .ax-dialog-heading .badge{color:#f5f5f5;background-color:#333}.ax5-ui-dialog.primary{border:1px solid #ddd}.ax5-ui-dialog.primary .ax-dialog-heading{color:#fff;background:#337ab7}.ax5-ui-dialog.primary .ax-dialog-heading .badge{color:#337ab7;background-color:#fff}.ax5-ui-dialog.success{border:1px solid #ddd}.ax5-ui-dialog.success .ax-dialog-heading{color:#3c763d;background:#dff0d8}.ax5-ui-dialog.success .ax-dialog-heading .badge{color:#dff0d8;background-color:#3c763d}.ax5-ui-dialog.info{border:1px solid #ddd}.ax5-ui-dialog.info .ax-dialog-heading{color:#31708f;background:#d9edf7}.ax5-ui-dialog.info .ax-dialog-heading .badge{color:#d9edf7;background-color:#31708f}.ax5-ui-dialog.warning{border:1px solid #ddd}.ax5-ui-dialog.warning .ax-dialog-heading{color:#8a6d3b;background:#fcf8e3}.ax5-ui-dialog.warning .ax-dialog-heading .badge{color:#fcf8e3;background-color:#8a6d3b}.ax5-ui-dialog.danger{border:1px solid #ddd}.ax5-ui-dialog.danger .ax-dialog-heading{color:#a94442;background:#f2dede}.ax5-ui-dialog.danger .ax-dialog-heading .badge{color:#f2dede;background-color:#a94442} +@-webkit-keyframes ax-dialog{0%{opacity:0.0;-webkit-transform:scale(1)}1%{opacity:0.0;-webkit-transform:scale(0.3)}100%{opacity:1.0;-webkit-transform:scale(1)}}@-moz-keyframes ax-dialog{0%{opacity:0.0;-moz-transform:scale(1)}1%{opacity:0.0;-moz-transform:scale(0.3)}100%{opacity:1.0;-moz-transform:scale(1)}}@keyframes ax-dialog{0%{opacity:0.0;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}1%{opacity:0.0;-webkit-transform:scale(0.3);-moz-transform:scale(0.3);-ms-transform:scale(0.3);-o-transform:scale(0.3);transform:scale(0.3)}100%{opacity:1.0;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@-webkit-keyframes ax-dialog-destroy{from{-webkit-transform:scale(1);opacity:1.0}to{-webkit-transform:scale(0.5);opacity:0.0}}@-moz-keyframes ax-dialog-destroy{from{-moz-transform:scale(1);opacity:1.0}to{-moz-transform:scale(0.5);opacity:0.0}}@keyframes ax-dialog-destroy{from{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);opacity:1.0}to{-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-ms-transform:scale(0.5);-o-transform:scale(0.5);transform:scale(0.5);opacity:0.0}}.ax5-ui-dialog{-webkit-animation:ax-dialog 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);-moz-animation:ax-dialog 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:ax-dialog 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);box-sizing:border-box;background-color:#fff;border:1px solid #ddd;box-shadow:0px 0px 5px 0px rgba(0,0,0,0.6);z-index:2000;position:fixed;left:0px;top:0px;border:1px solid #ddd}.ax5-ui-dialog .ax-dialog-heading{font-weight:600;padding:10px 15px;border-bottom:1px solid transparent}.ax5-ui-dialog .ax-dialog-heading .badge{font-size:0.8em;color:#f5f5f5;background-color:#333}.ax5-ui-dialog .ax-dialog-body{padding:15px;text-align:center}.ax5-ui-dialog .ax-dialog-body .ax-dialog-msg{padding-top:15px;padding-bottom:15px}.ax5-ui-dialog .ax-dialog-body .ax-dialog-prompt{text-align:left;padding-bottom:7.5px}.ax5-ui-dialog .ax-dialog-body .ax-dialog-buttons{margin-top:15px}.ax5-ui-dialog .ax-dialog-body .ax-dialog-buttons button:not(:last-child){margin-right:3px}.ax5-ui-dialog .ax-dialog-heading{color:#333;background:#f5f5f5}.ax5-ui-dialog .ax-dialog-heading .badge{color:#f5f5f5;background-color:#333}.ax5-ui-dialog.primary{border:1px solid #ddd}.ax5-ui-dialog.primary .ax-dialog-heading{color:#fff;background:#337ab7}.ax5-ui-dialog.primary .ax-dialog-heading .badge{color:#337ab7;background-color:#fff}.ax5-ui-dialog.success{border:1px solid #ddd}.ax5-ui-dialog.success .ax-dialog-heading{color:#3c763d;background:#dff0d8}.ax5-ui-dialog.success .ax-dialog-heading .badge{color:#dff0d8;background-color:#3c763d}.ax5-ui-dialog.info{border:1px solid #ddd}.ax5-ui-dialog.info .ax-dialog-heading{color:#31708f;background:#d9edf7}.ax5-ui-dialog.info .ax-dialog-heading .badge{color:#d9edf7;background-color:#31708f}.ax5-ui-dialog.warning{border:1px solid #ddd}.ax5-ui-dialog.warning .ax-dialog-heading{color:#8a6d3b;background:#fcf8e3}.ax5-ui-dialog.warning .ax-dialog-heading .badge{color:#fcf8e3;background-color:#8a6d3b}.ax5-ui-dialog.danger{border:1px solid #ddd}.ax5-ui-dialog.danger .ax-dialog-heading{color:#a94442;background:#f2dede}.ax5-ui-dialog.danger .ax-dialog-heading .badge{color:#f2dede;background-color:#a94442}.ax5-ui-dialog.destroy{-webkit-animation:ax-dialog-destroy 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;-moz-animation:ax-dialog-destroy 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;animation:ax-dialog-destroy 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards} diff --git a/dist/ax5dialog.js b/dist/ax5dialog.js index feeb482..675c9da 100644 --- a/dist/ax5dialog.js +++ b/dist/ax5dialog.js @@ -32,7 +32,8 @@ msg: '', lang: { "ok": "ok", "cancel": "cancel" - } + }, + animateTime: 250 }; }).apply(this, arguments); @@ -238,7 +239,7 @@ opts.id = (opts.id || cfg.id); box = { - width: opts.width || cfg.width + width: opts.width }; jQuery(document.body).append(this.getContent(opts.id, opts)); @@ -246,16 +247,12 @@ this.activeDialog.css({width: box.width}); // dialog 높이 구하기 - 너비가 정해지면 높이가 변경 될 것. - box.height = this.activeDialog.height(); + opts.height = box.height = this.activeDialog.height(); //- position 정렬 if (typeof opts.position === "undefined" || opts.position === "center") { - var w = window.innerWidth - || document.documentElement.clientWidth - || document.body.clientWidth; - var h = window.innerHeight - || document.documentElement.clientHeight - || document.body.clientHeight; + var w = window.innerWidth; + var h = window.innerHeight; pos.top = h / 2 - box.height / 2; pos.left = w / 2 - box.width / 2; @@ -283,6 +280,10 @@ this.onKeyup(e || window.event, opts, callBack); }).bind(this)); + jQuery(window).bind("resize.ax-dialog", (function (e) { + this.align(e || window.event); + }).bind(this)); + if (opts && opts.onStateChanged) { that = { state: "open" @@ -292,6 +293,26 @@ 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; @@ -378,21 +399,23 @@ * myDialog.close(); * ``` */ - this.close = function () { - var - that = {}, - opts = self.dialogConfig; - + this.close = function (opts, that) { if (this.activeDialog) { - this.activeDialog.remove(); - this.activeDialog = null; + opts = self.dialogConfig; + this.activeDialog.addClass("destroy"); jQuery(window).unbind("keydown.ax-dialog"); - if (opts && opts.onStateChanged) { - that = { - state: "close" - }; - opts.onStateChanged.call(that, that); - } + jQuery(window).unbind("resize.ax-dialog"); + + setTimeout((function () { + this.activeDialog.remove(); + this.activeDialog = null; + if (opts && opts.onStateChanged) { + that = { + state: "close" + }; + opts.onStateChanged.call(that, that); + } + }).bind(this), cfg.animateTime); } return this; } diff --git a/dist/ax5dialog.min.js b/dist/ax5dialog.min.js index 0f16ee8..e997aee 100644 --- a/dist/ax5dialog.min.js +++ b/dist/ax5dialog.min.js @@ -1 +1 @@ -!function(t,i){var e=ax5.util,a=function(){var t,a=this;this.main=function(){i&&i.call(this),this.config={clickEventName:"click",theme:"default",width:300,title:"",msg:"",lang:{ok:"ok",cancel:"cancel"}}}.apply(this,arguments),this.activeDialog=null,t=this.config,t.id="ax5-dialog-"+ax5.getGuid(),this.init=function(){},this.alert=function(i,o){return e.isString(i)&&(i={title:t.title,msg:i}),this.activeDialog?(console.log(ax5.info.getError("ax5dialog","501","alert")),this):(a.dialogConfig={},jQuery.extend(!0,a.dialogConfig,t),jQuery.extend(!0,a.dialogConfig,i),i=a.dialogConfig,i.dialogType="alert","undefined"==typeof i.btns&&(i.btns={ok:{label:t.lang.ok,theme:i.theme}}),this.open(i,o),this)},this.confirm=function(i,o){return e.isString(i)&&(i={title:t.title,msg:i}),this.activeDialog?(console.log(ax5.info.getError("ax5dialog","501","confirm")),this):(a.dialogConfig={},jQuery.extend(!0,a.dialogConfig,t),jQuery.extend(!0,a.dialogConfig,i),i=a.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}}),this.open(i,o),this)},this.prompt=function(i,o){return e.isString(i)&&(i={title:t.title,msg:i}),this.activeDialog?(console.log(ax5.info.getError("ax5dialog","501","prompt")),this):(a.dialogConfig={},jQuery.extend(!0,a.dialogConfig,t),jQuery.extend(!0,a.dialogConfig,i),i=a.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}}),this.open(i,o),this)},this.getContent=function(i,a){var o=[];return o.push('
'),o.push('
'),o.push(a.title||t.title||""),o.push("
"),o.push('
'),o.push('
'),o.push((a.msg||t.msg||"").replace(/\n/g,"
")),o.push("
"),a.input&&(o.push('
'),e.each(a.input,function(t,i){o.push('
'),this.label&&o.push(" "),o.push(' '),this.help&&o.push('

'+this.help.replace(/\n/g,"
")+"

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

'+this.help.replace(/\n/g,"
")+"

"),n.push("
")}),n.push("
")),n.push('
'),n.push('
'),e.each(a.btns,function(i,t){n.push('")}),n.push("
"),n.push("
"),n.push("
"),n.push("
"),n.join("")},this.open=function(t,e){var a,n={};if(t.id=t.id||i.id,box={width:t.width},jQuery(document.body).append(this.getContent(t.id,t)),this.activeDialog=jQuery("#"+t.id),this.activeDialog.css({width:box.width}),t.height=box.height=this.activeDialog.height(),"undefined"==typeof t.position||"center"===t.position){var o=window.innerWidth,l=window.innerHeight;n.top=l/2-box.height/2,n.left=o/2-box.width/2}else n.left=t.position.left||0,n.top=t.position.top||0;return this.activeDialog.css(n),"prompt"===t.dialogType?this.activeDialog.find("[data-ax-dialog-prompt]").get(0).focus():this.activeDialog.find("[data-ax-dialog-btn]").get(0).focus(),this.activeDialog.find("[data-ax-dialog-btn]").on(i.clickEventName,function(i){this.btnOnClick(i||window.event,t,e)}.bind(this)),jQuery(window).bind("keydown.ax-dialog",function(i){this.onKeyup(i||window.event,t,e)}.bind(this)),jQuery(window).bind("resize.ax-dialog",function(i){this.align(i||window.event)}.bind(this)),t&&t.onStateChanged&&(a={state:"open"},t.onStateChanged.call(a,a)),this},this.align=function(i){if(!this.activeDialog)return this;var t=a.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,a,n,o){if(i.srcElement&&(i.target=i.srcElement),n=e.findParentNode(i.target,function(i){return i.getAttribute("data-ax-dialog-btn")?!0:void 0})){o=n.getAttribute("data-ax-dialog-btn");var l={key:o,value:t.btns[o],dialogId:t.id,btnTarget:n};if("prompt"===t.dialogType){var s=null;for(var d in t.input)if(l[d]=this.activeDialog.find("[data-ax-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)a&&a.call(l,o),this.close();else if("confirm"===t.dialogType)a&&a.call(l,o),this.close();else if("prompt"===t.dialogType){if("ok"===o&&s)return this.activeDialog.find('[data-ax-dialog-prompt="'+s+'"]').get(0).focus(),!1;a&&a.call(l,o),this.close()}}},this.onKeyup=function(i,t,e,a,n){if(i.keyCode==ax5.info.eventKeys.ESC&&this.close(),"prompt"===t.dialogType&&i.keyCode==ax5.info.eventKeys.RETURN){var o={key:n,value:t.btns[n],dialogId:t.id,btnTarget:a},l=null;for(var s in t.input)if(o[s]=this.activeDialog.find("[data-ax-dialog-prompt="+s+"]").val(),""==o[s]||null==o[s]){l=s;break}if(l)return!1;e&&e.call(o,n),this.close()}},this.close=function(t,e){return this.activeDialog&&(t=a.dialogConfig,this.activeDialog.addClass("destroy"),jQuery(window).unbind("keydown.ax-dialog"),jQuery(window).unbind("resize.ax-dialog"),setTimeout(function(){this.activeDialog.remove(),this.activeDialog=null,t&&t.onStateChanged&&(e={state:"close"},t.onStateChanged.call(e,e))}.bind(this),i.animateTime)),this}};e.isFunction(t)&&(a.prototype=new t),i.dialog=a}(ax5.ui,ax5.ui.root); \ No newline at end of file diff --git a/package.json b/package.json index bed8fc5..84899fd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bootstrap-ax5dialog", - "version": "0.4.0", + "version": "0.5.0", "description": "A dialog plugin that works with Bootstrap & jQuery", "license": "MIT", "repository": { diff --git a/src/ax5dialog.js b/src/ax5dialog.js index feeb482..675c9da 100644 --- a/src/ax5dialog.js +++ b/src/ax5dialog.js @@ -32,7 +32,8 @@ msg: '', lang: { "ok": "ok", "cancel": "cancel" - } + }, + animateTime: 250 }; }).apply(this, arguments); @@ -238,7 +239,7 @@ opts.id = (opts.id || cfg.id); box = { - width: opts.width || cfg.width + width: opts.width }; jQuery(document.body).append(this.getContent(opts.id, opts)); @@ -246,16 +247,12 @@ this.activeDialog.css({width: box.width}); // dialog 높이 구하기 - 너비가 정해지면 높이가 변경 될 것. - box.height = this.activeDialog.height(); + opts.height = box.height = this.activeDialog.height(); //- position 정렬 if (typeof opts.position === "undefined" || opts.position === "center") { - var w = window.innerWidth - || document.documentElement.clientWidth - || document.body.clientWidth; - var h = window.innerHeight - || document.documentElement.clientHeight - || document.body.clientHeight; + var w = window.innerWidth; + var h = window.innerHeight; pos.top = h / 2 - box.height / 2; pos.left = w / 2 - box.width / 2; @@ -283,6 +280,10 @@ this.onKeyup(e || window.event, opts, callBack); }).bind(this)); + jQuery(window).bind("resize.ax-dialog", (function (e) { + this.align(e || window.event); + }).bind(this)); + if (opts && opts.onStateChanged) { that = { state: "open" @@ -292,6 +293,26 @@ 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; @@ -378,21 +399,23 @@ * myDialog.close(); * ``` */ - this.close = function () { - var - that = {}, - opts = self.dialogConfig; - + this.close = function (opts, that) { if (this.activeDialog) { - this.activeDialog.remove(); - this.activeDialog = null; + opts = self.dialogConfig; + this.activeDialog.addClass("destroy"); jQuery(window).unbind("keydown.ax-dialog"); - if (opts && opts.onStateChanged) { - that = { - state: "close" - }; - opts.onStateChanged.call(that, that); - } + jQuery(window).unbind("resize.ax-dialog"); + + setTimeout((function () { + this.activeDialog.remove(); + this.activeDialog = null; + if (opts && opts.onStateChanged) { + that = { + state: "close" + }; + opts.onStateChanged.call(that, that); + } + }).bind(this), cfg.animateTime); } return this; } diff --git a/src/scss/_ax5dialog.scss b/src/scss/_ax5dialog.scss index e1f187f..f4de485 100644 --- a/src/scss/_ax5dialog.scss +++ b/src/scss/_ax5dialog.scss @@ -76,10 +76,22 @@ } } + +@include keyframes(ax-dialog-destroy) { + from { + @include transform(scale(1)); + opacity: 1.0; + } + to { + @include transform(scale(0.5)); + opacity: 0.0; + } +} + // mixins --------------------------------------------- end .ax5-ui-dialog { - @include animation(ax-dialog 0.3s $ease-out-back); + @include animation(ax-dialog $ax5dialog-easing-time-open $ease-out-back); @include transform(translateZ(0)); @include ax-dialog(); @@ -102,4 +114,8 @@ &.danger { @include dialog-variant($ax5dialog-danger-text, $ax5dialog-danger-border, $ax5dialog-danger-heading-bg); } + + &.destroy { + @include animation(ax-dialog-destroy $ax5dialog-easing-time-close $ease-in-back forwards); + } } \ No newline at end of file diff --git a/src/scss/_ax5dialog_variables.scss b/src/scss/_ax5dialog_variables.scss index 785d430..5ad9772 100644 --- a/src/scss/_ax5dialog_variables.scss +++ b/src/scss/_ax5dialog_variables.scss @@ -1,4 +1,4 @@ -$ax5dialog-z-index: 2000; +$ax5dialog-z-index: 2000 !default; $ax5dialog-box-model: border-box !default; $ax5dialog-bg: $panel-bg !default; $ax5dialog-box-shaodw: 0px 0px 5px 0px rgba(0, 0, 0, 0.60) !default; @@ -6,6 +6,8 @@ $ax5dialog-body-padding: $panel-body-padding !default; $ax5dialog-heading-padding: $panel-heading-padding !default; $ax5dialog-footer-padding: $panel-footer-padding !default; $ax5dialog-border-radius: $panel-border-radius !default; +$ax5dialog-easing-time-open: 0.3s !default; +$ax5dialog-easing-time-close: 0.2s !default; //** Border color for elements within dialog $ax5dialog-inner-border: 1px solid $panel-inner-border !default; diff --git a/test/bower.json b/test/bower.json index 6d9a2df..951381d 100644 --- a/test/bower.json +++ b/test/bower.json @@ -2,7 +2,7 @@ "name": "bootstrap-ax5dialog-tester", "dependencies": { "jquery": "^1.11.0", - "ax5core": "", + "ax5core": ">=0.4.0", "bootstrap-ax5mask": "", "bootstrap": "^3.3.6", "font-awesome": ""