aralejs/dialog

Dialog Widget

Dialog

---

基础对话框组件，提供对话框显示隐藏、dom 结构自定义、定位、select 遮挡、确定取消关闭等功能特性。

本模块分为两个子组件：Dialog 和 ConfirmBox，前者提供抽象的基础容器功能，无绑定 UI 样式，后者在前者的基础上提供模态对话框的功能并提供完善的 UI 样式。

Dialog 组件提供了默认样式，请单独引用 dialog.css。

Dialog 继承了 overlay，可使用其中包括 widget、base、class、events、attribute、aspect 的属性和方法。

---

组件演示

npm run doc

访问 http://localhost:8002/

最佳实践

见 examples

配置说明

trigger element

对话框触发元素，可传递选择器。

content string|element

容器的内容，可以是纯字符串、dom对象、jQuery对象、html标签字符串、以及 URL 地址。当 content 为 URL 地址时，本组件将内嵌目标页面的 Iframe。

hasMask boolean

是否有背景遮罩层。默认为 true。

classPrefix string

统一样式前缀，默认为 ui-dialog。

closeTpl string

右上角的关闭链接，默认为×。

width number|string

对话框宽度，默认 500px。

height number|string

对话框高度。当设置了这个属性时，对话框高度会固定， 下面的 autoFit 强制为 false，initialHeight 失效。

zIndex number

对话框 z-index 层级，默认 999。

effect string

简单的动画效果，none 为无动画，fade 为渐入效果。默认为 none。

autoFit boolean

内嵌 Iframe 页面时是否自适应高度，默认为 true。iframe 类型时有效

initialHeight number|string

内嵌 Iframe 页面时对话框的初始高度（onload 后会发生变化），默认为 300px 。只有当对话框是 iframe 类型时有效

其他配置如定位参数 align 等请参照 overlay。

实例方法

主要有 show、hide、render 等方法，请参照 overlay。

dialog's Issues

confirmBox 的 parseElement

不需要在 parseElement 中就执行以下代码

this.set('content', template(model));

设置 content 的之后要在 render 之后才触发 _onRenderContent，生成 contentElement。从执行顺序上看也不需要放这个位置。

更简单的方法是覆盖 template

{
  attrs: {
    template: require('./confirmbox.handlebars')
  },

  parseElement: function() {
    this.set('model', {
      ...
    })
    ConfirmBox.superclass.parseElement.call(this);
  }
}

多个弹出层的mask冲突问题

有多个dialog实例同时存在的情况下，因为是共享一个mask实例，导致某个dialog关闭，其他的dialog的mask也失效了。希望能提供 独享mask的接口 或 内部直接改成 独享。

增加 classPrefix 属性

_setupKeyEvents方法的问题

@afc163

base-dialog.js 112行-122行 的_setupKeyEvents方法
建议修改为：

        // 绑定键盘事件，ESC关闭窗口，回车确定
        _setupKeyEvents: function() {
            this.delegateEvents('keyup', function(e) {
                if (e.keyCode === 27) {
                    this._closeHandler();
                }
                else if (e.keyCode === 13) {
                    this._confirmHandler();
                }
            });
        },

利用delegateEvents去注册dom事件有2个好处
1. 可以在destroy的时候做统一的dom事件销毁，使用者不必考虑销毁的细节
2. 事件handle的作用域为组件本身，不必用变量来做作用域传递

:)

关于功能与UI分离

现在1.0.0版本，只剩一个dialog.js。里面既加载了tpl，也加载了css。对于别的团队进行继承和二次开发都不方便

为什么不像以前那样提供完全只有功能没有UI的版本呢？

这种情况下，我只能继续使用0.9.3版本了：（

xbox 和 dialog 融合

二者融合成一个 arale.dialog 。

arale.dialog 能满足现有的大多数 xbox 需求。样式内联并把样式命名空间迁移到 ui-dialog 上。

alipay.xbox 继承于 arale.dialog。额外满足 alipay 的特殊需求。

@popomore 这块要统一做一下。

获取dialog高度问题

我使用dialog.get('height')不能获取dialog的高度，不知道为什么？
var dialog = new Dialog({
width: 780,
initialHeight : 300,
align:{selfXY:["50%","50%"],baseXY:["50%","110px"]},
content: dialogContent
});

