/*! * artDialog * Date: 2014-11-09 * https://github.com/aui/artDialog * (c) 2009-2014 TangBin, http://www.planeArt.cn * * This is licensed under the GNU LGPL, version 2.1 or later. * For details, see: http://www.gnu.org/licenses/lgpl-2.1.html */ define(['jquery','popup','dialogConf'],function ($,Popup,defaults) { //var $ = require('jquery'); //var Popup = require('popup'); //var defaults = require('dialogConf'); var css = defaults.cssUri; // css loader: RequireJS & SeaJS if (css) { var fn = require[require.toUrl ? 'toUrl' : 'resolve']; if (fn) { css = fn(css); css = ''; if ($('base')[0]) { $('base').before(css); } else { $('head').append(css); } } } var _count = 0; var _expando = new Date() - 0; // Date.now() var _isIE6 = !('minWidth' in $('html')[0].style); var _isMobile = 'createTouch' in document && !('onmousemove' in document) || /(iPhone|iPad|iPod)/i.test(navigator.userAgent); var _isFixed = !_isIE6 && !_isMobile; var artDialog = function (options, ok, cancel) { var originalOptions = options = options || {}; if (typeof options === 'string' || options.nodeType === 1) { options = {content: options, fixed: !_isMobile}; } options = $.extend(true, {}, artDialog.defaults, options); options.original = originalOptions; var id = options.id = options.id || _expando + _count; var api = artDialog.get(id); // 如果存在同名的对话框对象,则直接返回 if (api) { return api.focus(); } // 目前主流移动设备对fixed支持不好,禁用此特性 if (!_isFixed) { options.fixed = false; } // 快捷关闭支持:点击对话框外快速关闭对话框 if (options.quickClose) { options.modal = true; options.backdropOpacity = 0; } // 按钮组 if (!$.isArray(options.button)) { options.button = []; } // 取消按钮 if (cancel !== undefined) { options.cancel = cancel; } if (options.cancel) { options.button.push({ id: 'cancel', value: options.cancelValue, callback: options.cancel, display: options.cancelDisplay }); } // 确定按钮 if (ok !== undefined) { options.ok = ok; } if (options.ok) { options.button.push({ id: 'ok', value: options.okValue, callback: options.ok, autofocus: true }); } return artDialog.list[id] = new artDialog.create(options); }; var popup = function () {}; popup.prototype = Popup.prototype; var prototype = artDialog.prototype = new popup(); artDialog.create = function (options) { var that = this; $.extend(this, new Popup()); var originalOptions = options.original; var $popup = $(this.node).html(options.innerHTML); var $backdrop = $(this.backdrop); this.options = options; this._popup = $popup; $.each(options, function (name, value) { if (typeof that[name] === 'function') { that[name](value); } else { that[name] = value; } }); // 更新 zIndex 全局配置 if (options.zIndex) { Popup.zIndex = options.zIndex; } // 设置 ARIA 信息 $popup.attr({ 'aria-labelledby': this._$('title') .attr('id', 'title:' + this.id).attr('id'), 'aria-describedby': this._$('content') .attr('id', 'content:' + this.id).attr('id') }); // 关闭按钮 this._$('close') .css('display', this.cancel === false ? 'none' : '') .attr('title', this.cancelValue) .on('click', function (event) { that._trigger('cancel'); event.preventDefault(); }); // 添加视觉参数 this._$('dialog').addClass(this.skin); this._$('body').css('padding', this.padding); // 点击任意空白处关闭对话框 if (options.quickClose) { $backdrop .on( 'onmousedown' in document ? 'mousedown' : 'click', function () { that._trigger('cancel'); return false;// 阻止抢夺焦点 }); } // 遮罩设置 this.addEventListener('show', function () { $backdrop.css({ opacity: 0, background: options.backdropBackground }).animate( {opacity: options.backdropOpacity} , 150); }); // ESC 快捷键关闭对话框 this._esc = function (event) { var target = event.target; var nodeName = target.nodeName; var rinput = /^input|textarea$/i; var isTop = Popup.current === that; var keyCode = event.keyCode; // 避免输入状态中 ESC 误操作关闭 if (!isTop || rinput.test(nodeName) && target.type !== 'button') { return; } if (keyCode === 27) { that._trigger('cancel'); } }; $(document).on('keydown', this._esc); this.addEventListener('remove', function () { $(document).off('keydown', this._esc); delete artDialog.list[this.id]; }); _count ++; artDialog.oncreate(this); return this; }; artDialog.create.prototype = prototype; $.extend(prototype, { /** * 显示对话框 * @name artDialog.prototype.show * @param {HTMLElement Object, Event Object} 指定位置(可选) */ /** * 显示对话框(模态) * @name artDialog.prototype.showModal * @param {HTMLElement Object, Event Object} 指定位置(可选) */ /** * 关闭对话框 * @name artDialog.prototype.close * @param {String, Number} 返回值,可被 onclose 事件收取(可选) */ /** * 销毁对话框 * @name artDialog.prototype.remove */ /** * 重置对话框位置 * @name artDialog.prototype.reset */ /** * 让对话框聚焦(同时置顶) * @name artDialog.prototype.focus */ /** * 让对话框失焦(同时置顶) * @name artDialog.prototype.blur */ /** * 添加事件 * @param {String} 事件类型 * @param {Function} 监听函数 * @name artDialog.prototype.addEventListener */ /** * 删除事件 * @param {String} 事件类型 * @param {Function} 监听函数 * @name artDialog.prototype.removeEventListener */ /** * 对话框显示事件,在 show()、showModal() 执行 * @name artDialog.prototype.onshow * @event */ /** * 关闭事件,在 close() 执行 * @name artDialog.prototype.onclose * @event */ /** * 销毁前事件,在 remove() 前执行 * @name artDialog.prototype.onbeforeremove * @event */ /** * 销毁事件,在 remove() 执行 * @name artDialog.prototype.onremove * @event */ /** * 重置事件,在 reset() 执行 * @name artDialog.prototype.onreset * @event */ /** * 焦点事件,在 foucs() 执行 * @name artDialog.prototype.onfocus * @event */ /** * 失焦事件,在 blur() 执行 * @name artDialog.prototype.onblur * @event */ /** * 设置内容 * @param {String, HTMLElement} 内容 */ content: function (html) { var $content = this._$('content'); // HTMLElement if (typeof html === 'object') { html = $(html); $content.empty('').append(html.show()); this.addEventListener('beforeremove', function () { $('body').append(html.hide()); }); // String } else { $content.html(html); } return this.reset(); }, /** * 设置标题 * @param {String} 标题内容 */ title: function (text) { this._$('title').text(text); this._$('header')[text ? 'show' : 'hide'](); return this; }, /** 设置宽度 */ width: function (value) { this._$('content').css('width', value); return this.reset(); }, /** 设置高度 */ height: function (value) { this._$('content').css('height', value); return this.reset(); }, /** * 设置按钮组 * @param {Array, String} * Options: value, callback, autofocus, disabled */ button: function (args) { args = args || []; var that = this; var html = ''; var number = 0; this.callbacks = {}; if (typeof args === 'string') { html = args; number ++; } else { $.each(args, function (i, val) { var id = val.id = val.id || val.value; var style = ''; that.callbacks[id] = val.callback; if (val.display === false) { style = ' style="display:none"'; } else { number ++; } html += '' + val.value + ''; that._$('button') .on('click', '[i-id=' + id +']', function (event) { var $this = $(this); if (!$this.attr('disabled')) {// IE BUG that._trigger(id); } event.preventDefault(); }); }); } this._$('button').html(html); this._$('footer')[number ? 'show' : 'hide'](); return this; }, statusbar: function (html) { this._$('statusbar') .html(html)[html ? 'show' : 'hide'](); return this; }, _$: function (i) { return this._popup.find('[i=' + i + ']'); }, // 触发按钮回调函数 _trigger: function (id) { var fn = this.callbacks[id]; return typeof fn !== 'function' || fn.call(this) !== false ? this.close().remove() : this; } }); artDialog.oncreate = $.noop; /** 获取最顶层的对话框API */ artDialog.getCurrent = function () { return Popup.current; }; /** * 根据 ID 获取某对话框 API * @param {String} 对话框 ID * @return {Object} 对话框 API (实例) */ artDialog.get = function (id) { return id === undefined ? artDialog.list : artDialog.list[id]; }; artDialog.list = {}; /** * 默认配置 */ artDialog.defaults = defaults; return artDialog; });