feat(switchButton): add safe area to switch button. (issue Tencent#353)

yumw · Dec 24, 2020 · 3b77c75 · 3b77c75
1 parent 1ac5a80
commit 3b77c75
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 33 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@ English | [简体中文](./CHANGELOG_CN.md)
 - [FEATURE] Add `fetch` log in Network tab. (by @weiqian93)
 - [FEATURE] Add darkmode theme. (by @progrape)
 - [FEATURE] New plugin [vconsole-stats-plugin](https://github.com/smackgg/vConsole-Stats). (by @smackgg)
+- [FEATURE] Add safe area to switch button. (issue #353)
 - [FIX] The position of the switch button will be reset by mistake when clicked.
 - [FIX] Fix `document.documentElement.offsetHeight|offsetWidth` is unreliable in newer browsers. (by @littlee)
 - [FIX] Prevent dispatchEvent for disabled or readOnly elements. (by @norux)

diff --git a/dist/vconsole.min.js b/dist/vconsole.min.js
diff --git a/src/core/core.js b/src/core/core.js
@@ -59,8 +59,8 @@ class VConsole {
 
     this.switchPos = {
       hasMoved: false, // exclude click event
-      x: 10, // right
-      y: 10, // bottom
+      x: 0, // right
+      y: 0, // bottom
       startX: 0,
       startY: 0,
       endX: 0,
@@ -155,23 +155,11 @@ class VConsole {
     const $switch = $.one('.vc-switch', this.$dom);
     let switchX = tool.getStorage('switch_x') * 1,
         switchY = tool.getStorage('switch_y') * 1;
-    if (switchX || switchY) {
-      // check edge
-      const docWidth = Math.max(document.documentElement.offsetWidth, window.innerWidth);
-      const docHeight = Math.max(document.documentElement.offsetHeight, window.innerHeight);
-      if (switchX + $switch.offsetWidth > docWidth) {
-        switchX = docWidth - $switch.offsetWidth;
-      }
-      if (switchY + $switch.offsetHeight > docHeight) {
-        switchY = docHeight - $switch.offsetHeight;
-      }
-      if (switchX < 0) { switchX = 0; }
-      if (switchY < 0) { switchY = 0; }
-      this.switchPos.x = switchX;
-      this.switchPos.y = switchY;
-      $.one('.vc-switch').style.right = switchX + 'px';
-      $.one('.vc-switch').style.bottom = switchY + 'px';
-    }
+    [switchX, switchY] = this._getSwitchButtonSafeAreaXY($switch, switchX, switchY);
+    this.switchPos.x = switchX;
+    this.switchPos.y = switchY;
+    $.one('.vc-switch').style.right = switchX + 'px';
+    $.one('.vc-switch').style.bottom = switchY + 'px';
 
     // modify font-size
     const dpr = window.devicePixelRatio || 1;
@@ -193,6 +181,25 @@ class VConsole {
     }
   };
 
+  /**
+   * Get an safe [x, y] position for switch button
+   * @private
+   */
+  _getSwitchButtonSafeAreaXY($switch, x, y) {
+    const docWidth = Math.max(document.documentElement.offsetWidth, window.innerWidth);
+    const docHeight = Math.max(document.documentElement.offsetHeight, window.innerHeight);
+    // check edge
+    if (x + $switch.offsetWidth > docWidth) {
+      x = docWidth - $switch.offsetWidth;
+    }
+    if (y + $switch.offsetHeight > docHeight) {
+      y = docHeight - $switch.offsetHeight;
+    }
+    if (x < 0) { x = 0; }
+    if (y < 20) { y = 20; } // safe area for iOS Home indicator
+    return [x, y];
+  }
+
   /**
    * simulate tap event by touchstart & touchend
    * @private
@@ -274,10 +281,10 @@ class VConsole {
    * @private
    */
   _bindEvent() {
-    let that = this;
+    const that = this;
 
     // drag & drop switch button
-    let $switch = $.one('.vc-switch', that.$dom);
+    const $switch = $.one('.vc-switch', that.$dom);
     $.bind($switch, 'touchstart', function(e) {
       that.switchPos.startX = e.touches[0].pageX;
       that.switchPos.startY = e.touches[0].pageY;
@@ -303,22 +310,13 @@ class VConsole {
             offsetY = e.touches[0].pageY - that.switchPos.startY;
       let x = Math.floor(that.switchPos.x - offsetX),
           y = Math.floor(that.switchPos.y - offsetY);
-      // check edge
-      const docWidth = Math.max(document.documentElement.offsetWidth, window.innerWidth);
-      const docHeight = Math.max(document.documentElement.offsetHeight, window.innerHeight);
-      if (x + $switch.offsetWidth > docWidth) {
-        x = docWidth - $switch.offsetWidth;
-      }
-      if (y + $switch.offsetHeight > docHeight) {
-        y = docHeight - $switch.offsetHeight;
-      }
-      if (x < 0) { x = 0; }
-      if (y < 0) { y = 0; }
+      [x, y] = that._getSwitchButtonSafeAreaXY($switch, x, y);
       $switch.style.right = x + 'px';
       $switch.style.bottom = y + 'px';
       that.switchPos.endX = x;
       that.switchPos.endY = y;
       that.switchPos.hasMoved = true;
+      console.log(x, y);
       e.preventDefault();
     });