fix: Handle side menu navigation correctly (#5503)

Co-authored-by: iamareebjamal <jamal.areeb@gmail.com>
fossasia · Nov 24, 2020 · c74edec · c74edec · vercel · Nov 24, 2020
1 parent c83fcf9
commit c74edec
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 28 deletions.
diff --git a/app/components/public/side-menu.js b/app/components/public/side-menu.js
@@ -7,6 +7,9 @@ import { tracked } from '@glimmer/tracking';
 
 @classic
 export default class SideMenu extends Component {
+
+  activeSection = null;
+
   @tracked
   showSpeakers = false;
 
@@ -45,21 +48,32 @@ export default class SideMenu extends Component {
     this.showSessions = this.showSessions || (await this.loader.load(`/events/${this.event.id}/sessions?fields[session]=id&page[size]=1&filter=${JSON.stringify(filters)}`)).data.length;
   }
 
+  didRender() {
+    if (!this.activeSection) { return }
+    const target = document.querySelector(`[href='#${this.activeSection}']`);
+    if (target) {
+      // Delay click to give time to render
+      setTimeout(() => {
+        target.click();
+      }, 0);
+    }
+  }
+
   @action
-  scrollToTarget() {
-    document.querySelectorAll('.scroll').forEach(anchor => {
-      anchor.addEventListener('click', function(e) {
-        e.preventDefault();
-        document.querySelector(this.getAttribute('href')).scrollIntoView({
-          behavior: 'smooth'
-        });
+  goToSection(section) {
+    this.set('activeSection', section);
+  }
 
-        document.querySelectorAll('.scroll').forEach(node => {
-          node.classList.remove('active');
-        });
-        e.target.classList.add('active');
-      });
+  @action
+  scrollToTarget(section) {
+    document.querySelector(`#${section}`).scrollIntoView({
+      behavior: 'smooth'
+    });
+    this.set('activeSection', null);
+    document.querySelectorAll('.scroll').forEach(node => {
+      node.classList.remove('active');
     });
+    document.querySelector(`[href='#${section}']`).classList.add('active');
   }
 
   @computed('event.schedulePublishedOn')

diff --git a/app/templates/components/public/side-menu.hbs b/app/templates/components/public/side-menu.hbs
@@ -1,11 +1,11 @@
 {{#if (and (not-eq this.session.currentRouteName 'public.cfs.new-session') (not-eq this.session.currentRouteName 'public.cfs.new-speaker') (not-eq this.session.currentRouteName 'public.cfs.edit-speaker') (not-eq this.session.currentRouteName 'public.cfs.edit-session'))}}
   <div class="ui fluid vertical {{unless this.device.isMobile 'pointing'}} menu">
     {{#if (eq this.session.currentRouteName 'public.index')}}
-      <a href='#info' {{action "scrollToTarget"}} class='item active scroll'>
+      <a href='#info' {{action "scrollToTarget" 'info'}} class='item active scroll'>
         {{t 'Info'}}
       </a>
       {{#if this.event.tickets.length}}
-        <a href='#tickets' {{action "scrollToTarget"}} class='item scroll'>
+        <a href='#tickets' {{action "scrollToTarget" 'tickets'}} class='item scroll'>
           {{t 'Tickets'}}
         </a>
       {{/if}}
@@ -15,13 +15,13 @@
         </LinkTo>
       {{/if}}
     {{else}}
-      <a class="item" href="{{href-to 'public.index'}}">
-        {{t 'Info'}}
-      </a>
+        <LinkTo class="item" @route="public.index" {{action 'goToSection' 'info'}}>
+          {{t 'Info'}}
+        </LinkTo>
       {{#if this.event.tickets.length}}
-        <a class="item" href="{{href-to 'public.index'}}#tickets">
+        <LinkTo class="item" @route="public.index" {{action 'goToSection' 'tickets'}}>
           {{t 'Tickets'}}
-        </a>
+        </LinkTo>
       {{/if}}
       {{#if this.showSpeakers}}
         <LinkTo @route="public.speakers" class="item">
@@ -46,34 +46,34 @@
     {{/if}}
     {{#if this.event.isSponsorsEnabled}}
       {{#if (eq this.session.currentRouteName 'public.index')}}
-        <a href='#sponsor' {{action "scrollToTarget"}} class='item scroll'>
+        <a href='#sponsor' {{action "scrollToTarget" 'sponsor'}} class='item scroll'>
           {{t 'Sponsors'}}
         </a>
       {{else}}
-        <a class="item" href="{{href-to 'public.index'}}#sponsor">
+        <LinkTo class="item" @route="public.index" {{action 'goToSection' 'sponsor'}}>
           {{t 'Sponsors'}}
-        </a>
+        </LinkTo>
       {{/if}}
     {{/if}}
     {{#if this.event.hasOwnerInfo}}
       {{#if (eq this.session.currentRouteName 'public.index')}}
-        <a href='#organizer' {{action "scrollToTarget"}} class='item scroll'>
+        <a href='#organizer' {{action "scrollToTarget" 'organizer'}} class='item scroll'>
           {{t 'Organizer'}}
         </a>
       {{else}}
-        <a class="item" href="{{href-to 'public.index'}}#organizer">
+        <LinkTo class="item" @route="public.index" {{action 'goToSection' 'organizer'}}>
           {{t 'Organizer'}}
-        </a>
+        </LinkTo>
       {{/if}}
     {{/if}}
     {{#if (eq this.session.currentRouteName 'public.index')}}
-      <a href='#getting-here' class='item scroll'>
+      <a href='#getting-here' {{action "scrollToTarget" 'getting-here'}} class='item scroll'>
         {{t 'Getting here'}}
       </a>
     {{else}}
-      <a class="item" href="{{href-to 'public.index'}}#getting-here">
+      <LinkTo class="item" @route="public.index" {{action 'goToSection' 'getting-here'}}>
         {{t 'Getting here'}}
-      </a>
+      </LinkTo>
     {{/if}}
     {{#if this.event.codeOfConduct}}
       <LinkTo @route="public.coc" class="item">