From 9d6cbfb04efc39352f0a601e6999899e5f2da247 Mon Sep 17 00:00:00 2001 From: Thomas Jang Date: Sun, 31 Jul 2016 02:27:15 +0900 Subject: [PATCH] ax5modal --- bower.json | 4 +- dist/ax5modal.js | 906 ++++++++++++++++++++-------------------- dist/ax5modal.min.js | 2 +- package.json | 2 +- src/ax5modal.js | 952 +++++++++++++++++++++---------------------- test/bower.json | 4 +- 6 files changed, 925 insertions(+), 945 deletions(-) diff --git a/bower.json b/bower.json index c077d1e..5569fb1 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "ax5ui-modal", - "version": "0.7.1", + "version": "0.7.2", "authors": [ "ThomasJ " ], @@ -18,7 +18,7 @@ ], "dependencies": { "jquery": "^1.11.0", - "ax5core": "", + "ax5core": ">=1.0.9", "bootstrap": "^3.3.6" }, "license": "LGPLv3", diff --git a/dist/ax5modal.js b/dist/ax5modal.js index 929389a..cd6132f 100755 --- a/dist/ax5modal.js +++ b/dist/ax5modal.js @@ -3,521 +3,511 @@ // ax5.ui.modal (function () { - /** - * @class ax5modal - * @alias ax5.ui.modal - * @author tom@axisj.com - * @example - * ``` - * var my_modal = new ax5.ui.modal(); - * ``` - */ - var ROOT = ax5.ui; - var _SUPER_ = ax5.ui.root; + var UI = ax5.ui; var U = ax5.util; - var CLASS_NAME = "ax5modal"; - var VERSION = "0.7.1"; - - //== UI Class - var ax5modal = function ax5modal() { - var self = this, - cfg, - ENM = { - "mousedown": ax5.info.supportTouch ? "touchstart" : "mousedown", - "mousemove": ax5.info.supportTouch ? "touchmove" : "mousemove", - "mouseup": ax5.info.supportTouch ? "touchend" : "mouseup" - }, - getMousePosition = function getMousePosition(e) { - var mouseObj = e; - if ('changedTouches' in e) { - mouseObj = e.changedTouches[0]; - } - return { - clientX: mouseObj.clientX, - clientY: mouseObj.clientY - }; - }; - - if (_SUPER_) _SUPER_.call(this); // 부모호출 - this.name = CLASS_NAME; - this.version = VERSION; - this.instanceId = ax5.getGuid(); - - this.config = { - id: 'ax5-modal-' + this.instanceId, - position: { - left: "center", - top: "middle", - margin: 10 + UI.addClass({ + className: "modal", + version: "0.7.2" + }, function () { + /** + * @class ax5modal + * @alias ax5.ui.modal + * @author tom@axisj.com + * @example + * ``` + * var my_modal = new ax5.ui.modal(); + * ``` + */ + var ax5modal = function ax5modal() { + var self = this, + cfg, + ENM = { + "mousedown": ax5.info.supportTouch ? "touchstart" : "mousedown", + "mousemove": ax5.info.supportTouch ? "touchmove" : "mousemove", + "mouseup": ax5.info.supportTouch ? "touchend" : "mouseup" }, - minimizePosition: "bottom-right", - clickEventName: "click", //(('ontouchstart' in document.documentElement) ? "touchstart" : "click"), - theme: 'default', - width: 300, - height: 400, - closeToEsc: true, - animateTime: 250 - }; - this.activeModal = null; - this.$ = {}; // UI inside of the jQuery object store - - cfg = this.config; // extended config copy cfg - - var onStateChanged = function onStateChanged(opts, that) { - if (opts && opts.onStateChanged) { - opts.onStateChanged.call(that, that); - } else if (this.onStateChanged) { - this.onStateChanged.call(that, that); - } - return true; - }, - getContentTmpl = function getContentTmpl() { - return " \n
\n {{#header}}\n
\n {{{title}}}\n {{#btns}}\n
\n {{#@each}}\n {{{@value.label}}}\n {{/@each}}\n
\n {{/btns}}\n
\n {{/header}}\n
\n {{#iframe}}\n
\n \n
\n
\n \n {{#param}}\n {{#@each}}\n \n {{/@each}}\n {{/param}}\n
\n {{/iframe}}\n
\n
\n "; - }, - getContent = function getContent(modalId, opts) { - var data = { - modalId: modalId, - theme: opts.theme, - header: opts.header, - fullScreen: opts.fullScreen ? "fullscreen" : "", - styles: [], - iframe: opts.iframe + getMousePosition = function getMousePosition(e) { + var mouseObj = e; + if ('changedTouches' in e) { + mouseObj = e.changedTouches[0]; + } + return { + clientX: mouseObj.clientX, + clientY: mouseObj.clientY + }; }; - if (opts.zIndex) { - data.styles.push("z-index:" + opts.zIndex); - } - if (data.iframe && typeof data.iframe.param === "string") { - data.iframe.param = ax5.util.param(data.iframe.param); - } - - return ax5.mustache.render(getContentTmpl(), data); - }, - open = function open(opts, callBack) { - var that; - - jQuery(document.body).append(getContent.call(this, opts.id, opts)); + this.config = { + id: 'ax5-modal-' + this.instanceId, + position: { + left: "center", + top: "middle", + margin: 10 + }, + minimizePosition: "bottom-right", + clickEventName: "click", //(('ontouchstart' in document.documentElement) ? "touchstart" : "click"), + theme: 'default', + width: 300, + height: 400, + closeToEsc: true, + animateTime: 250 + }; + this.activeModal = null; + this.$ = {}; // UI inside of the jQuery object store - this.activeModal = jQuery('#' + opts.id); + cfg = this.config; // extended config copy cfg - // 파트수집 - this.$ = { - "root": this.activeModal.find('[data-modal-els="root"]'), - "header": this.activeModal.find('[data-modal-els="header"]'), - "body": this.activeModal.find('[data-modal-els="body"]') - }; + var onStateChanged = function onStateChanged(opts, that) { + if (opts && opts.onStateChanged) { + opts.onStateChanged.call(that, that); + } else if (this.onStateChanged) { + this.onStateChanged.call(that, that); + } + return true; + }, + getContentTmpl = function getContentTmpl() { + return " \n
\n {{#header}}\n
\n {{{title}}}\n {{#btns}}\n
\n {{#@each}}\n {{{@value.label}}}\n {{/@each}}\n
\n {{/btns}}\n
\n {{/header}}\n
\n {{#iframe}}\n
\n \n
\n
\n \n {{#param}}\n {{#@each}}\n \n {{/@each}}\n {{/param}}\n
\n {{/iframe}}\n
\n
\n "; + }, + getContent = function getContent(modalId, opts) { + var data = { + modalId: modalId, + theme: opts.theme, + header: opts.header, + fullScreen: opts.fullScreen ? "fullscreen" : "", + styles: [], + iframe: opts.iframe + }; - if (opts.iframe) { - this.$["iframe-wrap"] = this.activeModal.find('[data-modal-els="iframe-wrap"]'); - this.$["iframe"] = this.activeModal.find('[data-modal-els="iframe"]'); - this.$["iframe-form"] = this.activeModal.find('[data-modal-els="iframe-form"]'); - } - - //- position 정렬 - this.align(); - - that = { - self: this, - id: opts.id, - theme: opts.theme, - width: opts.width, - height: opts.height, - state: "open", - $: this.$ - }; + if (opts.zIndex) { + data.styles.push("z-index:" + opts.zIndex); + } + if (data.iframe && typeof data.iframe.param === "string") { + data.iframe.param = ax5.util.param(data.iframe.param); + } - if (opts.iframe) { + return ax5.mustache.render(getContentTmpl(), data); + }, + open = function open(opts, callBack) { + var that; - this.$["iframe-wrap"].css({ height: opts.height }); - this.$["iframe"].css({ height: opts.height }); + jQuery(document.body).append(getContent.call(this, opts.id, opts)); - // iframe content load - this.$["iframe-form"].attr({ "method": opts.iframe.method }); - this.$["iframe-form"].attr({ "target": opts.id + "-frame" }); - this.$["iframe-form"].attr({ "action": opts.iframe.url }); - this.$["iframe"].on("load", function () { - that.state = "load"; - onStateChanged.call(this, opts, that); - }.bind(this)); - this.$["iframe-form"].submit(); - } + this.activeModal = jQuery('#' + opts.id); - if (callBack) callBack.call(that); - onStateChanged.call(this, opts, that); + // 파트수집 + this.$ = { + "root": this.activeModal.find('[data-modal-els="root"]'), + "header": this.activeModal.find('[data-modal-els="header"]'), + "body": this.activeModal.find('[data-modal-els="body"]') + }; - // bind key event - if (opts.closeToEsc) { - jQuery(window).bind("keydown.ax-modal", function (e) { - onkeyup.call(this, e || window.event); - }.bind(this)); - } - jQuery(window).bind("resize.ax-modal", function (e) { - this.align(null, e || window.event); - }.bind(this)); - - this.activeModal.find("[data-modal-header-btn]").on(cfg.clickEventName, function (e) { - btnOnClick.call(this, e || window.event, opts); - }.bind(this)); - - this.$.header.bind(ENM["mousedown"], function (e) { - self.mousePosition = getMousePosition(e); - moveModal.on.call(self); - }).bind("dragstart", function (e) { - U.stopEvent(e); - return false; - }); - }, - 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-modal-header-btn")) { - return true; + if (opts.iframe) { + this.$["iframe-wrap"] = this.activeModal.find('[data-modal-els="iframe-wrap"]'); + this.$["iframe"] = this.activeModal.find('[data-modal-els="iframe"]'); + this.$["iframe-form"] = this.activeModal.find('[data-modal-els="iframe-form"]'); } - }); - if (target) { - k = target.getAttribute("data-modal-header-btn"); + //- position 정렬 + this.align(); that = { self: this, - key: k, value: opts.header.btns[k], - dialogId: opts.id, - btnTarget: target + id: opts.id, + theme: opts.theme, + width: opts.width, + height: opts.height, + state: "open", + $: this.$ }; - if (opts.header.btns[k].onClick) { - opts.header.btns[k].onClick.call(that, k); + if (opts.iframe) { + + this.$["iframe-wrap"].css({ height: opts.height }); + this.$["iframe"].css({ height: opts.height }); + + // iframe content load + this.$["iframe-form"].attr({ "method": opts.iframe.method }); + this.$["iframe-form"].attr({ "target": opts.id + "-frame" }); + this.$["iframe-form"].attr({ "action": opts.iframe.url }); + this.$["iframe"].on("load", function () { + that.state = "load"; + onStateChanged.call(this, opts, that); + }.bind(this)); + this.$["iframe-form"].submit(); } - } - - that = null; - opts = null; - callBack = null; - target = null; - k = null; - }, - onkeyup = function onkeyup(e) { - if (e.keyCode == ax5.info.eventKeys.ESC) { - this.close(); - } - }, - alignProcessor = { - "top-left": function topLeft() { - this.align({ left: "left", top: "top" }); - }, - "top-right": function topRight() { - this.align({ left: "right", top: "top" }); - }, - "bottom-left": function bottomLeft() { - this.align({ left: "left", top: "bottom" }); - }, - "bottom-right": function bottomRight() { - this.align({ left: "right", top: "bottom" }); + + if (callBack) callBack.call(that); + onStateChanged.call(this, opts, that); + + // bind key event + if (opts.closeToEsc) { + jQuery(window).bind("keydown.ax-modal", function (e) { + onkeyup.call(this, e || window.event); + }.bind(this)); + } + jQuery(window).bind("resize.ax-modal", function (e) { + this.align(null, e || window.event); + }.bind(this)); + + this.activeModal.find("[data-modal-header-btn]").on(cfg.clickEventName, function (e) { + btnOnClick.call(this, e || window.event, opts); + }.bind(this)); + + this.$.header.bind(ENM["mousedown"], function (e) { + self.mousePosition = getMousePosition(e); + moveModal.on.call(self); + }).bind("dragstart", function (e) { + U.stopEvent(e); + return false; + }); }, - "center-middle": function centerMiddle() { - this.align({ left: "center", top: "middle" }); - } - }, - moveModal = { - "on": function on() { - var modalOffset = this.activeModal.position(); - var modalBox = { - width: this.activeModal.outerWidth(), height: this.activeModal.outerHeight() - }; - var windowBox = { - width: jQuery(window).width(), - height: jQuery(window).height() - }; - var getResizerPosition = function getResizerPosition(e) { - self.__dx = e.clientX - self.mousePosition.clientX; - self.__dy = e.clientY - self.mousePosition.clientY; - - var minX = 0; - var maxX = windowBox.width - modalBox.width; - var minY = 0; - var maxY = windowBox.height - modalBox.height; - - if (minX > modalOffset.left + self.__dx) { - self.__dx = -modalOffset.left; - } else if (maxX < modalOffset.left + self.__dx) { - self.__dx = maxX - modalOffset.left; - } + btnOnClick = function btnOnClick(e, opts, callBack, target, k) { + var that; + if (e.srcElement) e.target = e.srcElement; - if (minY > modalOffset.top + self.__dy) { - self.__dy = -modalOffset.top; - } else if (maxY < modalOffset.top + self.__dy) { - self.__dy = maxY - modalOffset.top; + target = U.findParentNode(e.target, function (target) { + if (target.getAttribute("data-modal-header-btn")) { + return true; } + }); + + if (target) { + k = target.getAttribute("data-modal-header-btn"); - return { - left: modalOffset.left + self.__dx + $(document).scrollLeft(), - top: modalOffset.top + self.__dy + $(document).scrollTop() + that = { + self: this, + key: k, value: opts.header.btns[k], + dialogId: opts.id, + btnTarget: target }; - }; - self.__dx = 0; // 변화량 X - self.__dy = 0; // 변화량 Y - - jQuery(document.body).bind(ENM["mousemove"] + ".ax5modal-" + cfg.id, function (e) { - if (!self.resizer) { - // self.resizerBg : body 가 window보다 작을 때 문제 해결을 위한 DIV - self.resizerBg = jQuery('
'); - self.resizer = jQuery('
'); - self.resizer.css({ - left: modalOffset.left, - top: modalOffset.top, - width: modalBox.width, - height: modalBox.height - }); - jQuery(document.body).append(self.resizerBg).append(self.resizer); - self.activeModal.addClass("draged"); + if (opts.header.btns[k].onClick) { + opts.header.btns[k].onClick.call(that, k); } - self.resizer.css(getResizerPosition(e)); - }).bind(ENM["mouseup"] + ".ax5layout-" + this.instanceId, function (e) { - moveModal.off.call(self); - }).bind("mouseleave.ax5layout-" + this.instanceId, function (e) { - moveModal.off.call(self); - }); + } - jQuery(document.body).attr('unselectable', 'on').css('user-select', 'none').on('selectstart', false); + that = null; + opts = null; + callBack = null; + target = null; + k = null; }, - "off": function off() { - var setModalPosition = function setModalPosition() { - //console.log(this.activeModal.offset(), this.__dx); - var box = this.activeModal.offset(); - box.left += this.__dx - $(document).scrollLeft(); - box.top += this.__dy - $(document).scrollTop(); - this.activeModal.css(box); - }; - - if (this.resizer) { - this.activeModal.removeClass("draged"); - this.resizer.remove(); - this.resizer = null; - this.resizerBg.remove(); - this.resizerBg = null; - setModalPosition.call(this); - //this.align(); + onkeyup = function onkeyup(e) { + if (e.keyCode == ax5.info.eventKeys.ESC) { + this.close(); } + }, + alignProcessor = { + "top-left": function topLeft() { + this.align({ left: "left", top: "top" }); + }, + "top-right": function topRight() { + this.align({ left: "right", top: "top" }); + }, + "bottom-left": function bottomLeft() { + this.align({ left: "left", top: "bottom" }); + }, + "bottom-right": function bottomRight() { + this.align({ left: "right", top: "bottom" }); + }, + "center-middle": function centerMiddle() { + this.align({ left: "center", top: "middle" }); + } + }, + moveModal = { + "on": function on() { + var modalOffset = this.activeModal.position(); + var modalBox = { + width: this.activeModal.outerWidth(), height: this.activeModal.outerHeight() + }; + var windowBox = { + width: jQuery(window).width(), + height: jQuery(window).height() + }; + var getResizerPosition = function getResizerPosition(e) { + self.__dx = e.clientX - self.mousePosition.clientX; + self.__dy = e.clientY - self.mousePosition.clientY; + + var minX = 0; + var maxX = windowBox.width - modalBox.width; + var minY = 0; + var maxY = windowBox.height - modalBox.height; + + if (minX > modalOffset.left + self.__dx) { + self.__dx = -modalOffset.left; + } else if (maxX < modalOffset.left + self.__dx) { + self.__dx = maxX - modalOffset.left; + } + + if (minY > modalOffset.top + self.__dy) { + self.__dy = -modalOffset.top; + } else if (maxY < modalOffset.top + self.__dy) { + self.__dy = maxY - modalOffset.top; + } + + return { + left: modalOffset.left + self.__dx + $(document).scrollLeft(), + top: modalOffset.top + self.__dy + $(document).scrollTop() + }; + }; - jQuery(document.body).unbind(ENM["mousemove"] + ".ax5modal-" + cfg.id).unbind(ENM["mouseup"] + ".ax5modal-" + cfg.id).unbind("mouseleave.ax5modal-" + cfg.id); - - jQuery(document.body).removeAttr('unselectable').css('user-select', 'auto').off('selectstart'); - } - }; - - /// private end + self.__dx = 0; // 변화량 X + self.__dy = 0; // 변화량 Y + + jQuery(document.body).bind(ENM["mousemove"] + ".ax5modal-" + cfg.id, function (e) { + if (!self.resizer) { + // self.resizerBg : body 가 window보다 작을 때 문제 해결을 위한 DIV + self.resizerBg = jQuery('
'); + self.resizer = jQuery('
'); + self.resizer.css({ + left: modalOffset.left, + top: modalOffset.top, + width: modalBox.width, + height: modalBox.height + }); + jQuery(document.body).append(self.resizerBg).append(self.resizer); + self.activeModal.addClass("draged"); + } + self.resizer.css(getResizerPosition(e)); + }).bind(ENM["mouseup"] + ".ax5layout-" + this.instanceId, function (e) { + moveModal.off.call(self); + }).bind("mouseleave.ax5layout-" + this.instanceId, function (e) { + moveModal.off.call(self); + }); - /** - * Preferences of modal UI - * @method ax5modal.setConfig - * @param {Object} config - 클래스 속성값 - * @returns {ax5modal} - * @example - * ``` - * ``` - */ - //== class body start - this.init = function () { - this.onStateChanged = cfg.onStateChanged; - }; + jQuery(document.body).attr('unselectable', 'on').css('user-select', 'none').on('selectstart', false); + }, + "off": function off() { + var setModalPosition = function setModalPosition() { + //console.log(this.activeModal.offset(), this.__dx); + var box = this.activeModal.offset(); + box.left += this.__dx - $(document).scrollLeft(); + box.top += this.__dy - $(document).scrollTop(); + this.activeModal.css(box); + }; - /** - * open the modal - * @method ax5modal.open - * @returns {ax5modal} - * @example - * ``` - * my_modal.open(); - * ``` - */ - this.open = function (opts, callBack) { - if (!this.activeModal) { - opts = self.modalConfig = jQuery.extend(true, {}, cfg, opts); - open.call(this, opts, callBack); - } - return this; - }; + if (this.resizer) { + this.activeModal.removeClass("draged"); + this.resizer.remove(); + this.resizer = null; + this.resizerBg.remove(); + this.resizerBg = null; + setModalPosition.call(this); + //this.align(); + } - /** - * close the modal - * @method ax5modal.close - * @returns {ax5modal} - * @example - * ``` - * my_modal.close(); - * ``` - */ - this.close = function (opts) { - if (this.activeModal) { - opts = self.modalConfig; - this.activeModal.addClass("destroy"); - jQuery(window).unbind("keydown.ax-modal"); - jQuery(window).unbind("resize.ax-modal"); - - setTimeout(function () { - this.activeModal.remove(); - this.activeModal = null; - onStateChanged.call(this, opts, { - self: this, - state: "close" - }); - }.bind(this), cfg.animateTime); - } - return this; - }; + jQuery(document.body).unbind(ENM["mousemove"] + ".ax5modal-" + cfg.id).unbind(ENM["mouseup"] + ".ax5modal-" + cfg.id).unbind("mouseleave.ax5modal-" + cfg.id); - /** - * @method ax5modal.minimize - * @returns {axClass} - */ - this.minimize = function () { + jQuery(document.body).removeAttr('unselectable').css('user-select', 'auto').off('selectstart'); + } + }; - return function (minimizePosition) { - var opts = self.modalConfig; - if (typeof minimizePosition === "undefined") minimizePosition = cfg.minimizePosition; - this.minimized = true; - this.$.body.hide(); - self.modalConfig.originalHeight = opts.height; - self.modalConfig.height = 0; - alignProcessor[minimizePosition].call(this); - - onStateChanged.call(this, opts, { - self: this, - state: "minimize" - }); + /// private end + + /** + * Preferences of modal UI + * @method ax5modal.setConfig + * @param {Object} config - 클래스 속성값 + * @returns {ax5modal} + * @example + * ``` + * ``` + */ + //== class body start + this.init = function () { + this.onStateChanged = cfg.onStateChanged; + }; + /** + * open the modal + * @method ax5modal.open + * @returns {ax5modal} + * @example + * ``` + * my_modal.open(); + * ``` + */ + this.open = function (opts, callBack) { + if (!this.activeModal) { + opts = self.modalConfig = jQuery.extend(true, {}, cfg, opts); + open.call(this, opts, callBack); + } return this; }; - }(); - /** - * @method ax5modal.maximize - * @returns {axClass} - */ - this.maximize = function () { - var opts = self.modalConfig; - if (this.minimized) { - this.minimized = false; - this.$.body.show(); - self.modalConfig.height = self.modalConfig.originalHeight; - self.modalConfig.originalHeight = undefined; - - this.align({ left: "center", top: "middle" }); - onStateChanged.call(this, opts, { - self: this, - state: "restore" - }); - } - return this; - }; - - /** - * setCSS - * @method ax5modal.css - * @param {Object} css - - * @returns {ax5modal} - */ - this.css = function (css) { - if (this.activeModal && !self.fullScreen) { - this.activeModal.css(css); - if (css.width) { - self.modalConfig.width = this.activeModal.width(); - } - if (css.height) { - self.modalConfig.height = this.activeModal.height(); - if (this.$["iframe"]) { - this.$["iframe-wrap"].css({ height: self.modalConfig.height }); - this.$["iframe"].css({ height: self.modalConfig.height }); - } + /** + * close the modal + * @method ax5modal.close + * @returns {ax5modal} + * @example + * ``` + * my_modal.close(); + * ``` + */ + this.close = function (opts) { + if (this.activeModal) { + opts = self.modalConfig; + this.activeModal.addClass("destroy"); + jQuery(window).unbind("keydown.ax-modal"); + jQuery(window).unbind("resize.ax-modal"); + + setTimeout(function () { + this.activeModal.remove(); + this.activeModal = null; + onStateChanged.call(this, opts, { + self: this, + state: "close" + }); + }.bind(this), cfg.animateTime); } - } - return this; - }; + return this; + }; - /** - * @mothod ax5modal.align - * @param position - * @param e - * @returns {ax5modal} - */ - this.align = function () { + /** + * @method ax5modal.minimize + * @returns {axClass} + */ + this.minimize = function () { + + return function (minimizePosition) { + var opts = self.modalConfig; + if (typeof minimizePosition === "undefined") minimizePosition = cfg.minimizePosition; + this.minimized = true; + this.$.body.hide(); + self.modalConfig.originalHeight = opts.height; + self.modalConfig.height = 0; + alignProcessor[minimizePosition].call(this); - return function (position, e) { - if (!this.activeModal) return this; + onStateChanged.call(this, opts, { + self: this, + state: "minimize" + }); - var opts = self.modalConfig, - box = { - width: opts.width, - height: opts.height + return this; }; + }(); - if (opts.fullScreen) { - if (opts.header) this.$.header.hide(); - box.width = jQuery(window).width(); - box.height = jQuery(window).height(); - box.left = 0; - box.top = 0; - - if (opts.iframe) { - this.$["iframe-wrap"].css({ height: box.height }); - this.$["iframe"].css({ height: box.height }); - } - } else { - if (position) { - jQuery.extend(true, opts.position, position); - } + /** + * @method ax5modal.maximize + * @returns {axClass} + */ + this.maximize = function () { + var opts = self.modalConfig; + if (this.minimized) { + this.minimized = false; + this.$.body.show(); + self.modalConfig.height = self.modalConfig.originalHeight; + self.modalConfig.originalHeight = undefined; - if (opts.header) { - box.height += this.$.header.outerHeight(); - } + this.align({ left: "center", top: "middle" }); + onStateChanged.call(this, opts, { + self: this, + state: "restore" + }); + } + return this; + }; - //- position 정렬 - if (opts.position.left == "left") { - box.left = opts.position.margin || 0; - } else if (opts.position.left == "right") { - // window.innerWidth; - box.left = jQuery(window).width() - box.width - (opts.position.margin || 0); - } else if (opts.position.left == "center") { - box.left = jQuery(window).width() / 2 - box.width / 2; - } else { - box.left = opts.position.left || 0; + /** + * setCSS + * @method ax5modal.css + * @param {Object} css - + * @returns {ax5modal} + */ + this.css = function (css) { + if (this.activeModal && !self.fullScreen) { + this.activeModal.css(css); + if (css.width) { + self.modalConfig.width = this.activeModal.width(); } - - if (opts.position.top == "top") { - box.top = opts.position.margin || 0; - } else if (opts.position.top == "bottom") { - box.top = jQuery(window).height() - box.height - (opts.position.margin || 0); - } else if (opts.position.top == "middle") { - box.top = jQuery(window).height() / 2 - box.height / 2; - } else { - box.top = opts.position.top || 0; + if (css.height) { + self.modalConfig.height = this.activeModal.height(); + if (this.$["iframe"]) { + this.$["iframe-wrap"].css({ height: self.modalConfig.height }); + this.$["iframe"].css({ height: self.modalConfig.height }); + } } } - - this.activeModal.css(box); return this; }; - }(); - // 클래스 생성자 - this.main = function () { + /** + * @mothod ax5modal.align + * @param position + * @param e + * @returns {ax5modal} + */ + this.align = function () { + + return function (position, e) { + if (!this.activeModal) return this; + + var opts = self.modalConfig, + box = { + width: opts.width, + height: opts.height + }; - root.modal_instance = root.modal_instance || []; - root.modal_instance.push(this); + if (opts.fullScreen) { + if (opts.header) this.$.header.hide(); + box.width = jQuery(window).width(); + box.height = jQuery(window).height(); + box.left = 0; + box.top = 0; + + if (opts.iframe) { + this.$["iframe-wrap"].css({ height: box.height }); + this.$["iframe"].css({ height: box.height }); + } + } else { + if (position) { + jQuery.extend(true, opts.position, position); + } + + if (opts.header) { + box.height += this.$.header.outerHeight(); + } + + //- position 정렬 + if (opts.position.left == "left") { + box.left = opts.position.margin || 0; + } else if (opts.position.left == "right") { + // window.innerWidth; + box.left = jQuery(window).width() - box.width - (opts.position.margin || 0); + } else if (opts.position.left == "center") { + box.left = jQuery(window).width() / 2 - box.width / 2; + } else { + box.left = opts.position.left || 0; + } + + if (opts.position.top == "top") { + box.top = opts.position.margin || 0; + } else if (opts.position.top == "bottom") { + box.top = jQuery(window).height() - box.height - (opts.position.margin || 0); + } else if (opts.position.top == "middle") { + box.top = jQuery(window).height() / 2 - box.height / 2; + } else { + box.top = opts.position.top || 0; + } + } + + this.activeModal.css(box); + return this; + }; + }(); + + // 클래스 생성자 + this.main = function () { - if (arguments && U.isObject(arguments[0])) { - this.setConfig(arguments[0]); - } - }.apply(this, arguments); - }; - //== UI Class + UI.modal_instance = UI.modal_instance || []; + UI.modal_instance.push(this); - ROOT.modal = function () { - if (U.isFunction(_SUPER_)) ax5modal.prototype = new _SUPER_(); // 상속 + if (arguments && U.isObject(arguments[0])) { + this.setConfig(arguments[0]); + } + }.apply(this, arguments); + }; return ax5modal; - }(); // ax5.ui에 연결 + }()); })(); \ No newline at end of file diff --git a/dist/ax5modal.min.js b/dist/ax5modal.min.js index 5805ab8..90025e1 100755 --- a/dist/ax5modal.min.js +++ b/dist/ax5modal.min.js @@ -1 +1 @@ -"use strict";!function(){var t=ax5.ui,i=ax5.ui.root,e=ax5.util,o="ax5modal",a="0.7.1",n=function(){var t,n=this,d={mousedown:ax5.info.supportTouch?"touchstart":"mousedown",mousemove:ax5.info.supportTouch?"touchmove":"mousemove",mouseup:ax5.info.supportTouch?"touchend":"mouseup"},s=function(t){var i=t;return"changedTouches"in t&&(i=t.changedTouches[0]),{clientX:i.clientX,clientY:i.clientY}};i&&i.call(this),this.name=o,this.version=a,this.instanceId=ax5.getGuid(),this.config={id:"ax5-modal-"+this.instanceId,position:{left:"center",top:"middle",margin:10},minimizePosition:"bottom-right",clickEventName:"click",theme:"default",width:300,height:400,closeToEsc:!0,animateTime:250},this.activeModal=null,this.$={},t=this.config;var l=function(t,i){return t&&t.onStateChanged?t.onStateChanged.call(i,i):this.onStateChanged&&this.onStateChanged.call(i,i),!0},h=function(){return' \n
\n {{#header}}\n
\n {{{title}}}\n {{#btns}}\n
\n {{#@each}}\n {{{@value.label}}}\n {{/@each}}\n
\n {{/btns}}\n
\n {{/header}}\n
\n {{#iframe}}\n
\n \n
\n
\n \n {{#param}}\n {{#@each}}\n \n {{/@each}}\n {{/param}}\n
\n {{/iframe}}\n
\n
\n '},r=function(t,i){var e={modalId:t,theme:i.theme,header:i.header,fullScreen:i.fullScreen?"fullscreen":"",styles:[],iframe:i.iframe};return i.zIndex&&e.styles.push("z-index:"+i.zIndex),e.iframe&&"string"==typeof e.iframe.param&&(e.iframe.param=ax5.util.param(e.iframe.param)),ax5.mustache.render(h(),e)},m=function(i,o){var a;jQuery(document.body).append(r.call(this,i.id,i)),this.activeModal=jQuery("#"+i.id),this.$={root:this.activeModal.find('[data-modal-els="root"]'),header:this.activeModal.find('[data-modal-els="header"]'),body:this.activeModal.find('[data-modal-els="body"]')},i.iframe&&(this.$["iframe-wrap"]=this.activeModal.find('[data-modal-els="iframe-wrap"]'),this.$.iframe=this.activeModal.find('[data-modal-els="iframe"]'),this.$["iframe-form"]=this.activeModal.find('[data-modal-els="iframe-form"]')),this.align(),a={self:this,id:i.id,theme:i.theme,width:i.width,height:i.height,state:"open",$:this.$},i.iframe&&(this.$["iframe-wrap"].css({height:i.height}),this.$.iframe.css({height:i.height}),this.$["iframe-form"].attr({method:i.iframe.method}),this.$["iframe-form"].attr({target:i.id+"-frame"}),this.$["iframe-form"].attr({action:i.iframe.url}),this.$.iframe.on("load",function(){a.state="load",l.call(this,i,a)}.bind(this)),this.$["iframe-form"].submit()),o&&o.call(a),l.call(this,i,a),i.closeToEsc&&jQuery(window).bind("keydown.ax-modal",function(t){u.call(this,t||window.event)}.bind(this)),jQuery(window).bind("resize.ax-modal",function(t){this.align(null,t||window.event)}.bind(this)),this.activeModal.find("[data-modal-header-btn]").on(t.clickEventName,function(t){c.call(this,t||window.event,i)}.bind(this)),this.$.header.bind(d.mousedown,function(t){n.mousePosition=s(t),g.on.call(n)}).bind("dragstart",function(t){return e.stopEvent(t),!1})},c=function(t,i,o,a,n){var d;t.srcElement&&(t.target=t.srcElement),a=e.findParentNode(t.target,function(t){return t.getAttribute("data-modal-header-btn")?!0:void 0}),a&&(n=a.getAttribute("data-modal-header-btn"),d={self:this,key:n,value:i.header.btns[n],dialogId:i.id,btnTarget:a},i.header.btns[n].onClick&&i.header.btns[n].onClick.call(d,n)),d=null,i=null,o=null,a=null,n=null},u=function(t){t.keyCode==ax5.info.eventKeys.ESC&&this.close()},f={"top-left":function(){this.align({left:"left",top:"top"})},"top-right":function(){this.align({left:"right",top:"top"})},"bottom-left":function(){this.align({left:"left",top:"bottom"})},"bottom-right":function(){this.align({left:"right",top:"bottom"})},"center-middle":function(){this.align({left:"center",top:"middle"})}},g={on:function(){var i=this.activeModal.position(),e={width:this.activeModal.outerWidth(),height:this.activeModal.outerHeight()},o={width:jQuery(window).width(),height:jQuery(window).height()},a=function(t){n.__dx=t.clientX-n.mousePosition.clientX,n.__dy=t.clientY-n.mousePosition.clientY;var a=0,d=o.width-e.width,s=0,l=o.height-e.height;return a>i.left+n.__dx?n.__dx=-i.left:di.top+n.__dy?n.__dy=-i.top:l'),n.resizer=jQuery('
'),n.resizer.css({left:i.left,top:i.top,width:e.width,height:e.height}),jQuery(document.body).append(n.resizerBg).append(n.resizer),n.activeModal.addClass("draged")),n.resizer.css(a(t))}).bind(d.mouseup+".ax5layout-"+this.instanceId,function(t){g.off.call(n)}).bind("mouseleave.ax5layout-"+this.instanceId,function(t){g.off.call(n)}),jQuery(document.body).attr("unselectable","on").css("user-select","none").on("selectstart",!1)},off:function(){var i=function(){var t=this.activeModal.offset();t.left+=this.__dx-$(document).scrollLeft(),t.top+=this.__dy-$(document).scrollTop(),this.activeModal.css(t)};this.resizer&&(this.activeModal.removeClass("draged"),this.resizer.remove(),this.resizer=null,this.resizerBg.remove(),this.resizerBg=null,i.call(this)),jQuery(document.body).unbind(d.mousemove+".ax5modal-"+t.id).unbind(d.mouseup+".ax5modal-"+t.id).unbind("mouseleave.ax5modal-"+t.id),jQuery(document.body).removeAttr("unselectable").css("user-select","auto").off("selectstart")}};this.init=function(){this.onStateChanged=t.onStateChanged},this.open=function(i,e){return this.activeModal||(i=n.modalConfig=jQuery.extend(!0,{},t,i),m.call(this,i,e)),this},this.close=function(i){return this.activeModal&&(i=n.modalConfig,this.activeModal.addClass("destroy"),jQuery(window).unbind("keydown.ax-modal"),jQuery(window).unbind("resize.ax-modal"),setTimeout(function(){this.activeModal.remove(),this.activeModal=null,l.call(this,i,{self:this,state:"close"})}.bind(this),t.animateTime)),this},this.minimize=function(){return function(i){var e=n.modalConfig;return"undefined"==typeof i&&(i=t.minimizePosition),this.minimized=!0,this.$.body.hide(),n.modalConfig.originalHeight=e.height,n.modalConfig.height=0,f[i].call(this),l.call(this,e,{self:this,state:"minimize"}),this}}(),this.maximize=function(){var t=n.modalConfig;return this.minimized&&(this.minimized=!1,this.$.body.show(),n.modalConfig.height=n.modalConfig.originalHeight,n.modalConfig.originalHeight=void 0,this.align({left:"center",top:"middle"}),l.call(this,t,{self:this,state:"restore"})),this},this.css=function(t){return this.activeModal&&!n.fullScreen&&(this.activeModal.css(t),t.width&&(n.modalConfig.width=this.activeModal.width()),t.height&&(n.modalConfig.height=this.activeModal.height(),this.$.iframe&&(this.$["iframe-wrap"].css({height:n.modalConfig.height}),this.$.iframe.css({height:n.modalConfig.height})))),this},this.align=function(){return function(t,i){if(!this.activeModal)return this;var e=n.modalConfig,o={width:e.width,height:e.height};return e.fullScreen?(e.header&&this.$.header.hide(),o.width=jQuery(window).width(),o.height=jQuery(window).height(),o.left=0,o.top=0,e.iframe&&(this.$["iframe-wrap"].css({height:o.height}),this.$.iframe.css({height:o.height}))):(t&&jQuery.extend(!0,e.position,t),e.header&&(o.height+=this.$.header.outerHeight()),"left"==e.position.left?o.left=e.position.margin||0:"right"==e.position.left?o.left=jQuery(window).width()-o.width-(e.position.margin||0):"center"==e.position.left?o.left=jQuery(window).width()/2-o.width/2:o.left=e.position.left||0,"top"==e.position.top?o.top=e.position.margin||0:"bottom"==e.position.top?o.top=jQuery(window).height()-o.height-(e.position.margin||0):"middle"==e.position.top?o.top=jQuery(window).height()/2-o.height/2:o.top=e.position.top||0),this.activeModal.css(o),this}}(),this.main=function(){root.modal_instance=root.modal_instance||[],root.modal_instance.push(this),arguments&&e.isObject(arguments[0])&&this.setConfig(arguments[0])}.apply(this,arguments)};t.modal=function(){return e.isFunction(i)&&(n.prototype=new i),n}()}(); \ No newline at end of file +"use strict";!function(){var t=ax5.ui,e=ax5.util;t.addClass({className:"modal",version:"0.7.2"},function(){var i=function(){var i,a=this,o={mousedown:ax5.info.supportTouch?"touchstart":"mousedown",mousemove:ax5.info.supportTouch?"touchmove":"mousemove",mouseup:ax5.info.supportTouch?"touchend":"mouseup"},n=function(t){var e=t;return"changedTouches"in t&&(e=t.changedTouches[0]),{clientX:e.clientX,clientY:e.clientY}};this.config={id:"ax5-modal-"+this.instanceId,position:{left:"center",top:"middle",margin:10},minimizePosition:"bottom-right",clickEventName:"click",theme:"default",width:300,height:400,closeToEsc:!0,animateTime:250},this.activeModal=null,this.$={},i=this.config;var d=function(t,e){return t&&t.onStateChanged?t.onStateChanged.call(e,e):this.onStateChanged&&this.onStateChanged.call(e,e),!0},s=function(){return' \n
\n {{#header}}\n
\n {{{title}}}\n {{#btns}}\n
\n {{#@each}}\n {{{@value.label}}}\n {{/@each}}\n
\n {{/btns}}\n
\n {{/header}}\n
\n {{#iframe}}\n
\n \n
\n
\n \n {{#param}}\n {{#@each}}\n \n {{/@each}}\n {{/param}}\n
\n {{/iframe}}\n
\n
\n '},l=function(t,e){var i={modalId:t,theme:e.theme,header:e.header,fullScreen:e.fullScreen?"fullscreen":"",styles:[],iframe:e.iframe};return e.zIndex&&i.styles.push("z-index:"+e.zIndex),i.iframe&&"string"==typeof i.iframe.param&&(i.iframe.param=ax5.util.param(i.iframe.param)),ax5.mustache.render(s(),i)},h=function(t,s){var h;jQuery(document.body).append(l.call(this,t.id,t)),this.activeModal=jQuery("#"+t.id),this.$={root:this.activeModal.find('[data-modal-els="root"]'),header:this.activeModal.find('[data-modal-els="header"]'),body:this.activeModal.find('[data-modal-els="body"]')},t.iframe&&(this.$["iframe-wrap"]=this.activeModal.find('[data-modal-els="iframe-wrap"]'),this.$.iframe=this.activeModal.find('[data-modal-els="iframe"]'),this.$["iframe-form"]=this.activeModal.find('[data-modal-els="iframe-form"]')),this.align(),h={self:this,id:t.id,theme:t.theme,width:t.width,height:t.height,state:"open",$:this.$},t.iframe&&(this.$["iframe-wrap"].css({height:t.height}),this.$.iframe.css({height:t.height}),this.$["iframe-form"].attr({method:t.iframe.method}),this.$["iframe-form"].attr({target:t.id+"-frame"}),this.$["iframe-form"].attr({action:t.iframe.url}),this.$.iframe.on("load",function(){h.state="load",d.call(this,t,h)}.bind(this)),this.$["iframe-form"].submit()),s&&s.call(h),d.call(this,t,h),t.closeToEsc&&jQuery(window).bind("keydown.ax-modal",function(t){m.call(this,t||window.event)}.bind(this)),jQuery(window).bind("resize.ax-modal",function(t){this.align(null,t||window.event)}.bind(this)),this.activeModal.find("[data-modal-header-btn]").on(i.clickEventName,function(e){r.call(this,e||window.event,t)}.bind(this)),this.$.header.bind(o.mousedown,function(t){a.mousePosition=n(t),u.on.call(a)}).bind("dragstart",function(t){return e.stopEvent(t),!1})},r=function(t,i,a,o,n){var d;t.srcElement&&(t.target=t.srcElement),o=e.findParentNode(t.target,function(t){return t.getAttribute("data-modal-header-btn")?!0:void 0}),o&&(n=o.getAttribute("data-modal-header-btn"),d={self:this,key:n,value:i.header.btns[n],dialogId:i.id,btnTarget:o},i.header.btns[n].onClick&&i.header.btns[n].onClick.call(d,n)),d=null,i=null,a=null,o=null,n=null},m=function(t){t.keyCode==ax5.info.eventKeys.ESC&&this.close()},c={"top-left":function(){this.align({left:"left",top:"top"})},"top-right":function(){this.align({left:"right",top:"top"})},"bottom-left":function(){this.align({left:"left",top:"bottom"})},"bottom-right":function(){this.align({left:"right",top:"bottom"})},"center-middle":function(){this.align({left:"center",top:"middle"})}},u={on:function(){var t=this.activeModal.position(),e={width:this.activeModal.outerWidth(),height:this.activeModal.outerHeight()},n={width:jQuery(window).width(),height:jQuery(window).height()},d=function(i){a.__dx=i.clientX-a.mousePosition.clientX,a.__dy=i.clientY-a.mousePosition.clientY;var o=0,d=n.width-e.width,s=0,l=n.height-e.height;return o>t.left+a.__dx?a.__dx=-t.left:dt.top+a.__dy?a.__dy=-t.top:l'),a.resizer=jQuery('
'),a.resizer.css({left:t.left,top:t.top,width:e.width,height:e.height}),jQuery(document.body).append(a.resizerBg).append(a.resizer),a.activeModal.addClass("draged")),a.resizer.css(d(i))}).bind(o.mouseup+".ax5layout-"+this.instanceId,function(t){u.off.call(a)}).bind("mouseleave.ax5layout-"+this.instanceId,function(t){u.off.call(a)}),jQuery(document.body).attr("unselectable","on").css("user-select","none").on("selectstart",!1)},off:function(){var t=function(){var t=this.activeModal.offset();t.left+=this.__dx-$(document).scrollLeft(),t.top+=this.__dy-$(document).scrollTop(),this.activeModal.css(t)};this.resizer&&(this.activeModal.removeClass("draged"),this.resizer.remove(),this.resizer=null,this.resizerBg.remove(),this.resizerBg=null,t.call(this)),jQuery(document.body).unbind(o.mousemove+".ax5modal-"+i.id).unbind(o.mouseup+".ax5modal-"+i.id).unbind("mouseleave.ax5modal-"+i.id),jQuery(document.body).removeAttr("unselectable").css("user-select","auto").off("selectstart")}};this.init=function(){this.onStateChanged=i.onStateChanged},this.open=function(t,e){return this.activeModal||(t=a.modalConfig=jQuery.extend(!0,{},i,t),h.call(this,t,e)),this},this.close=function(t){return this.activeModal&&(t=a.modalConfig,this.activeModal.addClass("destroy"),jQuery(window).unbind("keydown.ax-modal"),jQuery(window).unbind("resize.ax-modal"),setTimeout(function(){this.activeModal.remove(),this.activeModal=null,d.call(this,t,{self:this,state:"close"})}.bind(this),i.animateTime)),this},this.minimize=function(){return function(t){var e=a.modalConfig;return"undefined"==typeof t&&(t=i.minimizePosition),this.minimized=!0,this.$.body.hide(),a.modalConfig.originalHeight=e.height,a.modalConfig.height=0,c[t].call(this),d.call(this,e,{self:this,state:"minimize"}),this}}(),this.maximize=function(){var t=a.modalConfig;return this.minimized&&(this.minimized=!1,this.$.body.show(),a.modalConfig.height=a.modalConfig.originalHeight,a.modalConfig.originalHeight=void 0,this.align({left:"center",top:"middle"}),d.call(this,t,{self:this,state:"restore"})),this},this.css=function(t){return this.activeModal&&!a.fullScreen&&(this.activeModal.css(t),t.width&&(a.modalConfig.width=this.activeModal.width()),t.height&&(a.modalConfig.height=this.activeModal.height(),this.$.iframe&&(this.$["iframe-wrap"].css({height:a.modalConfig.height}),this.$.iframe.css({height:a.modalConfig.height})))),this},this.align=function(){return function(t,e){if(!this.activeModal)return this;var i=a.modalConfig,o={width:i.width,height:i.height};return i.fullScreen?(i.header&&this.$.header.hide(),o.width=jQuery(window).width(),o.height=jQuery(window).height(),o.left=0,o.top=0,i.iframe&&(this.$["iframe-wrap"].css({height:o.height}),this.$.iframe.css({height:o.height}))):(t&&jQuery.extend(!0,i.position,t),i.header&&(o.height+=this.$.header.outerHeight()),"left"==i.position.left?o.left=i.position.margin||0:"right"==i.position.left?o.left=jQuery(window).width()-o.width-(i.position.margin||0):"center"==i.position.left?o.left=jQuery(window).width()/2-o.width/2:o.left=i.position.left||0,"top"==i.position.top?o.top=i.position.margin||0:"bottom"==i.position.top?o.top=jQuery(window).height()-o.height-(i.position.margin||0):"middle"==i.position.top?o.top=jQuery(window).height()/2-o.height/2:o.top=i.position.top||0),this.activeModal.css(o),this}}(),this.main=function(){t.modal_instance=t.modal_instance||[],t.modal_instance.push(this),arguments&&e.isObject(arguments[0])&&this.setConfig(arguments[0])}.apply(this,arguments)};return i}())}(); \ No newline at end of file diff --git a/package.json b/package.json index 0d06bb7..e4582f8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ax5ui-modal", - "version": "0.7.1", + "version": "0.7.2", "description": "A modal plugin that works with Bootstrap & jQuery", "license": "LGPLv3", "repository": { diff --git a/src/ax5modal.js b/src/ax5modal.js index 2822926..46518da 100755 --- a/src/ax5modal.js +++ b/src/ax5modal.js @@ -1,80 +1,74 @@ // ax5.ui.modal (function () { - /** - * @class ax5modal - * @alias ax5.ui.modal - * @author tom@axisj.com - * @example - * ``` - * var my_modal = new ax5.ui.modal(); - * ``` - */ - var ROOT = ax5.ui; - var _SUPER_ = ax5.ui.root; + var UI = ax5.ui; var U = ax5.util; - var CLASS_NAME = "ax5modal"; - var VERSION = "0.7.1"; - - //== UI Class - var ax5modal = function () { - var - self = this, - cfg, - ENM = { - "mousedown": (ax5.info.supportTouch) ? "touchstart" : "mousedown", - "mousemove": (ax5.info.supportTouch) ? "touchmove" : "mousemove", - "mouseup": (ax5.info.supportTouch) ? "touchend" : "mouseup" - }, - getMousePosition = function (e) { - var mouseObj = e; - if ('changedTouches' in e) { - mouseObj = e.changedTouches[0]; - } - return { - clientX: mouseObj.clientX, - clientY: mouseObj.clientY - } - }; - if (_SUPER_) _SUPER_.call(this); // 부모호출 - - this.name = CLASS_NAME; - this.version = VERSION; - this.instanceId = ax5.getGuid(); - - this.config = { - id: 'ax5-modal-' + this.instanceId, - position: { - left: "center", - top: "middle", - margin: 10 - }, - minimizePosition: "bottom-right", - clickEventName: "click", //(('ontouchstart' in document.documentElement) ? "touchstart" : "click"), - theme: 'default', - width: 300, - height: 400, - closeToEsc: true, - animateTime: 250 - }; - this.activeModal = null; - this.$ = {}; // UI inside of the jQuery object store + UI.addClass({ + className: "modal", + version: "0.7.2" + }, (function () { + /** + * @class ax5modal + * @alias ax5.ui.modal + * @author tom@axisj.com + * @example + * ``` + * var my_modal = new ax5.ui.modal(); + * ``` + */ + var ax5modal = function () { + var + self = this, + cfg, + ENM = { + "mousedown": (ax5.info.supportTouch) ? "touchstart" : "mousedown", + "mousemove": (ax5.info.supportTouch) ? "touchmove" : "mousemove", + "mouseup": (ax5.info.supportTouch) ? "touchend" : "mouseup" + }, + getMousePosition = function (e) { + var mouseObj = e; + if ('changedTouches' in e) { + mouseObj = e.changedTouches[0]; + } + return { + clientX: mouseObj.clientX, + clientY: mouseObj.clientY + } + }; + + this.config = { + id: 'ax5-modal-' + this.instanceId, + position: { + left: "center", + top: "middle", + margin: 10 + }, + minimizePosition: "bottom-right", + clickEventName: "click", //(('ontouchstart' in document.documentElement) ? "touchstart" : "click"), + theme: 'default', + width: 300, + height: 400, + closeToEsc: true, + animateTime: 250 + }; + this.activeModal = null; + this.$ = {}; // UI inside of the jQuery object store - cfg = this.config; // extended config copy cfg + cfg = this.config; // extended config copy cfg - var - onStateChanged = function (opts, that) { - if (opts && opts.onStateChanged) { - opts.onStateChanged.call(that, that); - } - else if (this.onStateChanged) { - this.onStateChanged.call(that, that); - } - return true; - }, - getContentTmpl = function () { - return ` + var + onStateChanged = function (opts, that) { + if (opts && opts.onStateChanged) { + opts.onStateChanged.call(that, that); + } + else if (this.onStateChanged) { + this.onStateChanged.call(that, that); + } + return true; + }, + getContentTmpl = function () { + return `
{{#header}}
@@ -105,480 +99,476 @@
`; - }, - getContent = function (modalId, opts) { - var - data = { - modalId: modalId, - theme: opts.theme, - header: opts.header, - fullScreen: (opts.fullScreen ? "fullscreen" : ""), - styles: [], - iframe: opts.iframe - }; + }, + getContent = function (modalId, opts) { + var + data = { + modalId: modalId, + theme: opts.theme, + header: opts.header, + fullScreen: (opts.fullScreen ? "fullscreen" : ""), + styles: [], + iframe: opts.iframe + }; - if (opts.zIndex) { - data.styles.push("z-index:" + opts.zIndex); - } - if (data.iframe && typeof data.iframe.param === "string") { - data.iframe.param = ax5.util.param(data.iframe.param); - } + if (opts.zIndex) { + data.styles.push("z-index:" + opts.zIndex); + } + if (data.iframe && typeof data.iframe.param === "string") { + data.iframe.param = ax5.util.param(data.iframe.param); + } - return ax5.mustache.render(getContentTmpl(), data); - }, - open = function (opts, callBack) { - var that; + return ax5.mustache.render(getContentTmpl(), data); + }, + open = function (opts, callBack) { + var that; - jQuery(document.body).append(getContent.call(this, opts.id, opts)); + jQuery(document.body).append(getContent.call(this, opts.id, opts)); - this.activeModal = jQuery('#' + opts.id); + this.activeModal = jQuery('#' + opts.id); - // 파트수집 - this.$ = { - "root": this.activeModal.find('[data-modal-els="root"]'), - "header": this.activeModal.find('[data-modal-els="header"]'), - "body": this.activeModal.find('[data-modal-els="body"]') - }; + // 파트수집 + this.$ = { + "root": this.activeModal.find('[data-modal-els="root"]'), + "header": this.activeModal.find('[data-modal-els="header"]'), + "body": this.activeModal.find('[data-modal-els="body"]') + }; - if (opts.iframe) { - this.$["iframe-wrap"] = this.activeModal.find('[data-modal-els="iframe-wrap"]'); - this.$["iframe"] = this.activeModal.find('[data-modal-els="iframe"]'); - this.$["iframe-form"] = this.activeModal.find('[data-modal-els="iframe-form"]'); - } + if (opts.iframe) { + this.$["iframe-wrap"] = this.activeModal.find('[data-modal-els="iframe-wrap"]'); + this.$["iframe"] = this.activeModal.find('[data-modal-els="iframe"]'); + this.$["iframe-form"] = this.activeModal.find('[data-modal-els="iframe-form"]'); + } - //- position 정렬 - this.align(); - - that = { - self: this, - id: opts.id, - theme: opts.theme, - width: opts.width, - height: opts.height, - state: "open", - $: this.$ - }; + //- position 정렬 + this.align(); - if (opts.iframe) { + that = { + self: this, + id: opts.id, + theme: opts.theme, + width: opts.width, + height: opts.height, + state: "open", + $: this.$ + }; - this.$["iframe-wrap"].css({height: opts.height}); - this.$["iframe"].css({height: opts.height}); + if (opts.iframe) { - // iframe content load - this.$["iframe-form"].attr({"method": opts.iframe.method}); - this.$["iframe-form"].attr({"target": opts.id + "-frame"}); - this.$["iframe-form"].attr({"action": opts.iframe.url}); - this.$["iframe"].on("load", (function () { - that.state = "load"; - onStateChanged.call(this, opts, that); - }).bind(this)); - this.$["iframe-form"].submit(); - } + this.$["iframe-wrap"].css({height: opts.height}); + this.$["iframe"].css({height: opts.height}); + + // iframe content load + this.$["iframe-form"].attr({"method": opts.iframe.method}); + this.$["iframe-form"].attr({"target": opts.id + "-frame"}); + this.$["iframe-form"].attr({"action": opts.iframe.url}); + this.$["iframe"].on("load", (function () { + that.state = "load"; + onStateChanged.call(this, opts, that); + }).bind(this)); + this.$["iframe-form"].submit(); + } - if (callBack) callBack.call(that); - onStateChanged.call(this, opts, that); + if (callBack) callBack.call(that); + onStateChanged.call(this, opts, that); - // bind key event - if (opts.closeToEsc) { - jQuery(window).bind("keydown.ax-modal", (function (e) { - onkeyup.call(this, e || window.event); + // bind key event + if (opts.closeToEsc) { + jQuery(window).bind("keydown.ax-modal", (function (e) { + onkeyup.call(this, e || window.event); + }).bind(this)); + } + jQuery(window).bind("resize.ax-modal", (function (e) { + this.align(null, e || window.event); }).bind(this)); - } - jQuery(window).bind("resize.ax-modal", (function (e) { - this.align(null, e || window.event); - }).bind(this)); - - this.activeModal.find("[data-modal-header-btn]").on(cfg.clickEventName, (function (e) { - btnOnClick.call(this, e || window.event, opts); - }).bind(this)); - - this.$.header - .bind(ENM["mousedown"], function (e) { - self.mousePosition = getMousePosition(e); - moveModal.on.call(self); - }) - .bind("dragstart", function (e) { - U.stopEvent(e); - return false; + + this.activeModal.find("[data-modal-header-btn]").on(cfg.clickEventName, (function (e) { + btnOnClick.call(this, e || window.event, opts); + }).bind(this)); + + this.$.header + .bind(ENM["mousedown"], function (e) { + self.mousePosition = getMousePosition(e); + moveModal.on.call(self); + }) + .bind("dragstart", function (e) { + U.stopEvent(e); + return false; + }); + }, + 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-modal-header-btn")) { + return true; + } }); - }, - 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-modal-header-btn")) { - return true; - } - }); - if (target) { - k = target.getAttribute("data-modal-header-btn"); + if (target) { + k = target.getAttribute("data-modal-header-btn"); - that = { - self: this, - key: k, value: opts.header.btns[k], - dialogId: opts.id, - btnTarget: target - }; + that = { + self: this, + key: k, value: opts.header.btns[k], + dialogId: opts.id, + btnTarget: target + }; - if (opts.header.btns[k].onClick) { - opts.header.btns[k].onClick.call(that, k); + if (opts.header.btns[k].onClick) { + opts.header.btns[k].onClick.call(that, k); + } } - } - that = null; - opts = null; - callBack = null; - target = null; - k = null; - }, - onkeyup = function (e) { - if (e.keyCode == ax5.info.eventKeys.ESC) { - this.close(); - } - }, - alignProcessor = { - "top-left": function () { - this.align({left: "left", top: "top"}); + that = null; + opts = null; + callBack = null; + target = null; + k = null; }, - "top-right": function () { - this.align({left: "right", top: "top"}); - }, - "bottom-left": function () { - this.align({left: "left", top: "bottom"}); + onkeyup = function (e) { + if (e.keyCode == ax5.info.eventKeys.ESC) { + this.close(); + } }, - "bottom-right": function () { - this.align({left: "right", top: "bottom"}); + alignProcessor = { + "top-left": function () { + this.align({left: "left", top: "top"}); + }, + "top-right": function () { + this.align({left: "right", top: "top"}); + }, + "bottom-left": function () { + this.align({left: "left", top: "bottom"}); + }, + "bottom-right": function () { + this.align({left: "right", top: "bottom"}); + }, + "center-middle": function () { + this.align({left: "center", top: "middle"}); + } }, - "center-middle": function () { - this.align({left: "center", top: "middle"}); - } - }, - moveModal = { - "on": function () { - var modalOffset = this.activeModal.position(); - var modalBox = { - width: this.activeModal.outerWidth(), height: this.activeModal.outerHeight() - }; - var windowBox = { - width: jQuery(window).width(), - height: jQuery(window).height() - }; - var getResizerPosition = function (e) { - self.__dx = e.clientX - self.mousePosition.clientX; - self.__dy = e.clientY - self.mousePosition.clientY; + moveModal = { + "on": function () { + var modalOffset = this.activeModal.position(); + var modalBox = { + width: this.activeModal.outerWidth(), height: this.activeModal.outerHeight() + }; + var windowBox = { + width: jQuery(window).width(), + height: jQuery(window).height() + }; + var getResizerPosition = function (e) { + self.__dx = e.clientX - self.mousePosition.clientX; + self.__dy = e.clientY - self.mousePosition.clientY; - var minX = 0; - var maxX = windowBox.width - modalBox.width; - var minY = 0; - var maxY = windowBox.height - modalBox.height; + var minX = 0; + var maxX = windowBox.width - modalBox.width; + var minY = 0; + var maxY = windowBox.height - modalBox.height; - if(minX > modalOffset.left + self.__dx){ - self.__dx = -modalOffset.left; - } - else if(maxX < modalOffset.left + self.__dx){ - self.__dx = (maxX) - modalOffset.left; - } + if(minX > modalOffset.left + self.__dx){ + self.__dx = -modalOffset.left; + } + else if(maxX < modalOffset.left + self.__dx){ + self.__dx = (maxX) - modalOffset.left; + } - if(minY > modalOffset.top + self.__dy){ - self.__dy = -modalOffset.top; - } - else if(maxY < modalOffset.top + self.__dy){ - self.__dy = (maxY) - modalOffset.top; - } + if(minY > modalOffset.top + self.__dy){ + self.__dy = -modalOffset.top; + } + else if(maxY < modalOffset.top + self.__dy){ + self.__dy = (maxY) - modalOffset.top; + } - return { - left: modalOffset.left + self.__dx + $(document).scrollLeft(), - top: modalOffset.top + self.__dy + $(document).scrollTop() + return { + left: modalOffset.left + self.__dx + $(document).scrollLeft(), + top: modalOffset.top + self.__dy + $(document).scrollTop() + }; }; - }; - self.__dx = 0; // 변화량 X - self.__dy = 0; // 변화량 Y - - jQuery(document.body) - .bind(ENM["mousemove"] + ".ax5modal-" + cfg.id, function (e) { - if (!self.resizer) { - // self.resizerBg : body 가 window보다 작을 때 문제 해결을 위한 DIV - self.resizerBg = jQuery('
'); - self.resizer = jQuery('
'); - self.resizer.css({ - left: modalOffset.left, - top: modalOffset.top, - width: modalBox.width, - height: modalBox.height - }); - jQuery(document.body) - .append(self.resizerBg) - .append(self.resizer); - self.activeModal.addClass("draged"); - } - self.resizer.css(getResizerPosition(e)); - }) - .bind(ENM["mouseup"] + ".ax5layout-" + this.instanceId, function (e) { - moveModal.off.call(self); - }) - .bind("mouseleave.ax5layout-" + this.instanceId, function (e) { - moveModal.off.call(self); - }); + self.__dx = 0; // 변화량 X + self.__dy = 0; // 변화량 Y + + jQuery(document.body) + .bind(ENM["mousemove"] + ".ax5modal-" + cfg.id, function (e) { + if (!self.resizer) { + // self.resizerBg : body 가 window보다 작을 때 문제 해결을 위한 DIV + self.resizerBg = jQuery('
'); + self.resizer = jQuery('
'); + self.resizer.css({ + left: modalOffset.left, + top: modalOffset.top, + width: modalBox.width, + height: modalBox.height + }); + jQuery(document.body) + .append(self.resizerBg) + .append(self.resizer); + self.activeModal.addClass("draged"); + } + self.resizer.css(getResizerPosition(e)); + }) + .bind(ENM["mouseup"] + ".ax5layout-" + this.instanceId, function (e) { + moveModal.off.call(self); + }) + .bind("mouseleave.ax5layout-" + this.instanceId, function (e) { + moveModal.off.call(self); + }); + + jQuery(document.body) + .attr('unselectable', 'on') + .css('user-select', 'none') + .on('selectstart', false); + }, + "off": function () { + var setModalPosition = function () { + //console.log(this.activeModal.offset(), this.__dx); + var box = this.activeModal.offset(); + box.left += this.__dx - $(document).scrollLeft(); + box.top += this.__dy - $(document).scrollTop(); + this.activeModal.css(box); + }; - jQuery(document.body) - .attr('unselectable', 'on') - .css('user-select', 'none') - .on('selectstart', false); - }, - "off": function () { - var setModalPosition = function () { - //console.log(this.activeModal.offset(), this.__dx); - var box = this.activeModal.offset(); - box.left += this.__dx - $(document).scrollLeft(); - box.top += this.__dy - $(document).scrollTop(); - this.activeModal.css(box); - }; + if (this.resizer) { + this.activeModal.removeClass("draged"); + this.resizer.remove(); + this.resizer = null; + this.resizerBg.remove(); + this.resizerBg = null; + setModalPosition.call(this); + //this.align(); + } - if (this.resizer) { - this.activeModal.removeClass("draged"); - this.resizer.remove(); - this.resizer = null; - this.resizerBg.remove(); - this.resizerBg = null; - setModalPosition.call(this); - //this.align(); - } + jQuery(document.body) + .unbind(ENM["mousemove"] + ".ax5modal-" + cfg.id) + .unbind(ENM["mouseup"] + ".ax5modal-" + cfg.id) + .unbind("mouseleave.ax5modal-" + cfg.id); - jQuery(document.body) - .unbind(ENM["mousemove"] + ".ax5modal-" + cfg.id) - .unbind(ENM["mouseup"] + ".ax5modal-" + cfg.id) - .unbind("mouseleave.ax5modal-" + cfg.id); + jQuery(document.body) + .removeAttr('unselectable') + .css('user-select', 'auto') + .off('selectstart'); - jQuery(document.body) - .removeAttr('unselectable') - .css('user-select', 'auto') - .off('selectstart'); + } + }; - } + /// private end + + /** + * Preferences of modal UI + * @method ax5modal.setConfig + * @param {Object} config - 클래스 속성값 + * @returns {ax5modal} + * @example + * ``` + * ``` + */ + //== class body start + this.init = function () { + this.onStateChanged = cfg.onStateChanged; }; - /// private end + /** + * open the modal + * @method ax5modal.open + * @returns {ax5modal} + * @example + * ``` + * my_modal.open(); + * ``` + */ + this.open = function (opts, callBack) { + if (!this.activeModal) { + opts = self.modalConfig = jQuery.extend(true, {}, cfg, opts); + open.call(this, opts, callBack); + } + return this; + }; - /** - * Preferences of modal UI - * @method ax5modal.setConfig - * @param {Object} config - 클래스 속성값 - * @returns {ax5modal} - * @example - * ``` - * ``` - */ - //== class body start - this.init = function () { - this.onStateChanged = cfg.onStateChanged; - }; + /** + * close the modal + * @method ax5modal.close + * @returns {ax5modal} + * @example + * ``` + * my_modal.close(); + * ``` + */ + this.close = function (opts) { + if (this.activeModal) { + opts = self.modalConfig; + this.activeModal.addClass("destroy"); + jQuery(window).unbind("keydown.ax-modal"); + jQuery(window).unbind("resize.ax-modal"); + + setTimeout((function () { + this.activeModal.remove(); + this.activeModal = null; + onStateChanged.call(this, opts, { + self: this, + state: "close" + }); + }).bind(this), cfg.animateTime); + } + return this; + }; - /** - * open the modal - * @method ax5modal.open - * @returns {ax5modal} - * @example - * ``` - * my_modal.open(); - * ``` - */ - this.open = function (opts, callBack) { - if (!this.activeModal) { - opts = self.modalConfig = jQuery.extend(true, {}, cfg, opts); - open.call(this, opts, callBack); - } - return this; - }; + /** + * @method ax5modal.minimize + * @returns {axClass} + */ + this.minimize = (function () { + + return function (minimizePosition) { + var opts = self.modalConfig; + if (typeof minimizePosition === "undefined") minimizePosition = cfg.minimizePosition; + this.minimized = true; + this.$.body.hide(); + self.modalConfig.originalHeight = opts.height; + self.modalConfig.height = 0; + alignProcessor[minimizePosition].call(this); - /** - * close the modal - * @method ax5modal.close - * @returns {ax5modal} - * @example - * ``` - * my_modal.close(); - * ``` - */ - this.close = function (opts) { - if (this.activeModal) { - opts = self.modalConfig; - this.activeModal.addClass("destroy"); - jQuery(window).unbind("keydown.ax-modal"); - jQuery(window).unbind("resize.ax-modal"); - - setTimeout((function () { - this.activeModal.remove(); - this.activeModal = null; onStateChanged.call(this, opts, { self: this, - state: "close" + state: "minimize" }); - }).bind(this), cfg.animateTime); - } - return this; - }; - /** - * @method ax5modal.minimize - * @returns {axClass} - */ - this.minimize = (function () { + return this; + }; + })(); - return function (minimizePosition) { + /** + * @method ax5modal.maximize + * @returns {axClass} + */ + this.maximize = function () { var opts = self.modalConfig; - if (typeof minimizePosition === "undefined") minimizePosition = cfg.minimizePosition; - this.minimized = true; - this.$.body.hide(); - self.modalConfig.originalHeight = opts.height; - self.modalConfig.height = 0; - alignProcessor[minimizePosition].call(this); - - onStateChanged.call(this, opts, { - self: this, - state: "minimize" - }); + if (this.minimized) { + this.minimized = false; + this.$.body.show(); + self.modalConfig.height = self.modalConfig.originalHeight; + self.modalConfig.originalHeight = undefined; + this.align({left: "center", top: "middle"}); + onStateChanged.call(this, opts, { + self: this, + state: "restore" + }); + } return this; }; - })(); - - /** - * @method ax5modal.maximize - * @returns {axClass} - */ - this.maximize = function () { - var opts = self.modalConfig; - if (this.minimized) { - this.minimized = false; - this.$.body.show(); - self.modalConfig.height = self.modalConfig.originalHeight; - self.modalConfig.originalHeight = undefined; - - this.align({left: "center", top: "middle"}); - onStateChanged.call(this, opts, { - self: this, - state: "restore" - }); - } - return this; - }; - /** - * setCSS - * @method ax5modal.css - * @param {Object} css - - * @returns {ax5modal} - */ - this.css = function (css) { - if (this.activeModal && !self.fullScreen) { - this.activeModal.css(css); - if (css.width) { - self.modalConfig.width = this.activeModal.width(); - } - if (css.height) { - self.modalConfig.height = this.activeModal.height(); - if (this.$["iframe"]) { - this.$["iframe-wrap"].css({height: self.modalConfig.height}); - this.$["iframe"].css({height: self.modalConfig.height}); + /** + * setCSS + * @method ax5modal.css + * @param {Object} css - + * @returns {ax5modal} + */ + this.css = function (css) { + if (this.activeModal && !self.fullScreen) { + this.activeModal.css(css); + if (css.width) { + self.modalConfig.width = this.activeModal.width(); + } + if (css.height) { + self.modalConfig.height = this.activeModal.height(); + if (this.$["iframe"]) { + this.$["iframe-wrap"].css({height: self.modalConfig.height}); + this.$["iframe"].css({height: self.modalConfig.height}); + } } } - } - return this; - }; - - /** - * @mothod ax5modal.align - * @param position - * @param e - * @returns {ax5modal} - */ - this.align = (function () { - - return function (position, e) { - if (!this.activeModal) return this; + return this; + }; - var opts = self.modalConfig, - box = { - width: opts.width, - height: opts.height - }; + /** + * @mothod ax5modal.align + * @param position + * @param e + * @returns {ax5modal} + */ + this.align = (function () { + + return function (position, e) { + if (!this.activeModal) return this; + + var opts = self.modalConfig, + box = { + width: opts.width, + height: opts.height + }; - if (opts.fullScreen) { - if (opts.header) this.$.header.hide(); - box.width = jQuery(window).width(); - box.height = jQuery(window).height(); - box.left = 0; - box.top = 0; + if (opts.fullScreen) { + if (opts.header) this.$.header.hide(); + box.width = jQuery(window).width(); + box.height = jQuery(window).height(); + box.left = 0; + box.top = 0; - if (opts.iframe) { - this.$["iframe-wrap"].css({height: box.height}); - this.$["iframe"].css({height: box.height}); - } - } - else { - if (position) { - jQuery.extend(true, opts.position, position); - } - - if (opts.header) { - box.height += this.$.header.outerHeight(); - } - - //- position 정렬 - if (opts.position.left == "left") { - box.left = (opts.position.margin || 0); - } - else if (opts.position.left == "right") { - // window.innerWidth; - box.left = jQuery(window).width() - box.width - (opts.position.margin || 0); - } - else if (opts.position.left == "center") { - box.left = jQuery(window).width() / 2 - box.width / 2; + if (opts.iframe) { + this.$["iframe-wrap"].css({height: box.height}); + this.$["iframe"].css({height: box.height}); + } } else { - box.left = opts.position.left || 0; - } + if (position) { + jQuery.extend(true, opts.position, position); + } - if (opts.position.top == "top") { - box.top = (opts.position.margin || 0); - } - else if (opts.position.top == "bottom") { - box.top = jQuery(window).height() - box.height - (opts.position.margin || 0); - } - else if (opts.position.top == "middle") { - box.top = jQuery(window).height() / 2 - box.height / 2; - } - else { - box.top = opts.position.top || 0; - } + if (opts.header) { + box.height += this.$.header.outerHeight(); + } - } + //- position 정렬 + if (opts.position.left == "left") { + box.left = (opts.position.margin || 0); + } + else if (opts.position.left == "right") { + // window.innerWidth; + box.left = jQuery(window).width() - box.width - (opts.position.margin || 0); + } + else if (opts.position.left == "center") { + box.left = jQuery(window).width() / 2 - box.width / 2; + } + else { + box.left = opts.position.left || 0; + } - this.activeModal.css(box); - return this; - }; - })(); + if (opts.position.top == "top") { + box.top = (opts.position.margin || 0); + } + else if (opts.position.top == "bottom") { + box.top = jQuery(window).height() - box.height - (opts.position.margin || 0); + } + else if (opts.position.top == "middle") { + box.top = jQuery(window).height() / 2 - box.height / 2; + } + else { + box.top = opts.position.top || 0; + } - // 클래스 생성자 - this.main = (function () { + } + + this.activeModal.css(box); + return this; + }; + })(); - root.modal_instance = root.modal_instance || []; - root.modal_instance.push(this); + // 클래스 생성자 + this.main = (function () { - if (arguments && U.isObject(arguments[0])) { - this.setConfig(arguments[0]); - } - }).apply(this, arguments); - }; - //== UI Class + UI.modal_instance = UI.modal_instance || []; + UI.modal_instance.push(this); - ROOT.modal = (function () { - if (U.isFunction(_SUPER_)) ax5modal.prototype = new _SUPER_(); // 상속 + if (arguments && U.isObject(arguments[0])) { + this.setConfig(arguments[0]); + } + }).apply(this, arguments); + }; return ax5modal; - })(); // ax5.ui에 연결 + })()); })(); \ No newline at end of file diff --git a/test/bower.json b/test/bower.json index ca2bc15..6b20e36 100644 --- a/test/bower.json +++ b/test/bower.json @@ -1,8 +1,8 @@ { - "name": "ax5ui-dialog-tester", + "name": "ax5ui-tester", "dependencies": { "jquery": "^1.11.0", - "ax5core": "", + "ax5core": ">=1.0.9", "ax5ui-mask": "", "bootstrap": "^3.3.6", "font-awesome": ""