feat: highlight curr node

IITII · Oct 6, 2023 · d3b5039 · d3b5039
1 parent b3061ad
commit d3b5039
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -55,17 +55,20 @@
 
 ### 图片
 
-* ←: 打开侧栏
+* ←: 上一个
 * →: 加载更多
-* ↑: 向上滚动 3/4 个屏幕.
-* ↓: 向下滚动 3/4 个屏幕.
+* ↑: 向上滚动 1 个屏幕.
+* ↓: 向下滚动 1 个屏幕.
 ---
-* a: 打开侧栏
+* a: 上一个
 * d: 加载更多
-* w: 向上滚动 3/4 个屏幕.
-* s: 向下滚动 3/4 个屏幕.
+* w: 向上滚动 1 个屏幕.
+* s: 向下滚动 1 个屏幕.
+* r: 刷新页面
 * q: 回到顶部
 * e: 下一个
+* 0: 下一个
+* Delete: 删除当前文件夹
 
 ### 视频
 

diff --git a/src/components/pic_tools/ToolGroup.vue b/src/components/pic_tools/ToolGroup.vue
@@ -20,7 +20,7 @@ const keymap = {
   // leftDrawer: ['a','ArrowLeft'],
   loadMore: ['d','ArrowRight'],
   top: ['q'],
-  nextNode: ['e'],
+  nextNode: ['e', '0'],
   reloadPage: ['r'],
   btnClickDelDirs: ['Delete'],
 }
@@ -184,6 +184,54 @@ export default {
     if (this.enableShortcut) {
       this.shortcutEle.addEventListener('keyup', this.shortcut)
     }
+
+    // window.addEventListener('volumechange', e => {
+    //   this.$q.notify({
+    //     message: `volumechange: ${e}`,
+    //     color: 'warning',
+    //     position: 'top',
+    //     timeout: 1000,
+    //   })
+    //   alert(`volumechange: ${e}`)
+    // });
+    // if ('mediaSession' in navigator) {
+    //   navigator.mediaSession.setActionHandler('volumeup', () => {
+    //     this.$q.notify({
+    //       message: `volumeup`,
+    //       color: 'warning',
+    //       position: 'top',
+    //       timeout: 1000,
+    //     })
+    //   });
+    //
+    //   navigator.mediaSession.setActionHandler('volumedown', () => {
+    //     this.$q.notify({
+    //       message: `volumedown`,
+    //       color: 'warning',
+    //       position: 'top',
+    //       timeout: 1000,
+    //     })
+    //   });
+    // }
+    // document.addEventListener('volumeupbutton', e =>  {
+    //   this.$log.debug('volumeupbutton', e)
+    //   alert('volumeupbutton')
+    //   this.scrollUp(e)
+    // })
+    // document.addEventListener('volumedownbutton', e => {
+    //   this.$log.debug('volumedownbutton', e)
+    //   alert('volumedownbutton')
+    //   this.scrollDown(e)
+    // })
+    // document.addEventListener('volumechange', e => {
+    //   this.$q.notify({
+    //     message: `volumechange: ${e}`,
+    //     color: 'warning',
+    //     position: 'top',
+    //     timeout: 1000,
+    //   })
+    //   alert(`volumechange: ${e}`)
+    // })
   },
   unmounted() {
     if (this.enableShortcut) {

diff --git a/src/components/waterfall/PicDrawer.vue b/src/components/waterfall/PicDrawer.vue
@@ -9,26 +9,26 @@
         </div>
         <div>
           <q-input ref="filter" v-model="tree.filter" :label="$t('filter')" filled
-            @input="inputListener" @focusin="filterFocusIn" @focusout="filterFocusOut">
+                   @input="inputListener" @focusin="filterFocusIn" @focusout="filterFocusOut">
             <template v-slot:append>
               <q-icon v-if="tree.filter !== ''" class="cursor-pointer" name="clear" @click="resetFilter"/>
             </template>
           </q-input>
         </div>
         <div>
           <q-tree ref="qtree" no-transition v-model:expanded="tree.expanded"
-            :filter="tree.filter" :nodes="tree.nodes"
-            v-model:selected="tree.selectedNodeSync" node-key="nodeKey" @lazy-load="onLazyLoad"
-            @update:selected="update_selected">
+                  :filter="tree.filter" :nodes="tree.nodes"
+                  v-model:selected="tree.selectedNodeSync" node-key="nodeKey" @lazy-load="onLazyLoad"
+                  @update:selected="update_selected">
             <template v-slot:default-header="prop">
-              <div class="row items-center">
-                {{ prop.node.label }}
+              <div :id="prop.node.nodeKey" class="row items-center">
+                <span :class="currentNodeKey === prop.node.nodeKey ? 'text-pink-4' : ''">{{ prop.node.label }}</span>
                 <q-badge v-if="prop.node.dirCount" :color="badge.color"
-                  :text-color="badge.text_color" class="q-ml-sm">
+                         :text-color="badge.text_color" class="q-ml-sm">
                   {{ prop.node.dirCount }}
                 </q-badge>
                 <q-badge v-if="prop.node.hasOwnProperty('fileCount')" :text-color="badge.text_color"
-                  class="q-ml-sm" color="warning">
+                         class="q-ml-sm" color="warning">
                   {{ prop.node.fileCount }}
                 </q-badge>
               </div>
@@ -166,7 +166,7 @@ export default {
     update_selected: function (key) {
       this.$log.debug(key, this.tree.selectedNodeSync)
       if (key !== null) {
-      // if (key !== null || key !== this.tree.selectedNodeSync) {
+        // if (key !== null || key !== this.tree.selectedNodeSync) {
         this.$store.dispatch(`${this.storeName}/node_key`, key)
         // 对应上面的 ref="qtree"
         // 这里也可能是接口数据未获取
@@ -194,6 +194,10 @@ export default {
     },
     btn_click_leftDrawer() {
       this.leftDrawerSync = !this.leftDrawerSync
+      if (this.leftDrawerSync) {
+        // 将当前节点滚动到可视区域
+        document.getElementById(this.currentNodeKey).scrollIntoView()
+      }
     },
     btn_click_setting() {
     }