From dfa7a9aaf526661d435dc887713a0967bc801b8d Mon Sep 17 00:00:00 2001 From: Patrick Clancey Date: Fri, 28 Sep 2018 22:21:24 +0100 Subject: [PATCH 1/4] Differentiate hidden heading and tweak look and feel --- content_scripts/headingsMap.js | 57 ++++++++++++++++++++++++++++++---- html/style.css | 40 ++++++++++++++++++++---- 2 files changed, 85 insertions(+), 12 deletions(-) diff --git a/content_scripts/headingsMap.js b/content_scripts/headingsMap.js index dc3d142..7b1a02b 100644 --- a/content_scripts/headingsMap.js +++ b/content_scripts/headingsMap.js @@ -23,6 +23,7 @@ activeStatusClass = 'active', classPrefix = 'biohead', headErrorClass = 'head_error', + headNotVisibleClass = 'visible-'; noHeadClass = 'no-headed', untitledDocumentText = 'Untitled document', noHeadingsText = 'No headings', @@ -332,7 +333,7 @@ } function headingsMap(documentWindow, documentIndex) { - var mainList, headersList, item, header, headerId, headerText, level, noHeadingsTextNode, noHeadingsSpanNode, + var mainList, headersList, item, header, headerId, headerText, level, noHeadingsTextNode, noHeadingsSpanNode, headingsSpanNode, parentList, linkElement, descendantListElement, headerTextNode, precedingHeadLevel, parentListClass, classValue, headLevelsSpanElement, headLevelsSpanTextNode, @@ -341,7 +342,24 @@ currentLevel = 0, headingsMapSection = generateSectionForMap(documentWindow, documentIndex), documentToCheck = documentWindow.document, - headingElements = documentToCheck.querySelectorAll('h1, h2, h3, h4, h5, h6'); + headingElements = documentToCheck.querySelectorAll('h1, h2, h3, h4, h5, h6'), + isVisible = function(element){ + while (element && element.parentNode) { + if (isItemHidden(element)){ + return false; + } + element = element.parentNode; + } + return true; + }, + isItemHidden = function(el){ + try { + var style = window.getComputedStyle(el); + return (style.display === 'none' || style.visibility === 'hidden'); + } catch (e) { + return false; + } + }; mainList = createElement('ul', {class: listClassPrefix + currentLevel}); headersList = mainList; @@ -435,13 +453,17 @@ } headerTextNode = createTextNode(headerText); - linkElement.appendChild(headerTextNode); + headingsSpanNode = createElement("span"); + headingsSpanNode.appendChild(headerTextNode); + linkElement.appendChild(headingsSpanNode); mainList.appendChild(linkElement); mainList.setAttribute('class', classPrefix + level); + linkElement.classList.add(headNotVisibleClass + isVisible(header)); if (currentLevel > previous + 1) { if ((i === 0 && showHeadErrorH1 === true && showHeadError === true) || (i > 0 && showHeadError === true)) { - linkElement.setAttribute('class', headErrorClass); + linkElement.classList.add(headErrorClass); + } } previous = currentLevel; @@ -672,7 +694,7 @@ baseURL = chrome.extension.getURL('html/'), iframeCSS, iframeHead, - iframeWidget = createElement('iframe', {'id': headingsMapIframeWrapperId}), + iframeWidget = createElement('iframe', {'id': headingsMapIframeWrapperId, 'frameborder':'0'}), iframeWidgetContentWindow; bodyParent.insertBefore(iframeWidget, body); @@ -864,4 +886,27 @@ return section; } -})(); \ No newline at end of file +})(); + + +(function(){ + function isVisible(element){ + if (isHidden(element)){ + return false + } else { + while (element.parentNode) { + var hidden = isHidden(element); + if (hidden){ + return false; + } + element = element.parentNode; + } + return true; + } + } + + function isHidden(el) { + var style = window.getComputedStyle(el); + return (style.display === 'none' || style.visibility === 'hidden'); + } +})(); diff --git a/html/style.css b/html/style.css index fb65470..34f1132 100644 --- a/html/style.css +++ b/html/style.css @@ -1,5 +1,5 @@ html, body { - padding: 0; + padding: 4px 8px; margin: 0; } #headingsMapWrapper { @@ -18,7 +18,7 @@ html, body { #headingsMapWrapper h2 { font-size: 1em; - margin: 10px 5px; + margin: 8px; } #headingsMapWrapper section { @@ -76,7 +76,7 @@ html, body { font-size: 1em; color: #444; margin: 1px 0; - padding: 0 5px 0 25px; + padding: 0 0 0 25px; background: url(icons/tree_b.gif) 3px top no-repeat; line-height: 1.4; } @@ -95,7 +95,7 @@ html, body { #headingsMapWrapper p, #headingsMapWrapper a, -#headingsMapWrapper .no-headed{ +#headingsMapWrapper .no-headed { font-weight: normal; text-decoration: none; color: #333; @@ -107,6 +107,10 @@ html, body { margin-left: -2px; } +#headingsMapWrapper a#headingsTab { + margin-left: 0; +} + #headingsMapWrapper a span { font-weight: normal; font-size: 1em; @@ -185,10 +189,34 @@ html, body { } #headingsMapWrapper .no-headed, +#headingsMapWrapper .visible-false, #headingsMapWrapper .head_error { font-weight: normal; font-size: 1em; - background-color: #FF7575 + overflow: visible; + position: relative; +} +#headingsMapWrapper [data-header-id] > * { + position: relative; + z-index: 2; +} +#headingsMapWrapper .no-headed:after, +#headingsMapWrapper .visible-false:after, +#headingsMapWrapper .head_error:after { + content: ""; + background-color: #FF7575; + border-radius: 3px; + position: absolute; + top: -2px; + left: -3px; + width: 100%; + height: 100%; + z-index: 1; +} + +body #headingsMapWrapper .visible-false:after { + opacity: .5; + background-color: #dbdbdb; } .collapser { @@ -206,6 +234,6 @@ html, body { .collapser:before{ content:"\025be"; } -.collapser.collapsed:before{ +.collapser.collapsed:before { content:"\025b8"; } \ No newline at end of file From ea3f2967d07e9ca7bdcb28c0fc761d8f3976a739 Mon Sep 17 00:00:00 2001 From: Patrick Clancey Date: Fri, 28 Sep 2018 22:26:03 +0100 Subject: [PATCH 2/4] code review update --- content_scripts/headingsMap.js | 26 +------------------------- 1 file changed, 1 insertion(+), 25 deletions(-) diff --git a/content_scripts/headingsMap.js b/content_scripts/headingsMap.js index 7b1a02b..cb7ac60 100644 --- a/content_scripts/headingsMap.js +++ b/content_scripts/headingsMap.js @@ -463,7 +463,6 @@ if (currentLevel > previous + 1) { if ((i === 0 && showHeadErrorH1 === true && showHeadError === true) || (i > 0 && showHeadError === true)) { linkElement.classList.add(headErrorClass); - } } previous = currentLevel; @@ -886,27 +885,4 @@ return section; } -})(); - - -(function(){ - function isVisible(element){ - if (isHidden(element)){ - return false - } else { - while (element.parentNode) { - var hidden = isHidden(element); - if (hidden){ - return false; - } - element = element.parentNode; - } - return true; - } - } - - function isHidden(el) { - var style = window.getComputedStyle(el); - return (style.display === 'none' || style.visibility === 'hidden'); - } -})(); +})(); \ No newline at end of file From a13a1f0ccf98f9970fa2292cc17f2dabd9208ec9 Mon Sep 17 00:00:00 2001 From: Patrick Clancey Date: Fri, 28 Sep 2018 22:29:49 +0100 Subject: [PATCH 3/4] code review update --- content_scripts/headingsMap.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content_scripts/headingsMap.js b/content_scripts/headingsMap.js index cb7ac60..c3533b7 100644 --- a/content_scripts/headingsMap.js +++ b/content_scripts/headingsMap.js @@ -23,7 +23,7 @@ activeStatusClass = 'active', classPrefix = 'biohead', headErrorClass = 'head_error', - headNotVisibleClass = 'visible-'; + headVisibleClassPrefix = 'visible-'; noHeadClass = 'no-headed', untitledDocumentText = 'Untitled document', noHeadingsText = 'No headings', @@ -458,7 +458,7 @@ linkElement.appendChild(headingsSpanNode); mainList.appendChild(linkElement); mainList.setAttribute('class', classPrefix + level); - linkElement.classList.add(headNotVisibleClass + isVisible(header)); + linkElement.classList.add(headVisibleClassPrefix + isVisible(header)); if (currentLevel > previous + 1) { if ((i === 0 && showHeadErrorH1 === true && showHeadError === true) || (i > 0 && showHeadError === true)) { From 86a43641bc474b46e09ef56759f1e4354418a043 Mon Sep 17 00:00:00 2001 From: Patrick Clancey Date: Sun, 30 Sep 2018 18:31:29 +0100 Subject: [PATCH 4/4] Find ID if user clicks on either A or child SPAN. --- content_scripts/headingsMap.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/content_scripts/headingsMap.js b/content_scripts/headingsMap.js index c3533b7..b5caa97 100644 --- a/content_scripts/headingsMap.js +++ b/content_scripts/headingsMap.js @@ -473,7 +473,7 @@ function scrollToHeader(event) { // This only considers the current document - var headerElement = document.getElementById(event.target.getAttribute('data-header-id')); + var headerElement = getEl(event.target); if (headerElement) { document.documentElement.scrollTop = getTopPosition(headerElement); @@ -497,6 +497,16 @@ return topPosition; } + + function getEl(el) { + // el might be a or span tag + var id; + while (!id && el && el.parentNode){ + id = el.getAttribute('data-header-id'); + el = el.parentNode; + } + return document.getElementById(id); + } } function getWidget() {