blob: 82a370a0d03c64609e9d39ca0ecf1199cec45e9c [file] [log] [blame]
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +02001/**
2 * Creates a visual progress bar for the presentation.
3 */
4export default class Progress {
5
6 constructor( Reveal ) {
7
8 this.Reveal = Reveal;
9
10 this.onProgressClicked = this.onProgressClicked.bind( this );
11
12 }
13
14 render() {
15
16 this.element = document.createElement( 'div' );
17 this.element.className = 'progress';
18 this.Reveal.getRevealElement().appendChild( this.element );
19
20 this.bar = document.createElement( 'span' );
21 this.element.appendChild( this.bar );
22
23 }
24
25 /**
26 * Called when the reveal.js config is updated.
27 */
28 configure( config, oldConfig ) {
29
30 this.element.style.display = config.progress ? 'block' : 'none';
31
32 }
33
34 bind() {
35
36 if( this.Reveal.getConfig().progress && this.element ) {
37 this.element.addEventListener( 'click', this.onProgressClicked, false );
38 }
39
40 }
41
42 unbind() {
43
44 if ( this.Reveal.getConfig().progress && this.element ) {
45 this.element.removeEventListener( 'click', this.onProgressClicked, false );
46 }
47
48 }
49
50 /**
51 * Updates the progress bar to reflect the current slide.
52 */
53 update() {
54
55 // Update progress if enabled
56 if( this.Reveal.getConfig().progress && this.bar ) {
57
58 let scale = this.Reveal.getProgress();
59
60 // Don't fill the progress bar if there's only one slide
61 if( this.Reveal.getTotalSlides() < 2 ) {
62 scale = 0;
63 }
64
65 this.bar.style.transform = 'scaleX('+ scale +')';
66
67 }
68
69 }
70
71 getMaxWidth() {
72
73 return this.Reveal.getRevealElement().offsetWidth;
74
75 }
76
77 /**
78 * Clicking on the progress bar results in a navigation to the
79 * closest approximate horizontal slide using this equation:
80 *
81 * ( clickX / presentationWidth ) * numberOfSlides
82 *
83 * @param {object} event
84 */
85 onProgressClicked( event ) {
86
87 this.Reveal.onUserInput( event );
88
89 event.preventDefault();
90
91 let slides = this.Reveal.getSlides();
92 let slidesTotal = slides.length;
93 let slideIndex = Math.floor( ( event.clientX / this.getMaxWidth() ) * slidesTotal );
94
95 if( this.Reveal.getConfig().rtl ) {
96 slideIndex = slidesTotal - slideIndex;
97 }
98
99 let targetIndices = this.Reveal.getIndices(slides[slideIndex]);
100 this.Reveal.slide( targetIndices.h, targetIndices.v );
101
102 }
103
104
105}