@knight-lab/timelinejs 3.8.21 → 3.9.0

package/src/js/media/types/Text.js

@@ -9,6 +9,7 @@ export class Text {
 			container: { },
 			content_container: { },
 			content: { },
+            headline_container: { },
 			headline: { },
 			date: { }
 		}
@@ -24,54 +25,54 @@ export class Text {
 		}
 
 		setData(this, data); // override defaults
-		
+
 		// Merge Options
 		mergeData(this.options, options);
-		
+
 		this._el.container = DOM.create("div", "tl-text");
 		this._el.container.id = this.data.unique_id;
-		
+
 		this._initLayout();
-		
+
 		if (add_to_container) {
 			add_to_container.appendChild(this._el.container);
 		};
-		
+
 	}
-	
+
 	/*	Adding, Hiding, Showing etc
 	================================================== */
 	show() {
-		
+
 	}
-	
+
 	hide() {
-		
+
 	}
-	
+
 	addTo(container) {
 		container.appendChild(this._el.container);
 		//this.onAdd();
 	}
-	
+
 	removeFrom(container) {
 		container.removeChild(this._el.container);
 	}
-	
+
 	headlineHeight() {
 		return this._el.headline.offsetHeight + 40;
 	}
-	
+
 	addDateText(str) {
 		this._el.date.innerHTML = str;
 	}
-	
+
 	/*	Events
 	================================================== */
 	onLoaded() {
 		this.fire("loaded", this.data);
 	}
-	
+
 	onAdd() {
 		this.fire("added", this.data);
 	}
