New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

ax5ui-dialog

Package Overview
Dependencies
Maintainers
1
Versions
263
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ax5ui-dialog - npm Package Compare versions

Comparing version 0.8.6 to 0.8.7

LICENSE
src/modules/ax5dialog-tmpl.js
test/test.dialog.prompt.html
test/test.dialog.prompt.js
test/test.dialog.setConfig.html
test/test.dialog.setConfig.js

8

API.md

@@ -110,3 +110,3 @@ # Basic Usage

## alert()
`alert(String|Options[, callBack])`
`alert(String|Options[, callback])`

@@ -132,5 +132,5 @@ If this is String in the first argument and recognizes the first argument to `msg`.

## confirm()
`confirm(String|Options[, callBack])`
`confirm(String|Options[, callback])`
alert and use the way is similar. Remember only the portion that determines the input of users in callBack function confirm is if you can.
alert and use the way is similar. Remember only the portion that determines the input of users in callback function confirm is if you can.

@@ -152,3 +152,3 @@ ```js

## prompt()
`prompt(String|Options[, callBack])`
`prompt(String|Options[, callback])`

@@ -155,0 +155,0 @@ alert and use the way is similar.

4

bower.json
{
"name": "ax5ui-dialog",
"version": "0.8.6",
"version": "0.8.7",
"authors": [

@@ -24,4 +24,4 @@ "ThomasJ <tom@axisj.com>"

},
"license": "LGPLv3",
"license": "LGPL-3.0",
"homepage": "ax5.io"
}

116

dist/ax5dialog.js

@@ -8,2 +8,3 @@ "use strict";

var U = ax5.util;
var DIALOG;

@@ -19,5 +20,25 @@ UI.addClass({

* @example
* ```js
* var dialog = new ax5.ui.dialog();
* var mask = new ax5.ui.mask();
* dialog.setConfig({
* zIndex: 5000,
* onStateChanged: function () {
* if (this.state === "open") {
* mask.open();
* }
* else if (this.state === "close") {
* mask.close();
* }
* }
* });
*
* dialog.alert({
* theme: 'default',
* title: 'Alert default',
* msg: theme + ' color'
* }, function () {
* console.log(this);
* });
* ```
* var myDialog = new ax5.ui.dialog();
* ```
*/

