Refactor jump links/anchors to use the heading rather than the sectio…

…n, show the icon on the left and include the text in the link/anchor, shorten data attributes (#24, dotherightthing/wpdtrt-scss#2)
dotherightthing · Jun 20, 2021 · a817052 · a817052
1 parent 584b138
commit a817052
Show file tree

Hide file tree

Showing 8 changed files with 279 additions and 184 deletions.
diff --git a/README.md b/README.md
@@ -51,7 +51,7 @@ Pinning toggles a class of `.wpdtrt-anchorlinks--sticky` on `.wpdtrt-anchorlinks
 To control dynamic content, add the following data attribute to an element:
 
 ```html
-data-wpdtrt-anchorlinks-controls="pinning"
+data-anchorlinks-controls="pinning"
 ```
 
 * When this element is scrolled out of the viewport, the 'pinned' layout state will be enhanced
@@ -62,7 +62,7 @@ data-wpdtrt-anchorlinks-controls="pinning"
 Add the following data attribute to a the relevant child of each anchor:
 
 ```html
-data-wpdtrt-anchorlinks-controls="highlighting"
+data-anchorlinks-controls="highlighting"
 ```
 
 * When this element is scrolled into the viewport, the matching anchor link will be highlighted.
@@ -75,16 +75,16 @@ data-wpdtrt-anchorlinks-controls="highlighting"
 Add the following data attribute to the element:
 
 ```html
-data-wpdtrt-anchorlinks-list-addition-clone="false"
-data-wpdtrt-anchorlinks-list-addition="1"
+data-anchorlinks-list-addition-clone="false"
+data-anchorlinks-list-addition="1"
 ```
 
 * This element will be removed from its current location and injected after the list
 * If there are multiple elements to inject, this element will be injected first, as it has an id of `1`
 
 ```html
-data-wpdtrt-anchorlinks-list-addition-clone="true"
-data-wpdtrt-anchorlinks-list-addition="2"
+data-anchorlinks-list-addition-clone="true"
+data-anchorlinks-list-addition="2"
 ```
 
 * This element will stay at its current location and a copy (clone) will be injected after the list

diff --git a/js/_frontend.js b/js/_frontend.js
@@ -84,14 +84,15 @@ const wpdtrtAnchorlinksUi = {
     setTitleToSummary: ($jumpMenu) => {
         const $ = wpdtrtAnchorlinksUi.jQuery;
         const anchor = '#summary';
+        const $parentSection = $(`[data-anchorlinks-id="${anchor.substring(1)}"]`);
         const $anchor = $(anchor);
         const $title = $jumpMenu.find('.wpdtrt-anchorlinks__title-fixed').eq(0);
         const { highlightController } = wpdtrtAnchorlinksUi.domElements;
         let anchorTextAbbreviated;
         let stickyTitle = '';
 
-        if ($anchor.length && $anchor.is(highlightController)) {
-            anchorTextAbbreviated = $anchor.find('h2').attr('data-abbreviation');
+        if ($anchor.length && $parentSection.is(highlightController)) {
+            anchorTextAbbreviated = $anchor.attr('data-abbreviation');
 
             if (anchorTextAbbreviated) {
                 const abbreviations = [
@@ -192,7 +193,7 @@ const wpdtrtAnchorlinksUi = {
 
     /**
      * @function highlightAnchorLink
-     * @summary Highlight an anchor link, when its target is in view.
+     * @summary Highlight an anchor link, when its target section is in view.
      * @memberof wpdtrtAnchorlinksUi
      * @protected
      *
@@ -207,8 +208,11 @@ const wpdtrtAnchorlinksUi = {
 
             // ratio of the element which is visible in the viewport
             // (entering or leaving)
+            // TODO: this doesn't work for very tall sections
             if (change.intersectionRatio > 0.5) {
-                let $anchor = $(intersectingElement);
+                let $anchorParentSection = $(intersectingElement);
+                let anchorId = $anchorParentSection.attr('data-anchorlinks-id');
+                let $anchor = $(`#${anchorId}`);
                 let anchor = $anchor.get(0);
                 let $anchorLinkActive = wpdtrtAnchorlinksUi.getRelatedNavigation(anchor);
 
@@ -355,14 +359,19 @@ const wpdtrtAnchorlinksUi = {
     offsetFragment: () => {
         const $ = wpdtrtAnchorlinksUi.jQuery;
         const anchor = window.location.hash;
+        let offset = 32;
 
         if (typeof window.scrollBy === 'undefined') {
             return;
         }
 
+        if ($('#wpadminbar').length) {
+            offset += $('#wpadminbar').height();
+        }
+
         if ($(anchor).hasClass('wpdtrt-anchorlinks__anchor')) {
             window.scrollBy({
-                top: -32 // .wpdtrt-anchorlinks__section::before { padding-top }
+                top: -1 * offset // .wpdtrt-anchorlinks__section::before { padding-top }
             });
         }
     },
@@ -377,8 +386,8 @@ const wpdtrtAnchorlinksUi = {
         const $ = wpdtrtAnchorlinksUi.jQuery;
 
         wpdtrtAnchorlinksUi.domElements = {
-            highlightController: $('[data-wpdtrt-anchorlinks-controls="highlighting"]'),
-            pinController: $('[data-wpdtrt-anchorlinks-controls="pinning"]')
+            highlightController: $('[data-anchorlinks-controls="highlighting"]'),
+            pinController: $('[data-anchorlinks-controls="pinning"]')
         };
 
         wpdtrtAnchorlinksUi.sticky_jump_menu($('.wpdtrt-anchorlinks'));

diff --git a/scss/frontend.scss b/scss/frontend.scss
@@ -39,8 +39,18 @@
         padding: var(--wpdtrt-anchorlinks-padding-additions);
     }
 
-    &__anchor-link {
-        margin: var(--wpdtrt-anchorlinks-margin-anchor-link);
+    &__anchor-link-icon {
+        float: left;
+        width: 24px;
+        margin-left: -24px;
+
+        &::before {
+            content: '#';
+        }
+
+        &[aria-hidden='true'] {
+            display: block;
+        }
     }
 
     &__list {
@@ -56,12 +66,19 @@
 
     &__list-link {
         display: block;
+        position: relative; // AP icon
         color: var(--wpdtrt-anchorlinks-color-link);
         line-height: var(--wpdtrt-anchorlinks-height-link);
         text-decoration: none;
-        padding: var(--wpdtrt-anchorlinks-padding-link);
+        padding-top: var(--wpdtrt-anchorlinks-padding-link-v);
+        padding-bottom: var(--wpdtrt-anchorlinks-padding-link-v);
+        padding-left: 18px;
         margin: var(--wpdtrt-anchorlinks-margin-link);
 
+        #{$block}__title & {
+            padding-left: 0;
+        }
+
         &:hover,
         &:focus {
             color: var(--wpdtrt-anchorlinks-color-link-hover);
@@ -82,12 +99,19 @@
     }
 
     &__list-link-icon {
+        display: block;
+        position: absolute;
+        left: 0;
         color: var(--wpdtrt-anchorlinks-color-link-icon);
         font-weight: normal;
 
         &::before { // match .icon
             content: '#';
-            margin-left: 6px;
+            margin-right: 6px;
+        }
+
+        &[aria-hidden='true'] {
+            display: block;
         }
     }
 
@@ -131,6 +155,11 @@
         &--sticky {
             margin: var(--wpdtrt-anchorlinks-margin-sticky);
         }
+
+        &__anchor-link-icon {
+            width: 30px;
+            margin-left: -30px;
+        }
     }
 
     @media print {

diff --git a/scss/variables/_css.scss b/scss/variables/_css.scss
@@ -27,11 +27,10 @@
     --wpdtrt-anchorlinks-height-progress-bar: 1px;
     --wpdtrt-anchorlinks-height-title: 62px;
     --wpdtrt-anchorlinks-padding-additions: 40px 0;
-    --wpdtrt-anchorlinks-padding-link: .2em 0;
+    --wpdtrt-anchorlinks-padding-link-v: .2em;
     --wpdtrt-anchorlinks-padding-link-liner: 0 0 .15em;
     --wpdtrt-anchorlinks-margin: 0 0 0 auto;
     --wpdtrt-anchorlinks-margin-sticky: 0 0 0 auto;
-    --wpdtrt-anchorlinks-margin-anchor-link: 0 0 0 .25em;
     --wpdtrt-anchorlinks-margin-link: 0 0 .125em;
     --wpdtrt-anchorlinks-margin-list: 40px 0;
     --wpdtrt-anchorlinks-margin-title: 0 0 8px;