add custom scroll action for side-menu

fossasia · Feb 6, 2020 · 9167a1a · 9167a1a
1 parent 0bbaa13
commit 9167a1a
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 8 deletions.
diff --git a/app/components/public/side-menu.js b/app/components/public/side-menu.js
@@ -1,3 +1,4 @@
+import $ from 'jquery';
 import Component from '@ember/component';
 import { computed } from '@ember/object';
 import moment from 'moment';
@@ -9,6 +10,22 @@ export default Component.extend({
     this.set('shouldShowCallforSpeakers',
       speakersCall && speakersCall.announcement && (speakersCall.privacy === 'public'));
   },
+  actions: {
+    scrollToTarget() {
+      document.querySelectorAll('.scroll').forEach(anchor => {
+        anchor.addEventListener('click', function(e) {
+          e.preventDefault();
+          document.querySelector(this.getAttribute('href')).scrollIntoView({
+            behavior: 'smooth'
+          });
+          $('.scroll').each(function() {
+            $(this).removeClass('active');
+          });
+          $(this).addClass('active');
+        });
+      });
+    }
+  },
   isSchedulePublished: computed('event.schedulePublishedOn', function() {
     return this.get('event.schedulePublishedOn') && this.get('event.schedulePublishedOn').toISOString() !== moment(0).toISOString();
   })

diff --git a/app/templates/components/public/side-menu.hbs b/app/templates/components/public/side-menu.hbs
@@ -1,13 +1,13 @@
 {{#if (and (not-eq session.currentRouteName 'public.cfs.new-session') (not-eq session.currentRouteName 'public.cfs.new-speaker') (not-eq session.currentRouteName 'public.cfs.edit-speaker') (not-eq session.currentRouteName 'public.cfs.edit-session'))}}
   <div class="ui fluid vertical {{unless device.isMobile 'pointing'}} menu">
     {{#if (eq session.currentRouteName 'public.index')}}
-      {{#scroll-to href='#info' class='item active'}}
+      <a href='#info' {{action "scrollToTarget"}} class='item active scroll'>
         {{t 'Info'}}
-      {{/scroll-to}}
+      </a>
       {{#if event.tickets.length}}
-        {{#scroll-to href='#tickets' class='item'}}
+        <a href='#tickets' {{action "scrollToTarget"}} class='item scroll'>
           {{t 'Tickets'}}
-        {{/scroll-to}}
+        </a>
       {{/if}}
       {{#if event.speakers.length}}
         {{#link-to 'public.speakers' class='item'}}
@@ -46,19 +46,19 @@
     {{/if}}
     {{#if event.hasOwnerInfo}}
       {{#if (eq session.currentRouteName 'public.index')}}
-        {{#scroll-to href='#owner' class='item'}}
+        <a href='#owner' {{action "scrollToTarget"}} class='item scroll'>
           {{t 'Owner'}}
-        {{/scroll-to}}
+        </a>
       {{else}}
         <a class="item" href="{{href-to 'public.index'}}#owner">
           {{t 'Owner'}}
         </a>
       {{/if}}
     {{/if}}
     {{#if (eq session.currentRouteName 'public.index')}}
-      {{#scroll-to href='#getting-here' class='item'}}
+      <a href='#getting-here' class='item scroll'>
         {{t 'Getting here'}}
-      {{/scroll-to}}
+      </a>
     {{else}}
       <a class="item" href="{{href-to 'public.index'}}#getting-here">
         {{t 'Getting here'}}