@knight-lab/timelinejs 3.8.21 → 3.9.0

package/src/js/timenav/TimeMarker.js

@@ -1,4 +1,4 @@
-import { classMixin, mergeData, unlinkify } from "../core/Util"
+import { classMixin, mergeData, trim, unlinkify } from "../core/Util"
 import Events from "../core/Events"
 import { DOMMixins } from "../dom/DOMMixins"
 import { DOMEvent } from "../dom/DOMEvent"
@@ -9,6 +9,7 @@ import { webkit as BROWSER_WEBKIT } from "../core/Browser";
 import { easeInSpline } from "../animation/Ease";
 
 import { lookupMediaType } from "../media/MediaType"
+import { I18NMixins } from "../language/I18NMixins";
 
 export class TimeMarker {
 	constructor(data, options) {
@@ -75,6 +76,9 @@ export class TimeMarker {
 		// End date
 		this.has_end_date = false;
 
+        // Alternative text
+        this.ariaLabel = '';
+
 		// Merge Data and Options
 		mergeData(this.options, options);
 		mergeData(this.data, data);
@@ -107,8 +111,19 @@ export class TimeMarker {
 		} else {
 			this._el.container.className = 'tl-timemarker';
 		}
+
+        this._el.container.ariaLabel = this.ariaLabel;
+        if (this.active) {
+            this._el.container.ariaLabel += ', shown';
+        } else {
+            this._el.container.ariaLabel += ', press space to show';
+        }
 	}
 
+    setFocus(options = { preventScroll: true }) {
+        this._el.container.focus(options);
+    }
+
 	addTo(container) {
 		container.appendChild(this._el.container);
 	}
@@ -216,17 +231,44 @@ export class TimeMarker {
 		this._el.timespan.style.height = remainder + "px";
 	}
 
+    getFormattedDate() {
+        if (trim(this.data.display_date).length > 0) {
+            return this.data.display_date;
+        }
+
+        let date_text = "";
+        if (this.data.end_date) {
+            date_text = " to " + this.data.end_date.getDisplayDate(this.getLanguage());
+        }
+        if (this.data.start_date) {
+            date_text = (date_text ? "from " : "") + this.data.start_date.getDisplayDate(this.getLanguage()) + date_text;
+        }
+        return date_text;
+    }
+
 	/*	Events
 	================================================== */
 	_onMarkerClick(e) {
 		this.fire("markerclick", { unique_id: this.data.unique_id });
 	}
 
+    _onMarkerKeydown(e) {
+        if (/Space|Enter/.test(e.code)) {
+            this.fire("markerclick", { unique_id: this.data.unique_id });
+        }
+    }
+
+    _onMarkerBlur(e) {
+        this.fire("markerblur", { unique_id: this.data.unique_id });
+    }
+
 	/*	Private Methods
 	================================================== */
 	_initLayout() {
 		// Create Layout
 		this._el.container = DOM.create("div", "tl-timemarker");
+        this._el.container.setAttribute('tabindex', '-1');
+
 		if (this.data.unique_id) {
 			this._el.container.id = this.data.unique_id + "-marker";
 		}
@@ -277,7 +319,8 @@ export class TimeMarker {
 			this._text.innerHTML = unlinkify(this.data.media.caption);
 		}
 
-
+        const date = this.getFormattedDate();
+        this.ariaLabel = `${this._text.innerHTML}, ${date}`;
 
 		// Fire event that the slide is loaded
 		this.onLoaded();
@@ -286,6 +329,8 @@ export class TimeMarker {
 
 	_initEvents() {
 		DOMEvent.addListener(this._el.container, 'click', this._onMarkerClick, this);
+        DOMEvent.addListener(this._el.container, 'keydown', this._onMarkerKeydown, this);
+        DOMEvent.addListener(this._el.container, 'blur', this._onMarkerBlur, this);
 	}
 
 	// Update Display
@@ -304,4 +349,4 @@ export class TimeMarker {
 }
 
 
-classMixin(TimeMarker, Events, DOMMixins)
+classMixin(TimeMarker, I18NMixins, Events, DOMMixins)

package/src/js/timenav/TimeNav.js

@@ -11,13 +11,14 @@ import { TimeAxis } from "./TimeAxis"
 import { TimeMarker } from "./TimeMarker"
 import Swipable from "../ui/Swipable"
 import { Animate } from "../animation/Animate"
+import { I18NMixins } from "../language/I18NMixins"
 
 
 
 export class TimeNav {
 
     constructor(elem, timeline_config, options, language) {
-        this.language = language // just passing through for TimeAxis. Is this a bad code smell?
+        this.language = language
             // DOM ELEMENTS
         this._el = {
             parent: {},
@@ -29,8 +30,7 @@ export class TimeNav {
             marker_container: {},
             marker_item_container: {},
             timeaxis: {},
-            timeaxis_background: {},
-            attribution: {}
+            timeaxis_background: {}
         };
 
         this.collapsed = false;
@@ -40,6 +40,14 @@ export class TimeNav {
         } else {
             this._el.container = DOM.get(elem);
         }
+        this._el.container.setAttribute('tabindex', '0');
+
+        // 'application' role supports predictable control of keyboard input in a complex component
+        this._el.container.setAttribute('role', 'application');
+        this._el.container.setAttribute('aria-label', this._('aria_label_timeline_navigation'));
+        this._el.container.setAttribute('aria-description',
+            'Navigate between markers with arrow keys. Press "Home" for the first and "End" for the last markers'
+        );
 
         this.config = timeline_config;
 
@@ -81,6 +89,9 @@ export class TimeNav {
         // Current Marker
         this.current_id = "";
 
+        // Current Focused Marker
+        this.current_focused_id = "";
+
         // TimeScale
         this.timescale = {};
 
@@ -365,7 +376,13 @@ export class TimeNav {
     _resetMarkersActive() {
         for (var i = 0; i < this._markers.length; i++) {
             this._markers[i].setActive(false);
-        };
+        }
+    }
+
+    _resetMarkersBlurListeners() {
+        for (var i = 0; i < this._markers.length; i++) {
+            this._markers[i].off('markerblur', this._onMarkerBlur, this);
+        }
     }
 
     _findMarkerIndex(n) {
@@ -459,6 +476,56 @@ export class TimeNav {
         if (n >= 0 && n < this._markers.length) {
             this._markers[n].setActive(true);
         }
+
+        this.animateMovement(_n, fast, css_animation, _duration, _ease);
+
+        if (n >= 0 && n < this._markers.length) {
+            this.current_id = this.current_focused_id = this._markers[n].data.unique_id;
+        } else {
+            this.current_id = this.current_focused_id = '';
+        }
+
+        this._setLabelWithCurrentMarker();
+    }
+
+    goToId(id, fast, css_animation) {
+        this.goTo(this._findMarkerIndex(id), fast, css_animation);
+    }
+
+    focusOn(n, fast, css_animation) {
+        const _ease = this.options.ease,
+            _duration = this.options.duration,
+            _n = (n < 0) ? 0 : n;
+
+        this.animateMovement(_n, fast, css_animation, _duration, _ease);
+
+        this._resetMarkersBlurListeners();
+        if (n >= 0 && n < this._markers.length) {
+            this._markers[n].setFocus();
+            this.current_focused_id = this._markers[n].data.unique_id;
+            this._markers[n].on('markerblur', this._onMarkerBlur, this);
+        }
+    }
+
+    focusNext() {
+        const n = this._findMarkerIndex(this.current_focused_id);
+        if ((n + 1) < this._markers.length) {
+            this.focusOn(n + 1);
+        } else {
+            this.focusOn(n);
+        }
+    }
+
+    focusPrevious() {
+        const n = this._findMarkerIndex(this.current_focused_id);
+        if (n - 1 >= 0) {
+            this.focusOn(n - 1);
+        } else {
+            this.focusOn(n);
+        }
+    }
+
+    animateMovement(n, fast, css_animation, duration, ease) {
         // Stop animation
         if (this.animator) {
             this.animator.stop();
@@ -466,18 +533,21 @@ export class TimeNav {
 
         if (fast) {
             this._el.slider.className = "tl-timenav-slider";
-            this._el.slider.style.left = -this._markers[_n].getLeft() + (this.options.width / 2) + "px";
+            this._el.slider.style.left = -this._markers[n].getLeft() +
+                (this.options.width / 2) + "px";
         } else {
             if (css_animation) {
                 this._el.slider.className = "tl-timenav-slider tl-timenav-slider-animate";
                 this.animate_css = true;
-                this._el.slider.style.left = -this._markers[_n].getLeft() + (this.options.width / 2) + "px";
+                this._el.slider.style.left = -this._markers[n].getLeft() +
+                    (this.options.width / 2) + "px";
             } else {
                 this._el.slider.className = "tl-timenav-slider";
                 this.animator = Animate(this._el.slider, {
-                    left: -this._markers[_n].getLeft() + (this.options.width / 2) + "px",
-                    duration: _duration,
-                    easing: _ease
+                    left: -this._markers[n].getLeft() +
+                        (this.options.width / 2) + "px",
+                    duration: duration,
+                    easing: ease
                 });
             }
         }
@@ -487,12 +557,29 @@ export class TimeNav {
         } else {
             this.current_id = '';
         }
+
+        this._dispatchVisibleTicksChange();
     }
 
     goToId(id, fast, css_animation) {
         this.goTo(this._findMarkerIndex(id), fast, css_animation);
     }
 
+    _dispatchVisibleTicksChange() {
+        /**
+         * The timeout is required to wait till the end of the animation
+         * and repositioning of the ticks on the screen
+         */
+        if (this.ticks_change_timeout) {
+            clearTimeout(this.ticks_change_timeout);
+            this.ticks_change_timeout = null;
+        }
+        this.ticks_change_timeout = setTimeout(() => {
+            const visible_ticks = this.timeaxis.getVisibleTicks();
+            this.fire("visible_ticks_change", { visible_ticks });
+        }, this.options.duration);
+    }
+
     /*	Events
     ================================================== */
     _onLoaded() {
@@ -518,6 +605,12 @@ export class TimeNav {
         this.fire("change", { unique_id: e.unique_id });
     }
 
+    _onMarkerBlur(e) {
+        // Reset the focused marked to the active marker after it lost the focus
+        if (this.current_focused_id === this.current_id) return;
+        this.focusOn(this._findMarkerIndex(this.current_id));
+    }
+
     _onMouseScroll(e) {
 
         var delta = 0,
@@ -576,6 +669,35 @@ export class TimeNav {
 
     }
 
+    _onKeydown(e) {
+        DOMEvent.stopPropagation(e);
+
+        switch (e.key) {
+            case "ArrowUp":
+            case "ArrowRight":
+                {
+                    this.focusNext();
+                    break;
+                }
+            case "ArrowDown":
+            case "ArrowLeft":
+                {
+                    this.focusPrevious();
+                    break;
+                }
+            case "Home":
+                {
+                    this.focusOn(0);
+                    break;
+                }
+            case "End":
+                {
+                    this.focusOn(this._markers.length - 1);
+                    break;
+                }
+        }
+    }
+
     /*	Private Methods
     ================================================== */
 
@@ -633,12 +755,18 @@ export class TimeNav {
 
     }
 
+    _setLabelWithCurrentMarker() {
+        const currentMarker = this._markers[this._findMarkerIndex(this.current_focused_id)];
+        const currentMarkerText = currentMarker && currentMarker.ariaLabel ?
+            `, ${currentMarker.ariaLabel}, shown` :
+            '';
+        this._el.container.setAttribute('aria-label', `Timeline navigation ${currentMarkerText}`);
+    }
 
     /*	Init
     ================================================== */
     _initLayout() {
         // Create Layout
-        this._el.attribution = DOM.create('div', 'tl-attribution', this._el.container);
         this._el.line = DOM.create('div', 'tl-timenav-line', this._el.container);
         this._el.slider = DOM.create('div', 'tl-timenav-slider', this._el.container);
         this._el.slider_background = DOM.create('div', 'tl-timenav-slider-background', this._el.slider);
@@ -648,10 +776,6 @@ export class TimeNav {
         this._el.timeaxis = DOM.create('div', 'tl-timeaxis', this._el.slider);
         this._el.timeaxis_background = DOM.create('div', 'tl-timeaxis-background', this._el.container);
 
-
-        // Knight Lab Logo
-        this._el.attribution.innerHTML = "<a href='http://timeline.knightlab.com' target='_blank' rel='noopener'><span class='tl-knightlab-logo'></span>TimelineJS</a>"
-
         // Time Axis
         this.timeaxis = new TimeAxis(this._el.timeaxis, this.options, this.language);
 
@@ -672,6 +796,7 @@ export class TimeNav {
         // Scroll Events
         DOMEvent.addListener(this._el.container, 'mousewheel', this._onMouseScroll, this);
         DOMEvent.addListener(this._el.container, 'DOMMouseScroll', this._onMouseScroll, this);
+        DOMEvent.addListener(this._el.container, 'keydown', this._onKeydown, this);
     }
 
     _initData() {
@@ -688,4 +813,4 @@ export class TimeNav {
     }
 }
 
-classMixin(TimeNav, Events, DOMMixins)
+classMixin(TimeNav, Events, DOMMixins, I18NMixins)