@@ -54,6 +75,10 @@ var ax5dialog = function ax5dialog() {

},
getContentTmpl = function getContentTmpl() {
return "\n <div id=\"{{dialogId}}\" data-ax5-ui=\"dialog\" class=\"ax5-ui-dialog {{theme}}\">\n <div class=\"ax-dialog-header\">\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) {
/**
* @method ax5dialog.getContent
* @param {String} dialogId
* @param {Object} opts
* @returns dialogDisplay
*/
getContent = function getContent(dialogId, opts) {
var data = {

@@ -71,3 +96,3 @@ dialogId: dialogId,

try {
return ax5.mustache.render(getContentTmpl(), data);
return DIALOG.tmpl.get.call(this, "dialogDisplay", data);
} finally {

@@ -77,3 +102,9 @@ data = null;

},
open = function open(opts, callBack) {
/**
* @method ax5dialog.open
* @param {Object} opts
* @param callback
*/
open = function open(opts, callback) {
var pos = {},

@@ -116,3 +147,3 @@ box;

this.activeDialog.find("[data-dialog-btn]").on(cfg.clickEventName, function (e) {
btnOnClick.call(this, e || window.event, opts, callBack);
btnOnClick.call(this, e || window.event, opts, callback);
}.bind(this));

@@ -122,3 +153,3 @@

jQuery(window).bind("keydown.ax5dialog", function (e) {
onKeyup.call(this, e || window.event, opts, callBack);
onKeyup.call(this, e || window.event, opts, callback);
}.bind(this));

@@ -163,3 +194,3 @@

},
btnOnClick = function btnOnClick(e, opts, callBack, target, k) {
btnOnClick = function btnOnClick(e, opts, callback, target, k) {
var that;

@@ -196,6 +227,6 @@ if (e.srcElement) e.target = e.srcElement;

} else if (opts.dialogType === "alert") {
if (callBack) callBack.call(that, k);
if (callback) callback.call(that, k);
this.close();
} else if (opts.dialogType === "confirm") {
if (callBack) callBack.call(that, k);
if (callback) callback.call(that, k);
this.close();

@@ -209,3 +240,3 @@ } else if (opts.dialogType === "prompt") {

}
if (callBack) callBack.call(that, k);
if (callback) callback.call(that, k);
this.close();

@@ -217,7 +248,7 @@ }

opts = null;
callBack = null;
callback = null;
target = null;
k = null;
},
onKeyup = function onKeyup(e, opts, callBack, target, k) {
onKeyup = function onKeyup(e, opts, callback, target, k) {
var that,

@@ -250,3 +281,3 @@ emptyKey = null;

}
if (callBack) callBack.call(that, k);
if (callback) callback.call(that, k);
this.close();

@@ -259,3 +290,3 @@ }

opts = null;
callBack = null;
callback = null;
target = null;

@@ -286,3 +317,3 @@ k = null;

* @param {Object|String} [{theme, title, msg, btns}|msg] - dialog 속성을 json으로 정의하거나 msg만 전달
* @param {Function} [callBack] - 사용자 확인 이벤트시 호출될 callBack 함수
* @param {Function} [callback] - 사용자 확인 이벤트시 호출될 callback 함수
* @returns {ax5dialog}

@@ -297,3 +328,3 @@ * @example

*/
this.alert = function (opts, callBack, tryCount) {
this.alert = function (opts, callback, tryCount) {
if (U.isString(opts)) {

@@ -310,3 +341,3 @@ opts = {

setTimeout(function () {
this.alert(opts, callBack, 1);
this.alert(opts, callback, 1);
}.bind(this), Number(cfg.animateTime) + 100);

@@ -329,6 +360,6 @@ } else {

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

@@ -341,3 +372,3 @@ };

* @param {Object|String} [{theme, title, msg, btns}|msg] - dialog 속성을 json으로 정의하거나 msg만 전달
* @param {Function} [callBack] - 사용자 확인 이벤트시 호출될 callBack 함수
* @param {Function} [callback] - 사용자 확인 이벤트시 호출될 callback 함수
* @returns {ax5dialog}

@@ -352,3 +383,3 @@ * @example

*/
this.confirm = function (opts, callBack, tryCount) {
this.confirm = function (opts, callback, tryCount) {
if (U.isString(opts)) {

@@ -365,3 +396,3 @@ opts = {

setTimeout(function () {
this.confirm(opts, callBack, 1);
this.confirm(opts, callback, 1);
}.bind(this), Number(cfg.animateTime) + 100);

@@ -386,6 +417,6 @@ } else {

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

@@ -398,3 +429,3 @@ };

* @param {Object|String} [{theme, title, msg, btns, input}|msg] - dialog 속성을 json으로 정의하거나 msg만 전달
* @param {Function} [callBack] - 사용자 확인 이벤트시 호출될 callBack 함수
* @param {Function} [callback] - 사용자 확인 이벤트시 호출될 callback 함수
* @returns {ax5dialog}

@@ -409,3 +440,3 @@ * @example

*/
this.prompt = function (opts, callBack, tryCount) {
this.prompt = function (opts, callback, tryCount) {
if (U.isString(opts)) {

@@ -422,3 +453,3 @@ opts = {

setTimeout(function () {
this.prompt(opts, callBack, 1);
this.prompt(opts, callback, 1);
}.bind(this), Number(cfg.animateTime) + 100);

@@ -434,3 +465,2 @@ } else {

opts = self.dialogConfig;
opts.dialogType = "prompt";

@@ -450,6 +480,6 @@ opts.theme = opts.theme || cfg.theme || "";

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

@@ -508,2 +538,20 @@ };

}());
DIALOG = ax5.ui.dialog;
})();
// ax5.ui.dialog.tmpl
(function () {
var DIALOG = ax5.ui.dialog;
var dialogDisplay = function dialogDisplay(columnKeys) {
return " \n <div id=\"{{dialogId}}\" data-ax5-ui=\"dialog\" class=\"ax5-ui-dialog {{theme}}\">\n <div class=\"ax-dialog-header\">\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 ";
};
DIALOG.tmpl = {
"dialogDisplay": dialogDisplay,
get: function get(tmplName, data, columnKeys) {
return ax5.mustache.render(DIALOG.tmpl[tmplName].call(this, columnKeys), data);
}
};
})();

2

dist/ax5dialog.min.js

@@ -1,1 +0,1 @@

"use strict";!function(){var i=ax5.ui,t=ax5.util;i.addClass({className:"dialog",version:"0.8.6"},function(){var e=function(){var e,n=this;this.instanceId=ax5.getGuid(),this.config={id:"ax5-dialog-"+this.instanceId,clickEventName:"click",theme:"default",width:300,title:"",msg:"",lang:{ok:"ok",cancel:"cancel"},animateTime:150},this.activeDialog=null,e=this.config;var l=function(i,t){return i&&i.onStateChanged?i.onStateChanged.call(t,t):this.onStateChanged&&this.onStateChanged.call(t,t),t=null,!0},a=function(){return'\n <div id="{{dialogId}}" data-ax5-ui="dialog" class="ax5-ui-dialog {{theme}}">\n <div class="ax-dialog-header">\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,t){var n={dialogId:i,title:t.title||e.title||"",msg:(t.msg||e.msg||"").replace(/\n/g,"<br/>"),input:t.input,btns:t.btns,_crlf:function(){return this.replace(/\n/g,"<br/>")}};try{return ax5.mustache.render(a(),n)}finally{n=null}},s=function(i,t){var n,a={};i.id=i.id||e.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),e.zIndex&&(a["z-index"]=e.zIndex),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(e.clickEventName,function(e){g.call(this,e||window.event,i,t)}.bind(this)),jQuery(window).bind("keydown.ax5dialog",function(e){u.call(this,e||window.event,i,t)}.bind(this)),jQuery(window).bind("resize.ax5dialog",function(i){d.call(this,i||window.event)}.bind(this)),l.call(this,i,{self:this,state:"open"}),a=null,n=null},d=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),e.left<0&&(e.left=0),e.top<0&&(e.top=0),this.activeDialog.css(e),t=null,e=null,this},g=function(i,e,n,l,a){var o;if(i.srcElement&&(i.target=i.srcElement),l=t.findParentNode(i.target,function(i){return i.getAttribute("data-dialog-btn")?!0:void 0})){if(a=l.getAttribute("data-dialog-btn"),o={self:this,key:a,value:e.btns[a],dialogId:e.id,btnTarget:l},"prompt"===e.dialogType){var s=null;for(var d in e.input)if(o[d]=this.activeDialog.find("[data-dialog-prompt="+d+"]").val(),""==o[d]||null==o[d]){s=d;break}}if(e.btns[a].onClick)e.btns[a].onClick.call(o,a);else if("alert"===e.dialogType)n&&n.call(o,a),this.close();else if("confirm"===e.dialogType)n&&n.call(o,a),this.close();else if("prompt"===e.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,e=null,n=null,l=null,a=null},u=function(i,t,e,n,l){var a,o=null;if(i.keyCode==ax5.info.eventKeys.ESC&&this.close(),"prompt"===t.dialogType&&i.keyCode==ax5.info.eventKeys.RETURN){a={self:this,key:l,value:t.btns[l],dialogId:t.id,btnTarget:n};for(var s in t.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,t=null,e=null,n=null,l=null};this.init=function(){this.onStateChanged=e.onStateChanged},this.alert=function(i,l,a){return t.isString(i)&&(i={title:e.title,msg:i}),this.activeDialog?(a?console.log(ax5.info.getError("ax5dialog","501","alert")):setTimeout(function(){this.alert(i,l,1)}.bind(this),Number(e.animateTime)+100),this):(n.dialogConfig={},jQuery.extend(!0,n.dialogConfig,e,i),i=n.dialogConfig,i.dialogType="alert","undefined"==typeof i.btns&&(i.btns={ok:{label:e.lang.ok,theme:i.theme}}),s.call(this,i,l),i=null,l=null,this)},this.confirm=function(i,l,a){return t.isString(i)&&(i={title:e.title,msg:i}),this.activeDialog?(a?console.log(ax5.info.getError("ax5dialog","501","confirm")):setTimeout(function(){this.confirm(i,l,1)}.bind(this),Number(e.animateTime)+100),this):(n.dialogConfig={},jQuery.extend(!0,n.dialogConfig,e,i),i=n.dialogConfig,i.dialogType="confirm",i.theme=i.theme||e.theme||"","undefined"==typeof i.btns&&(i.btns={ok:{label:e.lang.ok,theme:i.theme},cancel:{label:e.lang.cancel}}),s.call(this,i,l),i=null,l=null,this)},this.prompt=function(i,l,a){return t.isString(i)&&(i={title:e.title,msg:i}),this.activeDialog?(a?console.log(ax5.info.getError("ax5dialog","501","prompt")):setTimeout(function(){this.prompt(i,l,1)}.bind(this),Number(e.animateTime)+100),this):(n.dialogConfig={},jQuery.extend(!0,n.dialogConfig,e,i),i=n.dialogConfig,i.dialogType="prompt",i.theme=i.theme||e.theme||"","undefined"==typeof i.input&&(i.input={value:{label:""}}),"undefined"==typeof i.btns&&(i.btns={ok:{label:e.lang.ok,theme:i.theme},cancel:{label:e.lang.cancel}}),s.call(this,i,l),i=null,l=null,this)},this.close=function(i,t){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,t={self:this,state:"close"},i&&i.onStateChanged?i.onStateChanged.call(t,t):this.onStateChanged&&this.onStateChanged.call(t,t),i=null,t=null}.bind(this),e.animateTime)),this},this.main=function(){i.dialog_instance=i.dialog_instance||[],i.dialog_instance.push(this),arguments&&t.isObject(arguments[0])&&this.setConfig(arguments[0])}.apply(this,arguments)};return e}())}();
"use strict";!function(){var i,t=ax5.ui,e=ax5.util;t.addClass({className:"dialog",version:"0.8.6"},function(){var n=function(){var n,l=this;this.instanceId=ax5.getGuid(),this.config={id:"ax5-dialog-"+this.instanceId,clickEventName:"click",theme:"default",width:300,title:"",msg:"",lang:{ok:"ok",cancel:"cancel"},animateTime:150},this.activeDialog=null,n=this.config;var a=function(i,t){return i&&i.onStateChanged?i.onStateChanged.call(t,t):this.onStateChanged&&this.onStateChanged.call(t,t),t=null,!0},o=function(t,e){var l={dialogId:t,title:e.title||n.title||"",msg:(e.msg||n.msg||"").replace(/\n/g,"<br/>"),input:e.input,btns:e.btns,_crlf:function(){return this.replace(/\n/g,"<br/>")}};try{return i.tmpl.get.call(this,"dialogDisplay",l)}finally{l=null}},s=function(i,t){var e,l={};i.id=i.id||n.id,e={width:i.width},jQuery(document.body).append(o.call(this,i.id,i)),this.activeDialog=jQuery("#"+i.id),this.activeDialog.css({width:e.width}),i.height=e.height=this.activeDialog.height(),"undefined"==typeof i.position||"center"===i.position?(l.top=jQuery(window).height()/2-e.height/2,l.left=jQuery(window).width()/2-e.width/2):(l.left=i.position.left||0,l.top=i.position.top||0),n.zIndex&&(l["z-index"]=n.zIndex),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(n.clickEventName,function(e){g.call(this,e||window.event,i,t)}.bind(this)),jQuery(window).bind("keydown.ax5dialog",function(e){u.call(this,e||window.event,i,t)}.bind(this)),jQuery(window).bind("resize.ax5dialog",function(i){d.call(this,i||window.event)}.bind(this)),a.call(this,i,{self:this,state:"open"}),l=null,e=null},d=function(i){if(!this.activeDialog)return this;var t=l.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),e.left<0&&(e.left=0),e.top<0&&(e.top=0),this.activeDialog.css(e),t=null,e=null,this},g=function(i,t,n,l,a){var o;if(i.srcElement&&(i.target=i.srcElement),l=e.findParentNode(i.target,function(i){return i.getAttribute("data-dialog-btn")?!0:void 0})){if(a=l.getAttribute("data-dialog-btn"),o={self:this,key:a,value:t.btns[a],dialogId:t.id,btnTarget:l},"prompt"===t.dialogType){var s=null;for(var d in t.input)if(o[d]=this.activeDialog.find("[data-dialog-prompt="+d+"]").val(),""==o[d]||null==o[d]){s=d;break}}if(t.btns[a].onClick)t.btns[a].onClick.call(o,a);else if("alert"===t.dialogType)n&&n.call(o,a),this.close();else if("confirm"===t.dialogType)n&&n.call(o,a),this.close();else if("prompt"===t.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,t=null,n=null,l=null,a=null},u=function(i,t,e,n,l){var a,o=null;if(i.keyCode==ax5.info.eventKeys.ESC&&this.close(),"prompt"===t.dialogType&&i.keyCode==ax5.info.eventKeys.RETURN){a={self:this,key:l,value:t.btns[l],dialogId:t.id,btnTarget:n};for(var s in t.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,t=null,e=null,n=null,l=null};this.init=function(){this.onStateChanged=n.onStateChanged},this.alert=function(i,t,a){return e.isString(i)&&(i={title:n.title,msg:i}),this.activeDialog?(a?console.log(ax5.info.getError("ax5dialog","501","alert")):setTimeout(function(){this.alert(i,t,1)}.bind(this),Number(n.animateTime)+100),this):(l.dialogConfig={},jQuery.extend(!0,l.dialogConfig,n,i),i=l.dialogConfig,i.dialogType="alert","undefined"==typeof i.btns&&(i.btns={ok:{label:n.lang.ok,theme:i.theme}}),s.call(this,i,t),i=null,t=null,this)},this.confirm=function(i,t,a){return e.isString(i)&&(i={title:n.title,msg:i}),this.activeDialog?(a?console.log(ax5.info.getError("ax5dialog","501","confirm")):setTimeout(function(){this.confirm(i,t,1)}.bind(this),Number(n.animateTime)+100),this):(l.dialogConfig={},jQuery.extend(!0,l.dialogConfig,n,i),i=l.dialogConfig,i.dialogType="confirm",i.theme=i.theme||n.theme||"","undefined"==typeof i.btns&&(i.btns={ok:{label:n.lang.ok,theme:i.theme},cancel:{label:n.lang.cancel}}),s.call(this,i,t),i=null,t=null,this)},this.prompt=function(i,t,a){return e.isString(i)&&(i={title:n.title,msg:i}),this.activeDialog?(a?console.log(ax5.info.getError("ax5dialog","501","prompt")):setTimeout(function(){this.prompt(i,t,1)}.bind(this),Number(n.animateTime)+100),this):(l.dialogConfig={},jQuery.extend(!0,l.dialogConfig,n,i),i=l.dialogConfig,i.dialogType="prompt",i.theme=i.theme||n.theme||"","undefined"==typeof i.input&&(i.input={value:{label:""}}),"undefined"==typeof i.btns&&(i.btns={ok:{label:n.lang.ok,theme:i.theme},cancel:{label:n.lang.cancel}}),s.call(this,i,t),i=null,t=null,this)},this.close=function(i,t){return this.activeDialog&&(i=l.dialogConfig,this.activeDialog.addClass("destroy"),jQuery(window).unbind("keydown.ax5dialog"),jQuery(window).unbind("resize.ax5dialog"),setTimeout(function(){this.activeDialog.remove(),this.activeDialog=null,t={self:this,state:"close"},i&&i.onStateChanged?i.onStateChanged.call(t,t):this.onStateChanged&&this.onStateChanged.call(t,t),i=null,t=null}.bind(this),n.animateTime)),this},this.main=function(){t.dialog_instance=t.dialog_instance||[],t.dialog_instance.push(this),arguments&&e.isObject(arguments[0])&&this.setConfig(arguments[0])}.apply(this,arguments)};return n}()),i=ax5.ui.dialog}(),function(){var i=ax5.ui.dialog,t=function(i){return' \n <div id="{{dialogId}}" data-ax5-ui="dialog" class="ax5-ui-dialog {{theme}}">\n <div class="ax-dialog-header">\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 '};i.tmpl={dialogDisplay:t,get:function(t,e,n){return ax5.mustache.render(i.tmpl[t].call(this,n),e)}}}();

4

package.json
{
"name": "ax5ui-dialog",
"version": "0.8.6",
"version": "0.8.7",
"description": "A dialog plugin that works with Bootstrap & jQuery",
"license": "LGPLv3",
"license": "LGPL-3.0",
"repository": {

@@ -7,0 +7,0 @@ "type": "git",

30

README.md

@@ -5,2 +5,3 @@ [![axisj-contributed](https://img.shields.io/badge/AXISJ.com-Contributed-green.svg)](https://github.com/axisj)

# ax5ui-dialog
"dialog" displays information on a popup window and also enables users to enter input values.

@@ -13,3 +14,3 @@ > *Dependencies*

### Install by bower
### Install with bower
```sh

@@ -19,11 +20,11 @@ bower install ax5ui-dialog

[bower](http://bower.io/#install-bower) is web front-end package manager.
using the `bower`, when you install the plug-in is installed to resolve the plug-in dependencies under the `bower_components` folder.
When you install `bower`, it will be installed under the `bower_components` folder to resolve the plug-in dependencies.
(You can change the folder location. [.bowerrc](http://bower.io/docs/config/#bowerrc-specification) )
It is recommended that you install by using the `bower`.
If you've never used a bower is, you will be able to be used for [http://bower.io/#install-bower](http://bower.io/#install-bower).
It is recommended that you install by using `bower`.
If you've never used bower, please refer to [http://bower.io/#install-bower](http://bower.io/#install-bower).
### Install by npm
If you do not use the bower, it can be downloaded by using the npm as second best.
In npm, so pile on the package manager for the front end, you need to solve the problem of plug-in dependencies.
### Install with npm
If you do not use bower, it also can be installed by using npm as an alternative.
In case of npm, which is the package manager for the front end, you need to solve the problem of plug-in dependencies.

@@ -36,4 +37,4 @@ ```sh

After you download the file in npm install, you will need to copy to the location where you want to use as a resource for the project.
If the inconvenience in the process that you want to copy the file and can be easily copied by using a `gulp` or `grunt`.
After downloading the install file of npm, you will need to copy it to the location where you want to use as a resource for the project.
If the copy process is inconvenient, it also can be done easily by using `gulp` or `grunt`.

@@ -45,6 +46,5 @@ ### Download code

### Insert the "ax5dialog" in the HTML HEAD.
### Insert "ax5dialog" in HTML HEAD.
Folder location can be any for your project. However, please be sure to assign the right path in the project.
Location of the folder can be determined freely in your project. But be careful not to accidentally caused
exactly the path.
```html

@@ -58,3 +58,3 @@ <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/ax5ui/ax5ui-dialog/master/dist/ax5dialog.css" />

**CDN urls**
It is CDN url of ax5ui-select. ax5ui offers the CDN services through the rawgit.
This is a list of CDN urls for ax5ui-dialog. ax5ui offers the CDN services through rawgit.
```

@@ -67,3 +67,3 @@ https://cdn.rawgit.com/ax5ui/ax5ui-dialog/master/dist/ax5dialog.css

### Basic Usages
### Basic Usage
```js

@@ -89,4 +89,4 @@ var myDialog = new ax5.ui.dialog({

### Preview
- [See Demostration](http://ax5.io/ax5ui-dialog/demo/index.html)
- [See Demonstration](http://ax5.io/ax5ui-dialog/demo/index.html)
If you have any questions, please refer to the following [gitHub](https://github.com/ax5ui/ax5ui-kernel)

141

src/ax5dialog.js

@@ -6,6 +6,7 @@ // ax5.ui.dialog

var U = ax5.util;
var DIALOG;
UI.addClass({
className: "dialog",
version: "0.8.6"
version: "0.8.7"
}, (function () {

@@ -17,5 +18,25 @@ /**

* @example
* ```js
* var dialog = new ax5.ui.dialog();
* var mask = new ax5.ui.mask();
* dialog.setConfig({
* zIndex: 5000,
* onStateChanged: function () {
* if (this.state === "open") {
* mask.open();
* }
* else if (this.state === "close") {
* mask.close();
* }
* }
* });
*
* dialog.alert({
* theme: 'default',
* title: 'Alert default',
* msg: theme + ' color'
* }, function () {
* console.log(this);
* });
* ```
* var myDialog = new ax5.ui.dialog();
* ```
*/

@@ -55,40 +76,8 @@ var ax5dialog = function () {

},
getContentTmpl = function () {
return `
<div id="{{dialogId}}" data-ax5-ui="dialog" class="ax5-ui-dialog {{theme}}">
<div class="ax-dialog-header">
{{{title}}}
</div>
<div class="ax-dialog-body">
<div class="ax-dialog-msg">{{{msg}}}</div>
{{#input}}
<div class="ax-dialog-prompt">
{{#@each}}
<div class="form-group">
{{#@value.label}}
<label>{{#_crlf}}{{{.}}}{{/_crlf}}</label>
{{/@value.label}}
<input type="{{@value.type}}" placeholder="{{@value.placeholder}}" class="form-control {{@value.theme}}" data-dialog-prompt="{{@key}}" style="width:100%;" value="{{@value.value}}" />
{{#@value.help}}
<p class="help-block">{{#_crlf}}{{.}}{{/_crlf}}</p>
{{/@value.help}}
</div>
{{/@each}}
</div>
{{/input}}
<div class="ax-dialog-buttons">
<div class="ax-button-wrap">
{{#btns}}
{{#@each}}
<button type="button" data-dialog-btn="{{@key}}" class="btn btn-{{@value.theme}}">{{@value.label}}</button>
{{/@each}}
{{/btns}}
</div>
</div>
</div>
</div>
`;
},
/**
* @method ax5dialog.getContent
* @param {String} dialogId
* @param {Object} opts
* @returns dialogDisplay
*/
getContent = function (dialogId, opts) {

@@ -108,3 +97,3 @@ var

try {
return ax5.mustache.render(getContentTmpl(), data);
return DIALOG.tmpl.get.call(this, "dialogDisplay", data);
}

@@ -115,3 +104,8 @@ finally {

},
open = function (opts, callBack) {
/**
* @method ax5dialog.open
* @param {Object} opts
* @param callback
*/
open = function (opts, callback) {
var pos = {}, box;

@@ -155,3 +149,3 @@

this.activeDialog.find("[data-dialog-btn]").on(cfg.clickEventName, (function (e) {
btnOnClick.call(this, e || window.event, opts, callBack);
btnOnClick.call(this, e || window.event, opts, callback);
}).bind(this));

@@ -161,3 +155,3 @@

jQuery(window).bind("keydown.ax5dialog", (function (e) {
onKeyup.call(this, e || window.event, opts, callBack);
onKeyup.call(this, e || window.event, opts, callback);
}).bind(this));

@@ -204,3 +198,3 @@

},
btnOnClick = function (e, opts, callBack, target, k) {
btnOnClick = function (e, opts, callback, target, k) {
var that;

@@ -238,7 +232,7 @@ if (e.srcElement) e.target = e.srcElement;

else if (opts.dialogType === "alert") {
if (callBack) callBack.call(that, k);
if (callback) callback.call(that, k);
this.close();
}
else if (opts.dialogType === "confirm") {
if (callBack) callBack.call(that, k);
if (callback) callback.call(that, k);
this.close();

@@ -253,3 +247,3 @@ }

}
if (callBack) callBack.call(that, k);
if (callback) callback.call(that, k);
this.close();

@@ -261,7 +255,7 @@ }

opts = null;
callBack = null;
callback = null;
target = null;
k = null;
},
onKeyup = function (e, opts, callBack, target, k) {
onKeyup = function (e, opts, callback, target, k) {
var

@@ -295,3 +289,3 @@ that,

}
if (callBack) callBack.call(that, k);
if (callback) callback.call(that, k);
this.close();

@@ -304,3 +298,3 @@ }

opts = null;
callBack = null;
callback = null;
target = null;

@@ -332,3 +326,3 @@ k = null;

* @param {Object|String} [{theme, title, msg, btns}|msg] - dialog 속성을 json으로 정의하거나 msg만 전달
* @param {Function} [callBack] - 사용자 확인 이벤트시 호출될 callBack 함수
* @param {Function} [callback] - 사용자 확인 이벤트시 호출될 callback 함수
* @returns {ax5dialog}

@@ -343,3 +337,3 @@ * @example

*/
this.alert = function (opts, callBack, tryCount) {
this.alert = function (opts, callback, tryCount) {
if (U.isString(opts)) {

@@ -356,3 +350,3 @@ opts = {

setTimeout((function () {
this.alert(opts, callBack, 1);
this.alert(opts, callback, 1);
}).bind(this), Number(cfg.animateTime) + 100);

@@ -375,6 +369,6 @@ } else {

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

@@ -387,3 +381,3 @@ };

* @param {Object|String} [{theme, title, msg, btns}|msg] - dialog 속성을 json으로 정의하거나 msg만 전달
* @param {Function} [callBack] - 사용자 확인 이벤트시 호출될 callBack 함수
* @param {Function} [callback] - 사용자 확인 이벤트시 호출될 callback 함수
* @returns {ax5dialog}

@@ -398,3 +392,3 @@ * @example

*/
this.confirm = function (opts, callBack, tryCount) {
this.confirm = function (opts, callback, tryCount) {
if (U.isString(opts)) {

@@ -411,3 +405,3 @@ opts = {

setTimeout((function () {
this.confirm(opts, callBack, 1);
this.confirm(opts, callback, 1);
}).bind(this), Number(cfg.animateTime) + 100);

@@ -432,6 +426,6 @@ } else {

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

@@ -444,3 +438,3 @@ };

* @param {Object|String} [{theme, title, msg, btns, input}|msg] - dialog 속성을 json으로 정의하거나 msg만 전달
* @param {Function} [callBack] - 사용자 확인 이벤트시 호출될 callBack 함수
* @param {Function} [callback] - 사용자 확인 이벤트시 호출될 callback 함수
* @returns {ax5dialog}

@@ -455,3 +449,3 @@ * @example

*/
this.prompt = function (opts, callBack, tryCount) {
this.prompt = function (opts, callback, tryCount) {
if (U.isString(opts)) {

@@ -468,3 +462,3 @@ opts = {

setTimeout((function () {
this.prompt(opts, callBack, 1);
this.prompt(opts, callback, 1);
}).bind(this), Number(cfg.animateTime) + 100);

@@ -480,3 +474,2 @@ } else {

opts = self.dialogConfig;
opts.dialogType = "prompt";

@@ -496,6 +489,6 @@ opts.theme = (opts.theme || cfg.theme || "");

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

@@ -521,4 +514,6 @@ };

setTimeout((function () {
this.activeDialog.remove();
this.activeDialog = null;
if(this.activeDialog) {
this.activeDialog.remove();
this.activeDialog = null;
}

@@ -556,3 +551,3 @@ that = {

})());
})();
DIALOG = ax5.ui.dialog;
})();

20

test/bower.json
{
"name": "ax5ui-dialog-tester",
"dependencies": {
"jquery": "^1.11.0",
"ax5core": ">=1.0.9",
"ax5ui-mask": "",
"bootstrap": "^3.3.6",
"font-awesome": ""
}
"name": "ax5ui-dialog-tester",
"dependencies": {
"jquery": "^1.11.0",
"ax5core": ">=1.0.9",
"ax5ui-mask": "",
"bootstrap": "^3.3.6",
"font-awesome": ""
},
"devDependencies": {
"should": "^11.1.0",
"lodash": "^4.16.2"
}
}
LICENSE.txt
dist/ax5dialog.css

Sorry, the diff of this file is not supported yet

test/index.html

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc