From 8ec88eef438794ccab49d1050fe5b073fc68b2fa Mon Sep 17 00:00:00 2001
From: Jenny_L <jiaojiaomao220@163.com>
Date: Wed, 15 Nov 2017 01:13:39 -0600
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0mip-lightbox=E5=AF=B9?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E7=9A=84=E6=94=AF=E6=8C=81=20(#905)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/mip-lightbox/README.md              | 41 ++++++++++++++++--
 src/mip-lightbox/mip-lightbox.js        | 56 ++++++++++++++++++-------
 src/mip-lightbox/mip-lightbox.less      | 29 ++++++-------
 src/mip-lightbox/package.json           |  8 +++-
 src/mip-lightbox/setting/example.preset | 21 ++++++++--
 5 files changed, 114 insertions(+), 41 deletions(-)

diff --git a/src/mip-lightbox/README.md b/src/mip-lightbox/README.md
index faef1debb..b8e8f6b2d 100644
--- a/src/mip-lightbox/README.md
+++ b/src/mip-lightbox/README.md
@@ -1,6 +1,6 @@
 # mip-lightbox 弹出层
 
-由用户控制展现或关闭的全屏浮层组件，组件全屏覆盖，组件里的元素超出屏幕会被隐藏，不能滑动。
+由用户控制展现或关闭的全屏浮层组件，组件全屏覆盖。
 
 标题|内容
 ----|----
@@ -24,21 +24,51 @@
     <div class="lightbox">
         <h1>Hello, World!</h1>
         <p> this is the lightbox</p>
+        <span on="tap:my-lightbox.toggle" class="lightbox-close">关闭弹层</span>
     </div>
 </mip-lightbox>
 ```
+
+### 配置内容区可滚动
+
+可用于展示搜索结果，用户协议等长内容。添加`content-scroll`属性可配置内容滚动。
+
+```html
+<button on="tap:my-lightbox2.toggle" id="btn-open" role="button" tabindex="0">
+    打开用户协议
+</button>
+
+<mip-lightbox
+    id="my-lightbox2"
+    layout="nodisplay"
+    class="mip-hidden"
+    content-scroll>
+    <div class="lightbox">
+        <span on="tap:my-lightbox2.toggle" class="lightbox-close">忽略</span>
+        <h1>Hello, World!</h1>
+        <p> this is the lightbox</p>
+        <p> this is the lightbox</p>
+        <p> this is the lightbox</p>
+        <p> this is the lightbox</p>
+        <p> this is the lightbox</p>
+        <p> this is the lightbox</p>
+        <span on="tap:my-lightbox2.toggle" class="lightbox-close">我知道了</span>
+    </div>
+</mip-lightbox>
+```
+
 ### 自动关闭
 
 [notice] 此属性与 class 为 `mip-lightbox-seconds` 的标签配套使用
 
 ```html
-<button on="tap:my-lightbox.toggle" id="btn-open" role="button" tabindex="0">
+<button on="tap:my-lightbox3.toggle" id="btn-open" role="button" tabindex="0">
     Open lightbox
 </button>
 
 <mip-lightbox
     autoclosetime="5"
-    id="my-lightbox"
+    id="my-lightbox3"
     layout="nodisplay"
     class="mip-hidden">
     <div class="lightbox">
@@ -72,6 +102,9 @@
 类型：字符串    
 取值：数字，单位秒
 
+### content-scroll
+说明：配置内容区域可以滚动，如果不填则内容不可滚动。  
+必选项：否      
 
 ## 注意事项
 
@@ -79,4 +112,4 @@
 
 - mip-lightbox 需要一个 div 子节点，这个 div 的 calss 必须有 lightbox，并且必须有 on 属性，属性值为"tap:组件ID.close"。 
 
-- 依赖 mipmain 最低版本为 1.1.2
+- 依赖 mipmain 最低版本为 1.1.2
\ No newline at end of file
diff --git a/src/mip-lightbox/mip-lightbox.js b/src/mip-lightbox/mip-lightbox.js
index 4dfcc7090..dae4a1082 100644
--- a/src/mip-lightbox/mip-lightbox.js
+++ b/src/mip-lightbox/mip-lightbox.js
@@ -10,7 +10,11 @@ define(function (require) {
     var fixedElement = require('fixed-element');
     var util = require('util');
     var Gesture = util.Gesture;
-
+    var scrollTop = {
+        body: 0,
+        documentElement: 0,
+        offset: 0
+    };
 
     /**
      * render
@@ -21,6 +25,7 @@ define(function (require) {
         var self = this;
         self.open = false;
         self.id = this.element.id;
+        self.scroll = this.element.hasAttribute('content-scroll');
         // bottom 不能为0，不然会覆盖遮盖曾，导致无法关闭lightbox
         util.css(self.element, {
             'position': 'fixed',
@@ -61,9 +66,7 @@ define(function (require) {
                 time -= 1;
                 seconds.innerHTML = time;
                 if (time <= 0) {
-                    self.open = false;
-                    closeMask.call(self);
-                    util.css(self.element, {display: 'none'});
+                    close.call(self);
                 }
             }, 1000);
         }
@@ -114,14 +117,23 @@ define(function (require) {
         fixedElement.hideFixedLayer(fixedElement._fixedLayer);
         event.preventDefault();
 
-        new Gesture(self.element, {
-            preventY: true
-        });
+        if (!self.scroll) {
+            new Gesture(self.element, {
+                preventY: true
+            });
+        }
 
         self.open = true;
         util.css(self.element, {display: 'block'});
+        // 保存页面当前滚动状态，因为设置overflow:hidden后页面会滚动到顶部
+        scrollTop.body = document.body.scrollTop;
+        scrollTop.documentElement = document.documentElement.scrollTop;
+        scrollTop.offset = window.pageYOffset;
+        document.documentElement.classList.add('mip-no-scroll');
+
         openMask.call(self);
         autoClose.call(self);
+
     }
 
 
@@ -131,21 +143,32 @@ define(function (require) {
      * @param  {Object} event [事件对象]
      */
     function close(event) {
-
         var self = this;
 
         if (!self.open) {
             return;
         }
         fixedElement.showFixedLayer(fixedElement._fixedLayer);
-        event.preventDefault();
+        if (event) {
+            event.preventDefault();
+        }
 
         self.open = false;
 
         closeMask.call(self);
         util.css(self.element, {display: 'none'});
-        util.css(document.body, {overflow: 'auto'});
+        document.documentElement.classList.remove('mip-no-scroll');
 
+        // 恢复页面滚动状态到lightbox打开之前
+        if (typeof (document.body.scrollTo) === 'function') {
+            // 先判断存在，因为safari浏览器没有document.body.scrollTo方法
+            document.body.scrollTo(0, scrollTop.body);
+        }
+        if (typeof (document.documentElement.scrollTo) === 'function') {
+            // 先判断存在，因为safari浏览器没有document.documentElement.scrollTo方法
+            document.documentElement.scrollTo(0, scrollTop.documentElement);
+        }
+        window.scrollTo(0, scrollTop.offset);
     }
 
     /**
@@ -177,10 +200,11 @@ define(function (require) {
 
             // 与mip-lightbox 同级dom
             self.element.parentNode.appendChild(mask);
-            mask.addEventListener('touchmove', function (evt) {
-                evt.preventDefault();
-            }, false);
-
+            if (!self.scroll) {
+                mask.addEventListener('touchmove', function (evt) {
+                    evt.preventDefault();
+                }, false);
+            }
             self.maskElement = mask;
 
         }
@@ -201,7 +225,6 @@ define(function (require) {
         }
     }
 
-
     /**
      * 初始化
      *
@@ -209,6 +232,7 @@ define(function (require) {
     customElement.prototype.build = render;
     customElement.prototype.detachedCallback = function () {
         clearInterval(this.interval);
+        document.documentElement.classList.remove('mip-no-scroll');
     };
     return customElement;
-});
+});
\ No newline at end of file
diff --git a/src/mip-lightbox/mip-lightbox.less b/src/mip-lightbox/mip-lightbox.less
index 8fb9bebaf..ba62d045a 100644
--- a/src/mip-lightbox/mip-lightbox.less
+++ b/src/mip-lightbox/mip-lightbox.less
@@ -1,14 +1,16 @@
 mip-lightbox {
-	color: #fff;
-}
-.lightbox {
-	/*background: rgba(0,0,0,0.8);
-    width: 100%;
-    height: 100%;
-    position: absolute;*/
-}
-mip-lightbox a {
-    color: #fff!important;
+    max-height: 100%;
+    overflow: auto;
+    box-sizing: border-box;
+    a {
+        color: #fff;
+    }
+
+    .mip-lightbox-countdown {
+        position: absolute;
+        top: 5px;
+        right: 5px;
+    }
 }
 
 #MIP-LLIGTBOX-MASK {
@@ -21,9 +23,4 @@ mip-lightbox a {
     background: rgba(0,0,0,0.8);
     z-index: 10000!important;
     display: none;
-}
-.mip-lightbox-countdown {
-    position: absolute;
-    top: 5px;
-    right: 5px;
-}
+}
\ No newline at end of file
diff --git a/src/mip-lightbox/package.json b/src/mip-lightbox/package.json
index d877fef7c..54bbc0143 100644
--- a/src/mip-lightbox/package.json
+++ b/src/mip-lightbox/package.json
@@ -1,12 +1,18 @@
 {
     "name": "mip-lightbox",
-    "version": "1.0.3",
+    "version": "1.0.4",
     "description": "弹层组件",
     "author": {
         "name": "MIP authors",
         "email": "mip-support@baidu.com",
         "url": "https://www.mipengine.org"
     },
+    "contributors": [
+        {
+            "name": "JennyL",
+            "email": "jiaojiaomao220@163.com"
+        }
+    ],
     "engines": {
         "mip": ">=1.1.2"
     }
diff --git a/src/mip-lightbox/setting/example.preset b/src/mip-lightbox/setting/example.preset
index 1dfd4898c..beb0f5f54 100644
--- a/src/mip-lightbox/setting/example.preset
+++ b/src/mip-lightbox/setting/example.preset
@@ -1,11 +1,24 @@
 <style mip-custom>
-#btn-open {
+mip-lightbox {
+	padding: 10px;
+}
+#btn-open, .lightbox-close {
     border: 1px solid #f1f1f1;
     border-radius: 5px;
     padding: 10px 20px;
-    margin: 20px 5%;
-    width: 90%;
+    margin: 20px 0;
     font-size: 14px;
     background: #fff;
+    display: block;
+    box-sizing: border-box;
+}
+
+.lightbox {
+	padding: 10px;
+	background: white;
+}
+.lightbox p {
+	margin: 80px 0;
+	display: block;
 }
-</style>
+</style>
\ No newline at end of file