From a8be1abd5329ed6d52f0b565284cd0d41267e57a Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 18 Nov 2020 16:11:16 +0100 Subject: auto-scroll sections list --- .../app/views/viewer/sections/viewer.sections.list.js | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'animism-align/frontend/app') diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.list.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.list.js index fd7ade4..3ce1cc1 100644 --- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.list.js +++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.list.js @@ -7,6 +7,8 @@ import { timestamp } from 'app/utils' import { thumbnailURL, sectionProgressPercentage } from 'app/utils/annotation.utils' import { SpeakerIcon } from '../nav/viewer.icons' +const SECTION_WIDTH = 13 * 16 + class ViewerSectionsList extends Component { constructor(props) { super(props) @@ -14,9 +16,18 @@ class ViewerSectionsList extends Component { this.handleWheel = this.handleWheel.bind(this) } shouldComponentUpdate(nextProps) { + if (this.props.currentSection !== nextProps.currentSection) { + this.scrollToSection(nextProps.currentSection) + } if (nextProps.nav !== this.props.nav) return true return nextProps.nav } + scrollToSection(section) { + const dx = section.index * SECTION_WIDTH + setTimeout(() => { + this.scrollRef.current.scrollTo(dx, 0) + }, 500) + } handleWheel(e) { let delta = Math.abs(e.deltaY) > Math.abs(e.deltaX) ? e.deltaY : e.deltaX this.scrollRef.current.scrollLeft += delta -- cgit v1.2.3-70-g09d2