From e4846889e9ba6efc3be9aa2520b7361276a02d43 Mon Sep 17 00:00:00 2001 From: Victor Kinelev Date: Thu, 4 May 2017 20:43:31 +0300 Subject: [PATCH] Added captions for urls --- popup.html | 30 +++++++++++++++++++++++++----- popup.js | 43 +++++++++++++++++++++++++++---------------- send_links.js | 28 ++++++++++++++++++++++------ 3 files changed, 74 insertions(+), 27 deletions(-) diff --git a/popup.html b/popup.html index 2851d58..c54e02b 100644 --- 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; } @@ -41,9 +53,17 @@ + + + + + diff --git a/popup.js b/popup.js index 946fdec..c32d63a 100644 --- 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 index 29a06a6..8f08745 100644 --- 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;