feat(elements): split mode

liriliri · Dec 21, 2022 · 5e91025 · 5e91025
1 parent bfa3845
commit 5e91025
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 13 deletions.
diff --git a/src/Elements/Elements.js b/src/Elements/Elements.js
@@ -4,6 +4,7 @@ import isEl from 'licia/isEl'
 import nextTick from 'licia/nextTick'
 import Emitter from 'licia/Emitter'
 import map from 'licia/map'
+import MediaQuery from 'licia/MediaQuery'
 import isEmpty from 'licia/isEmpty'
 import toNum from 'licia/toNum'
 import copy from 'licia/copy'
@@ -37,6 +38,8 @@ export default class Elements extends Tool {
     this._htmlEl = document.documentElement
     this._detail = new Detail(this._$detail, container)
     this.config = this._detail.config
+    this._splitMediaQuery = new MediaQuery('screen and (min-width: 680px)')
+    this._splitMode = this._splitMediaQuery.isMatch()
     this._domViewer = new LunaDomViewer(this._$domViewer.get(0), {
       node: this._htmlEl,
       ignore: (node) => isErudaEl(node) || isChobitsuEl(node),
@@ -54,6 +57,11 @@ export default class Elements extends Tool {
       this.select(document.body)
     }
   }
+  hide() {
+    super.hide()
+
+    chobitsu.domain('Overlay').hideHighlight()
+  }
   // To be removed in 3.0.0
   set(node) {
     return this.select(node)
@@ -73,6 +81,7 @@ export default class Elements extends Tool {
       .domain('Overlay')
       .off('inspectNodeRequested', this._inspectNodeRequested)
     chobitsu.domain('Overlay').disable()
+    this._splitMediaQuery.removeAllListeners()
   }
   _updateButtons() {
     const $control = this._$control
@@ -100,20 +109,29 @@ export default class Elements extends Tool {
       $showDetail.rmClass(iconDisabled)
     }
   }
+  _showDetail = () => {
+    if (this._curNode.nodeType === Node.ELEMENT_NODE) {
+      this._detail.show(this._curNode)
+    } else {
+      this._detail.show(this._curNode.parentNode)
+    }
+  }
   _initTpl() {
     const $el = this._$el
 
     $el.html(
-      c(`<div class="control">
-        <span class="icon icon-select select"></span>
-        <span class="icon icon-eye show-detail"></span>
-        <span class="icon icon-copy copy-node"></span>
-        <span class="icon icon-delete delete-node"></span>
+      c(`<div class="elements">
+        <div class="control">
+          <span class="icon icon-select select"></span>
+          <span class="icon icon-eye show-detail"></span>
+          <span class="icon icon-copy copy-node"></span>
+          <span class="icon icon-delete delete-node"></span>
+        </div>
+        <div class="dom-viewer-container">
+          <div class="dom-viewer"></div>
+        </div>
+        <div class="crumbs"></div>
       </div>
-      <div class="dom-viewer-container">
-        <div class="dom-viewer"></div>
-      </div>
-      <div class="crumbs"></div>
       <div class="detail"></div>`)
     )
 
@@ -162,7 +180,7 @@ export default class Elements extends Tool {
 
     this._$control
       .on('click', c('.select'), this._toggleSelect)
-      .on('click', c('.show-detail'), () => this._detail.show(this._curNode))
+      .on('click', c('.show-detail'), this._showDetail)
       .on('click', c('.copy-node'), this._copyNode)
       .on('click', c('.delete-node'), this._deleteNode)
 
@@ -171,6 +189,15 @@ export default class Elements extends Tool {
     chobitsu
       .domain('Overlay')
       .on('inspectNodeRequested', this._inspectNodeRequested)
+
+    this._splitMediaQuery.on('match', () => {
+      this._splitMode = true
+      this._showDetail()
+    })
+    this._splitMediaQuery.on('unmatch', () => {
+      this._splitMode = false
+      this._detail.hide()
+    })
   }
   _deleteNode = () => {
     const node = this._curNode
@@ -238,6 +265,9 @@ export default class Elements extends Tool {
     }
     this._curParentQueue = parentQueue
 
+    if (this._splitMode) {
+      this._showDetail()
+    }
     this._updateButtons()
     this._updateHistory()
   }

diff --git a/src/Elements/Elements.scss b/src/Elements/Elements.scss
@@ -2,9 +2,13 @@
 @import '../style/mixin';
 
 #elements {
-  padding-top: 40px;
-  padding-bottom: 24px;
-  font-size: 14px;
+  .elements {
+    @include absolute();
+    padding-top: 40px;
+    padding-top: 40px;
+    padding-bottom: 24px;
+    font-size: 14px;
+  }
   .control {
     @include control();
     padding: 10px 0;
@@ -255,3 +259,34 @@
     }
   }
 }
+
+@media screen and (min-width: 680px) {
+  #elements {
+    .elements {
+      width: 50%;
+      .control {
+        .icon-eye {
+          display: none;
+        }
+        .icon-copy {
+          right: 0;
+        }
+        .icon-delete {
+          right: 23px;
+        }
+      }
+    }
+    .detail {
+      width: 50%;
+      left: initial;
+      right: 0;
+      border-left: 1px solid var(--border);
+      .control {
+        padding-left: 10px;
+        .icon-arrow-left {
+          display: none;
+        }
+      }
+    }
+  }
+}