修复若干问题 aui#47 aui#48

masdude · Dec 11, 2013 · de67e14 · de67e14
1 parent adcc522
commit de67e14
Show file tree

Hide file tree

Showing 13 changed files with 116 additions and 51 deletions.
diff --git a/css/ui-dialog.css b/css/ui-dialog.css
@@ -31,6 +31,12 @@
 	-webkit-transform: scale(1);
 	transform: scale(1);
 }
+.ui-popup-focus .ui-dialog {
+	box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+}
+.ui-popup-modal .ui-dialog {
+	box-shadow: 0 0 8px rgba(0, 0, 0, 0.1), 0 0 256px rgba(255, 255, 255, .3);
+}
 .ui-dialog-grid {
 	width: auto;
 	margin: 0;
@@ -39,9 +45,6 @@
 	border-spacing: 0;
 	background: transparent;
 }
-.ui-popup-focus .ui-dialog {
-	box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
-}
 .ui-dialog-header,
 .ui-dialog-body,
 .ui-dialog-footer {
@@ -51,6 +54,7 @@
 	background: transparent;
 }
 .ui-dialog-header {
+	white-space: nowrap;
 	border-bottom: 1px solid #E5E5E5;
 }
 .ui-dialog-close {
@@ -101,6 +105,7 @@
 .ui-dialog-content {
 	display: inline-block;
 	position: relative;
+	vertical-align: middle;
 	*zoom: 1;
 	*display: inline;
 	text-align: left;
@@ -402,39 +407,39 @@
 }
 
 .ui-dialog-loading {
+	vertical-align: middle;
 	position: relative;
-	display: inline-block;
+	display: block;
 	*zoom: 1;
 	*display: inline;
 	overflow: hidden;
     width: 32px;
     height: 32px;
-    left: 50%;
     top: 50%;
-    margin-left: -16px;
-    margin-top: -16px;
+    margin: -16px auto 0 auto;
     font-size: 0;
-    text-align: left;;
     text-indent: -999em;
     color: #666;
-   	position: inherit\9;
-   	margin: auto\9;
-    width: auto\9;
-    height: auto\9;
+}
+.ui-dialog-loading {
+    width: 100%\9;
     text-indent: 0\9;
+    line-height: 32px\9;
+    text-align: center\9;
     font-size: 12px\9;
 }
 
 .ui-dialog-loading::after {
+	position: absolute;
 	content: '';
     width: 3px;
     height: 3px;
 	margin: 14.5px 0 0 14.5px;
     border-radius: 100%;
     box-shadow: 0 -10px 0 1px #ccc, 10px 0px #ccc, 0 10px #ccc, -10px 0 #ccc, -7px -7px 0 0.5px #ccc, 7px -7px 0 1.5px #ccc, 7px 7px #ccc, -7px 7px #ccc;
-	position: absolute;
     -webkit-transform: rotate(360deg);
-    -webkit-animation: ui-dialog-loading 1s infinite linear;
+    -webkit-animation: ui-dialog-loading 1.5s infinite linear;
     transform: rotate(360deg);
-    animation: ui-dialog-loading 1s infinite linear;
+    animation: ui-dialog-loading 1.5s infinite linear;
+    display: none\9;
 }
diff --git a/doc/index.html b/doc/index.html
@@ -705,11 +705,23 @@ <h3><span id="api-content">content(html)</span></h3>
 
 <h4>示例</h4>
 
+<p>传入字符串：</p>
+
 <pre><code>var d = dialog();
 d.content('hello world');
 d.show();
 </code></pre>
 
+<p>传入元素节点：</p>
+
+<pre><code>//..
+var elem = document.getElementById('test');
+dialog({
+    content: elem,
+    id: 'EF893L'
+}).show();
+</code></pre>
+
 <h3><span id="api-title">title(text)</span></h3>
 
 <p>写入对话框标题。</p>
@@ -811,8 +823,9 @@ <h4>示例</h4>
 <p>传入元素节点：</p>
 
 <pre><code>//..
+var elem = document.getElementById('test');
 dialog({
-    content: document.getElementById('test'),
+    content: elem,
     id: 'EF893L'
 }).show();
 </code></pre>
@@ -977,11 +990,6 @@ <h4>选项</h4>
 <td> (默认值:<code>false</code>) 是否自动聚焦</td>
 </tr>
 <tr>
-<td>width </td>
-<td> String </td>
-<td> (可选) 设置按钮 CSS width 值</td>
-</tr>
-<tr>
 <td>disabled </td>
 <td> Boolean </td>
 <td> (默认值: <code>false</code>) 是否禁用</td>

diff --git a/doc/index.md b/doc/index.md
@@ -374,11 +374,24 @@ d.close().remove();
 
 ####	示例
 
+传入字符串：
+
 ```
 var d = dialog();
 d.content('hello world');
 d.show();
-``` 
+```
+
+传入元素节点：
+
+```
+//..
+var elem = document.getElementById('test');
+dialog({
+	content: elem,
+	id: 'EF893L'
+}).show();
+```
 
 ###	[title(text)](id:api-title)
 
@@ -485,8 +498,9 @@ dialog({
 
 ```
 //..
+var elem = document.getElementById('test');
 dialog({
-	content: document.getElementById('test'),
+	content: elem,
 	id: 'EF893L'
 }).show();
 ```
@@ -638,7 +652,6 @@ Array
 value | String | 按钮显示文本
 callback | Function | (可选) 回调函数``this``指向``dialog``对象，执行完毕默认关闭与销毁对话框（依次执行``close()``与``remove()``），若返回``false``则阻止关闭与销毁
 autofocus | Boolean | (默认值:``false``) 是否自动聚焦
-width | String | (可选) 设置按钮 CSS width 值
 disabled | Boolean | (默认值: ``false``) 是否禁用
 id | String, Number | (可选) 按钮唯一标识
 

diff --git a/doc/js/doc.js b/doc/js/doc.js
@@ -95,7 +95,7 @@ $(function () {
 	});
 
 	// 代码高亮
-	setTimeout(sh_languages, 150);
+	setTimeout(sh_languages, 500);
 
 	// 回到顶部
 	var $top = $('<a class="doc-gotop" href="javascript:;">TOP</a>')

diff --git a/src/dialog.js b/src/dialog.js
@@ -165,10 +165,10 @@ artDialog.create = function (options) {
 
 
     // 按钮组点击
-    $popup.on('click', '[data-trigger]', function (event) {
+    $popup.on('click', '[data-id]', function (event) {
         var $this = $(this);
         if (!$this.attr('disabled')) {// IE BUG
-            that._trigger($this.data('trigger'));
+            that._trigger($this.data('id'));
         }
 
         event.preventDefault();
@@ -194,7 +194,7 @@ artDialog.create = function (options) {
         // 避免输入状态中 ESC 误操作关闭
         if (!isTop || rinput.test(nodeName) && target.type !== 'button') {
             return;
-        };
+        }
 
         if (keyCode === 27) {
             that._trigger('cancel');
@@ -315,7 +315,7 @@ $.extend(prototype, {
      */
     content: function (html) {
 
-        this._$('content').html('')
+        this._$('content').empty('')
         [typeof html === 'object' ? 'append' : 'html'](html);
 
         return this.reset();
@@ -370,8 +370,7 @@ $.extend(prototype, {
                 html +=
                   '<button'
                 + ' type="button"'
-                + ' style="width:' + val.width + '"'
-                + ' data-trigger="' + val.id + '"'
+                + ' data-id="' + val.id + '"'
                 + (val.disabled ? ' disabled' : '')
                 + (val.autofocus ? ' autofocus class="ui-dialog-autofocus"' : '')
                 + '>'
@@ -388,9 +387,8 @@ $.extend(prototype, {
 
 
     statusbar: function (html) {
-        this._$('statusbar').html('')
-        [typeof html === 'object' ? 'append' : 'html'](html)
-        [html ? 'show' : 'hide']();
+        this._$('statusbar')
+        .html(html)[html ? 'show' : 'hide']();
 
         return this;
     },

diff --git a/src/drag.js b/src/drag.js
@@ -115,7 +115,7 @@ DragEvent.prototype = {
             this.target.off('losecapture', this.end);
         } else {
             $window.off('blur', this.end);
-        };
+        }
 
         isSetCapture && this.target[0].releaseCapture();
 

diff --git a/src/popup.js b/src/popup.js
@@ -1,6 +1,6 @@
 /*!
 * popup.js
-* Date: 2013-12-06
+* Date: 2013-12-11
 * (c) 2009-2013 TangBin, http://www.planeArt.cn
 *
 * This is licensed under the GNU LGPL, version 2.1 or later.
@@ -130,7 +130,7 @@ $.extend(Popup.prototype, {
 
     /**
      * 显示浮层
-     * @param   {HTMLElement Object, Event Object}  指定位置（可选）
+     * @param   {HTMLElement, Event}  指定位置（可选）
      */
     show: function (anchor) {
 

diff --git a/test/close.html b/test/close.html
@@ -5,7 +5,7 @@
 	<title>test</title>
 </head>
 <body>
-<button id="test">close()</button>
+<button id="test">close().remove()</button>
 <script src="../lib/sea.js"></script>
 <script>
 seajs.config({

diff --git a/test/content.html b/test/content.html
@@ -5,8 +5,8 @@
 	<title>test</title>
 </head>
 <body>
-<button id="test">content('hello world')</button> <button id="test2">content(document.getElementById('hidden-content'))</button>
-<div id="hidden-content" style="color:red;">我是DOM节点</div>
+<button id="test">content('hello world')</button> <button id="test2">content(elem)</button>
+<div id="test-content" style="color:red;"><p>我是DOM节点</p></div>
 <script src="../lib/sea.js"></script>
 <script>
 seajs.config({
@@ -39,8 +39,9 @@
 		d.content('hello world');
 	});
 
+	var elem = document.getElementById('test-content');
 	$('#test2').on('click', function () {
-		d.content(document.getElementById('hidden-content'));
+		d.content(elem);
 	});
 
 });

diff --git a/test/iframe-content.html b/test/iframe-content.html
@@ -54,11 +54,10 @@
 				//height: 120,
 				data: $('#input').val(),// iframe可获取到这个数据
 				onclose: function () {
-					$('#input').val(this.returnValue);
+					this.returnValue && $('#input').val(this.returnValue);
 					dialog.focus();
 				},
 				oniframeload: function () {
-					console.log(this)
 					//console.log('iframe ready')
 				}
 			});

diff --git a/test/loading.html b/test/loading.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<title>test</title>
+	<style>
+		html, body {
+			height: 100%;
+		}
+		#fixed {
+			position: fixed;
+			bottom: 0;
+			left: 20%;
+		}
+	</style>
+</head>
+<body>
+<button id="test">content('hello world')</button>
+<script src="../lib/sea.js"></script>
+<script>
+seajs.config({
+  alias: {
+    "jquery": "jquery-1.10.2.js"
+  }
+});
+</script>
+
+<script>
+seajs.use(['jquery', '../src/dialog'], function ($, dialog) {
+
+	var d = dialog({
+		width: 60,
+		height: 60
+	});
+
+	d.show();
+
+	$('#test').on('click', function () {
+		d.width('auto');
+		d.height('auto');
+		d.content('hello world');
+	});
+
+});
+</script>
+</body>
+</html>
diff --git a/test/openDialog.html b/test/openDialog.html
@@ -15,6 +15,7 @@
 });
 </script>
 <script>
+window.console = window.console || {log:function () {}}
 window.openDialog = function (options) {
 	// 页面地址
 	var url = options.url;

diff --git a/test/title.html b/test/title.html
@@ -30,14 +30,7 @@
 seajs.use(['jquery', '../src/dialog'], function ($, dialog) {
 
 	var d = dialog({
-		title: '消息',
-		content: '风吹起的青色衣衫，夕阳里的温暖容颜，你比以前更加美丽，像盛开的花',
-		okValue: '确 定',
-		ok: function () {},
-		cancel: function () {
-			this.title('不许取消');
-			return false;
-		}
+		title: 'loading..'
 	});
 
 	d.show();