@knight-lab/timelinejs 3.9.2 → 3.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@knight-lab/timelinejs",
-    "version": "3.9.2",
+    "version": "3.9.3",
     "license": "MPL-2.0",
     "description": "TimelineJS v3: A Storytelling Timeline built in JavaScript, made by Northwestern University Knight Lab.",
     "dependencies": {

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

@@ -154,7 +154,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': [] }
@@ -334,4 +340,4 @@ function handleRow(event, timeline_config) {
     } else {
         timeline_config.events.push(event);
     }
-}
+}

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,5 +1,4 @@
 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"
@@ -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);
             });
         }
     }

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/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+/, '');
-}