@knight-lab/timelinejs 3.9.2 → 3.9.4

package/package.json

@@ -1,10 +1,10 @@
 {
     "name": "@knight-lab/timelinejs",
-    "version": "3.9.2",
+    "version": "3.9.4",
     "license": "MPL-2.0",
     "description": "TimelineJS v3: A Storytelling Timeline built in JavaScript, made by Northwestern University Knight Lab.",
     "dependencies": {
-        "dompurify": "^2.2.7",
+        "dompurify": "^3.1.7",
         "wicg-inert": "^3.1.2"
     },
     "devDependencies": {

package/src/embed/index.html

@@ -150,7 +150,7 @@
             var options = optionsFromUrlParams();
             createEmbedDiv('timeline-embed', options.width, options.height);
             // ga_property_id is not something we let users override
-            options.ga_property_id = 'UA-27829802-4';
+            options.ga_measurement_id = 'G-LVEFKMG087'
             if (typeof(options.source) == 'undefined') {
                 options.source = '1xuY4upIooEeszZ_lCmeNx24eSFWe0rHe9ZdqH2xqVNk' // women in computing
             }

package/src/js/core/ConfigFactory.js

@@ -65,7 +65,8 @@ function extractEventFromCSVObject(orig_row) {
             caption: row['Media Caption'] || '',
             credit: row['Media Credit'] || '',
             url: row['Media'] || '',
-            thumbnail: row['Media Thumbnail'] || ''
+            thumbnail: row['Media Thumbnail'] || '',
+            alt: row['Alt Text'] || ''
         },
         text: {
             headline: row['Headline'] || '',
@@ -154,7 +155,13 @@ export async function readGoogleAsCSV(url, sheets_proxy) {
         if (error_json.proxy_err_code == 'response_not_csv') {
             throw new TLError('Timeline could not read the data for your timeline. Make sure you have published it to the web.')
         }
-        throw new TLError(error_json.message)
+        let msg = "undefined error"
+        if (Array.isArray(error_json.message)) {
+            msg = error_json.message.join('<br>')
+        } else {
+            msg = String(error_json.message)
+        }
+        throw new TLError(msg)
     })
 
     let timeline_config = { 'events': [], 'errors': [], 'warnings': [], 'eras': [] }
@@ -217,7 +224,7 @@ var buildGoogleFeedURL = function(key, api_version) {
     }
 }
 
-async function jsonFromGoogleURL(google_url, options) {
+export async function jsonFromGoogleURL(google_url, options) {
 
     if (!options['sheets_proxy']) {
         throw new TLError("Proxy option must be set to read data from Google")
@@ -334,4 +341,4 @@ function handleRow(event, timeline_config) {
     } else {
         timeline_config.events.push(event);
     }
-}
+}

package/src/js/index.js

@@ -1,7 +1,4 @@
 import "../less/TL.Timeline.less"
-export { Timeline }
-from "./timeline/Timeline"
-export { parseGoogleSpreadsheetURL }
-from "./core/ConfigFactory"
-export { lookupMediaType }
-from "./media/MediaType"
+export { Timeline, exportJSON } from "./timeline/Timeline"
+export { parseGoogleSpreadsheetURL } from "./core/ConfigFactory"
+export { lookupMediaType } from "./media/MediaType"

package/src/js/media/types/WikipediaImage.js

@@ -44,7 +44,7 @@ export default class WikipediaImage extends Media {
 
     _loadMedia() {
         var api_url,
-            image_width = this.options.width || 1000,
+            image_width = Math.round(this.options.width) || 1000, // value to WP API must be int
             language_code = this.getLanguage().lang.toLowerCase(),
             self = this;
 
@@ -140,8 +140,9 @@ export default class WikipediaImage extends Media {
 
     _getImageURL(w, h) {
         if (w && this.base_image_url) {
-            let match = this.base_image_url.match(/(\/\d+px-)/)
+            let match = this.base_image_url.match(/(\/[\d\.]+px-)/)
             if (match) {
+                w = Math.round(w) // WP image URLS 404 if floats are used so round it.
                 return this.base_image_url.replace(match[1], `/${w}px-`) // Wikipedia will autoscale the image for us
             }
         }
@@ -156,4 +157,4 @@ export default class WikipediaImage extends Media {
  * 
  * https://commons.wikimedia.org/w/api.php?action=query&titles=File:Beryl-Quartz-Emerald-Zambia-33mm_0885.jpg&prop=imageinfo&iiprop=url&&iiurlwidth=1000
  * https://commons.wikimedia.org/wiki/File:Beryl-Quartz-Emerald-Zambia-33mm_0885.jpg
- */
+ */

package/src/js/slider/Slide.js

@@ -1,6 +1,5 @@
 import "wicg-inert";
 
-import { addClass } from "../dom/DOMUtil"
 import { I18NMixins } from "../language/I18NMixins";
 import Events from "../core/Events";
 import { DOMMixins } from "../dom/DOMMixins";
@@ -321,17 +320,17 @@ export class Slide {
 
         // Add to DOM
         if (!this.has.text && !this.has.headline && this.has.media) {
-            addClass(this._el.container, 'tl-slide-media-only');
+            this._el.container.classList.add('tl-slide-media-only');
             this._media.addTo(this._el.content);
         } else if (this.has.headline && this.has.media && !this.has.text) {
-            addClass(this._el.container, 'tl-slide-media-only');
+            this._el.container.classList.add('tl-slide-media-only');
             this._text.addTo(this._el.content);
             this._media.addTo(this._el.content);
         } else if (this.has.text && this.has.media) {
             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._el.container.classList.add('tl-slide-text-only');
             this._text.addTo(this._el.content);
         }
 

package/src/js/slider/StorySlider.js

@@ -6,7 +6,6 @@ import { Animate } from "../animation/Animate"
 import * as DOM from "../dom/DOM"
 import { DOMEvent } from "../dom/DOMEvent"
 import * as Browser from "../core/Browser"
-import { addClass } from "../dom/DOMUtil"
 import Swipable from "../ui/Swipable";
 import Message from "../ui/Message"
 import { Slide } from "./Slide"
@@ -394,7 +393,7 @@ export class StorySlider {
     ================================================== */
     _initLayout() {
 
-        addClass(this._el.container, 'tl-storyslider');
+        this._el.container.classList.add('tl-storyslider');
 
         // Create Navigation
         this._nav.previous = new SlideNav({ title: "Previous", description: "description" }, { direction: "previous" }, this._el.container);

package/src/js/timeline/Timeline.js

@@ -1,12 +1,11 @@
 import * as DOM from "../dom/DOM"
-import { addClass } from "../dom/DOMUtil"
 import { hexToRgb, mergeData, classMixin, isTrue, trace, addTraceHandler } from "../core/Util";
 import { easeInOutQuint, easeOutStrong } from "../animation/Ease";
 import Message from "../ui/Message"
 import { Language, fallback, loadLanguage } from "../language/Language"
 import { I18NMixins } from "../language/I18NMixins";
 import Events from "../core/Events";
-import { makeConfig } from "../core/ConfigFactory"
+import { makeConfig, jsonFromGoogleURL } from "../core/ConfigFactory"
 import { TimelineConfig } from "../core/TimelineConfig"
 import { TimeNav } from "../timenav/TimeNav"
 import * as Browser from "../core/Browser"
@@ -134,6 +133,7 @@ class Timeline {
             slide_default_fade: "0%", // landscape fade
             zoom_sequence: [0.5, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89], // Array of Fibonacci numbers for TimeNav zoom levels
             language: "en",
+            ga_measurement_id: null,
             ga_property_id: null,
             track_events: ['back_to_start', 'nav_next', 'nav_previous', 'zoom_in', 'zoom_out'],
             theme: null,
@@ -192,17 +192,17 @@ class Timeline {
         }
 
         // Apply base class to container
-        addClass(this._el.container, 'tl-timeline');
+        this._el.container.classList.add('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');
+            this._el.container.classList.add('tl-timeline-embed');
         }
 
         if (this.options.is_full_embed) {
-            addClass(this._el.container, 'tl-timeline-full-embed');
+            this._el.container.classList.add('tl-timeline-full-embed');
         }
 
         this._loadLanguage(data);
@@ -992,31 +992,23 @@ class Timeline {
         this._el.container.focus();
     }
 
-    _initGoogleAnalytics() {
-        (function(i, s, o, g, r, a, m) {
-            i['GoogleAnalyticsObject'] = r;
-            i[r] = i[r] || function() {
-                (i[r].q = i[r].q || []).push(arguments)
-            }, i[r].l = 1 * new Date();
-            a = s.createElement(o), m = s.getElementsByTagName(o)[0];
-            a.async = 1;
-            a.src = g;
-            m.parentNode.insertBefore(a, m)
-        })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
-
-        ga('create', this.options.ga_property_id, 'auto');
-        ga('set', 'anonymizeIp', true);
+    _initGoogleAnalytics(measurement_id) {
+        loadJS(`https://www.googletagmanager.com/gtag/js?id=${measurement_id}`)
+        window.dataLayer = window.dataLayer || [];
+        window.gtag = function(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', measurement_id);
     }
 
     _initAnalytics() {
-        if (this.options.ga_property_id === null) { return; }
-        this._initGoogleAnalytics();
-        ga('send', 'pageview');
+        let measurement_id = this.options.ga_measurement_id || this.options.ga_property_id || null;
+        if (!measurement_id) { return; }
+        this._initGoogleAnalytics(measurement_id);
         var events = this.options.track_events;
         for (let i = 0; i < events.length; i++) {
             var event_ = events[i];
             this.addEventListener(event_, function(e) {
-                ga('send', 'event', e.type, 'clicked');
+                gtag('event', e.type);
             });
         }
     }
@@ -1026,4 +1018,14 @@ class Timeline {
 
 classMixin(Timeline, I18NMixins, Events)
 
-export { Timeline }
+async function exportJSON(url, proxy_url) {
+
+    if (!proxy_url) {
+        proxy_url = 'https://sheets-proxy.knightlab.com/proxy/'
+    }
+
+    let json = await jsonFromGoogleURL(url, {sheets_proxy: proxy_url})
+    return json
+}
+
+export { Timeline, exportJSON }

package/src/js/timenav/TimeEra.js

@@ -2,7 +2,6 @@ import { classMixin, unlinkify, mergeData } from "../core/Util"
 import Events from "../core/Events"
 import { DOMMixins } from "../dom/DOMMixins"
 import * as Browser from "../core/Browser"
-import { removeClass } from "../dom/DOMUtil";
 import { easeInSpline } from "../animation/Ease";
 import * as DOM from "../dom/DOM"
 
@@ -156,7 +155,7 @@ export class TimeEra {
         this.setPosition({ top: n });
 
         if (remainder < 56) {
-            removeClass(this._el.content_container, "tl-timeera-content-container-small");
+            this._el.content_container.remove("tl-timeera-content-container-small");
         }
     }
 

package/src/js/timenav/TimeMarker.js

@@ -3,7 +3,6 @@ import Events from "../core/Events"
 import { DOMMixins } from "../dom/DOMMixins"
 import { DOMEvent } from "../dom/DOMEvent"
 
-import { addClass, removeClass } from "../dom/DOMUtil"
 import * as DOM from "../dom/DOM"
 import { webkit as BROWSER_WEBKIT } from "../core/Browser";
 import { easeInSpline } from "../animation/Ease";
@@ -181,9 +180,9 @@ export class TimeMarker {
 		}
 
 		if (h <= 56) {
-			addClass(this._el.content_container, "tl-timemarker-content-container-small");
+			this._el.content_container.classList.add("tl-timemarker-content-container-small");
 		} else {
-			removeClass(this._el.content_container, "tl-timemarker-content-container-small");
+			this._el.content_container.classList.remove("tl-timemarker-content-container-small");
 		}
 
 		// Handle number of lines visible vertically

package/src/template/all-media-types.json

@@ -7,7 +7,7 @@
         },
         "text": {
             "headline": "TimelineJS Media Types",
-            "text": "<p>TimelineJS supports many media types. This provides a simple way to test them all. This page tests a simple image on a remote server. Also, if the Timeline was created with the <code>soundcite</code> option set to <code>true</code> then   <span class='soundcite' data-url='https://soundcite.knightlab.com/media/bach-cello-suite.mp3' data-start='0' data-end='164000' data-plays='1'>this should be an active SoundCite player.</span></p>"
+            "text": "<p>TimelineJS supports many media types. This provides a simple way to test them all. This page tests a simple image on a remote server. Also, if the Timeline was created with the <code>soundcite</code> option set to <code>true</code> then   <span class='soundcite' data-url='https://soundcite.knightlab.com/media/bach-cello-suite.mp3' data-start='0' data-end='164000' data-plays='1'>this should be an active SoundCite player.</span></p><p><a target=\"_self\" href=\"#wikipedia-images\">click to jump to Wikipedia Images</a></p>"
         },
         "background": {
             "color": "papayawhip"
@@ -388,10 +388,10 @@
 
         {
             "media": {
-                "url": "https://en.wikipedia.org/wiki/1997_International_Tennis_Championships_%E2%80%93_Doubles",
+                "url": "https://fr.wikipedia.org/wiki/Bataille_de_Champigny#/media/Fichier:Champigny,_le_four_%C3%A0_chaux_(d%C3%A9tail).jpg",
                 "caption": "1997 International Tennis Championships - Doubles",
                 "credit": "Wikipedia",
-                "link": "https://en.wikipedia.org/wiki/1997_International_Tennis_Championships_%E2%80%93_Doubles"
+                "link": "https://fr.wikipedia.org/wiki/Bataille_de_Champigny#/media/Fichier:Champigny,_le_four_%C3%A0_chaux_(d%C3%A9tail).jpg"
             },
             "start_date": {
                 "year": "1920"
@@ -519,7 +519,7 @@
         },
         {
             "media": {
-                "url": "https://file-examples.com/storage/fef12739526267ac9a2b543/2017/04/file_example_MP4_480_1_5MG.mp4",
+                "url": "https://file-examples.com/storage/febf69dcf3656dfd992b0fa/2017/04/file_example_MP4_480_1_5MG.mp4",
                 "credit": "file-examples.com"
             },
             "start_date": {
@@ -548,6 +548,7 @@
             "group": "Video"
         },
         {
+            "unique_id": "wistia",
             "media": {
                 "url": "https://lakeshore.wistia.com/medias/g2h5ddrucc",
                 "credit": "Wistia"
@@ -562,6 +563,7 @@
             "group": "Video"
         },
         {
+            "unique_id": "wikipedia-images",
             "media": {
                 "url": "https://de.wikipedia.org/wiki/Beryllium#/media/Datei:Beryl-Quartz-Emerald-Zambia-33mm_0885.jpg",
                 "credit": "Wikipedia"
@@ -576,6 +578,7 @@
             "group": "Image"
         },
         {
+            "unique_id": "wikipedia-commons",
             "media": {
                 "url": "https://commons.wikimedia.org/wiki/File:David-Bowie_Chicago_2002-08-08_photoby_Adam-Bielawski-cropped.jpg",
                 "credit": "Wikipedia"
@@ -590,4 +593,4 @@
             "group": "Image"
         }
     ]
-}
+}

package/src/template/index.html

@@ -13,6 +13,7 @@
             hash_bookmark: true,
             start_at_end: false,
             autolink: false,
+            ga_measurement_id: 'G-LVEFKMG087',
             sheets_proxy: 'https://sheets-proxy.knightlab.com/proxy/'
         }
 

package/src/js/dom/DOMUtil.js

@@ -1,25 +0,0 @@
-/*	DomUtil
-	Inspired by Leaflet
-	DomUtil contains various utility functions for working with DOM
-	Why are they in DOMUtil and not DOM? 
-================================================== */
-
-function hasClass(el, name) {
-    return (el.className.length > 0) &&
-        new RegExp("(^|\\s)" + name + "(\\s|$)").test(el.className);
-}
-
-export function addClass(el, name) {
-    if (!hasClass(el, name)) {
-        el.className += (el.className ? ' ' : '') + name;
-    }
-}
-
-export function removeClass(el, name) {
-    el.className = el.className.replace(/(\S+)\s*/g, function(w, match) {
-        if (match === name) {
-            return '';
-        }
-        return w;
-    }).replace(/^\s+/, '');
-}