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.1 to 0.8.2

4

bower.json
{
"name": "ax5ui-dialog",
"version": "0.8.1",
"version": "0.8.2",
"authors": [

@@ -21,3 +21,3 @@ "ThomasJ <tom@axisj.com>"

"jquery": "^1.11.0",
"ax5core": "",
"ax5core": ">=1.0.9",
"bootstrap": "^3.3.6"

@@ -24,0 +24,0 @@ },

813

dist/ax5dialog.js

@@ -6,216 +6,159 @@ "use strict";

/**
* @class ax5dialog
* @classdesc
* @author tom@axisj.com
* @example
* ```
* var myDialog = new ax5.ui.dialog();
* ```
*/
var ROOT = ax5.ui;
var _SUPER_ = ax5.ui.root;
var UI = ax5.ui;
var U = ax5.util;
var CLASS_NAME = "ax5dialog";
var VERSION = "0.8.1";
//== UI Class
var ax5dialog = function ax5dialog() {
var self = this,
cfg;
UI.addClass({
className: "dialog",
version: "0.8.2"
}, function () {
/**
* @class ax5dialog
* @classdesc
* @author tom@axisj.com
* @example
* ```
* var myDialog = new ax5.ui.dialog();
* ```
*/
var ax5dialog = function ax5dialog() {
var self = this,
cfg;
if (_SUPER_) _SUPER_.call(this); // 부모호출
this.activeDialog = null;
this.config = {
id: 'ax5-dialog-' + this.instanceId,
clickEventName: "click", //(('ontouchstart' in document.documentElement) ? "touchend" : "click"),
theme: 'default',
width: 300,
title: '',
msg: '',
lang: {
"ok": "ok", "cancel": "cancel"
},
animateTime: 250
};
this.name = CLASS_NAME;
this.version = VERSION;
this.instanceId = ax5.getGuid();
cfg = this.config;
this.activeDialog = null;
this.config = {
id: 'ax5-dialog-' + this.instanceId,
clickEventName: "click", //(('ontouchstart' in document.documentElement) ? "touchend" : "click"),
theme: 'default',
width: 300,
title: '',
msg: '',
lang: {
"ok": "ok", "cancel": "cancel"
var onStateChanged = function onStateChanged(opts, that) {
if (opts && opts.onStateChanged) {
opts.onStateChanged.call(that, that);
} else if (this.onStateChanged) {
this.onStateChanged.call(that, that);
}
that = null;
return true;
},
animateTime: 250
};
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) {
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/>");
}
};
cfg = this.config;
var onStateChanged = function onStateChanged(opts, that) {
if (opts && opts.onStateChanged) {
opts.onStateChanged.call(that, that);
} else if (this.onStateChanged) {
this.onStateChanged.call(that, that);
}
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-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) {
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;
}
};
},
open = function open(opts, callBack) {
var pos = {},
box;
try {
return ax5.mustache.render(getContentTmpl(), data);
} finally {
data = null;
}
},
open = function open(opts, callBack) {
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;
},
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);
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);
opts = null;
box = null;
opts = null;
box = null;
return this;
},
btnOnClick = function btnOnClick(e, opts, callBack, target, k) {
var that;
if (e.srcElement) e.target = e.srcElement;
return this;
},
btnOnClick = function btnOnClick(e, opts, callBack, target, k) {
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 = {

@@ -227,260 +170,308 @@ 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();
}
}
/**
* Preferences of dialog UI
* @method ax5dialog.setConfig
* @param {Object} config - 클래스 속성값
* @returns {ax5dialog}
* @example
* ```
* ```
*/
//== class body start
this.init = function () {
that = null;
emptyKey = null;
opts = null;
callBack = null;
target = null;
k = null;
};
this.onStateChanged = cfg.onStateChanged;
// this.onLoad = cfg.onLoad;
};
/**
* Preferences of dialog UI
* @method ax5dialog.setConfig
* @param {Object} config - 클래스 속성값
* @returns {ax5dialog}
* @example
* ```
* ```
*/
//== class body start
this.init = function () {
/**
* open the dialog of alert type
* @method ax5dialog.alert
* @param {Object|String} [{theme, title, msg, btns}|msg] - dialog 속성을 json으로 정의하거나 msg만 전달
* @param {Function} [callBack] - 사용자 확인 이벤트시 호출될 callBack 함수
* @returns {ax5dialog}
* @example
* ```
* myDialog.alert({
* title: 'app title',
* msg: 'alert'
* }, function(){});
* ```
*/
this.alert = function (opts, callBack, tryCount) {
if (U.isString(opts)) {
opts = {
title: cfg.title,
msg: opts
};
}
this.onStateChanged = cfg.onStateChanged;
// this.onLoad = cfg.onLoad;
};
if (this.activeDialog) {
// try one more
if (!tryCount) {
setTimeout(function () {
this.alert(opts, callBack, 1);
}.bind(this), Number(cfg.animateTime) + 100);
} else {
console.log(ax5.info.getError("ax5dialog", "501", "alert"));
/**
* open the dialog of alert type
* @method ax5dialog.alert
* @param {Object|String} [{theme, title, msg, btns}|msg] - dialog 속성을 json으로 정의하거나 msg만 전달
* @param {Function} [callBack] - 사용자 확인 이벤트시 호출될 callBack 함수
* @returns {ax5dialog}
* @example
* ```
* myDialog.alert({
* title: 'app title',
* msg: 'alert'
* }, function(){});
* ```
*/
this.alert = function (opts, callBack, tryCount) {
if (U.isString(opts)) {
opts = {
title: cfg.title,
msg: opts
};
}
return this;
}
self.dialogConfig = {};
jQuery.extend(true, self.dialogConfig, cfg, opts);
opts = self.dialogConfig;
if (this.activeDialog) {
// try one more
if (!tryCount) {
setTimeout(function () {
this.alert(opts, callBack, 1);
}.bind(this), Number(cfg.animateTime) + 100);
} else {
console.log(ax5.info.getError("ax5dialog", "501", "alert"));
}
return this;
}
opts.dialogType = "alert";
if (typeof opts.btns === "undefined") {
opts.btns = {
ok: { label: cfg.lang["ok"], theme: opts.theme }
};
}
open.call(this, opts, callBack);
self.dialogConfig = {};
jQuery.extend(true, self.dialogConfig, cfg, opts);
opts = self.dialogConfig;
opts = null;
callBack = null;
return this;
};
opts.dialogType = "alert";
if (typeof opts.btns === "undefined") {
opts.btns = {
ok: { label: cfg.lang["ok"], theme: opts.theme }
};
}
open.call(this, opts, callBack);
/**
* open the dialog of confirm type
* @method ax5dialog.confirm
* @param {Object|String} [{theme, title, msg, btns}|msg] - dialog 속성을 json으로 정의하거나 msg만 전달
* @param {Function} [callBack] - 사용자 확인 이벤트시 호출될 callBack 함수
* @returns {ax5dialog}
* @example
* ```
* myDialog.confirm({
* title: 'app title',
* msg: 'confirm'
* }, function(){});
* ```
*/
this.confirm = function (opts, callBack, tryCount) {
if (U.isString(opts)) {
opts = {
title: cfg.title,
msg: opts
};
}
opts = null;
callBack = null;
return this;
};
if (this.activeDialog) {
// try one more
if (!tryCount) {
setTimeout(function () {
this.confirm(opts, callBack, 1);
}.bind(this), Number(cfg.animateTime) + 100);
} else {
console.log(ax5.info.getError("ax5dialog", "501", "confirm"));
/**
* open the dialog of confirm type
* @method ax5dialog.confirm
* @param {Object|String} [{theme, title, msg, btns}|msg] - dialog 속성을 json으로 정의하거나 msg만 전달
* @param {Function} [callBack] - 사용자 확인 이벤트시 호출될 callBack 함수
* @returns {ax5dialog}
* @example
* ```
* myDialog.confirm({
* title: 'app title',
* msg: 'confirm'
* }, function(){});
* ```
*/
this.confirm = function (opts, callBack, tryCount) {
if (U.isString(opts)) {
opts = {
title: cfg.title,
msg: opts
};
}
return this;
}
self.dialogConfig = {};
jQuery.extend(true, self.dialogConfig, cfg, opts);
opts = self.dialogConfig;
if (this.activeDialog) {
// try one more
if (!tryCount) {
setTimeout(function () {
this.confirm(opts, callBack, 1);
}.bind(this), Number(cfg.animateTime) + 100);
} else {
console.log(ax5.info.getError("ax5dialog", "501", "confirm"));
}
return this;
}
opts.dialogType = "confirm";
opts.theme = opts.theme || cfg.theme || "";
if (typeof opts.btns === "undefined") {
opts.btns = {
ok: { label: cfg.lang["ok"], theme: opts.theme },
cancel: { label: cfg.lang["cancel"] }
};
}
open.call(this, opts, callBack);
self.dialogConfig = {};
jQuery.extend(true, self.dialogConfig, cfg, opts);
opts = self.dialogConfig;
opts = null;
callBack = null;
return this;
};
opts.dialogType = "confirm";
opts.theme = opts.theme || cfg.theme || "";
if (typeof opts.btns === "undefined") {
opts.btns = {
ok: { label: cfg.lang["ok"], theme: opts.theme },
cancel: { label: cfg.lang["cancel"] }
};
}
open.call(this, opts, callBack);
/**
* open the dialog of prompt type
* @method ax5dialog.prompt
* @param {Object|String} [{theme, title, msg, btns, input}|msg] - dialog 속성을 json으로 정의하거나 msg만 전달
* @param {Function} [callBack] - 사용자 확인 이벤트시 호출될 callBack 함수
* @returns {ax5dialog}
* @example
* ```
* myDialog.prompt({
* title: 'app title',
* msg: 'alert'
* }, function(){});
* ```
*/
this.prompt = function (opts, callBack, tryCount) {
if (U.isString(opts)) {
opts = {
title: cfg.title,
msg: opts
};
}
opts = null;
callBack = null;
return this;
};
if (this.activeDialog) {
// try one more
if (!tryCount) {
setTimeout(function () {
this.prompt(opts, callBack, 1);
}.bind(this), Number(cfg.animateTime) + 100);
} else {
console.log(ax5.info.getError("ax5dialog", "501", "prompt"));
/**
* open the dialog of prompt type
* @method ax5dialog.prompt
* @param {Object|String} [{theme, title, msg, btns, input}|msg] - dialog 속성을 json으로 정의하거나 msg만 전달
* @param {Function} [callBack] - 사용자 확인 이벤트시 호출될 callBack 함수
* @returns {ax5dialog}
* @example
* ```
* myDialog.prompt({
* title: 'app title',
* msg: 'alert'
* }, function(){});
* ```
*/
this.prompt = function (opts, callBack, tryCount) {
if (U.isString(opts)) {
opts = {
title: cfg.title,
msg: opts
};
}
return this;
}
self.dialogConfig = {};
jQuery.extend(true, self.dialogConfig, cfg, opts);
opts = self.dialogConfig;
if (this.activeDialog) {
// try one more
if (!tryCount) {
setTimeout(function () {
this.prompt(opts, callBack, 1);
}.bind(this), Number(cfg.animateTime) + 100);
} else {
console.log(ax5.info.getError("ax5dialog", "501", "prompt"));
}
return this;
}
opts.dialogType = "prompt";
opts.theme = opts.theme || cfg.theme || "";
self.dialogConfig = {};
jQuery.extend(true, self.dialogConfig, cfg, opts);
opts = self.dialogConfig;
if (typeof opts.input === "undefined") {
opts.input = {
value: { label: "" }
};
}
if (typeof opts.btns === "undefined") {
opts.btns = {
ok: { label: cfg.lang["ok"], theme: opts.theme },
cancel: { label: cfg.lang["cancel"] }
};
}
open.call(this, opts, callBack);
opts.dialogType = "prompt";
opts.theme = opts.theme || cfg.theme || "";
opts = null;
callBack = null;
return this;
};
if (typeof opts.input === "undefined") {
opts.input = {
value: { label: "" }
};
}
if (typeof opts.btns === "undefined") {
opts.btns = {
ok: { label: cfg.lang["ok"], theme: opts.theme },
cancel: { label: cfg.lang["cancel"] }
};
}
open.call(this, opts, callBack);
/**
* close the dialog
* @method ax5dialog.close
* @returns {ax5dialog}
* @example
* ```
* myDialog.close();
* ```
*/
this.close = function (opts, that) {
if (this.activeDialog) {
opts = self.dialogConfig;
this.activeDialog.addClass("destroy");
jQuery(window).unbind("keydown.ax5dialog");
jQuery(window).unbind("resize.ax5dialog");
opts = null;
callBack = null;
return this;
};
setTimeout(function () {
this.activeDialog.remove();
this.activeDialog = null;
/**
* close the dialog
* @method ax5dialog.close
* @returns {ax5dialog}
* @example
* ```
* myDialog.close();
* ```
*/
this.close = function (opts, that) {
if (this.activeDialog) {
opts = self.dialogConfig;
this.activeDialog.addClass("destroy");
jQuery(window).unbind("keydown.ax5dialog");
jQuery(window).unbind("resize.ax5dialog");
that = {
self: this,
state: "close"
};
if (opts && opts.onStateChanged) {
opts.onStateChanged.call(that, that);
} else if (this.onStateChanged) {
this.onStateChanged.call(that, that);
}
setTimeout(function () {
this.activeDialog.remove();
this.activeDialog = null;
opts = null;
that = null;
}.bind(this), cfg.animateTime);
}
return this;
};
that = {
self: this,
state: "close"
};
if (opts && opts.onStateChanged) {
opts.onStateChanged.call(that, that);
} else if (this.onStateChanged) {
this.onStateChanged.call(that, that);
}
// 클래스 생성자
this.main = function () {
opts = null;
that = null;
}.bind(this), cfg.animateTime);
}
return this;
};
root.dialog_instance = root.dialog_instance || [];
root.dialog_instance.push(this);
// 클래스 생성자
this.main = function () {
if (arguments && U.isObject(arguments[0])) {
this.setConfig(arguments[0]);
}
}.apply(this, arguments);
};
UI.dialog_instance = UI.dialog_instance || [];
UI.dialog_instance.push(this);
ROOT.dialog = function () {
if (U.isFunction(_SUPER_)) ax5dialog.prototype = new _SUPER_(); // 상속
if (arguments && U.isObject(arguments[0])) {
this.setConfig(arguments[0]);
}
}.apply(this, arguments);
};
return ax5dialog;
}(); // ax5.ui에 연결
}());
})();