ie 下会多调用一次 _setPosition

should call onload once 今天调了这个测试用例

setPosition.callCount 的返回值 chrome 下为 3，ie 下为4。调试了一圈是因为触发了 resize。

这里调用的 https://github.com/aralejs/overlay/blob/1.1.1/src/overlay.js#L179

IE6 下内容区域的高度撑不开

但是 xbox 居然撑开了！！！

IE 下有几个用例没跑过

xbox 和 dialog 差不多，看了下好像是 onload 没执行

按回车默认的触发confirm事件，用起来不是很爽！

我对话框里有textarea的话，我还得阻止下回车事件。

是不是，默认不触发回车的confirm比较合适？ 或者当作参数设置是否启用回车的confirm事件。

dialog的设计，为什么只提供hide而不提供destroy？

如果页面会长时间驻留，且会频繁使用不同对话框，而且对话框内容复杂（比如嵌有iframe,内有大量数据、处理脚本）。这样的场景下，如果对话框不提供destroy，难道不会出问题？

IE6 下 iframe xbox 切换不同 url 时会产生 404 页面

样式内联

dialog iframe 无法设置固定高度

设置 height 时应该不会再去计算高度

if (this._type === 'iframe') {
  this.element.css('height', DefaultHeight);
  this._showIframe();
}

iframe 先设置了定高，onload 后调用 _syncHeight 判断有设置 height 不会再计算。

同时打开两个弹框，锁屏遮罩貌似有些问题啊！

先打开一个带锁屏的弹窗，然后点击弹窗里的按钮再弹出一个confirm神马的，另外一个带锁屏的弹窗也行，然后关掉最后打开的弹窗，结果第一个打开的弹窗的锁屏没了。。。:sweat:

将 base-dialog.js 改名为 dialog.js

dialog默认剧终，但是组件总是自己设置一个很小的top，导致dialog一直都是在最上边

莫名其妙的多了一个top 怎么回事呢

使用Dialog打开页面，如何用代码关闭

    popupOrganTree: function(id) {
        var popupUrl = "../../system/organization/popupOrganTree.do";
        var o = new Dialog({
            content: popupUrl,
            autoFit:false,
            effect: 'fade'
        }).show();
    },

confirm-box 静态方法需要传自定义参数

destroy的时候没有hide mask

var dialog = new Dialog({});

dialog.show();

// 这里运行完后页面上的mask没有消失
dialog.destroy();

dialog如何支持 iframe

dialog如何支持 iframe

提供一个重新定位的接口

场景：

经常在动态改变 content 之后 dialog 的高度发生了变化，但是因为 align 定位是根据原来的 height 来定位的，导致定位不准确（特别是 height 100px -> 400px 这种高度变化很大的场景）。

目前的处理办法：

我是在 xxx.set('content', yyy); 之后再调用一下 xxx.show() 来触发 xxx._setPosition() 但是毕竟 show 方法有不同的用途，这么做 只能算是一个hack解决方案 。

建议：

提供一个 rePosition （命名什么的可以再定） 的接口，由 使用者按需调用 ，在合适的时机重新定位组件位置。

safari 下有个用例报错

should init without height when type is iframe

Script error. (:0)

对position组件的依赖代码写了2次

我今天在本地做了dialog的example，发现有个问题。
在dialog源码中，对arale/position 依赖重复写了2次
第一次是 "arale/position/1.0.1/position-debug",
第二次是 "arale/position/1.0.0/position-debug"
这个应该错了吧

源码就不贴了 反正在最顶端很好找

confirmbox 中的按钮样式更新

http://aliceui.org/button/

Dialog的trigger功能

Dialog中用到的trigger功能和Popup的trigger功能基本相同，是否能考虑用相似的代码去实现？

P.S.在常用的dialog组件中都没有trigger的功能，dialog在个人的想法中更象是某段执行过程中的用户行为收集的中断，trigger的功能语法糖的价值大于其组件本身的价值，不实现也没有什么大碍

为啥对话框不能拖动呢？

为啥对话框不能拖动呢？建议把拖动功能加上

点击 mask 背景时关闭对话框

怎样设置点击Mask不隐藏dialog?

有些场景 比如抽奖 用户不能手动关闭dialog需要数据处理完毕后自动关闭的

