ax5ui-dialog
Advanced tools
Comparing version 0.6.6 to 0.6.7
{ | ||
"name": "ax5ui-dialog", | ||
"version": "0.6.6", | ||
"version": "0.6.7", | ||
"authors": [ | ||
@@ -24,4 +24,4 @@ "ThomasJ <tom@axisj.com>" | ||
}, | ||
"license": "MIT", | ||
"license": "LGPLv3", | ||
"homepage": "ax5.io" | ||
} |
@@ -9,3 +9,3 @@ 'use strict'; | ||
* @classdesc | ||
* @version 0.6.6 | ||
* @version 0.6.7 | ||
* @author tom@axisj.com | ||
@@ -42,173 +42,122 @@ * @example | ||
var onStateChanged = function onStateChanged(opts, that) { | ||
if (opts && opts.onStateChanged) { | ||
opts.onStateChanged.call(that, that); | ||
} else if (this.onStateChanged) { | ||
this.onStateChanged.call(that, that); | ||
} | ||
if (opts && opts.onStateChanged) { | ||
opts.onStateChanged.call(that, that); | ||
} else if (this.onStateChanged) { | ||
this.onStateChanged.call(that, that); | ||
} | ||
that = null; | ||
return true; | ||
}, | ||
that = null; | ||
return true; | ||
}, | ||
getContentTmpl = function getContentTmpl() { | ||
return '\n <div id="{{dialogId}}" data-ax5-ui="dialog" class="ax5-ui-dialog {{theme}}">\n <div class="ax-dialog-heading">\n {{{title}}}\n </div>\n <div class="ax-dialog-body">\n <div class="ax-dialog-msg">{{{msg}}}</div>\n \n {{#input}}\n <div class="ax-dialog-prompt">\n {{#@each}}\n <div class="form-group">\n {{#@value.label}}\n <label>{{#_crlf}}{{.}}{{/_crlf}}</label>\n {{/@value.label}}\n <input type="{{@value.type}}" placeholder="{{@value.placeholder}}" class="form-control {{@value.theme}}" data-dialog-prompt="{{@key}}" style="width:100%;" value="{{@value.value}}" />\n {{#@value.help}}\n <p class="help-block">{{#_crlf}}{{.}}{{/_crlf}}</p>\n {{/@value.help}}\n </div>\n {{/@each}}\n </div>\n {{/input}}\n \n <div class="ax-dialog-buttons">\n <div class="ax-button-wrap">\n {{#btns}}\n {{#@each}}\n <button type="button" data-dialog-btn="{{@key}}" class="btn btn-{{@value.theme}}">{{@value.label}}</button>\n {{/@each}}\n {{/btns}}\n </div>\n </div>\n </div>\n </div> \n '; | ||
}, | ||
return '\n <div id="{{dialogId}}" data-ax5-ui="dialog" class="ax5-ui-dialog {{theme}}">\n <div class="ax-dialog-heading">\n {{{title}}}\n </div>\n <div class="ax-dialog-body">\n <div class="ax-dialog-msg">{{{msg}}}</div>\n \n {{#input}}\n <div class="ax-dialog-prompt">\n {{#@each}}\n <div class="form-group">\n {{#@value.label}}\n <label>{{#_crlf}}{{{.}}}{{/_crlf}}</label>\n {{/@value.label}}\n <input type="{{@value.type}}" placeholder="{{@value.placeholder}}" class="form-control {{@value.theme}}" data-dialog-prompt="{{@key}}" style="width:100%;" value="{{@value.value}}" />\n {{#@value.help}}\n <p class="help-block">{{#_crlf}}{{.}}{{/_crlf}}</p>\n {{/@value.help}}\n </div>\n {{/@each}}\n </div>\n {{/input}}\n \n <div class="ax-dialog-buttons">\n <div class="ax-button-wrap">\n {{#btns}}\n {{#@each}}\n <button type="button" data-dialog-btn="{{@key}}" class="btn btn-{{@value.theme}}">{{@value.label}}</button>\n {{/@each}}\n {{/btns}}\n </div>\n </div>\n </div>\n </div> \n '; | ||
}, | ||
getContent = function getContent(dialogId, opts) { | ||
var data = { | ||
dialogId: dialogId, | ||
title: opts.title || cfg.title || "", | ||
msg: (opts.msg || cfg.msg || "").replace(/\n/g, "<br/>"), | ||
input: opts.input, | ||
btns: opts.btns, | ||
'_crlf': function _crlf() { | ||
return this.replace(/\n/g, "<br/>"); | ||
var data = { | ||
dialogId: dialogId, | ||
title: opts.title || cfg.title || "", | ||
msg: (opts.msg || cfg.msg || "").replace(/\n/g, "<br/>"), | ||
input: opts.input, | ||
btns: opts.btns, | ||
'_crlf': function _crlf() { | ||
return this.replace(/\n/g, "<br/>"); | ||
} | ||
}; | ||
try { | ||
return ax5.mustache.render(getContentTmpl(), data); | ||
} finally { | ||
data = null; | ||
} | ||
}; | ||
try { | ||
return ax5.mustache.render(getContentTmpl(), data); | ||
} finally { | ||
data = null; | ||
} | ||
}, | ||
}, | ||
open = function open(opts, callBack) { | ||
var pos = {}, | ||
box; | ||
var pos = {}, | ||
box; | ||
opts.id = opts.id || cfg.id; | ||
opts.id = opts.id || cfg.id; | ||
box = { | ||
width: opts.width | ||
}; | ||
jQuery(document.body).append(getContent.call(this, opts.id, opts)); | ||
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 }); | ||
this.activeDialog = jQuery('#' + opts.id); | ||
this.activeDialog.css({width: box.width}); | ||
// dialog 높이 구하기 - 너비가 정해지면 높이가 변경 될 것. | ||
opts.height = box.height = this.activeDialog.height(); | ||
// 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); | ||
//- 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(); | ||
} | ||
// 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)); | ||
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)); | ||
// 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)); | ||
jQuery(window).bind("resize.ax5dialog", function (e) { | ||
align.call(this, e || window.event); | ||
}.bind(this)); | ||
onStateChanged.call(this, opts, { | ||
self: this, | ||
state: "open" | ||
}); | ||
onStateChanged.call(this, opts, { | ||
self: this, | ||
state: "open" | ||
}); | ||
pos = null; | ||
box = null; | ||
}, | ||
pos = null; | ||
box = null; | ||
}, | ||
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); | ||
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); | ||
opts = null; | ||
box = null; | ||
opts = null; | ||
box = null; | ||
return this; | ||
}, | ||
return this; | ||
}, | ||
btnOnClick = function btnOnClick(e, opts, callBack, target, k) { | ||
var that; | ||
if (e.srcElement) e.target = e.srcElement; | ||
var that; | ||
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"); | ||
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; | ||
} | ||
target = U.findParentNode(e.target, function (target) { | ||
if (target.getAttribute("data-dialog-btn")) { | ||
return true; | ||
} | ||
} | ||
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(); | ||
} | ||
} | ||
}); | ||
that = null; | ||
opts = null; | ||
callBack = null; | ||
target = null; | ||
k = null; | ||
}, | ||
onKeyup = function onKeyup(e, opts, callBack, target, k) { | ||
var that, | ||
emptyKey = null; | ||
if (target) { | ||
k = target.getAttribute("data-dialog-btn"); | ||
if (e.keyCode == ax5.info.eventKeys.ESC) { | ||
this.close(); | ||
} | ||
if (opts.dialogType === "prompt") { | ||
if (e.keyCode == ax5.info.eventKeys.RETURN) { | ||
that = { | ||
@@ -220,28 +169,79 @@ self: this, | ||
}; | ||
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.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 (emptyKey) { | ||
that = null; | ||
emptyKey = null; | ||
return false; | ||
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(); | ||
} | ||
if (callBack) callBack.call(that, k); | ||
} | ||
that = null; | ||
opts = null; | ||
callBack = null; | ||
target = null; | ||
k = null; | ||
}, | ||
onKeyup = function onKeyup(e, opts, callBack, target, k) { | ||
var that, | ||
emptyKey = null; | ||
if (e.keyCode == ax5.info.eventKeys.ESC) { | ||
this.close(); | ||
} | ||
} | ||
if (opts.dialogType === "prompt") { | ||
if (e.keyCode == ax5.info.eventKeys.RETURN) { | ||
that = { | ||
self: this, | ||
key: k, value: opts.btns[k], | ||
dialogId: opts.id, | ||
btnTarget: target | ||
}; | ||
that = null; | ||
emptyKey = null; | ||
opts = null; | ||
callBack = null; | ||
target = null; | ||
k = 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) { | ||
that = null; | ||
emptyKey = null; | ||
return false; | ||
} | ||
if (callBack) callBack.call(that, k); | ||
this.close(); | ||
} | ||
} | ||
that = null; | ||
emptyKey = null; | ||
opts = null; | ||
callBack = null; | ||
target = null; | ||
k = null; | ||
}; | ||
/** | ||
@@ -297,3 +297,3 @@ * Preferences of dialog UI | ||
opts.btns = { | ||
ok: { label: cfg.lang["ok"], theme: opts.theme } | ||
ok: {label: cfg.lang["ok"], theme: opts.theme} | ||
}; | ||
@@ -343,4 +343,4 @@ } | ||
opts.btns = { | ||
ok: { label: cfg.lang["ok"], theme: opts.theme }, | ||
cancel: { label: cfg.lang["cancel"] } | ||
ok: {label: cfg.lang["ok"], theme: opts.theme}, | ||
cancel: {label: cfg.lang["cancel"]} | ||
}; | ||
@@ -391,3 +391,3 @@ } | ||
opts.input = { | ||
value: { label: "" } | ||
value: {label: ""} | ||
}; | ||
@@ -397,4 +397,4 @@ } | ||
opts.btns = { | ||
ok: { label: cfg.lang["ok"], theme: opts.theme }, | ||
cancel: { label: cfg.lang["cancel"] } | ||
ok: {label: cfg.lang["ok"], theme: opts.theme}, | ||
cancel: {label: cfg.lang["cancel"]} | ||
}; | ||
@@ -401,0 +401,0 @@ } |
@@ -1,1 +0,1 @@ | ||
"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 l=function(t,i){return t&&t.onStateChanged?t.onStateChanged.call(i,i):this.onStateChanged&&this.onStateChanged.call(i,i),i=null,!0},a=function(){return'\n <div id="{{dialogId}}" data-ax5-ui="dialog" class="ax5-ui-dialog {{theme}}">\n <div class="ax-dialog-heading">\n {{{title}}}\n </div>\n <div class="ax-dialog-body">\n <div class="ax-dialog-msg">{{{msg}}}</div>\n \n {{#input}}\n <div class="ax-dialog-prompt">\n {{#@each}}\n <div class="form-group">\n {{#@value.label}}\n <label>{{#_crlf}}{{.}}{{/_crlf}}</label>\n {{/@value.label}}\n <input type="{{@value.type}}" placeholder="{{@value.placeholder}}" class="form-control {{@value.theme}}" data-dialog-prompt="{{@key}}" style="width:100%;" value="{{@value.value}}" />\n {{#@value.help}}\n <p class="help-block">{{#_crlf}}{{.}}{{/_crlf}}</p>\n {{/@value.help}}\n </div>\n {{/@each}}\n </div>\n {{/input}}\n \n <div class="ax-dialog-buttons">\n <div class="ax-button-wrap">\n {{#btns}}\n {{#@each}}\n <button type="button" data-dialog-btn="{{@key}}" class="btn btn-{{@value.theme}}">{{@value.label}}</button>\n {{/@each}}\n {{/btns}}\n </div>\n </div>\n </div>\n </div> \n '},o=function(i,e){var n={dialogId:i,title:e.title||t.title||"",msg:(e.msg||t.msg||"").replace(/\n/g,"<br/>"),input:e.input,btns:e.btns,_crlf:function(){return this.replace(/\n/g,"<br/>")}};try{return ax5.mustache.render(a(),n)}finally{n=null}},s=function(i,e){var n,a={};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?(a.top=jQuery(window).height()/2-n.height/2,a.left=jQuery(window).width()/2-n.width/2):(a.left=i.position.left||0,a.top=i.position.top||0),this.activeDialog.css(a),"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){u.call(this,t||window.event,i,e)}.bind(this)),jQuery(window).bind("resize.ax5dialog",function(t){d.call(this,t||window.event)}.bind(this)),l.call(this,i,{self:this,state:"open"}),a=null,n=null},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),i=null,e=null,this},g=function(t,i,n,l,a){var o;if(t.srcElement&&(t.target=t.srcElement),l=e.findParentNode(t.target,function(t){return t.getAttribute("data-dialog-btn")?!0:void 0})){if(a=l.getAttribute("data-dialog-btn"),o={self:this,key:a,value:i.btns[a],dialogId:i.id,btnTarget:l},"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[a].onClick)i.btns[a].onClick.call(o,a);else if("alert"===i.dialogType)n&&n.call(o,a),this.close();else if("confirm"===i.dialogType)n&&n.call(o,a),this.close();else if("prompt"===i.dialogType){if("ok"===a&&s)return this.activeDialog.find('[data-dialog-prompt="'+s+'"]').get(0).focus(),!1;n&&n.call(o,a),this.close()}}o=null,i=null,n=null,l=null,a=null},u=function(t,i,e,n,l){var a,o=null;if(t.keyCode==ax5.info.eventKeys.ESC&&this.close(),"prompt"===i.dialogType&&t.keyCode==ax5.info.eventKeys.RETURN){a={self:this,key:l,value:i.btns[l],dialogId:i.id,btnTarget:n};for(var s in i.input)if(a[s]=this.activeDialog.find("[data-dialog-prompt="+s+"]").val(),""==a[s]||null==a[s]){o=s;break}if(o)return a=null,o=null,!1;e&&e.call(a,l),this.close()}a=null,o=null,i=null,e=null,n=null,l=null};this.init=function(){this.onStateChanged=t.onStateChanged},this.alert=function(i,l){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,l),i=null,l=null,this)},this.confirm=function(i,l){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,l),i=null,l=null,this)},this.prompt=function(i,l){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,l),i=null,l=null,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),i=null,e=null}.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); | ||
"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 l=function(t,i){return t&&t.onStateChanged?t.onStateChanged.call(i,i):this.onStateChanged&&this.onStateChanged.call(i,i),i=null,!0},a=function(){return'\n <div id="{{dialogId}}" data-ax5-ui="dialog" class="ax5-ui-dialog {{theme}}">\n <div class="ax-dialog-heading">\n {{{title}}}\n </div>\n <div class="ax-dialog-body">\n <div class="ax-dialog-msg">{{{msg}}}</div>\n \n {{#input}}\n <div class="ax-dialog-prompt">\n {{#@each}}\n <div class="form-group">\n {{#@value.label}}\n <label>{{#_crlf}}{{{.}}}{{/_crlf}}</label>\n {{/@value.label}}\n <input type="{{@value.type}}" placeholder="{{@value.placeholder}}" class="form-control {{@value.theme}}" data-dialog-prompt="{{@key}}" style="width:100%;" value="{{@value.value}}" />\n {{#@value.help}}\n <p class="help-block">{{#_crlf}}{{.}}{{/_crlf}}</p>\n {{/@value.help}}\n </div>\n {{/@each}}\n </div>\n {{/input}}\n \n <div class="ax-dialog-buttons">\n <div class="ax-button-wrap">\n {{#btns}}\n {{#@each}}\n <button type="button" data-dialog-btn="{{@key}}" class="btn btn-{{@value.theme}}">{{@value.label}}</button>\n {{/@each}}\n {{/btns}}\n </div>\n </div>\n </div>\n </div> \n '},o=function(i,e){var n={dialogId:i,title:e.title||t.title||"",msg:(e.msg||t.msg||"").replace(/\n/g,"<br/>"),input:e.input,btns:e.btns,_crlf:function(){return this.replace(/\n/g,"<br/>")}};try{return ax5.mustache.render(a(),n)}finally{n=null}},s=function(i,e){var n,a={};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?(a.top=jQuery(window).height()/2-n.height/2,a.left=jQuery(window).width()/2-n.width/2):(a.left=i.position.left||0,a.top=i.position.top||0),this.activeDialog.css(a),"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){u.call(this,t||window.event,i,e)}.bind(this)),jQuery(window).bind("resize.ax5dialog",function(t){d.call(this,t||window.event)}.bind(this)),l.call(this,i,{self:this,state:"open"}),a=null,n=null},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),i=null,e=null,this},g=function(t,i,n,l,a){var o;if(t.srcElement&&(t.target=t.srcElement),l=e.findParentNode(t.target,function(t){return t.getAttribute("data-dialog-btn")?!0:void 0})){if(a=l.getAttribute("data-dialog-btn"),o={self:this,key:a,value:i.btns[a],dialogId:i.id,btnTarget:l},"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[a].onClick)i.btns[a].onClick.call(o,a);else if("alert"===i.dialogType)n&&n.call(o,a),this.close();else if("confirm"===i.dialogType)n&&n.call(o,a),this.close();else if("prompt"===i.dialogType){if("ok"===a&&s)return this.activeDialog.find('[data-dialog-prompt="'+s+'"]').get(0).focus(),!1;n&&n.call(o,a),this.close()}}o=null,i=null,n=null,l=null,a=null},u=function(t,i,e,n,l){var a,o=null;if(t.keyCode==ax5.info.eventKeys.ESC&&this.close(),"prompt"===i.dialogType&&t.keyCode==ax5.info.eventKeys.RETURN){a={self:this,key:l,value:i.btns[l],dialogId:i.id,btnTarget:n};for(var s in i.input)if(a[s]=this.activeDialog.find("[data-dialog-prompt="+s+"]").val(),""==a[s]||null==a[s]){o=s;break}if(o)return a=null,o=null,!1;e&&e.call(a,l),this.close()}a=null,o=null,i=null,e=null,n=null,l=null};this.init=function(){this.onStateChanged=t.onStateChanged},this.alert=function(i,l){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,l),i=null,l=null,this)},this.confirm=function(i,l){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,l),i=null,l=null,this)},this.prompt=function(i,l){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,l),i=null,l=null,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),i=null,e=null}.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); |
Copyright [2016] [AXISJ, Thomas Jang] | ||
Licensed under the Apache License, Version 2.0 (the "License"); | ||
Licensed under the GNU Library or Lesser General Public License version 3.0 (LGPLv3); | ||
you may not use this file except in compliance with the License. | ||
You may obtain a copy of the License at | ||
http://www.apache.org/licenses/LICENSE-2.0 | ||
Unless required by applicable law or agreed to in writing, software | ||
distributed under the License is distributed on an "AS IS" BASIS, | ||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
See the License for the specific language governing permissions and | ||
limitations under the License. | ||
https://opensource.org/licenses/gpl-3.0.html |
{ | ||
"name": "ax5ui-dialog", | ||
"version": "0.6.6", | ||
"version": "0.6.7", | ||
"description": "A dialog plugin that works with Bootstrap & jQuery", | ||
"license": "apache 2.0", | ||
"license": "LGPLv3", | ||
"repository": { | ||
@@ -7,0 +7,0 @@ "type": "git", |
@@ -47,2 +47,11 @@ [![axisj-contributed](https://img.shields.io/badge/AXISJ.com-Contributed-green.svg)](https://github.com/axisj) | ||
### USE CDN | ||
``` | ||
https://cdn.rawgit.com/ax5ui/ax5ui-dialog/master/dist/ax5dialog.css | ||
https://cdn.rawgit.com/ax5ui/ax5ui-dialog/master/dist/ax5dialog.js | ||
https://cdn.rawgit.com/ax5ui/ax5ui-dialog/master/dist/ax5dialog.min.js | ||
``` | ||
### Basic Usages | ||
@@ -49,0 +58,0 @@ ```js |
@@ -7,3 +7,3 @@ // ax5.ui.dialog | ||
* @classdesc | ||
* @version 0.6.6 | ||
* @version 0.6.7 | ||
* @author tom@axisj.com | ||
@@ -66,3 +66,3 @@ * @example | ||
{{#@value.label}} | ||
<label>{{#_crlf}}{{.}}{{/_crlf}}</label> | ||
<label>{{#_crlf}}{{{.}}}{{/_crlf}}</label> | ||
{{/@value.label}} | ||
@@ -69,0 +69,0 @@ <input type="{{@value.type}}" placeholder="{{@value.placeholder}}" class="form-control {{@value.theme}}" data-dialog-prompt="{{@key}}" style="width:100%;" value="{{@value.value}}" /> |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Copyleft License
License(Experimental) Copyleft license information was found.
Found 1 instance in 1 package
Mixed license
License(Experimental) Package contains multiple licenses.
Found 1 instance in 1 package
Non-permissive License
License(Experimental) A license not known to be considered permissive was found.
Found 1 instance in 1 package
Unidentified License
License(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
64949
93
0
4
70