New: Added selected state for ToC item (fixes #20) (#21)

cgkineo · May 1, 2024 · 193bc79 · 193bc79
1 parent 1ab4ced
commit 193bc79
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/js/helpers.js b/js/helpers.js
@@ -20,6 +20,16 @@ define([
       }
     },
 
+    toc__isSelected: function(id, options) {
+      var model = Adapt.findById(id);
+
+      const isSelected = (model.get('_isVisible') && Adapt.location._currentId == id);
+      if (isSelected) {
+        return options.fn(this);
+      }
+      return options.inverse(this);
+    },
+
     toc__getTitle: function(id, options) {
       var model = Adapt.findById(id);
       var t = model.get('displayTitle');

diff --git a/less/toc.less b/less/toc.less
@@ -170,16 +170,16 @@
   }
 }
 
-.toc__item-btn.is-disabled {
+.toc__item-btn.is-selected {
   .toc__indicator {
-    border-color: @disabled-inverted;
+    border-color: @drawer-progress-border;
   }
 
   .toc__indicator-inner {
-    background-color: @disabled;
+    background-color: @drawer-item-selected;
   }
 
   .toc__indicator-bar {
-    background-color: @disabled-inverted;
+    background-color: @drawer-progress;
   }
 }
diff --git a/templates/partials/tocContentObjects.hbs b/templates/partials/tocContentObjects.hbs
@@ -6,7 +6,7 @@
   {{#each this}}
   <div role="listitem" class="toc__item drawer__item{{#toc__when this "_isLocked"}} is-locked{{/toc__when}}">
 
-    <button role="button" class="toc__item-btn drawer__item-btn{{#toc__isClickable this}}{{else}} is-disabled{{/toc__isClickable}}" tabindex="0" data-toc-id="{{this}}" aria-label="{{toc__completionAria this}}">
+    <button role="button" class="toc__item-btn drawer__item-btn{{#toc__isClickable this}}{{else}} is-disabled{{/toc__isClickable}}{{#toc__isSelected this}} is-selected{{else}}{{/toc__isSelected}}" tabindex="0" data-toc-id="{{this}}" aria-label="{{toc__completionAria this}}">
 
       {{#toc__isClickable this}}
       {{else}}