对话框 button 的样式在 firefox 中位置偏下

这个在 http://aliceui.org/button 已经解决了，再复制一下过来。

关于在dialog外面嵌套iframe问题

1、我在a页面使用了dialog，然后我在b页面使用iframe嵌入页面，在a页面弹窗时，遮罩只能遮罩iframe部分，如何实现父窗口一起遮罩啦？？？
2、我在b页面嵌入a页面后，弹窗的位置就不能控制了，老是在整个页面居中弹出，后来我使用set('align')可以设置弹窗的具体位置，但是如果保存弹窗位于当前屏幕居中，而不是相对于整个页面居中。

data-api式的初始化dialog

data-api式的初始化dialog。

关于dialog内容高度超过父窗体高度时

当dialog高度超过父窗体时，dialog的上半部分是始终看不到的，但是如果做以下措施：

dialog 默认的
align:{
selfXY: ["50%", “50%”],
baseXY: ["50%", “50%”]
}

当dialog高度超过了父窗体时
align:{
selfXY: ["50%", 0],
baseXY: ["50%", 0]
}

这样就可以得到解决。

虽然这样的动作可以dialog之外去判断加处理，但是影响了dialog的易用性，希望dialog内部可自动处理。

_setupGlobalHandler方法的疑惑

@afc163

base-dialog.js 第124-131行，_setupGlobalHandler方法中

        // 绑定确定和关闭事件到 dom 元素上，以供全局调用
        // 这样在拿不到实例对象时也可以调用关闭和确定方法
        // $('#dialog').trigger('close');
        _setupGlobalHandler: function() {
            Events.mixTo(this.element[0]);
            this.element[0].on('confirm', this._confirmHandler, this);
            this.element[0].on('close cancel', this._closeHandler, this);
        },

首先，注释写错了 = =，应该是 $('#dialog')[0].trigger('close');
其次，看注释的写法，是因为根据dom取不到widget的实例对象才用这种方法去修改原生dom对象，
为什么不用Widget.query('#dialog')来取实例对象？取得实例对象后再做操作就简单了吧

这点我不是很明白，望 @afc163 同学能解答:)

dialong有没有参数阻止事件冒泡？

dialong有没有参数阻止事件冒泡？

1.1.1版本的confirmbox 在创建实例的时候，出现bug

TypeError: ConfirmBox is not a constructor @ http://localhost:4088/Scripts/lib/jquery-1.7.1.min.js

这个confirmbox 依赖 dialog 需要写额外的config代码吗？

另外，我在一个单独的demo中 出现奇怪的问题，代码如下。

<script type="text/javascript"> seajs.config({ alias: { '$': 'gallery/jquery/1.7.1/jquery', 'confirmbox': 'arale/dialog/1.1.1/confirmbox' } }); seajs.use(['confirmbox', '$'], function (ConfirmBox, $) { console.log(111); }); </script>

根本不会执行，回调函数中的语句 console.log(111);

我后来把dialog更新到1.2.3版本，同样也有这个问题。是不是在config里少写什么？

dialog里content为url时的自动获取高度问题

在 iframe onload 的时候会将 iframe 的高度 设置到 this.element 的 height 上

这里设置 [data-role=content] 的 height 会比较合理吧，毕竟 this.element 的 height 在很多情况下是 不等于 [data-role=content] 的 height 比如 有 [data-role=title] 的时候

@afc163 @popomore

iframe高度管理

高度变化的iframe，ie下全部有问题，哎~

confirmbox.handlebars跨域问题

由于handlebars通过require方式引入存在跨域问题，然后想把模板放到JS里面，dialog是可以的，但confirmbox貌似有问题：

confirmbox.js:

