Merge pull request #350 from kaola-fed/feature_draggable

Modal添加draggable，modal、loading、imagepreview添加el，指定父级元素
kaola-fed · Apr 13, 2018 · 5370abb · 5370abb
2 parents 5e28247 + 366e4b8
commit 5370abb
Show file tree

Hide file tree

Showing 16 changed files with 519 additions and 36 deletions.
diff --git a/doc/source/doc.js b/doc/source/doc.js
@@ -108,7 +108,7 @@ const doc = (isDev, callback) => {
   // 组件文档
   CATES.forEach((c) => {
     const components = getComponents(c.cate).filter((comp) => {
-      if (isDev && !/^KL(Sidebar|Upload|Menu|Button|Table|Select|MultiSelect)$/.test(comp)) {
+      if (isDev && !/^KL(Sidebar|Modal|Draggable|Button|Loading|ImagePreview)$/.test(comp)) {
         return false;
       }
 

diff --git a/doc/themes/nekui/layout/index.ejs b/doc/themes/nekui/layout/index.ejs
@@ -88,7 +88,7 @@ $(document).ready(function() {
             'background': '#1D2E45 url(//haitao.nos.netease.com/056f5787-daa5-4a46-8eb4-d662eb6c7618.jpg) no-repeat scroll right bottom'});
         $('.m-section1').addClass('loaded');
     };
-    earth.src = 'http://haitao.nos.netease.com/056f5787-daa5-4a46-8eb4-d662eb6c7618.jpg';
+    earth.src = '//haitao.nos.netease.com/056f5787-daa5-4a46-8eb4-d662eb6c7618.jpg';
 
     var $header = $('#header'),
         $logo = $('#logo'),

diff --git a/doc/themes/nekui/layout/layout.ejs b/doc/themes/nekui/layout/layout.ejs
@@ -15,6 +15,8 @@
         <link rel="icon" href="/images/favicon.ico" type="image/x-icon">
 
         <link rel="dns-prefetch" href="//cdnjs.cloudflare.com" />
+        <link rel="dns-prefetch" href="//haitao.nos.netease.com" />
+        <link rel="dns-prefetch" href="//at.alicdn.com" />
 
         <% if (isIndex) { %>
             <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/jquery.fullpage.min.css" />

diff --git a/src/js/components/notice/KLModal/index.html b/src/js/components/notice/KLModal/index.html
@@ -1,13 +1,13 @@
-<div class="m-modal {class}" r-animation='on:leave;class: modal_animated modal_zoomOut'>
-    <div class="modal_dialog modal_animated zoomIn fast" style="width: {width}px" ref="modalDialog">
-        <draggable disabled={!draggable} proxy={this.$refs.modalDialog} on-dragstart={this._onDragStart($event)}>
+<div class="m-modal {class}" r-anim='on:enter; class: modal_animated modal_zoomIn; on:leave; class: modal_animated modal_zoomOut;'>
+    <div class="modal_dialog" style="width: {width}px;" ref="modalDialog">
+        <kl-draggable disabled={!draggable} proxy={this.$refs.modalDialog} on-dragstart={this._onDragStart($event)}>
         <div class="modal_hd">
             {#if isCanClose}
             <a class="modal_close" on-click={this.close(false)}><i class="u-icon u-icon-close"></i></a>
             {/if}
             <h3 class="modal_title">{title}</h3>
         </div>
-        </draggable>
+        </kl-draggable>
         <div class="modal_bd" {#if maxHeight || minHeight} style="max-height: {maxHeight}px; min-height: {minHeight}px; overflow: auto;" {/if}>
             {#if contentTemplate}{#inc @(contentTemplate)}{#else}{content}{/if}
         </div>
@@ -17,7 +17,7 @@ <h3 class="modal_title">{title}</h3>
 	            {#inc @(footerTemplate)}
 	        {#else}
 		        {#if okButton}
-                <kl-button type="primary" title={okButton === true ? this.$trans('CONFIRM') : okButton}on-click={this.close(true, $event)} disabled={okDisabled} />
+                <kl-button type="primary" title={okButton === true ? this.$trans('CONFIRM') : okButton} on-click={this.close(true, $event)} disabled={okDisabled} />
 		        {/if}
 		        {#if cancelButton && isCanClose}
 		            <kl-button title={cancelButton === true ? this.$trans('CANCEL') : cancelButton}

diff --git a/src/js/components/notice/KLModal/index.js b/src/js/components/notice/KLModal/index.js
@@ -26,6 +26,8 @@ const _ = require('../../../ui-base/_');
  * @param {boolean}           [options.data.noClose]              => ok时是否关闭弹窗
  * @param {number}            [options.data.minHeight]            => 内容区域最小高度
  * @param {number}            [options.data.maxHeight]            => 内容区域最大高度，超出则显示滚动条
+ * @param {string}            [options.data.el]                   => 设置对话框要插入的父级元素，默认为document.body
+ * @param {boolean}           [options.data.draggable=false]      => 是否可以拖拽对话框
  */
 const KLModal = Component.extend({
   name: 'kl-modal',
@@ -48,9 +50,10 @@ const KLModal = Component.extend({
 
   init() {
     this.supr();
-
-    // 如果不是内嵌组件，则嵌入到document.body中
-    if (this.$root === this) this.$inject(document.body);
+    // 如果不是内嵌组件，则嵌入到data.el或document.body中
+    if (this.$root === this) {
+      this.$inject(this.data.el || document.body);
+    }
   },
   /**
      * @method KLModal#close(result) 关闭对话框

diff --git a/src/js/components/notice/KLModal/index.mcss b/src/js/components/notice/KLModal/index.mcss
@@ -31,7 +31,7 @@
     // - Mask the background page
     background: rgba(0, 0, 0, 0.6);
 
-    &:before {
+    &:after {
         content: '';
         display: inline-block;
         vertical-align: middle;

diff --git a/src/js/components/notice/KLModal/index.md b/src/js/components/notice/KLModal/index.md
@@ -30,6 +30,33 @@ var component = new NEKUI.Component({
 ```
 <!-- demo_end -->
 
+<!-- demo_start -->
+### 配置要嵌入的父级元素
+
+设置modal嵌入的父级元素，默认为document.body
+
+<div class="m-example"></div>
+
+```xml
+<kl-button on-click="{this.show()}"  title="el: main"/>
+```
+
+```javascript
+var component = new NEKUI.Component({
+    template: template,
+    show: function() {
+        // 打开一个Modal，inject到#main元素里
+        var modal = new NEKUI.KLModal({
+            data: {
+                content: 'Modal内容',
+                el: '#main'
+            }
+        });
+    }
+});
+```
+<!-- demo_end -->
+
 <!-- demo_start -->
 ### 配置信息title
 
@@ -95,7 +122,7 @@ var component = new NEKUI.Component({
     show: function() {
         var modal = new NEKUI.KLModal({
             data: {
-   
+
                 name: 'Rabbit',
                 contentTemplate: '<kl-row><kl-col span=10><kl-input value="{name}"/></kl-col></kl-row>'
             }
@@ -121,7 +148,7 @@ var component = new NEKUI.Component({
     show: function() {
         var modal = new NEKUI.KLModal({
             data: {
-   
+
                 name: 'Rabbit',
                 content: '自定义footer',
                 footerTemplate: '<kl-row><kl-col span=6><kl-button title="提交" type="secondary" /></kl-col><kl-col span=6><kl-button title="撤销"  type="success" /></kl-col></kl-row>'
@@ -148,7 +175,7 @@ var component = new NEKUI.Component({
     show: function(okDisabled) {
         var modal = new NEKUI.KLModal({
             data: {
-   
+
                 okDisabled: okDisabled,
                 content: 'okDisabled设置为' + okDisabled,
             }
@@ -174,7 +201,7 @@ var component = new NEKUI.Component({
     show: function(cancelDisabled) {
         var modal = new NEKUI.KLModal({
             data: {
-   
+
                 cancelDisabled: cancelDisabled,
                 cancelButton: true,
                 content: 'cancelDisabled设置为' + cancelDisabled,
@@ -203,7 +230,7 @@ var component = new NEKUI.Component({
     show: function(hasFooter) {
         var modal = new NEKUI.KLModal({
             data: {
-   
+
                 hasFooter: hasFooter,
                 content: 'hasFooter设置为' + hasFooter,
             }
@@ -233,7 +260,7 @@ var component = new NEKUI.Component({
     show: function(isCanClose) {
         var modal = new NEKUI.KLModal({
             data: {
-   
+
                 isCanClose: isCanClose,
                 content: 'isCanClose设置为' + isCanClose,
             }
@@ -263,7 +290,7 @@ var component = new NEKUI.Component({
     show: function(okButton) {
         var modal = new NEKUI.KLModal({
             data: {
-   
+
                 okButton: okButton,
                 content: '设置okButton的值',
             }
@@ -290,7 +317,7 @@ var component = new NEKUI.Component({
     show: function(cancelButton) {
         var modal = new NEKUI.KLModal({
             data: {
-   
+
                 cancelButton: cancelButton,
                 content: '设置cancelButton'
             }
@@ -324,7 +351,7 @@ var component = new NEKUI.Component({
     show: function() {
         var modal = new NEKUI.KLModal({
             data: {
-   
+
                 cancelButton: true,
                 content: '设置自定义样式',
                 class: 'u-modal-red',
@@ -352,7 +379,7 @@ var component = new NEKUI.Component({
     show: function(noClose) {
         var modal = new NEKUI.KLModal({
             data: {
-   
+
                 noClose: noClose,
                 content: '设置noClose:' + noClose,
             }
@@ -430,6 +457,31 @@ var component = new NEKUI.Component({
 ```
 <!-- demo_end -->
 
+<!-- demo_start -->
+### 配置信息draggable
+设置Modal可拖拽，默认不可拖拽。
+
+<div class="m-example"></div>
+
+```xml
+<kl-button on-click="{this.show()}"  title="draggable：true"/>
+```
+
+```javascript
+var component = new NEKUI.Component({
+    template: template,
+    show: function() {
+        var modal = new NEKUI.KLModal({
+            data: {
+                content: 'Modal可拖拽',
+                draggable: true
+            }
+        });
+    }
+});
+```
+<!-- demo_end -->
+
 <!-- demo_start -->
 ### 实例方法cancel
 通过实例调用，执行该实例对象的`cancel`事件
@@ -453,11 +505,11 @@ var component = new NEKUI.Component({
         var modal = new NEKUI.KLModal({
             data: data
         });
-        
+
         modal.$on('cancel', function(){
             console.log('监听cancel事件');
         });
-      
+
         setTimeout(function(){
              modal.cancel();
         }, 3000);
@@ -535,11 +587,11 @@ var component = new NEKUI.Component({
         var modal = new NEKUI.KLModal({
             data: data
         });
-        
+
         modal.$on('ok', function(){
             console.log('监听ok事件');
         });
-      
+
         setTimeout(function(){
              modal.ok();
         }, 3000);
@@ -584,11 +636,11 @@ var component = new NEKUI.Component({
     template: template,
     show: function(content, title, okButton, cancelButton) {
         var modal = NEKUI.KLModal.confirm(content, title, okButton, cancelButton);
-        
+
         modal.$on('ok', function(){
             console.log('监听ok事件');
         });
-        
+
         modal.$on('cancel', function(){
             console.log('监听cancel事件');
         });
@@ -622,9 +674,9 @@ var component = new NEKUI.Component({
 var component = new NEKUI.Component({
     template: template,
     show: function(content, title, okButton) {
-  
+
         var modal = NEKUI.KLModal.alert(content, title, okButton);
-        
+
         modal.$on('ok', function(){
             console.log('监听ok事件');
         });

diff --git a/src/js/components/widget/KLDraggable/dragdrop.js b/src/js/components/widget/KLDraggable/dragdrop.js
@@ -0,0 +1,17 @@
+const dragdrop = {
+  dragging: false,
+  data: null,
+  proxy: null,
+  screenX: 0,
+  screenY: 0,
+  clientX: 0,
+  clientY: 0,
+  pageX: 0,
+  pageY: 0,
+  movementX: 0,
+  movementY: 0,
+  droppable: null,
+  droppables: [],
+};
+
+module.exports = dragdrop;