Skip to content

fix: page scroll with URL hash redirection. #4883

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Sep 4, 2020
Merged

fix: page scroll with URL hash redirection. #4883

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
60b71b5
fixed anchor link scroll
shantanumallik Aug 26, 2020
7d0668b
removed trailing spaces
shantanumallik Aug 26, 2020
1297b65
removed trailing whitespaces
shantanumallik Aug 26, 2020
106481f
Merge branch 'development' into development
shantanumallik Aug 27, 2020
e45cab2
fixed URL hash update with anchor jump
shantanumallik Aug 27, 2020
7a68725
Fixed URL hash update with anchor jump
shantanumallik Aug 27, 2020
69fa951
fixed URL hash update with anchor jump
shantanumallik Aug 27, 2020
3f6af77
Merge branch 'development' of https://github.com/shantanumallik/open-…
shantanumallik Aug 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 21 additions & 3 deletions app/components/public/side-menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import Component from '@ember/component';
import moment from 'moment';
import { SPEAKERS_FILTER } from 'open-event-frontend/routes/public/speakers';
import { tracked } from '@glimmer/tracking';
import $ from 'jquery';

@classic
export default class SideMenu extends Component {
Expand All @@ -13,12 +14,19 @@ export default class SideMenu extends Component {
@tracked
showSessions = false;

async didRender() {
super.didRender();
const anchor_tag = window.location.hash;
$('html, body').animate({
scrollTop: $(anchor_tag).offset().top
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Throwing Cannot read property 'top' of undefined

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking into this.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this the only error?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, mostly

}, 20);
}

async didInsertElement() {
super.didInsertElement(...arguments);
const speakersCall = await this.event.speakersCall;
this.set('shouldShowCallforSpeakers',
speakersCall && speakersCall.announcement && (speakersCall.privacy === 'public'));

this.checkSpeakers();
this.checkSessions();
}
Expand Down Expand Up @@ -46,12 +54,22 @@ export default class SideMenu extends Component {
}

@action
scrollToTarget() {
scrollToTarget(e) {

if (history.pushState) {
history.pushState(null, null, e);
} else {
location.hash = e;
}
document.querySelector(e).scrollIntoView({
behavior: 'smooth', block: 'start'
});

document.querySelectorAll('.scroll').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
behavior: 'smooth', block: 'start'
});

document.querySelectorAll('.scroll').forEach(node => {
Expand Down
10 changes: 5 additions & 5 deletions app/templates/components/public/side-menu.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}}
Expand Down Expand Up @@ -46,17 +46,17 @@
{{/if}}
{{#if this.event.hasOwnerInfo}}
{{#if (eq this.session.currentRouteName 'public.index')}}
<a href='#owner' {{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'}}#owner">
<a class="item" href="{{href-to 'public.index'}}#organizer">
{{t 'Organizer'}}
</a>
{{/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}}
Expand Down
2 changes: 1 addition & 1 deletion app/templates/public/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
<div class="ui hidden divider"></div>
{{/if}}
{{#if this.model.event.hasOwnerInfo}}
<h2 class="ui header" id="owner">
<h2 class="ui header" id="organizer">
{{t 'Organized by'}} {{this.model.event.ownerName}}
</h2>
{{sanitize this.model.event.ownerDescription}}
Expand Down