Add icons and underlines to anchor list links

dotherightthing · Jan 4, 2021 · 5acf5b2 · 5acf5b2
1 parent cc14509
commit 5acf5b2
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 5 deletions.
diff --git a/js/_frontend.js b/js/_frontend.js
@@ -101,7 +101,9 @@ const wpdtrtAnchorlinksUi = {
                 });
 
                 stickyTitle += `<a href="${anchor}" class="wpdtrt-anchorlinks__title-sticky wpdtrt-anchorlinks__list-link" aria-hidden="true">`;
+                stickyTitle += '<span class="wpdtrt-anchorlinks__list-link-liner">';
                 stickyTitle += $.trim(anchorTextAbbreviated);
+                stickyTitle += '</span>';
                 stickyTitle += '</a>';
             }
 

diff --git a/scss/frontend.scss b/scss/frontend.scss
@@ -49,7 +49,29 @@
         &:hover,
         &:focus {
             color: var(--wpdtrt-anchorlinks-color-link-hover);
-            text-decoration: underline;
+
+            #{$block}__list-link-liner {
+                border-bottom: 1px solid var(--wpdtrt-anchorlinks-color-link-border-hover);
+            }
+
+            #{$block}__list-link-icon {
+                color: var(--wpdtrt-anchorlinks-color-link-icon-hover);
+            }
+        }
+    }
+
+    &__list-link-liner {
+        padding: var(--wpdtrt-anchorlinks-padding-link-liner);
+        border-bottom: 1px dotted var(--wpdtrt-anchorlinks-color-link-border);
+    }
+
+    &__list-link-icon {
+        color: var(--wpdtrt-anchorlinks-color-link-icon);
+        font-weight: normal;
+
+        &::before { // match .icon
+            content: '#';
+            margin-left: 6px;
         }
     }
 
@@ -73,6 +95,10 @@
         font-size: inherit;
         line-height: normal;
         margin: var(--wpdtrt-anchorlinks-margin-title); // align with top of expected adjacent gallery viewer
+
+        #{$block}__list-link-liner {
+            border-bottom: 0; // as adjacent to progress indicator underline
+        }
     }
 
     &__title-sticky {

diff --git a/scss/variables/_css.scss b/scss/variables/_css.scss
@@ -14,16 +14,21 @@
 :root {
     --wpdtrt-anchorlinks-color-divider: hsla(0, 0%, 80%, 1);
     --wpdtrt-anchorlinks-color-link: hsla(0, 0%, 33%, 1);
-    --wpdtrt-anchorlinks-color-link-active: hsla(0, 0%, 0%, 1);
     --wpdtrt-anchorlinks-color-link-hover: hsla(0, 0%, 0%, 1);
+    --wpdtrt-anchorlinks-color-link-icon: hsla(0, 0%, 33%, .5);
+    --wpdtrt-anchorlinks-color-link-icon-hover: hsla(0, 0%, 0%, 1);
+    --wpdtrt-anchorlinks-color-link-active: hsla(0, 0%, 0%, 1);
+    --wpdtrt-anchorlinks-color-link-border: transparent;
+    --wpdtrt-anchorlinks-color-link-border-hover: hsla(0, 0%, 0%, .8);
     --wpdtrt-anchorlinks-color-progress-bar: hsla(0, 0%, 0%, 1);
     --wpdtrt-anchorlinks-color-progress-bg: hsla(0, 0%, 80%, 1);
     --wpdtrt-anchorlinks-font-weight-active: bold;
-    --wpdtrt-anchorlinks-height-link: 28px;
+    --wpdtrt-anchorlinks-height-link: 32px;
     --wpdtrt-anchorlinks-height-progress-bar: 1px;
     --wpdtrt-anchorlinks-height-title: 62px;
     --wpdtrt-anchorlinks-padding-additions: 40px 0;
-    --wpdtrt-anchorlinks-padding-link: .3em 0;
+    --wpdtrt-anchorlinks-padding-link: .2em 0;
+    --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;

diff --git a/src/class-wpdtrt-anchorlinks-plugin.php b/src/class-wpdtrt-anchorlinks-plugin.php
@@ -120,9 +120,18 @@ public function render_anchor_list_html( array $anchors ) {
 
 			foreach ( $anchors as $anchor ) {
 				$anchor_list_item_text = str_replace( '#', '', $anchor[0] );
-				$anchor_list_item_link = $dom->createElement( 'a', $anchor_list_item_text );
+
+				$anchor_list_item_link_liner_icon = $dom->createElement( 'span' );
+				$anchor_list_item_link_liner_icon->setAttribute( 'class', 'wpdtrt-anchorlinks__list-link-icon' );
+
+				$anchor_list_item_link_liner = $dom->createElement( 'span', $anchor_list_item_text );
+				$anchor_list_item_link_liner->setAttribute( 'class', 'wpdtrt-anchorlinks__list-link-liner' );
+
+				$anchor_list_item_link = $dom->createElement( 'a' );
 				$anchor_list_item_link->setAttribute( 'href', '#' . $anchor[1] );
 				$anchor_list_item_link->setAttribute( 'class', 'wpdtrt-anchorlinks__list-link' );
+				$anchor_list_item_link->appendChild( $anchor_list_item_link_liner );
+				$anchor_list_item_link->appendChild( $anchor_list_item_link_liner_icon );
 
 				$anchor_list_item = $dom->createElement( 'li' );
 				$anchor_list_item->setAttribute( 'class', 'wpdtrt-anchorlinks__list-item' );