In /_lib/navbar.jst prefix all ids with navbar- for uniqueness

diff --git a/_lib/navbar.jst b/_lib/navbar.jst
index 1c30cb5..e9b4526 100644 (file)
--- a/_lib/navbar.jst
+++ b/_lib/navbar.jst
@@ -64,7 +64,7 @@ return async (env, head, body, scripts) => {
             }
             div.'col-sm-4' {
               div.'mb-1'.text-right {
-                span#signed-in-status {
+                span#navbar-signed-in-status {
                   if (signed_in_as !== undefined)
                     'Signed in.' //`Signed in as ${signed_in_as}.`
                   else
@@ -72,26 +72,26 @@ return async (env, head, body, scripts) => {
                 }
                 ' '
                 if (signed_in_as !== undefined)
-                  a#sign-in(href="#" style="display: none;") {'Sign in'}
+                  a#navbar-sign-in(href="#" style="display: none;") {'Sign in'}
                 else
-                  a#sign-in(href="#") {'Sign in'}
+                  a#navbar-sign-in(href="#") {'Sign in'}
                 ' '
                 if (signed_in_as !== undefined)
-                  a#sign-up(href="/my_account/sign_up/index.html" style="display: none;") {'Sign up'}
+                  a#navbar-sign-up(href="/my_account/sign_up/index.html" style="display: none;") {'Sign up'}
                 else
-                  a#sign-up(href="/my_account/sign_up/index.html") {'Sign up'}
+                  a#navbar-sign-up(href="/my_account/sign_up/index.html") {'Sign up'}
                 ' '
                 if (signed_in_as !== undefined)
-                  a#sign-out(href="#") {'Sign out'}
+                  a#navbar-sign-out(href="#") {'Sign out'}
                 else
-                  a#sign-out(href="#" style="display: none;") {'Sign out'}
+                  a#navbar-sign-out(href="#" style="display: none;") {'Sign out'}
               }
 
               form(action="/search/index.html") {
                 div.input-group {
                   input.form-control(name="query" type="text" placeholder="Search" aria-describedby="search-button") {}
                   div.input-group-append {
-                    button.btn.btn-outline-secondary#search-button(type="submit") {
+                    button.btn.btn-outline-secondary#navbar-search-button(type="submit") {
                       div.icon24-outer {
                         div.icon24-inner {_out.push(fa_search)}
                       }
@@ -181,7 +181,7 @@ return async (env, head, body, scripts) => {
             }
             ul.navbar-nav.ml-auto {
               li.nav-item {
-                a.nav-link#give-feedback(href="#") {'Give feedback'}
+                a.nav-link#navbar-give-feedback(href="#") {'Give feedback'}
               }
             }
           }
@@ -216,7 +216,7 @@ return async (env, head, body, scripts) => {
       }
 
       // hidden part
-      div#sign-in-modal.modal.fade(role="dialog") {
+      div#navbar-sign-in-modal.modal.fade(role="dialog") {
         div.modal-dialog {
           div.modal-content {
             div.modal-header {
@@ -227,7 +227,7 @@ return async (env, head, body, scripts) => {
                 div.col-md-12 {
                   div.form-group {
                     label.form-label(for="sign-in-email") {'Email'}
-                    input.form-control#sign-in-email(type="text" placeholder="Account email address" required="required" maxlength=256) {}
+                    input.form-control#navbar-sign-in-email(type="text" placeholder="Account email address" required="required" maxlength=256) {}
                   }
                 }
               }
@@ -235,7 +235,7 @@ return async (env, head, body, scripts) => {
                 div.col-md-12 {
                   div.form-group {
                     label.form-label(for="sign-in-password") {'Password'}
-                    input.form-control#sign-in-password(type="password" placeholder="Account password" required="required" minlength=8 maxlength=256) {}
+                    input.form-control#navbar-sign-in-password(type="password" placeholder="Account password" required="required" minlength=8 maxlength=256) {}
                   }
                 }
               }
@@ -254,7 +254,7 @@ return async (env, head, body, scripts) => {
               button.btn.btn-outline-secondary(type="button" data-dismiss="modal") {
                 'Cancel'
               }
-              button.btn.btn-primary#sign-in-submit(type="button") {
+              button.btn.btn-primary#navbar-sign-in-submit(type="button") {
                 'Sign in'
               }
             }
@@ -262,7 +262,7 @@ return async (env, head, body, scripts) => {
         }
       }
 
-      div#feedback-modal.modal.fade(role="dialog") {
+      div#navbar-feedback-modal.modal.fade(role="dialog") {
         div.modal-dialog {
           div.modal-content {
             div.modal-header {
@@ -276,7 +276,7 @@ return async (env, head, body, scripts) => {
                 div.col-md-12 {
                   div.form-group {
                     label.form-label(for="feedback-message") {'Message'}
-                    textarea.form-control#feedback-message(placeholder="Please tell us your thoughts" required="required" rows=4 maxlength=65536) {}
+                    textarea.form-control#navbar-feedback-message(placeholder="Please tell us your thoughts" required="required" rows=4 maxlength=65536) {}
                   }
                 }
               }
@@ -285,7 +285,7 @@ return async (env, head, body, scripts) => {
               button.btn.btn-outline-secondary(type="button" data-dismiss="modal") {
                 'Cancel'
               }
-              button.btn.btn-primary#feedback-submit(type="button") {
+              button.btn.btn-primary#navbar-feedback-submit(type="button") {
                 'Submit'
               }
             }
@@ -293,13 +293,13 @@ return async (env, head, body, scripts) => {
         }
       }
 
-      div#message-modal.modal.fade(role="dialog") {
+      div#navbar-message-modal.modal.fade(role="dialog") {
         div.modal-dialog {
           div.modal-content {
             div.modal-header {
               span.h4.modal-title {'Message'}
             }
-            div.modal-body#message-modal-message {
+            div.modal-body#navbar-message-modal-message {
             }
             div.modal-footer {
               button.btn.btn-outline-secondary(type="button" data-dismiss="modal") {
@@ -323,33 +323,33 @@ return async (env, head, body, scripts) => {
           'DOMContentLoaded',
           () => {
             // sign in form
-            document.getElementById('sign-in').addEventListener(
+            document.getElementById('navbar-sign-in').addEventListener(
               'click',
               () => {
-                document.getElementById('sign-in-email').value = ''
-                document.getElementById('sign-in-password').value = ''
-                $('#sign-in-modal').modal('show')
+                document.getElementById('navbar-sign-in-email').value = ''
+                document.getElementById('navbar-sign-in-password').value = ''
+                $('#navbar-sign-in-modal').modal('show')
               }
             )
 
-            $('#sign-in-modal').on(
+            $('#navbar-sign-in-modal').on(
               'shown.bs.modal',
               () => {
                 console.log('bloo')
-                $('#sign-in-email').focus()
+                $('#navbar-sign-in-email').focus()
               }
             )
 
-            document.getElementById('sign-in-submit').addEventListener(
+            document.getElementById('navbar-sign-in-submit').addEventListener(
               'click',
               async () => {
                 let email
                 try {
-                  email = document.getElementById('sign-in-email').value.slice(0, 256).toLowerCase()
+                  email = document.getElementById('navbar-sign-in-email').value.slice(0, 256).toLowerCase()
                   await api_call(
                     '/api/account/sign_in.json',
                     email,
-                    document.getElementById('sign-in-password').value.slice(0, 256)
+                    document.getElementById('navbar-sign-in-password').value.slice(0, 256)
                   )
                 }
                 catch (error) {
@@ -360,26 +360,26 @@ return async (env, head, body, scripts) => {
                     return
                   }
 
-                  document.getElementById('message-modal-message').textContent = problem.detail
-                  $('#sign-in-modal').modal('hide')
-                  $('#message-modal').modal('show')
+                  document.getElementById('navbar-message-modal-message').textContent = problem.detail
+                  $('#navbar-sign-in-modal').modal('hide')
+                  $('#navbar-message-modal').modal('show')
                   return
                 }
 
-                document.getElementById('signed-in-status').textContent = 'Signed in.' //`Signed in as ${email}.`
-                $('#sign-in').hide()
-                $('#sign-up').hide()
-                $('#sign-out').show()
+                document.getElementById('navbar-signed-in-status').textContent = 'Signed in.' //`Signed in as ${email}.`
+                $('#navbar-sign-in').hide()
+                $('#navbar-sign-up').hide()
+                $('#navbar-sign-out').show()
                 sign_in_out(true)
 
-                document.getElementById('message-modal-message').textContent = `You are now signed in as "${email}".`
-                $('#sign-in-modal').modal('hide')
-                $('#message-modal').modal('show')
+                document.getElementById('navbar-message-modal-message').textContent = `You are now signed in as "${email}".`
+                $('#navbar-sign-in-modal').modal('hide')
+                $('#navbar-message-modal').modal('show')
               }
             )
 
             // sign out button
-            document.getElementById('sign-out').addEventListener(
+            document.getElementById('navbar-sign-out').addEventListener(
               'click',
               async () => {
                 try {
@@ -390,63 +390,63 @@ return async (env, head, body, scripts) => {
                 catch (error) {
                   let problem = Problem.from(error)
 
-                  document.getElementById('message-modal-message').textContent = problem.detail
-                  $('#sign-in-modal').modal('hide')
-                  $('#message-modal').modal('show')
+                  document.getElementById('navbar-message-modal-message').textContent = problem.detail
+                  $('#navbar-sign-in-modal').modal('hide')
+                  $('#navbar-message-modal').modal('show')
                   return
                 }
 
-                document.getElementById('signed-in-status').textContent = 'Browsing as guest.'
-                $('#sign-in').show()
-                $('#sign-up').show()
-                $('#sign-out').hide()
+                document.getElementById('navbar-signed-in-status').textContent = 'Browsing as guest.'
+                $('#navbar-sign-in').show()
+                $('#navbar-sign-up').show()
+                $('#navbar-sign-out').hide()
                 sign_in_out(false)
 
-                document.getElementById('message-modal-message').textContent = `You are now signed out.`
-                $('#sign-in-modal').modal('hide')
-                $('#message-modal').modal('show')
+                document.getElementById('navbar-message-modal-message').textContent = `You are now signed out.`
+                $('#navbar-sign-in-modal').modal('hide')
+                $('#navbar-message-modal').modal('show')
               }
             )
 
             // feedback form
-            document.getElementById('give-feedback').addEventListener(
+            document.getElementById('navbar-give-feedback').addEventListener(
               'click',
               () => {
-                $('#feedback-message').text('')
-                $('#feedback-modal').modal('show')
+                $('#navbar-feedback-message').text('')
+                $('#navbar-feedback-modal').modal('show')
                 return false
               }
             )
 
-            $('#feedback-modal').on(
+            $('#navbar-feedback-modal').on(
               'shown.bs.modal',
               () => {
-                $('#feedback-message').focus()
+                $('#navbar-feedback-message').focus()
               }
             )
 
-            document.getElementById('feedback-submit').addEventListener(
+            document.getElementById('navbar-feedback-submit').addEventListener(
               'click',
               async () => {
                 try {
                   await api_call(
                     '/api/feedback.json',
                     location.href,
-                    document.getElementById('feedback-message').value.slice(0, 65536)
+                    document.getElementById('navbar-feedback-message').value.slice(0, 65536)
                   )
                 }
                 catch (error) {
                   let problem = Problem.from(error)
 
-                  document.getElementById('message-modal-message').textContent = problem.detail
-                  $('#feedback-modal').modal('hide')
-                  $('#message-modal').modal('show')
+                  document.getElementById('navbar-message-modal-message').textContent = problem.detail
+                  $('#navbar-feedback-modal').modal('hide')
+                  $('#navbar-message-modal').modal('show')
                   return
                 }
 
-                document.getElementById('message-modal-message').textContent = 'Thanks! We have received your feedback.'
-                $('#feedback-modal').modal('hide')
-                $('#message-modal').modal('show')
+                document.getElementById('navbar-message-modal-message').textContent = 'Thanks! We have received your feedback.'
+                $('#navbar-feedback-modal').modal('hide')
+                $('#navbar-message-modal').modal('show')
               }
             )
           }