auto select (#3)

* feat:auto-select * docs:update readme. * feat:focus at first.
LEODPEN · May 25, 2021 · 34316df · 34316df
1 parent 77aa178
commit 34316df
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 52 deletions.
diff --git a/README.md b/README.md
@@ -20,9 +20,9 @@ Search for tabs in the opened window, can also increase your speed of switching
 
 学习及工作中常常遇到浏览器里面打开的tab页过多，窗口也多，总感觉或确定之前打开过某个tab页，但是不知道它在哪里了，于是有时不得不重新开一个tab页，“雪球越滚越大”。
 
-本插件提供关键词查找功能，点击结果即可跳转到相应tab页；此外，还提供tab回退，助力大家使用浏览器的速度起飞；
+本插件提供关键词查找功能，点击结果即可跳转到相应tab页；此外，还提供tab回退，助力大家使用浏览器的速度起飞；（当前已开业完全脱离鼠标使用本插件！）
 
-逐渐靠近的目标是解放鼠标！
+目标是解放鼠标！
 
 ## Getting Plug-in
 
@@ -40,7 +40,7 @@ Search for tabs in the opened window, can also increase your speed of switching
 
 + 分窗口tab名展示与关键词查找；
 
-+ 点击搜索结果跳转对应tab页；
++ 根据搜索结果跳转对应tab页；
 
 + 分窗口tab页回退（一个窗口最多支持10次回退）；
 
@@ -49,7 +49,7 @@ Search for tabs in the opened window, can also increase your speed of switching
 + 搜索与跳转
     + 搜索
         1. 可选择点击浏览器右上角插件图标，按照关键词搜索tab页；
-        2. 可选择键盘操作(`Command+Shift+9`)，打开扩展工具(tab键可键入，回车可直接搜索)；
+        2. 可选择键盘操作(`Command+Shift+9`)，打开扩展工具(tab键可键入，回车可直接搜索，上下键可选中)；
         3. 可选择键盘操作(`Command+Shift+0`)，新开tab页操作;
     + 跳转
         点击对应标题文字，即可跳转到已打开、需去往的tab页（如果采取3方式搜索，你可以选择`Command+9`来到新建搜索页，然后`Command+W`来关闭，毕竟目的是搜索不是开更多tab页，**强烈建议使用2操作**）
@@ -68,7 +68,7 @@ Search for tabs in the opened window, can also increase your speed of switching
 
 + **不涉及任何隐私收集**，无外部依赖，离线可用；
 
-+ 前端菜鸟，代码垃圾请轻喷；界面风格遵循极简主义以及实用主义 ~~(界面丑，不想写)~~；
++ 前端菜鸟，代码垃圾请轻喷，此处强烈感谢[@TimGin117](https://github.com/TimGin117)对代码中各种前端问题的解答与帮助！
 
 + 如果觉得有用希望能star一下or应用商店打个分（本人是深度用户hh）；
 

diff --git a/assets/popup.js b/assets/popup.js
@@ -3,31 +3,31 @@
  * date: 2021/05
  */
 
-  $(function(){
-    $("#keyword").val("Please enter keywords").addClass("wait")
-    .blur(function(){
-      if($(this).val()==""){
-        initDisplay();
-        $("#keyword").val("Please enter keywords").addClass("wait");
-      }
-    }).focus(function(){
-        if($(this).val()=="Please enter keywords"){
-          $("#keyword").val("").removeClass("wait");
-      }
-    });
+ $(function(){
+  $("#keyword").val("Please enter keywords").addClass("wait")
+  .blur(function(){
+    if($(this).val()==""){
+      initDisplay();
+      $("#keyword").val("Please enter keywords").addClass("wait");
+    }
+  }).focus(function(){
+      if($(this).val()=="Please enter keywords"){
+        $("#keyword").val("").removeClass("wait");
+    }
   });
+});
 
 function initDisplay() {
-    $("p").remove();
     $(".tab-result").remove();
-    $(".bookmarks-result").remove();
-    $(".history-result").remove();
+    $(document).unbind("keydown");
+    // $(".bookmarks-result").remove();
+    // $(".history-result").remove();
 }
 
 function judgeGo(){
     var word = $("#keyword").val().trim();
     if(word == "" && $("#keyword").hasClass("wait")){
-      alert("Please enter keywords first.");
+      // alert("Please enter keywords first.");
       return;
     }
     initDisplay();
@@ -42,52 +42,95 @@ function goSearching(word) {
     queryTabs(word);
 }
 
-  document.onkeydown=keyListener;
-
-  function keyListener(e){ 
-    if(e.keyCode == 13){ 
+  $("#keyword").bind('keypress', function(e) {
+      if (e.keyCode == 13) {
         judgeGo();
-    } 
+      }
+  })
+
+  $("#keyword").on('input', initDisplay);
+
+  $("#keyword").bind('keydown', function(e) {
+    if (e.keyCode == 38 || e.keyCode == 40) {
+      e.preventDefault();
+    }
+  });
+
+  // focus at first
+  $("#keyword").focus();
+
+  /**
+   * keyboard selection
+   * @param  e 
+   */
+  function keyListener(e){
+    var $list = $('.tab-result');
+    var active = $list.children('.active'), index = active.index();
+    // console.log(index);
+    if (e.keyCode == 38) {
+      e.stopPropagation();
+      if (index > 0) {
+        active.removeClass('active').prev().addClass('active');
+      }
+    } else if (e.keyCode == 40) {
+      e.stopPropagation();
+      if (index != -1 && index < ($list.children().length - 1)) {
+        active.removeClass('active').next().addClass('active');
+      }
+    } else if (e.keyCode == 13) {
+      e.stopPropagation();
+      chrome.tabs.update(parseInt(active.attr('id'), 10), {active: true});
+    }
   }
 
-  function loadAllTabsInCurWindows() {
-      let tabs = [];
-      traverseTabsOfCurWindow(function (tab) {
-            tabs.push(tab);
-      }, function () {
-         console.log(tabs);
-      });
+
+  function afterQuery(tabs) {
+    var allRabs = $('.res-card');
+
+    if (allRabs.length > 0) {
+      $('#'+tabs[0].id).addClass('active');
+      $(document).bind("keydown", keyListener);
+    }
   }
 
+
   function queryTabs(keywords) {
-    let tabs = [];
+    var tabs = [];
     traverseTabsOfCurWindow(function (tab) {
       if ((tab.title && tab.title.toUpperCase().indexOf(keywords) != -1)
         || (tab.url && tab.url.toUpperCase().indexOf(keywords) != -1)
         || (tab.pendingUrl && tab.pendingUrl.toUpperCase().indexOf(keywords) != -1)) {
         tabs.push(tab);
       }
     }, function () {
-      $(".container").append('<div class="tab-result"> \n </div>');
+      $(".container").append('<div class="tab-result" id = "where-is-my-tab"> \n </div>');
       for (let j in tabs) {
         let tab = tabs[j];
         $('.tab-result').append('<div class = "res-card" id = "' + tab.id + '"' + '></div>');
         $("#" + tab.id).append('<div class = "t" >' + tab.title + '</div>');
         $("#" + tab.id).append('<div class = "url" >' + tab.url + '</div>');
-        // $('.tab-result').append('<div class = "res-card" id = "' + tab.id + '"' + '>' + tab.title + '</div>');
-
         jump2Tab(tab.id);
       }
+      afterQuery(tabs);
     });
   }
 
   function jump2Tab(tabid) {
-    document.getElementById(tabid).addEventListener("click", function() {
+    $('#'+tabid).on("click", function() {
       chrome.tabs.update(tabid, {active: true});
     });
   }
 
 
+  function loadAllTabsInCurWindows() {
+    let tabs = [];
+    traverseTabsOfCurWindow(function (tab) {
+          tabs.push(tab);
+    }, function () {
+       console.log(tabs);
+    });
+}
+
   /**
    * 从当前窗口遍历【默认】
    * @param  each 

diff --git a/assets/srch-res.css b/assets/srch-res.css
@@ -42,16 +42,11 @@ input:focus{
 }
 
 .res-card:hover {
-  position: center;
-  overflow: hidden;
-  margin-top: 7px;
-  margin-bottom: 7px;
-  width: auto;
-  max-width: 288px;
-  height: auto;
-  max-height: 80px;
+  background-color: 	#c1ff7a;
+}
+
+.active {
   background-color: 	#ff7a7a;
-  content-visibility: auto;
 }
 
 .t {

diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
     "name": "Where is my tab ?",
     "description": "Search for tabs in the opened window, can also increase your speed of switching tabs.",
-    "version": "1.4",
+    "version": "1.5",
     "manifest_version": 3,
     "update_url": "http://clients2.google.com/service/update2/crx",
     "permissions": [

diff --git a/srch-res.html b/srch-res.html
@@ -9,12 +9,8 @@
   <div class = "head" align="center">Where is my tab ?</div>
   <div align="center">
     <input type="text" id = "keyword"/>
-    <!-- <input type="button" id="seach-tabs" value="GO!"/> -->
   </div> 
  <div class="container" align="center">
-     <!-- <div class="tab-result">Results in tabs:</div>
-     <div class="bookmarks-result"></div>
-     <div class="history-result"></div> -->
  </div>
 
   <script src="assets/popup.js"></script>