var template = '{{#if title}}<div class="{{classPrefix}}-title" data-role="title">{{{title}}}
</div>{{/if}}<div class="{{classPrefix}}-container"><div class="{{classPrefix}}-message"
data-role="message">{{{message}}}</div>{{#if hasFoot}}<div class="{{classPrefix}}-operation" 
data-role="foot">{{#if confirmTpl}}<div class="{{classPrefix}}-confirm" data-role="confirm">
{{{confirmTpl}}}</div>{{/if}}{{#if cancelTpl}}<div class="{{classPrefix}}-cancel" data-role="
cancel">{{{cancelTpl}}}</div>{{/if}}</div>{{/if}}</div>';

由于template not a function,所以调用就会出问题了，这个应该怎么处理比较好呢？

this.set('content', template(model));

dialog 绑定点击事件的容器，点击后的焦点边框能否去掉？

dialog 绑定点击事件的容器，点击后的焦点边框能否去掉？

titleElement选择器的建议

@afc163

base-dialog.js 47行

 this.set('titleElement', this.$('[data-role=title] h2'));

这里给titleElement用的选择器能不能只用[data-role=title]这个条件，把h2的限制干掉，这样才更有通用性

依赖 jquery/jquery 但没有在文档中说明

今天尝试 arale/dialog 时发现其依赖于 jquery/jquery 且需要额外的配置才能跑通例子：

spm install jquery/jquery

seajs.config({
  base: "./sea-modules/",
  alias: {
  "$": "jquery/jquery/1.10.1/jquery.js",   // 需要配置这个
  "dialog": "arale/dialog/1.2.1/dialog.js"
  }
 });

这些内容文档中都没有相关说明。

BaseDialog的一些疑惑（bug）

1. 继承delegateEvents后增加了一些内容（trigger事件的绑定等）

   delegateEvents除了在initialize时做events的解析外，还作为一个对外的dom事件绑定接口使用，比如：object.delegateEvents('click .title', function(){})，如果把这些额外的内容放在delegateEvents里，会导致额外内容代码的多次执行（dom事件的重复绑定等）

   建议：将这些额外的事件绑定操作放在setup方法里

2. 对trigger的dom事件绑定

   用delegateEvents绑定的dom事件在组件销毁（destroy）时做了对应的注销处理，而
   this.get('trigger').on(this.get('triggerType'), function(e) {})这样的方式绑定的dom事件在组件destroy后无法注销，对用户体验不友好，同时也会造成内存泄露

   建议：按照delegateEvents的方式绑定这些不在element内的dom事件，在destroy时统一注销（这类需求多的话，可以在Widget基类上增加相应接口）

3. 一处代码的疑惑

   // 绑定确定和关闭事件到 dom 元素上，以供全局调用
           Events.mixTo(this.element[0]);
           this.element[0].on('confirm', this._confirmHandler, this);
           this.element[0].on('close cancel', this._closeHandler, this); 
   

   没看到全局调用的相关代码，且在原生的dom对象上增加非简单数据类型的属性容易引起内存泄漏

model 被覆盖

parseElement 覆盖了 model，继承者在模板渲染的时候可能会有问题。

在 widget 升级的时候需要注意

https://github.com/aralejs/dialog/blob/1.0.2/src/dialog.js#L76

ConfirmBox好像有问题

浏览器：chrome

dialog.set('content', 'content')后不会自动重新定位

如题，现在dialog替换内容不会自动重新定位，而且替换内容后没有相应事件，想在替换内容后做处理只能动用其他很蛋疼的方法！

关于模态dialog的一个小问题

_onRenderZIndex: function(val) {
            mask.set("zIndex", parseInt(val, 10) - 1);
            return Dialog.superclass._onRenderZIndex.call(this, val);
  }

最好加上hasMask判定

_onRenderZIndex: function(val) {
            this.get('hasMask')&&mask.set("zIndex", parseInt(val, 10) - 1);
            return Dialog.superclass._onRenderZIndex.call(this, val);
  }

否则多个dialog同时show时会产生混乱

去除 handlebars 的依赖

等 spm-build 更新到 0.3.2，会内置 handlebars 的依赖，到时可以去除

dialog在火狐和IE6下的定位问题

调用代码：

seajs.use(['confirmbox'], function(ConfirmBox) {
var cb = new ConfirmBox({
        trigger: '#a',
        title: '我真是标题啊',
        message: '我是内容 我是内容',
        onConfirm: function() {
            var that = this;
            this.set('title', '三秒后关闭对话框');
            this.set('message', '不要啊！！');            
            setTimeout(function() {
                that.hide();
            }, 3000);
        }
    });
});

arale.dialog版本: 1.0.1
火狐版本: 20.0.1
IE版本: IE6
火狐下定位截图:

IE6下定位截图:

谷歌下正常