2

dist/ax5dialog.min.js

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

"use strict";!function(){var i=ax5.ui,t=ax5.ui.root,e=ax5.util,n="ax5dialog",l="0.8.1",a=function(){var i,a=this;t&&t.call(this),this.name=n,this.version=l,this.instanceId=ax5.getGuid(),this.activeDialog=null,this.config={id:"ax5-dialog-"+this.instanceId,clickEventName:"click",theme:"default",width:300,title:"",msg:"",lang:{ok:"ok",cancel:"cancel"},animateTime:250},i=this.config;var o=function(i,t){return i&&i.onStateChanged?i.onStateChanged.call(t,t):this.onStateChanged&&this.onStateChanged.call(t,t),t=null,!0},s=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 '},d=function(t,e){var n={dialogId:t,title:e.title||i.title||"",msg:(e.msg||i.msg||"").replace(/\n/g,"<br/>"),input:e.input,btns:e.btns,_crlf:function(){return this.replace(/\n/g,"<br/>")}};try{return ax5.mustache.render(s(),n)}finally{n=null}},u=function(t,e){var n,l={};t.id=t.id||i.id,n={width:t.width},jQuery(document.body).append(d.call(this,t.id,t)),this.activeDialog=jQuery("#"+t.id),this.activeDialog.css({width:n.width}),t.height=n.height=this.activeDialog.height(),"undefined"==typeof t.position||"center"===t.position?(l.top=jQuery(window).height()/2-n.height/2,l.left=jQuery(window).width()/2-n.width/2):(l.left=t.position.left||0,l.top=t.position.top||0),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){c.call(this,i||window.event,t,e)}.bind(this)),jQuery(window).bind("keydown.ax5dialog",function(i){h.call(this,i||window.event,t,e)}.bind(this)),jQuery(window).bind("resize.ax5dialog",function(i){g.call(this,i||window.event)}.bind(this)),o.call(this,t,{self:this,state:"open"}),l=null,n=null},g=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),t=null,e=null,this},c=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},h=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=i.onStateChanged},this.alert=function(t,n,l){return e.isString(t)&&(t={title:i.title,msg:t}),this.activeDialog?(l?console.log(ax5.info.getError("ax5dialog","501","alert")):setTimeout(function(){this.alert(t,n,1)}.bind(this),Number(i.animateTime)+100),this):(a.dialogConfig={},jQuery.extend(!0,a.dialogConfig,i,t),t=a.dialogConfig,t.dialogType="alert","undefined"==typeof t.btns&&(t.btns={ok:{label:i.lang.ok,theme:t.theme}}),u.call(this,t,n),t=null,n=null,this)},this.confirm=function(t,n,l){return e.isString(t)&&(t={title:i.title,msg:t}),this.activeDialog?(l?console.log(ax5.info.getError("ax5dialog","501","confirm")):setTimeout(function(){this.confirm(t,n,1)}.bind(this),Number(i.animateTime)+100),this):(a.dialogConfig={},jQuery.extend(!0,a.dialogConfig,i,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}}),u.call(this,t,n),t=null,n=null,this)},this.prompt=function(t,n,l){return e.isString(t)&&(t={title:i.title,msg:t}),this.activeDialog?(l?console.log(ax5.info.getError("ax5dialog","501","prompt")):setTimeout(function(){this.prompt(t,n,1)}.bind(this),Number(i.animateTime)+100),this):(a.dialogConfig={},jQuery.extend(!0,a.dialogConfig,i,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}}),u.call(this,t,n),t=null,n=null,this)},this.close=function(t,e){return this.activeDialog&&(t=a.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),t=null,e=null}.bind(this),i.animateTime)),this},this.main=function(){root.dialog_instance=root.dialog_instance||[],root.dialog_instance.push(this),arguments&&e.isObject(arguments[0])&&this.setConfig(arguments[0])}.apply(this,arguments)};i.dialog=function(){return e.isFunction(t)&&(a.prototype=new t),a}()}();
"use strict";!function(){var i=ax5.ui,t=ax5.util;i.addClass({className:"dialog",version:"0.8.2"},function(){var e=function(){var e,n=this;this.activeDialog=null,this.config={id:"ax5-dialog-"+this.instanceId,clickEventName:"click",theme:"default",width:300,title:"",msg:"",lang:{ok:"ok",cancel:"cancel"},animateTime:250},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),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),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}())}();

2

package.json
{
"name": "ax5ui-dialog",
"version": "0.8.1",
"version": "0.8.2",
"description": "A dialog plugin that works with Bootstrap & jQuery",

@@ -5,0 +5,0 @@ "license": "LGPLv3",

907

src/ax5dialog.js
// ax5.ui.dialog
(function () {
/**
* @class ax5dialog
* @classdesc
* @author tom@axisj.com
* @example
* ```
* var myDialog = new ax5.ui.dialog();
* ```
*/
var ROOT = ax5.ui;
var _SUPER_ = ax5.ui.root;
var UI = ax5.ui;
var U = ax5.util;
var CLASS_NAME = "ax5dialog";
var VERSION = "0.8.1";
//== UI Class
var ax5dialog = function () {
var
self = this,
cfg;
UI.addClass({
className: "dialog",
version: "0.8.2"
}, (function () {
/**
* @class ax5dialog
* @classdesc
* @author tom@axisj.com
* @example
* ```
* var myDialog = new ax5.ui.dialog();
* ```
*/
var ax5dialog = function () {
var
self = this,
cfg;
if (_SUPER_) _SUPER_.call(this); // 부모호출
this.activeDialog = null;
this.config = {
id: 'ax5-dialog-' + this.instanceId,
clickEventName: "click", //(('ontouchstart' in document.documentElement) ? "touchend" : "click"),
theme: 'default',
width: 300,
title: '',
msg: '',
lang: {
"ok": "ok", "cancel": "cancel"
},
animateTime: 250
};
this.name = CLASS_NAME;
this.version = VERSION;
this.instanceId = ax5.getGuid();
cfg = this.config;
this.activeDialog = null;
this.config = {
id: 'ax5-dialog-' + this.instanceId,
clickEventName: "click", //(('ontouchstart' in document.documentElement) ? "touchend" : "click"),
theme: 'default',
width: 300,
title: '',
msg: '',
lang: {
"ok": "ok", "cancel": "cancel"
},
animateTime: 250
};
var
onStateChanged = function (opts, that) {
if (opts && opts.onStateChanged) {
opts.onStateChanged.call(that, that);
}
else if (this.onStateChanged) {
this.onStateChanged.call(that, that);
}
cfg = this.config;
that = null;
return true;
},
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>
`;
},
getContent = function (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 () {
return this.replace(/\n/g, "<br/>");
}
};
var
onStateChanged = function (opts, that) {
if (opts && opts.onStateChanged) {
opts.onStateChanged.call(that, that);
}
else if (this.onStateChanged) {
this.onStateChanged.call(that, that);
}
try {
return ax5.mustache.render(getContentTmpl(), data);
}
finally {
data = null;
}
},
open = function (opts, callBack) {
var
pos = {},
box
;
that = null;
return true;
},
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>
`;
},
getContent = function (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 () {
return this.replace(/\n/g, "<br/>");
}
opts.id = (opts.id || cfg.id);
box = {
width: opts.width
};
jQuery(document.body).append(getContent.call(this, opts.id, opts));
try {
return ax5.mustache.render(getContentTmpl(), data);
}
finally {
data = null;
}
},
open = function (opts, callBack) {
var
pos = {},
box
;
this.activeDialog = jQuery('#' + opts.id);
this.activeDialog.css({width: box.width});
opts.id = (opts.id || cfg.id);
// dialog 높이 구하기 - 너비가 정해지면 높이가 변경 될 것.
opts.height = box.height = this.activeDialog.height();
box = {
width: opts.width
};
jQuery(document.body).append(getContent.call(this, opts.id, opts));
//- 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);
this.activeDialog = jQuery('#' + opts.id);
this.activeDialog.css({width: box.width});
// 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();
}
// dialog 높이 구하기 - 너비가 정해지면 높이가 변경 될 것.
opts.height = box.height = this.activeDialog.height();
this.activeDialog.find("[data-dialog-btn]").on(cfg.clickEventName, (function (e) {
btnOnClick.call(this, e || window.event, opts, callBack);
}).bind(this));
//- 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 key event
jQuery(window).bind("keydown.ax5dialog", (function (e) {
onKeyup.call(this, e || window.event, opts, callBack);
}).bind(this));
// 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();
}
jQuery(window).bind("resize.ax5dialog", (function (e) {
align.call(this, e || window.event);
}).bind(this));
this.activeDialog.find("[data-dialog-btn]").on(cfg.clickEventName, (function (e) {
btnOnClick.call(this, e || window.event, opts, callBack);
}).bind(this));
onStateChanged.call(this, opts, {
self: this,
state: "open"
});
// bind key event
jQuery(window).bind("keydown.ax5dialog", (function (e) {
onKeyup.call(this, e || window.event, opts, callBack);
}).bind(this));
pos = null;
box = null;
},
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);
jQuery(window).bind("resize.ax5dialog", (function (e) {
align.call(this, e || window.event);
}).bind(this));
opts = null;
box = null;
onStateChanged.call(this, opts, {
self: this,
state: "open"
});
return this;
},
btnOnClick = function (e, opts, callBack, target, k) {
var that;
if (e.srcElement) e.target = e.srcElement;
pos = null;
box = null;
},
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);
target = U.findParentNode(e.target, function (target) {
if (target.getAttribute("data-dialog-btn")) {
return true;
}
});
opts = null;
box = null;
if (target) {
k = target.getAttribute("data-dialog-btn");
return this;
},
btnOnClick = function (e, opts, callBack, target, k) {
var that;
if (e.srcElement) e.target = e.srcElement;
target = U.findParentNode(e.target, function (target) {
if (target.getAttribute("data-dialog-btn")) {
return true;
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();
}
}
});
if (target) {
k = target.getAttribute("data-dialog-btn");
that = null;
opts = null;
callBack = null;
target = null;
k = null;
},
onKeyup = function (e, opts, callBack, target, k) {
var
that,
emptyKey = null;
that = {
self: this,
key: k, value: opts.btns[k],
dialogId: opts.id,
btnTarget: target
};
if (e.keyCode == ax5.info.eventKeys.ESC) {
this.close();
}
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 (e.keyCode == ax5.info.eventKeys.RETURN) {
that = {
self: this,
key: k, value: opts.btns[k],
dialogId: opts.id,
btnTarget: target
};
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();
that = null;
emptyKey = null;
return false;
}
if (callBack) callBack.call(that, k);
this.close();
}
if (callBack) callBack.call(that, k);
this.close();
}
}
that = null;
opts = null;
callBack = null;
target = null;
k = null;
},
onKeyup = function (e, opts, callBack, target, k) {
var
that,
that = null;
emptyKey = null;
opts = null;
callBack = null;
target = null;
k = 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
};
/**
* Preferences of dialog UI
* @method ax5dialog.setConfig
* @param {Object} config - 클래스 속성값
* @returns {ax5dialog}
* @example
* ```
* ```
*/
//== class body start
this.init = function () {
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();
}
}
this.onStateChanged = cfg.onStateChanged;
// this.onLoad = cfg.onLoad;
that = null;
emptyKey = null;
opts = null;
callBack = null;
target = null;
k = null;
};
/**
* Preferences of dialog UI
* @method ax5dialog.setConfig
* @param {Object} config - 클래스 속성값
* @returns {ax5dialog}
* @example
* ```
* ```
*/
//== class body start
this.init = function () {
this.onStateChanged = cfg.onStateChanged;
// this.onLoad = cfg.onLoad;
};
/**
* open the dialog of alert type
* @method ax5dialog.alert
* @param {Object|String} [{theme, title, msg, btns}|msg] - dialog 속성을 json으로 정의하거나 msg만 전달
* @param {Function} [callBack] - 사용자 확인 이벤트시 호출될 callBack 함수
* @returns {ax5dialog}
* @example
* ```
* myDialog.alert({
/**
* open the dialog of alert type
* @method ax5dialog.alert
* @param {Object|String} [{theme, title, msg, btns}|msg] - dialog 속성을 json으로 정의하거나 msg만 전달
* @param {Function} [callBack] - 사용자 확인 이벤트시 호출될 callBack 함수
* @returns {ax5dialog}
* @example
* ```
* myDialog.alert({
* title: 'app title',
* msg: 'alert'
* }, function(){});
* ```
*/
this.alert = function (opts, callBack, tryCount) {
if (U.isString(opts)) {
opts = {
title: cfg.title,
msg: opts
* ```
*/
this.alert = function (opts, callBack, tryCount) {
if (U.isString(opts)) {
opts = {
title: cfg.title,
msg: opts
}
}
}
if (this.activeDialog) {
// try one more
if (!tryCount) {
setTimeout((function () {
this.alert(opts, callBack, 1);
}).bind(this), Number(cfg.animateTime) + 100);
} else {
console.log(ax5.info.getError("ax5dialog", "501", "alert"));
if (this.activeDialog) {
// try one more
if (!tryCount) {
setTimeout((function () {
this.alert(opts, callBack, 1);
}).bind(this), Number(cfg.animateTime) + 100);
} else {
console.log(ax5.info.getError("ax5dialog", "501", "alert"));
}
return this;
}
return this;
}
self.dialogConfig = {};
jQuery.extend(true, self.dialogConfig, cfg, opts);
opts = self.dialogConfig;
self.dialogConfig = {};
jQuery.extend(true, self.dialogConfig, cfg, opts);
opts = self.dialogConfig;
opts.dialogType = "alert";
if (typeof opts.btns === "undefined") {
opts.btns = {
ok: {label: cfg.lang["ok"], theme: opts.theme}
};
}
open.call(this, opts, callBack);
opts.dialogType = "alert";
if (typeof opts.btns === "undefined") {
opts.btns = {
ok: {label: cfg.lang["ok"], theme: opts.theme}
};
}
open.call(this, opts, callBack);
opts = null;
callBack = null;
return this;
};
opts = null;
callBack = null;
return this;
};
/**
* open the dialog of confirm type
* @method ax5dialog.confirm
* @param {Object|String} [{theme, title, msg, btns}|msg] - dialog 속성을 json으로 정의하거나 msg만 전달
* @param {Function} [callBack] - 사용자 확인 이벤트시 호출될 callBack 함수
* @returns {ax5dialog}
* @example
* ```
* myDialog.confirm({
* title: 'app title',
* msg: 'confirm'
* }, function(){});
* ```
*/
this.confirm = function (opts, callBack, tryCount) {
if (U.isString(opts)) {
opts = {
title: cfg.title,
msg: opts
/**
* open the dialog of confirm type
* @method ax5dialog.confirm
* @param {Object|String} [{theme, title, msg, btns}|msg] - dialog 속성을 json으로 정의하거나 msg만 전달
* @param {Function} [callBack] - 사용자 확인 이벤트시 호출될 callBack 함수
* @returns {ax5dialog}
* @example
* ```
* myDialog.confirm({
* title: 'app title',
* msg: 'confirm'
* }, function(){});
* ```
*/
this.confirm = function (opts, callBack, tryCount) {
if (U.isString(opts)) {
opts = {
title: cfg.title,
msg: opts
}
}
}
if (this.activeDialog) {
// try one more
if (!tryCount) {
setTimeout((function () {
this.confirm(opts, callBack, 1);
}).bind(this), Number(cfg.animateTime) + 100);
} else {
console.log(ax5.info.getError("ax5dialog", "501", "confirm"));
if (this.activeDialog) {
// try one more
if (!tryCount) {
setTimeout((function () {
this.confirm(opts, callBack, 1);
}).bind(this), Number(cfg.animateTime) + 100);
} else {
console.log(ax5.info.getError("ax5dialog", "501", "confirm"));
}
return this;
}
return this;
}
self.dialogConfig = {};
jQuery.extend(true, self.dialogConfig, cfg, opts);
opts = self.dialogConfig;
self.dialogConfig = {};
jQuery.extend(true, self.dialogConfig, cfg, opts);
opts = self.dialogConfig;
opts.dialogType = "confirm";
opts.theme = (opts.theme || cfg.theme || "");
if (typeof opts.btns === "undefined") {
opts.btns = {
ok: {label: cfg.lang["ok"], theme: opts.theme},
cancel: {label: cfg.lang["cancel"]}
};
}
open.call(this, opts, callBack);
opts.dialogType = "confirm";
opts.theme = (opts.theme || cfg.theme || "");
if (typeof opts.btns === "undefined") {
opts.btns = {
ok: {label: cfg.lang["ok"], theme: opts.theme},
cancel: {label: cfg.lang["cancel"]}
};
}
open.call(this, opts, callBack);
opts = null;
callBack = null;
return this;
};
opts = null;
callBack = null;
return this;
};
/**
* open the dialog of prompt type
* @method ax5dialog.prompt
* @param {Object|String} [{theme, title, msg, btns, input}|msg] - dialog 속성을 json으로 정의하거나 msg만 전달
* @param {Function} [callBack] - 사용자 확인 이벤트시 호출될 callBack 함수
* @returns {ax5dialog}
* @example
* ```
* myDialog.prompt({
* title: 'app title',
* msg: 'alert'
* }, function(){});
* ```
*/
this.prompt = function (opts, callBack, tryCount) {
if (U.isString(opts)) {
opts = {
title: cfg.title,
msg: opts
/**
* open the dialog of prompt type
* @method ax5dialog.prompt
* @param {Object|String} [{theme, title, msg, btns, input}|msg] - dialog 속성을 json으로 정의하거나 msg만 전달
* @param {Function} [callBack] - 사용자 확인 이벤트시 호출될 callBack 함수
* @returns {ax5dialog}
* @example
* ```
* myDialog.prompt({
* title: 'app title',
* msg: 'alert'
* }, function(){});
* ```
*/
this.prompt = function (opts, callBack, tryCount) {
if (U.isString(opts)) {
opts = {
title: cfg.title,
msg: opts
}
}
}
if (this.activeDialog) {
// try one more
if (!tryCount) {
setTimeout((function () {
this.prompt(opts, callBack, 1);
}).bind(this), Number(cfg.animateTime) + 100);
} else {
console.log(ax5.info.getError("ax5dialog", "501", "prompt"));
if (this.activeDialog) {
// try one more
if (!tryCount) {
setTimeout((function () {
this.prompt(opts, callBack, 1);
}).bind(this), Number(cfg.animateTime) + 100);
} else {
console.log(ax5.info.getError("ax5dialog", "501", "prompt"));
}
return this;
}
return this;
}
self.dialogConfig = {};
jQuery.extend(true, self.dialogConfig, cfg, opts);
opts = self.dialogConfig;
self.dialogConfig = {};
jQuery.extend(true, self.dialogConfig, cfg, opts);
opts = self.dialogConfig;
opts.dialogType = "prompt";
opts.theme = (opts.theme || cfg.theme || "");
opts.dialogType = "prompt";
opts.theme = (opts.theme || cfg.theme || "");
if (typeof opts.input === "undefined") {
opts.input = {
value: {label: ""}
};
}
if (typeof opts.btns === "undefined") {
opts.btns = {
ok: {label: cfg.lang["ok"], theme: opts.theme},
cancel: {label: cfg.lang["cancel"]}
};
}
open.call(this, opts, callBack);
if (typeof opts.input === "undefined") {
opts.input = {
value: {label: ""}
};
}
if (typeof opts.btns === "undefined") {
opts.btns = {
ok: {label: cfg.lang["ok"], theme: opts.theme},
cancel: {label: cfg.lang["cancel"]}
};
}
open.call(this, opts, callBack);
opts = null;
callBack = null;
return this;
};
opts = null;
callBack = null;
return this;
};
/**
* close the dialog
* @method ax5dialog.close
* @returns {ax5dialog}
* @example
* ```
* myDialog.close();
* ```
*/
this.close = function (opts, that) {
if (this.activeDialog) {
opts = self.dialogConfig;
this.activeDialog.addClass("destroy");
jQuery(window).unbind("keydown.ax5dialog");
jQuery(window).unbind("resize.ax5dialog");
/**
* close the dialog
* @method ax5dialog.close
* @returns {ax5dialog}
* @example
* ```
* myDialog.close();
* ```
*/
this.close = function (opts, that) {
if (this.activeDialog) {
opts = self.dialogConfig;
this.activeDialog.addClass("destroy");
jQuery(window).unbind("keydown.ax5dialog");
jQuery(window).unbind("resize.ax5dialog");
setTimeout((function () {
this.activeDialog.remove();
this.activeDialog = null;
setTimeout((function () {
this.activeDialog.remove();
this.activeDialog = null;
that = {
self: this,
state: "close"
};
if (opts && opts.onStateChanged) {
opts.onStateChanged.call(that, that);
}
else if (this.onStateChanged) {
this.onStateChanged.call(that, that);
}
that = {
self: this,
state: "close"
};
if (opts && opts.onStateChanged) {
opts.onStateChanged.call(that, that);
}
else if (this.onStateChanged) {
this.onStateChanged.call(that, that);
}
opts = null;
that = null;
}).bind(this), cfg.animateTime);
}
return this;
};
opts = null;
that = null;
}).bind(this), cfg.animateTime);
}
return this;
};
// 클래스 생성자
this.main = (function () {
// 클래스 생성자
this.main = (function () {
root.dialog_instance = root.dialog_instance || [];
root.dialog_instance.push(this);
UI.dialog_instance = UI.dialog_instance || [];
UI.dialog_instance.push(this);
if (arguments && U.isObject(arguments[0])) {
this.setConfig(arguments[0]);
}
}).apply(this, arguments);
};
ROOT.dialog = (function () {
if (U.isFunction(_SUPER_)) ax5dialog.prototype = new _SUPER_(); // 상속
if (arguments && U.isObject(arguments[0])) {
this.setConfig(arguments[0]);
}
}).apply(this, arguments);
};
return ax5dialog;
})(); // ax5.ui에 연결
})());
})();

2

test/bower.json

@@ -5,3 +5,3 @@ {

"jquery": "^1.11.0",
"ax5core": "",
"ax5core": ">=1.0.9",
"ax5ui-mask": "",

@@ -8,0 +8,0 @@ "bootstrap": "^3.3.6",

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