1.0.5 - Fix regression: static positioned #

Rob--W · Oct 16, 2014 · 116f423 · 116f423
1 parent 65eb40c
commit 116f423
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 13 deletions.
diff --git a/extension/manifest.json b/extension/manifest.json
@@ -1,7 +1,7 @@
 {
     "name": "Display #Anchors",
     "description": "Displays anchors for all content in the current web page without breaking the layout.",
-    "version": "1.0.4",
+    "version": "1.0.5",
     "manifest_version": 2,
     "background": {
         "scripts": ["background.js"],

diff --git a/extension/toggle-anchors.js b/extension/toggle-anchors.js
@@ -2,6 +2,18 @@
 /* jshint browser:true, maxlen:100 */
 'use strict';
 
+// Default placement:
+// ------------------A <-- element with id or name attribute ("anchor")
+//           #fragment <-- aligned at the right, at the same line as the anchor.
+//
+// When an anchor is too small (smaller than MINIMUM_REQ_WIDTH_PX), then the
+// element is aligned at the left instead of at the right. This is to make sure
+// that at least a part of the anchor is visible, even if the container clips
+// its content using overflow:hidden.
+//                  A         <!-- anchor
+//                  #fragment <!-- left-aligned link.
+var MINIMUM_REQ_WIDTH_PX = 16;
+
 // Prefer "#anchor", and only use /pathname?query#anchor if base-href is set.
 // #anchor is preferred to deal correctly with pages that use the history API to rewrite the URL.
 var baseURI = document.querySelector('base[href]') ? location.pathname + location.search : '';
@@ -58,11 +70,9 @@ function getAnchor(anchorValue, elem) {
 
     var currentStyle = getComputedStyle(elem);
     var isPositioned = currentStyle.getPropertyValue('position') !== 'static'; // Neglect "inherit"
-    // Whether there is enough space at the left to at least get a reasonably visible anchor.
-    var isLeftVisible = elem.offsetLeft > 9;
-    if (isPositioned || !isLeftVisible) {
+    if (isPositioned) {
         holder.style.setProperty('top', '0', 'important');
-        if (isLeftVisible) {
+        if (elem.offsetLeft > MINIMUM_REQ_WIDTH_PX) {
             holder.style.setProperty('right', '0', 'important');
         } else {
             holder.style.setProperty('left', '0', 'important');
@@ -71,14 +81,21 @@ function getAnchor(anchorValue, elem) {
         }
         shadow.appendChild(anchor);
     } else {
-        var paddingTop = parseFloat(currentStyle.getPropertyValue('padding-top')) || 0;
         var paddingLeft = parseFloat(currentStyle.getPropertyValue('padding-left')) || 0;
         var borderLeft = parseFloat(currentStyle.getPropertyValue('border-left-width')) || 0;
-        var wrappr = baseWrappr.cloneNode();
-        wrappr.style.top = (-paddingTop) + 'px';
-        wrappr.style.left = (elem.offsetWidth - paddingLeft - borderLeft) + 'px';
-        wrappr.appendChild(anchor);
-        shadow.appendChild(wrappr);
+        var visibleHorizontalSpace = elem.offsetWidth - paddingLeft - borderLeft;
+        if (visibleHorizontalSpace < MINIMUM_REQ_WIDTH_PX) {
+            anchor.style.left = '0';
+            anchor.style.right = 'auto';
+            shadow.appendChild(anchor);
+        } else {
+            var wrappr = baseWrappr.cloneNode();
+            var paddingTop = parseFloat(currentStyle.getPropertyValue('padding-top')) || 0;
+            wrappr.style.top = (-paddingTop) + 'px';
+            wrappr.style.left = (elem.offsetWidth - paddingLeft - borderLeft) + 'px';
+            wrappr.appendChild(anchor);
+            shadow.appendChild(wrappr);
+        }
     }
 
     anchor.href = baseURI + '#' + anchorValue;

diff --git a/test/clipped-container.html b/test/clipped-container.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<title>Regression test: clipped container</title>
+<title>Regression tests</title>
 <style>
 .filler {
     height: 80vh;
@@ -16,12 +16,17 @@
 </style>
 Open the console and check whether there are any (Assertion) errors. If you see any errors, set a breakpoint and trace back.
 <div class="filler"></div>
+<!-- Container with overflow:hidden -->
 <div class="clipped-container">
     <h3><span><a id="some-anchor" name="some-anchor"></a>C. </span>Header with anchor at the left</h3>
     <p>
         This is a visible anchor: <em id="visible-anchor">an anchor</em>
     </p>
 </div>
+<!-- Static header -->
+<div>
+    <h3 id="static-header">Static header</h3>
+</div>
 <div class="filler"></div>
 <link rel="stylesheet" href="../extension/toggle-anchors.css">
 <script src="../extension/toggle-anchors.js"></script>
@@ -46,13 +51,16 @@ <h3><span><a id="some-anchor" name="some-anchor"></a>C. </span>Header with ancho
 
 var anchors = document.querySelectorAll('\\:a\\.href\\:');
 // Sanity check
-assertEqual(anchors.length, 2);
+assertEqual(anchors.length, 3);
 assertEqual(anchors[0].parentNode, document.getElementById('some-anchor'));
 assertEqual(anchors[1].parentNode, document.getElementById('visible-anchor'));
+assertEqual(anchors[2].parentNode, document.getElementById('static-header'));
+
 
 // Assert visibility of element. If any of the following test fail, then the :a.href: > a element is not visible.
 assertAnchorVisible(anchors[0]);
 assertAnchorVisible(anchors[1]);
+assertAnchorVisible(anchors[2]);
 
 if (!location.hash) document.body.scrollTop = 0;
 </script>