UNPKG

webslides

Version:
148 lines (134 loc) 3.54 kB
import DOM from '../utils/dom'; const ELEMENT_ID = { NAV: 'navigation', NEXT: 'next', PREV: 'previous', COUNTER: 'counter' }; const LABELS = { VERTICAL: { NEXT: '↓', PREV: '↑' }, HORIZONTAL: { NEXT: '→', PREV: '←' } }; /** * Navigation plugin. */ export default class Navigation { /** * @param {WebSlides} wsInstance The WebSlides instance * @constructor */ constructor(wsInstance) { const arrowLabels = wsInstance.isVertical ? LABELS.VERTICAL : LABELS.HORIZONTAL; /** * Navigation element. * @type {Element} */ this.el = DOM.createNode('div', 'navigation'); /** * Next button. * @type {Element} */ this.next = Navigation.createArrow(ELEMENT_ID.NEXT, arrowLabels.NEXT); /** * Prev button. * @type {Element} */ this.prev = Navigation.createArrow(ELEMENT_ID.PREV, arrowLabels.PREV); /** * Counter Element. * @type {Element} */ this.counter = Navigation.createCounter(ELEMENT_ID.COUNTER, wsInstance); /** * @type {WebSlides} * @private */ this.ws_ = wsInstance; this.el.appendChild(this.next); this.el.appendChild(this.prev); this.el.appendChild(this.counter); this.ws_.el.appendChild(this.el); this.bindEvents_(); } /** * Bind all events for the navigation. * @private */ bindEvents_() { this.ws_.el.addEventListener( 'ws:slide-change', this.onSlideChanged_.bind(this)); this.next.addEventListener('click', this.onButtonClicked_.bind(this)); this.prev.addEventListener('click', this.onButtonClicked_.bind(this)); this.counter.addEventListener('click', this.onButtonClicked_.bind(this)); } /** * Updates the counter inside the navigation. * @param {string|number} current Current slide number. * @param {string|number} max Max slide number. */ updateCounter(current, max) { if (this.ws_.options.showIndex) { this.counter.childNodes[0].textContent = `${current} / ${max}`; } else { this.counter.textContent = `${current} / ${max}`; } } /** * Creates an arrow to navigate. * @param {!String} id Desired ID for the arrow. * @param {!String} text Desired text for the arrow. * @return {Element} The arrow element. */ static createArrow(id, text) { const arrow = DOM.createNode('a', id, text); arrow.href = '#'; arrow.title = 'Arrow Keys'; return arrow; } /** * Creates the navigation counter. * @param {!String} id Desired ID for the counter. * @param {WebSlides} ws_ WebSlides object. * @return {Element} The arrow element. */ static createCounter(id, ws_) { const counter = DOM.createNode('span', id); if (ws_.options.showIndex) { const link = document.createElement('a'); link.href = '#'; link.title = 'View all slides'; counter.appendChild(link); } return counter; } /** * Slide Change event handler. Will update the text on the navigation. * @param {CustomEvent} event * @private */ onSlideChanged_(event) { this.updateCounter(event.detail.currentSlide, event.detail.slides); } /** * Handles clicks on the next/prev buttons. * @param {MouseEvent} event * @private */ onButtonClicked_(event) { event.preventDefault(); if (event.target === this.next) { this.ws_.goNext(); } else if (event.target === this.prev) { this.ws_.goPrev(); } else { this.ws_.toggleZoom(); } } }