Added captions for urls

vkinelev · May 4, 2017 · e484688 · e484688
1 parent 080ca90
commit e484688
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 27 deletions.
diff --git a/popup.html b/popup.html
@@ -21,12 +21,24 @@
         max-width: 400px;
       }
 /**/
-      td:focus {
-        background-color: green;
+      tr:focus {
+        background-color: grey;
       }
 
       tr:hover {
-        background-color: grey;
+        background-color: lightgrey;
+      }
+
+      .link-caption {
+        margin: 8px 0 0 0;
+        font-size: 16px;
+        font-weight: bold;
+      }
+
+      .link-href {
+        margin: 0 0 8px 0;
+        font-size: 14px;
+        word-wrap: nowrap;
       }
     </style>
 
@@ -41,9 +53,17 @@
   <body>
     <input id="filter" type="text" name="" value="" tabindex=1 placeholder="Type to search...">
     <table id=links>
+      <tbody>
+      </tbody>
+    </table>
+
+    <template id="linkRowTemplate">
       <tr>
-        <th align=left>URL</th>
+        <td>
+          <p class="link-caption"></p>
+          <p class="link-href"></p>
+        </td>
       </tr>
-    </table>
+    </template>
   </body>
 </html>
diff --git a/popup.js b/popup.js
@@ -6,9 +6,7 @@ var allLinks = [];
 var visibleLinks = [];
 
 function gotoURL(event) {
-  // alert('1');
-
-  const newURL = event.target.innerText;
+  const newURL = event.target.querySelector('.link-href').innerText;
 
   chrome.windows.getCurrent(function (currentWindow) {
     chrome.tabs.query(
@@ -23,7 +21,7 @@ function gotoURL(event) {
 
 // Re-filter allLinks into visibleLinks and reshow visibleLinks.
 function filterLinks() {
-  var filterValue = document.getElementById('filter').value;
+  var filterValue = document.getElementById('filter').value.toLowerCase();
   var terms = filterValue.split(' ');
   visibleLinks = allLinks.filter(function(link) {
     for (var termI = 0; termI < terms.length; ++termI) {
@@ -36,7 +34,11 @@ function filterLinks() {
             continue;
           }
         }
-        var found = (-1 !== link.indexOf(term));
+        var found = (
+          -1 !== link.href.toLowerCase().indexOf(term) ||
+          -1 !== link.innerText.toLowerCase().indexOf(term)
+        );
+
         if (found != expected) {
           return false;
         }
@@ -48,26 +50,35 @@ function filterLinks() {
 }
 
 function showLinks() {
-  var linksTable = document.getElementById('links');
-  while (linksTable.children.length > 1) {
+  var linksTable = document.querySelector('#links > tbody');
+  while (linksTable.children.length > 0) {
     linksTable.removeChild(linksTable.children[linksTable.children.length - 1])
   }
+
+  var templete = document.querySelector('#linkRowTemplate');
+  const tr = templete.content.querySelector("tr");
+  const td = templete.content.querySelector("td");
+  const linkCaptionElement = td.querySelector(".link-caption");
+  const linkHrefElement = td.querySelector(".link-href");
+
+  // Clone the new row and insert it into the table
+  const tb = document.querySelector("tbody");
+
   for (var i = 0; i < visibleLinks.length; ++i) {
-    var row = document.createElement('tr');
+    linkCaptionElement.innerText = visibleLinks[i].innerText;
+    linkHrefElement.innerText = visibleLinks[i].href;
+    let clone = document.importNode(templete.content, true);
 
-    var col1 = document.createElement('td');
-    col1.innerText = visibleLinks[i];
-    col1.onclick = gotoURL;
-    col1.style.whiteSpace = 'nowrap';
-    col1.tabIndex = i + 2;
-    col1.onkeyup = function(event) {
+    const newTr = clone.querySelector('tr');
+    newTr.onclick = gotoURL;
+    newTr.tabIndex = i + 2;
+    newTr.onkeyup = function(event) {
       event.preventDefault();
       if (event.keyCode == 13) {
         gotoURL(event);
       }
     }
-    row.appendChild(col1);
-    linksTable.appendChild(row);
+    tb.appendChild(clone);
   }
 }
 

diff --git a/send_links.js b/send_links.js
@@ -4,7 +4,6 @@
 
 // Send back to the popup a sorted deduped list of valid link URLs on this page.
 // The popup injects this script into all frames in the active tab.
-
 var links = [].slice.apply(document.getElementsByTagName('a'));
 links = links.map(function(element) {
   // Return an anchor's href attribute, stripping any URL fragment (hash '#').
@@ -15,17 +14,34 @@ links = links.map(function(element) {
   if (hashIndex >= 0) {
     href = href.substr(0, hashIndex);
   }
-  return href;
+  return {
+    href: href,
+    innerText: element.innerText
+  };
 });
 
-links.sort();
+
+
+links.sort(function(a, b) {
+  var nameA = a.href.toUpperCase(); // ignore upper and lowercase
+  var nameB = b.href.toUpperCase(); // ignore upper and lowercase
+  if (nameA < nameB) {
+    return -1;
+  }
+  if (nameA > nameB) {
+    return 1;
+  }
+
+  // names must be equal
+  return 0;
+});
 
 // Remove duplicates and invalid URLs.
 var kBadPrefix = 'javascript';
 for (var i = 0; i < links.length;) {
-  if (((i > 0) && (links[i] == links[i - 1])) ||
-      (links[i] == '') ||
-      (kBadPrefix == links[i].toLowerCase().substr(0, kBadPrefix.length))) {
+  if (((i > 0) && (links[i].href == links[i - 1].href)) ||
+      (links[i].href == '') ||
+      (kBadPrefix == links[i].href.toLowerCase().substr(0, kBadPrefix.length))) {
     links.splice(i, 1);
   } else {
     ++i;