From 0f8604e2240f6e4580ff7697e3c8701f78a56430 Mon Sep 17 00:00:00 2001
From: Leonard Smith <lenrsmith@gmail.com>
Date: Fri, 18 Dec 2020 12:16:05 -0600
Subject: [PATCH] Add highlight to selected book, chapter, and verse in nav
 menu

---
 app/components/book.hbs               |  2 +-
 app/components/book.js                | 13 +++++++++++++
 app/components/chapter-nav.js         |  2 ++
 app/components/chapter.hbs            |  2 +-
 app/components/chapter.js             | 15 +++++++++++++--
 app/components/verse.hbs              |  2 +-
 app/components/verse.js               | 14 ++++++++++++++
 app/services/word-select.js           |  4 ++--
 app/styles/components/scrollmenu.scss |  2 ++
 9 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/app/components/book.hbs b/app/components/book.hbs
index 0ddf0a6..2ad6b7a 100644
--- a/app/components/book.hbs
+++ b/app/components/book.hbs
@@ -1,2 +1,2 @@
-<a {{on "click" this.selectBook}}>{{this.bookTitle}}</a>
+<a {{on "click" this.selectBook}} class="{{this.selected}}" ...attributes>{{this.bookTitle}}</a>
 
diff --git a/app/components/book.js b/app/components/book.js
index b280a73..c2952f2 100644
--- a/app/components/book.js
+++ b/app/components/book.js
@@ -1,7 +1,10 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
 
 export default class BookComponent extends Component {
+  @service('nav-state') navState;
+
   get bookTitle() {
     let string = this.args.book.name.toLowerCase();
     if (this.isNumber(string.charAt(0))) {
@@ -14,6 +17,7 @@ export default class BookComponent extends Component {
   @action
   selectBook() {
     this.args.showChapters(this.args.book);
+    this.navState.setBook(this.args.book);
   }
 
   isNumber(char) {
@@ -26,4 +30,13 @@ export default class BookComponent extends Component {
       return false;
     }
   }
+
+  get
+  selected() {
+    if(this.navState.isCurrentBook(this.args.book)) {
+      return "selected";
+    } else {
+      return "";
+    }
+  }
 }
diff --git a/app/components/chapter-nav.js b/app/components/chapter-nav.js
index b29f5c3..b6061b2 100644
--- a/app/components/chapter-nav.js
+++ b/app/components/chapter-nav.js
@@ -1,9 +1,11 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from "@glimmer/tracking";
+import { inject as service } from '@ember/service';
 
 export default class ChapterNavComponent extends Component {
   @tracked currentChapter;
+  @service('nav-state') navState;
 
   constructor(...args) {
     super(...args);
diff --git a/app/components/chapter.hbs b/app/components/chapter.hbs
index 7204218..ea5274e 100644
--- a/app/components/chapter.hbs
+++ b/app/components/chapter.hbs
@@ -1 +1 @@
-<a {{on "click" this.selectChapter}} >{{@chapter.chapter}}</a>
+<a {{on "click" this.selectChapter}} class="{{this.selected}}" ...attributes>{{@chapter.chapter}}</a>
diff --git a/app/components/chapter.js b/app/components/chapter.js
index d696792..e530d9d 100644
--- a/app/components/chapter.js
+++ b/app/components/chapter.js
@@ -1,13 +1,24 @@
 import Component from '@glimmer/component';
 import { tracked } from "@glimmer/tracking";
 import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+
 
 export default class ChapterComponent extends Component {
-  @tracked selected = false;
+  @service('nav-state') navState;
 
   @action
   selectChapter() {
     this.args.showVerses(this.args.book, this.args.chapter);
-    this.selected = true;
+    this.navState.setChapter(this.args.chapter);
+  }
+
+  get
+  selected() {
+    if(this.navState.isCurrentChapter(this.args.chapter)) {
+      return "selected";
+    } else {
+      return "";
+    }
   }
 }
diff --git a/app/components/verse.hbs b/app/components/verse.hbs
index 29dc31a..3fd6fe4 100644
--- a/app/components/verse.hbs
+++ b/app/components/verse.hbs
@@ -1 +1 @@
-<a {{on "click" this.selectVerse }}>{{@verse}}</a>
+<a {{on "click" this.selectVerse }} class="{{this.selected}}" ...attributes>{{@verse}}</a>
diff --git a/app/components/verse.js b/app/components/verse.js
index c7c20e1..67ab6c9 100644
--- a/app/components/verse.js
+++ b/app/components/verse.js
@@ -1,9 +1,23 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
 
 export default class VerseComponent extends Component {
+  @service('nav-state') navState;
+
+
   @action
   selectVerse() {
     this.args.verseSelected(this.args.book, this.args.chapter, this.args.verse);
+    this.navState.setVerse(this.args.verse);
+  }
+
+  get
+  selected() {
+    if(this.navState.isCurrentVerse(this.args.verse)) {
+      return "selected";
+    } else {
+      return "";
+    }
   }
 }
diff --git a/app/services/word-select.js b/app/services/word-select.js
index 125883a..9e870c5 100644
--- a/app/services/word-select.js
+++ b/app/services/word-select.js
@@ -24,10 +24,10 @@ export default class WordSelectService extends Service {
   }
 
   isCurrentByOgntId(word) {
-    return word.ogntSort == this.currentWord.ogntSort;
+    return word.ogntSort === this.currentWord.ogntSort;
   }
 
   isCurrentByStrongsNumber(word) {
-    return word.strongs_number == this.currentWord.strongsNumber
+    return word.strongs_number === this.currentWord.strongsNumber
   }
 }
diff --git a/app/styles/components/scrollmenu.scss b/app/styles/components/scrollmenu.scss
index e5ae466..c8bf651 100644
--- a/app/styles/components/scrollmenu.scss
+++ b/app/styles/components/scrollmenu.scss
@@ -8,6 +8,7 @@ div.scrollmenu {
   width: 100%;
 }
 
+div.scrollmenu .label,
 div.scrollmenu a,
 div.scrollmenu a:not([href]):not([class]) {
   display: inline-block;
@@ -17,6 +18,7 @@ div.scrollmenu a:not([href]):not([class]) {
   text-decoration: none;
 }
 
+div.scrollmenu a.selected,
 div.scrollmenu a:hover {
   background-color: #777;
 }