@@ -79,26 +80,27 @@ export class Text {
 	onRemove() {
 		this.fire("removed", this.data);
 	}
-	
+
 	/*	Private Methods
 	================================================== */
 	_initLayout() {
-		
+
 		// Create Layout
 		this._el.content_container = DOM.create("div", "tl-text-content-container", this._el.container);
-		
-		// Date
-		this._el.date = DOM.create("h3", "tl-headline-date", this._el.content_container);
-		
-		// Headline
-		if (this.data.headline != "") {
-			var headline_class = "tl-headline";
-			if (this.options.title) {
-				headline_class = "tl-headline tl-headline-title";
-			}
-			this._el.headline = DOM.create("h2", headline_class, this._el.content_container);
-			this._el.headline.innerHTML		= this.data.headline;
-		}
+		this._el.headline_container = DOM.create("div", "tl-text-headline-container", this._el.content_container);
+
+        // Headline
+        if (this.data.headline != "") {
+            var headline_class = "tl-headline";
+            if (this.options.title) {
+                headline_class = "tl-headline tl-headline-title";
+            }
+            this._el.headline = DOM.create("h2", headline_class, this._el.headline_container);
+            this._el.headline.innerHTML		= this.data.headline;
+        }
+
+        // Date
+		this._el.date = DOM.create("h3", "tl-headline-date", this._el.headline_container);
 
 		// Text
 		if (this.data.text != "") {
@@ -115,4 +117,4 @@ export class Text {
 
 }
 
-classMixin(Text, Events)
+classMixin(Text, Events)

package/src/js/media/types/Vimeo.js

@@ -3,60 +3,61 @@ import { Media } from "../Media";
 
 export default class Vimeo extends Media {
 
-	_loadMedia() {
-		var api_url,
-			self = this;
-
-		// Create Dom element
-		this._el.content_item	= this.domCreate("div", "tl-media-item tl-media-iframe tl-media-vimeo tl-media-shadow", this._el.content);
-
-		// Get Media ID
-		this.media_id = this.data.url.split(/video\/|\/\/vimeo\.com\//)[1].split(/[?&]/)[0];
-		var start_time = null;
-
-		// Get start time
-		if (this.data.url.match(/#t=([^&]+).*/)) {
-			start_time = this.data.url.match(/#t=([^&]+).*/)[1];
-		}
-
-		// API URL
-		api_url = "https://player.vimeo.com/video/" + this.media_id + "?api=1&title=0&byline=0&portrait=0&color=ffffff";
-		if (start_time) {
-			api_url = api_url += '&#t=' + start_time;
-		}
-
-		this.player = this.domCreate("iframe", "", this._el.content_item);
-
-		// Media Loaded Event
-		this.player.addEventListener('load', function(e) {
-			self.onMediaLoaded();
-		});
-
-		this.player.width 		= "100%";
-		this.player.height 		= "100%";
-		this.player.frameBorder = "0";
-		this.player.src 		= api_url;
-
-		this.player.setAttribute('allowfullscreen', '');
-		this.player.setAttribute('webkitallowfullscreen', '');
-		this.player.setAttribute('mozallowfullscreen', '');
-
-		// After Loaded
-		this.onLoaded();
-	}
-
-	// Update Media Display
-	_updateMediaDisplay() {
-		this._el.content_item.style.height = ratio.r16_9({w:this._el.content_item.offsetWidth}) + "px";
-	}
-
-	_stopMedia() {
-
-		try {
-			this.player.contentWindow.postMessage(JSON.stringify({method: "pause"}), "https://player.vimeo.com");
-		}
-		catch(err) {
-			trace(err);
-		}
-	}
-}
+    _loadMedia() {
+        var api_url,
+            self = this;
+
+        // Create Dom element
+        this._el.content_item = this.domCreate("div", "tl-media-item tl-media-iframe tl-media-vimeo tl-media-shadow", this._el.content);
+
+        // Get Media ID
+        this.media_id = this.data.url.split(/video\/|\/\/vimeo\.com\//)[1].split(/[?&]/)[0];
+        var start_time = null;
+
+        // Get start time
+        if (this.data.url.match(/#t=([^&]+).*/)) {
+            start_time = this.data.url.match(/#t=([^&]+).*/)[1];
+        }
+
+        // API URL
+        api_url = "https://player.vimeo.com/video/" + this.media_id + "?api=1&title=0&byline=0&portrait=0&color=ffffff";
+        if (start_time) {
+            api_url = api_url += '&#t=' + start_time;
+        }
+
+        this.player = this.domCreate("iframe", "", this._el.content_item);
+
+        // Media Loaded Event
+        this.player.addEventListener('load', function(e) {
+            self.onMediaLoaded();
+        });
+
+        this.player.width = "100%";
+        this.player.height = "100%";
+        this.player.frameBorder = "0";
+        this.player.src = api_url;
+
+        this.player.setAttribute('allowfullscreen', '');
+        this.player.setAttribute('webkitallowfullscreen', '');
+        this.player.setAttribute('mozallowfullscreen', '');
+
+        // After Loaded
+        this.onLoaded();
+    }
+
+    // Update Media Display
+    _updateMediaDisplay() {
+        this._el.content_item.style.height = ratio.r16_9({ w: this._el.content_item.offsetWidth }) + "px";
+    }
+
+    _stopMedia() {
+
+        try {
+            if (this.player && this.player.contentWindow) {
+                this.player.contentWindow.postMessage(JSON.stringify({ method: "pause" }), "https://player.vimeo.com");
+            }
+        } catch (err) {
+            trace(err);
+        }
+    }
+}

package/src/js/slider/Slide.js

@@ -1,3 +1,5 @@
+import "wicg-inert";
+
 import { addClass } from "../dom/DOMUtil"
 import { I18NMixins } from "../language/I18NMixins";
 import Events from "../core/Events";
@@ -112,9 +114,11 @@ export class Slide {
             if (this.data.background) {
                 this.fire("background_change", this.has.background);
             }
+            this._setInteractive(true)
             this.loadMedia();
         } else {
             this.stopMedia();
+            this._setInteractive(false)
         }
     }
 
@@ -263,6 +267,10 @@ export class Slide {
                     this.has.background.color_value = "#000";
                     this._el.background.style.display = "block";
                 }
+                if (this.data.background.alt) {
+                    this._el.background.setAttribute('role', 'img');
+                    this._el.background.setAttribute('aria-label', this.data.background.alt);
+                }
             }
             if (this.data.background.color) {
                 this.has.background.color = true;
@@ -305,7 +313,7 @@ export class Slide {
 
         // Create Text
         if (this.has.text || this.has.headline) {
-            this._text = new Text(this.data.text, { title: this.has.title, language: this.options.language, autolink: this.data.autolink });
+            this._text = new Text(this.data.text, { title: this.has.title, language: this.getLanguage(), autolink: this.data.autolink });
             this._text.addDateText(this.getFormattedDate());
         }
 
@@ -320,8 +328,8 @@ export class Slide {
             this._text.addTo(this._el.content);
             this._media.addTo(this._el.content);
         } else if (this.has.text && this.has.media) {
-            this._media.addTo(this._el.content);
             this._text.addTo(this._el.content);
+            this._media.addTo(this._el.content);
         } else if (this.has.text || this.has.headline) {
             addClass(this._el.container, 'tl-slide-text-only');
             this._text.addTo(this._el.content);
@@ -342,5 +350,12 @@ export class Slide {
         }
     }
 
+    _setInteractive(is_interactive) {
+        if (is_interactive) {
+            this._el.container.removeAttribute('inert');
+        } else {
+            this._el.container.setAttribute('inert', true);
+        }
+    }
 }
 classMixin(Slide, I18NMixins, Events, DOMMixins)

package/src/js/slider/SlideNav.js

@@ -39,7 +39,7 @@ export class SlideNav {
 		mergeData(this.data, data);
 		
 		
-		this._el.container = DOM.create("div", "tl-slidenav-" + this.options.direction);
+		this._el.container = DOM.create("button", "tl-slidenav-" + this.options.direction);
 		
 		if (Browser.mobile) {
 			this._el.container.setAttribute("ontouchstart"," ");
@@ -93,12 +93,17 @@ export class SlideNav {
 	_update(d) {
 		// update data
 		this.data = mergeData(this.data, d);
-		
-		// Title
-		this._el.title.innerHTML = unlinkify(this.data.title);
-		
-		// Date
-		this._el.description.innerHTML	= unlinkify(this.data.date);
+
+        // Title
+        const title = unlinkify(this.data.title);
+        this._el.title.innerHTML = title;
+
+        // Date
+        const date = unlinkify(this.data.date);
+        this._el.description.innerHTML = date;
+
+        // Alternative text
+        this._el.container.setAttribute('aria-label', `${this.options.direction}, ${title}, ${date}`)
 	}
 	
 	_initLayout () {

package/src/js/slider/StorySlider.js

@@ -326,7 +326,7 @@ export class StorySlider {
     showNav(nav_obj, show) {
 
         if (this.options.width <= 500 && Browser.mobile) {
-
+            nav_obj.hide();
         } else {
             if (show) {
                 nav_obj.show();
@@ -396,27 +396,23 @@ export class StorySlider {
 
         addClass(this._el.container, 'tl-storyslider');
 
+        // Create Navigation
+        this._nav.previous = new SlideNav({ title: "Previous", description: "description" }, { direction: "previous" }, this._el.container);
+        this._nav.next = new SlideNav({ title: "Next", description: "description" }, { direction: "next" }, this._el.container);
+
         // Create Layout
         this._el.slider_container_mask = DOM.create('div', 'tl-slider-container-mask', this._el.container);
         this._el.background = DOM.create('div', 'tl-slider-background tl-animate', this._el.container);
         this._el.slider_container = DOM.create('div', 'tl-slider-container tlanimate', this._el.slider_container_mask);
         this._el.slider_item_container = DOM.create('div', 'tl-slider-item-container', this._el.slider_container);
 
+        // Add aria-live polite to slide_container
+        this._el.slider_container.setAttribute('aria-live', 'polite');
 
         // Update Size
         this.options.width = this._el.container.offsetWidth;
         this.options.height = this._el.container.offsetHeight;
 
-        // Create Navigation
-        this._nav.previous = new SlideNav({ title: "Previous", description: "description" }, { direction: "previous" });
-        this._nav.next = new SlideNav({ title: "Next", description: "description" }, { direction: "next" });
-
-        // add the navigation to the dom
-        this._nav.next.addTo(this._el.container);
-        this._nav.previous.addTo(this._el.container);
-
-
-
         this._el.slider_container.style.left = "0px";
 
         if (Browser.touch) {
@@ -538,4 +534,4 @@ export class StorySlider {
 
 }
 
-classMixin(StorySlider, I18NMixins, Events)
+classMixin(StorySlider, I18NMixins, Events)

package/src/js/timeline/Timeline.js

@@ -193,6 +193,9 @@ class Timeline {
 
         // Apply base class to container
         addClass(this._el.container, 'tl-timeline');
+        this._el.container.setAttribute('tabindex', '0');
+        this._el.container.setAttribute('role', 'region');
+        this._el.container.setAttribute('aria-label', this._('aria_label_timeline'));
 
         if (this.options.is_embed) {
             addClass(this._el.container, 'tl-timeline-embed');
@@ -248,7 +251,6 @@ class Timeline {
                 if (language) {
                     this.language = language
                     this.message.setLanguage(this.language)
-                    this.options.language = this.language // easiest way to make language available to I18NMixins
                     this.showMessage(this._('loading_timeline'))
                 } else {
                     this.showMessage(`Error loading ${lang}`) // but we will carry on using the fallback
@@ -398,7 +400,6 @@ class Timeline {
     }
 
     _initLayout() {
-        var self = this;
 
         this.message.removeFrom(this._el.container);
         this._el.container.innerHTML = "";
@@ -406,14 +407,17 @@ class Timeline {
         // Create Layout
         if (this.options.timenav_position == "top") {
             this._el.timenav = DOM.create('div', 'tl-timenav', this._el.container);
+            this._el.menubar = DOM.create('div', 'tl-menubar', this._el.container);
             this._el.storyslider = DOM.create('div', 'tl-storyslider', this._el.container);
         } else {
             this._el.storyslider = DOM.create('div', 'tl-storyslider', this._el.container);
             this._el.timenav = DOM.create('div', 'tl-timenav', this._el.container);
+            this._el.menubar = DOM.create('div', 'tl-menubar', this._el.container);
         }
 
-        this._el.menubar = DOM.create('div', 'tl-menubar', this._el.container);
-
+        // Knight Lab Logo
+        this._el.attribution = DOM.create('div', 'tl-attribution', this._el.container);
+        this._el.attribution.innerHTML = "<a href='https://timeline.knightlab.com' target='_blank' rel='noopener'><span class='tl-knightlab-logo'></span>TimelineJS</a>"
 
         // Initial Default Layout
         this.options.width = this._el.container.offsetWidth;
@@ -437,11 +441,13 @@ class Timeline {
 
         // Create StorySlider
         this._storyslider = new StorySlider(this._el.storyslider, this.config, this.options, this.language);
+        this._el.storyslider.setAttribute('role', 'group');
+        this._el.storyslider.setAttribute('aria-label', this._('aria_label_timeline_content'));
         this._storyslider.on('loaded', this._onStorySliderLoaded, this);
         this._storyslider.init();
 
         // Create Menu Bar
-        this._menubar = new MenuBar(this._el.menubar, this._el.container, this.options);
+        this._menubar = new MenuBar(this._el.menubar, this._el.container, this.options, this.getLanguage());
 
         // LAYOUT
         if (this.options.layout == "portrait") {
@@ -460,6 +466,7 @@ class Timeline {
         // TimeNav Events
         this._timenav.on('change', this._onTimeNavChange, this);
         this._timenav.on('zoomtoggle', this._onZoomToggle, this);
+        this._timenav.on('visible_ticks_change', this._onVisibleTicksChange, this);
 
         // StorySlider Events
         this._storyslider.on('change', this._onSlideChange, this);
@@ -470,6 +477,7 @@ class Timeline {
         // Menubar Events
         this._menubar.on('zoom_in', this._onZoomIn, this);
         this._menubar.on('zoom_out', this._onZoomOut, this);
+        this._menubar.on('forward_to_end', this._onForwardToEnd, this);
         this._menubar.on('back_to_start', this._onBackToStart, this);
 
     }
@@ -512,8 +520,17 @@ class Timeline {
         }
     }
 
+    _onVisibleTicksChange(e) {
+        this._menubar.changeVisibleTicks(e.visible_ticks);
+    }
+
+    _onForwardToEnd(e) {
+        this.goToEnd();
+        this.fire("forward_to_end", { unique_id: this.current_id }, this);
+    }
+
     _onBackToStart(e) {
-        this._storyslider.goTo(0);
+        this.goToStart();
         this.fire("back_to_start", { unique_id: this.current_id }, this);
     }
 
@@ -650,7 +667,7 @@ class Timeline {
         this._timenav.updateDisplay(this.options.width, this.options.timenav_height, animate);
         this._storyslider.updateDisplay(this.options.width, this.options.storyslider_height, animate, this.options.layout);
 
-        if (this.options.language.direction == 'rtl') {
+        if (this.language.direction == 'rtl') {
             display_class += ' tl-rtl';
         }
 
@@ -833,14 +850,25 @@ class Timeline {
 
     // Goto slide n
     goTo(n) {
-        if (this.config.title) {
-            if (n == 0) {
-                this.goToId(this.config.title.unique_id);
+        if (n < 0) {
+            return;
+        }
+
+        try {
+            if (this.config.title) {
+                if (n === 0) {
+                    this.goToId(this.config.title.unique_id);
+                } else {
+                    this.goToId(this.config.events[n - 1].unique_id);
+                }
             } else {
-                this.goToId(this.config.events[n - 1].unique_id);
+                this.goToId(this.config.events[n].unique_id);
             }
-        } else {
-            this.goToId(this.config.events[n].unique_id);
+        } catch {
+            // because n is interpreted differently depending on 
+            // whether there's a title slide, easier to use catch
+            // to handle navigating beyond end instead of test before
+            return
         }
     }
 
@@ -858,11 +886,13 @@ class Timeline {
     // Goto previous slide
     goToPrev() {
         this.goTo(this._getSlideIndex(this.current_id) - 1);
+        this.focusContainer();
     }
 
     // Goto next slide
     goToNext() {
         this.goTo(this._getSlideIndex(this.current_id) + 1);
+        this.focusContainer();
     }
 
     /* Event manipulation
@@ -958,6 +988,10 @@ class Timeline {
         }
     }
 
+    focusContainer() {
+        this._el.container.focus();
+    }
+
     _initGoogleAnalytics() {
         (function(i, s, o, g, r, a, m) {
             i['GoogleAnalyticsObject'] = r;

package/src/js/timenav/TimeAxis.js

@@ -5,6 +5,14 @@ import { I18NMixins } from "../language/I18NMixins"
 import { easeInSpline } from "../animation/Ease";
 import * as DOM from "../dom/DOM"
 
+function isInHorizontalViewport(element) {
+    const rect = element.getBoundingClientRect();
+    return (
+        rect.left >= 0 &&
+        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+    );
+}
+
 export class TimeAxis {
     constructor(elem, options, language) {
 
@@ -216,10 +224,21 @@ export class TimeAxis {
                     tick.tick.className = "tl-timeaxis-tick";
                 }
 
-            };
+            }
+        }
+    }
+
+    getVisibleTicks() {
+        return {
+            major: this._getVisibleTickArray(this.major_ticks),
+            minor: this._getVisibleTickArray(this.minor_ticks)
         }
     }
 
+    _getVisibleTickArray(tick_array) {
+        return tick_array.filter(({ tick }) => isInHorizontalViewport(tick))
+    }
+
     /*	Events
     ================================================== */