@knight-lab/timelinejs 3.9.1 → 3.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@knight-lab/timelinejs",
-    "version": "3.9.1",
+    "version": "3.9.3",
     "license": "MPL-2.0",
     "description": "TimelineJS v3: A Storytelling Timeline built in JavaScript, made by Northwestern University Knight Lab.",
     "dependencies": {
@@ -59,7 +59,8 @@
         "stage_dev": "npm run dist && node tasks/stage.js dev",
         "prepublishOnly": "npm run dist"
     },
-    "contributors": [{
+    "contributors": [
+        {
             "name": "Zach Wise",
             "email": "wise@northwestern.edu",
             "url": "https://github.com/zachwise"
@@ -70,4 +71,4 @@
             "url": "https://github.com/JoeGermuska"
         }
     ]
-}
+}

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/dom/DOM.js

@@ -19,6 +19,12 @@ function create(tagName, className, container) {
 	return el;
 }
 
+function createButton(className, container) {
+	var el = create('button', className, container);
+	el.type = 'button';
+	return el;
+}
+
 function createText(content, container) {
 	var el = document.createTextNode(content);
 	if (container) {
@@ -78,4 +84,4 @@ let TRANSFORM = testProp(['transformProperty', 'WebkitTransform', 'OTransform',
 let TRANSLATE_OPEN = 'translate' + (Browser.webkit3d ? '3d(' : '(')
 let TRANSLATE_CLOSE = Browser.webkit3d ? ',0)' : ')'
 
-export { get, create, getPosition }
+export { get, create, createButton, getPosition }

package/src/js/language/Language.js

@@ -318,6 +318,7 @@ var LANGUAGES = {
             twitter_load_err: "Unable to load Tweet",
             twitterembed_invalidurl_err: "Invalid Twitter Embed url",
             wikipedia_load_err: "Unable to load Wikipedia entry",
+            wikipedia_image_load_err: "Unable to load Wikipedia image data",
             spotify_invalid_url: "Invalid Spotify URL",
             invalid_rgb_err: "Invalid RGB argument",
             time_scale_scale_err: "Don't know how to get date from time for scale",

package/src/js/language/locale/en-gb.json

@@ -0,0 +1,69 @@
+{
+    "lang": "en-gb",
+    "date": {
+        "month_abbr": [
+            "Jan",
+            "Feb",
+            "Mar",
+            "Apr",
+            "May",
+            "Jun",
+            "Jul",
+            "Aug",
+            "Sep",
+            "Oct",
+            "Nov",
+            "Dec"
+        ],
+        "day_abbr": [
+            "Sun",
+            "Mon",
+            "Tue",
+            "Wed",
+            "Thu",
+            "Fri",
+            "Sat"
+        ],
+        "day": [
+            "Sunday",
+            "Monday",
+            "Tuesday",
+            "Wednesday",
+            "Thursday",
+            "Friday",
+            "Saturday"
+        ],
+        "month": [
+            "January",
+            "February",
+            "March",
+            "April",
+            "May",
+            "June",
+            "July",
+            "August",
+            "September",
+            "October",
+            "November",
+            "December"
+        ]
+    },
+    "api": {
+        "wikipedia": "en"
+    },
+    "messages": {
+        "comment": "There is no need to repeat message keys because the fallback is English and this file only exists to control date formatting."
+    },
+    "dateformats": {
+        "full_long": "d mmm yyyy 'at' HH:MM TT",
+        "full_short": "d mmm",
+        "full": "d mmmm yyyy",
+        "month_short": "mmm",
+        "time_no_seconds_small_date": "HH:MM TT'<br/><small>'d mmmm yyyy'</small>'",
+        "month": "mmmm yyyy",
+        "time_no_seconds_short": "HH:MM TT",
+        "time_short": "HH:MM:ss",
+        "year": "yyyy",
+        "full_long_small_date": "HH:MM TT'<br/><small>d mmm yyyy'</small>'"
+    }
+}

package/src/js/language/locale/es.json

@@ -54,7 +54,7 @@
     "messages": {
         "loading": "cargando",
         "return_to_title": "Volver al título",
-        "swipe_nav": "Desliza para ver",
+        "swipe_to_navigate": "Desliza para ver<br><span class='tl-button'>OK</span>",
         "wikipedia": "Desde Wikipedia, la enciclopedia libre",
         "loading_content": "cargando",
         "loading_timeline": "La cronología esta cargando"

package/src/js/language/locale/hi.json

@@ -54,7 +54,6 @@
     "messages": {
         "loading": "लोड हो रहा है",
         "return_to_title": "शीर्षक पर लौटें",
-        "swipe_nav": "Swipe to Navigate",
         "read_more": "और पढ़ें",
         "wikipedia": "विकिपीडिया, मुक्त विश्वकोश से",
         "loading_timeline": "टाइमलाइन लोड हो रहा है",

package/src/js/media/MediaType.js

@@ -15,6 +15,7 @@ import YouTube from "./types/YouTube"
 import GoogleMap from "./types/GoogleMap"
 import Blockquote from "./types/Blockquote"
 import Wikipedia from "./types/Wikipedia"
+import WikipediaImage from "./types/WikipediaImage"
 import SoundCloud from "./types/SoundCloud"
 import Vimeo from "./types/Vimeo"
 import DailyMotion from "./types/DailyMotion"
@@ -133,6 +134,24 @@ export function lookupMediaType(m, image_only) {
                 match_str: /documentcloud.org\//,
                 cls: DocumentCloud
             },
+            {
+                type: "wikipedia-image",
+                name: "WikipediaImage",
+                match_str: "^https:\/\/.+\.wiki[mp]edia\.org.+#/media/.+\.(jpg|jpeg|png|gif|svg|webp)",
+                cls: WikipediaImage
+            },
+            {
+                type: "wikipedia-image",
+                name: "WikipediaImage",
+                match_str: "^https:\/\/commons.wikimedia.org/wiki/File:.+\.(jpg|jpeg|png|gif|svg|webp)",
+                cls: WikipediaImage
+            },
+            {
+                type: "wikipedia",
+                name: "Wikipedia",
+                match_str: "^(https?:)?\/.+.wikipedia\.org",
+                cls: Wikipedia
+            },
             {
                 type: "image",
                 name: "Image",
@@ -157,12 +176,6 @@ export function lookupMediaType(m, image_only) {
                 match_str: /^.*\.pdf(\?.*)?(\#.*)?/,
                 cls: PDF
             },
-            {
-                type: "wikipedia",
-                name: "Wikipedia",
-                match_str: "^(https?:)?\/*(www.)?wikipedia\.org|^(https?:)?\/*([a-z][a-z].)?wikipedia\.org",
-                cls: Wikipedia
-            },
             {
                 type: "spotify",
                 name: "spotify",

package/src/js/media/__tests__/MediaType.test.js

@@ -0,0 +1,47 @@
+import { lookupMediaType } from "../MediaType";
+import { test, expect } from "@jest/globals"
+
+const TEST_CASES = [
+    // tuples: [URL, expected type, optional note which isn't used.]
+    ['https://www.youtube.com/watch?v=pi2v1m6gmD8&t=5m21s', 'youtube', 'YouTube with time stamp'],
+    ['//www.youtube.com/watch?v=pi2v1m6gmD8', 'youtube', 'YouTube with no protocol'],
+    ['youtu.be/pi2v1m6gmD8', 'youtube', 'YouTu.be short url'],
+    ['http://vimeo.com/20839673', 'vimeo'],
+    ['http://www.dailymotion.com/video/x2fo0e8_the-history-of-advertising-in-60-seconds_lifestyle', 'dailymotion'],
+    ['https://vine.co/v/Og5Ai71WHdD', 'vine'],
+    ['https://soundcloud.com/usher-raymond-music/usher-i-dont-mind-feat-juicy-j', 'soundcloud'],
+    ['https://twitter.com/NASASpaceflight/status/562327074384654336', 'twitter'],
+    ['<blockquote class="twitter-tweet" lang="en"><p>Rough vs. smooth: the Anuket and Anubis regions on <a href="https://twitter.com/hashtag/67P?src=hash">#67P</a> <a href="http://t.co/kOyAiOKlma">http://t.co/kOyAiOKlma</a> <a href="https://twitter.com/hashtag/CometWatch?src=hash">#CometWatch</a> <a href="http://t.co/YmQ8bP5WbS">pic.twitter.com/YmQ8bP5WbS</a></p>&mdash; ESA Rosetta Mission (@ESA_Rosetta) <a href="https://twitter.com/ESA_Rosetta/status/563722810397560832">February 6, 2015</a></blockquote>', 'twitterembed'],
+    ['https://www.google.com/maps/@42.032147,-87.6689625,15z', 'googlemaps', 'Google Maps with lat/long'],
+    ['https://www.google.com/maps/search/target/@41.8747339,-87.6481257,13z?hl=en-US', 'googlemaps', 'Google Maps with search'],
+    ['https://www.google.com/maps/place/Northwestern+University/@42.056459,-87.675267,17z/data=!3m1!4b1!4m2!3m1!1s0x880fd00b703e4c39:0x2c37b567fad56106', 'googlemaps', 'Google Maps with place'],
+    ['https://www.google.com/maps/dir/W+Adams+St+%26+S+Clark+St,+Chicago,+IL/Northwestern+University,+633+Clark+Street,+Evanston,+IL+60208/@41.9672743,-87.7225481,12z/data=!3m1!4b1!4m13!4m12!1m5!1m1!1s0x880e2cbc8bcec53b:0x72d2c7372d97283d!2m2!1d-87.6308023!2d41.8794067!1m5!1m1!1s0x880fd00b703e4c39:0x2c37b567fad56106!2m2!1d-87.675267!2d42.056459', 'googlemaps', 'Google Maps with directions'],
+    ['http://instagram.com/p/ymwL5JAsw5/', 'instagram'],
+    ['http://instagram.com/lukerague/', 'profile'],
+    ['https://www.flickr.com/photos/critterseeker/16420145375', 'flickr'],
+    ['https://flic.kr/p/u7SSxw', 'flickr'],
+    ['https://www.documentcloud.org/documents/1377371-folketinget.html', 'documentcloud'],
+    ['http://www.kidzone.ws/images-changed/sharks/head.jpg', 'image', 'JPG'],
+    ['http://usatlife.files.wordpress.com/2014/06/groundhog-day-bill-murray-winter-never-going-to-end.gif', 'image', 'GIF'],
+    ['http://pngimg.com/upload/banana_PNG842.png', 'image', 'PNG'],
+    ['http://upload.wikimedia.org/wikipedia/commons/c/c2/Rocky_Mountains.jpeg', 'image', 'JPEG'],
+    ['https://docs.google.com/document/d/1RvKYxHuwweIP8zRrnjad-0exVoZOUsSVgDYPp0J1mzY/edit?usp=sharing', 'googledocs'],
+    ['http://stlab.adobe.com/wiki/images/d/d3/Test.pdf', 'pdf'],
+    ['https://en.wikipedia.org/wiki/1997_International_Tennis_Championships_%E2%80%93_Doubles', 'wikipedia'],
+    ['<iframe src="https://embed.spotify.com/?uri=https://play.spotify.com/artist/2iE18Oxc8YSumAU232n4rW" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>', 'spotify', 'artist'],
+    ['https://play.spotify.com/user/edvard_m/playlist/4xFSdiuP4gpR4wq2OghlOs', 'spotify', 'playlist'],
+    ['https://play.spotify.com/track/5SdB3onMcO9ZBoKrdvCqhR', 'spotify', 'track'],
+    ["<iframe src='https://cdn.knightlab.com/libs/timeline/latest/embed/index.html?source=10fFZXg4kioMz8uTVDZfawiJkgrWZxfJuziK1i1AaCrs&font=Bevan-PotanoSans&maptype=toner&lang=en&height=650' width='100%' height='650' frameborder='0'></iframe>", 'iframe'],
+    ['<blockquote>This is a block quote.</blockquote>', 'blockquote'],
+    ['http://2.bp.blogspot.com/-dxJbW0CG8Zs/TmkoMA5-cPI/AAAAAAAAAqw/fQpsz9GpFdo/s1600/voyage-dans-la-lune-1902-02-g.jpg', 'image'],
+    ['https://de.wikipedia.org/wiki/Beryllium#/media/Datei:Beryl-Quartz-Emerald-Zambia-33mm_0885.jpg', 'wikipedia-image', 'regular wikipedia link'],
+    ['https://commons.wikimedia.org/wiki/File:Hyperspace_Mountain_(27766070223).jpg', 'wikipedia-image', 'Wikimedia Commons link'],
+    ['https://commons.wikimedia.org/wiki/Category:Airdancers#/media/File:Sky-dancer-japan.jpg', 'wikipedia-image', 'Wikimedia Commons link'],
+
+]
+
+test.each(TEST_CASES)("Ensure test URLs yield expected type", (url, expected_type) => {
+    const result = lookupMediaType({ url: url })
+    expect(result.type).toBe(expected_type)
+
+})

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

@@ -0,0 +1,159 @@
+import { Media } from "../Media";
+import { getJSON, fetchJSON } from "../../net/Net";
+import TLError from "../../core/TLError";
+import { unhtmlify } from "../../core/Util";
+
+export function computeMediaId(url) {
+
+    if (url.match(/^.+#\/media\/.+/)) {
+        let parts = url.split('#')
+        let file_parts = parts[1].split(':') // the prefix is File in English but different on other language WPs
+        return `File:${file_parts[1]}`
+    }
+
+    if (url.match(/^.*commons.wikimedia.org\/wiki\/File:.+/)) {
+        let parts = url.split('/')
+        return parts[parts.length - 1]
+    }
+
+    return null
+}
+
+/**
+ * Given a JSON response from a Wikimedia Commons API call, extract the base thumbnail URL 
+ * and the page ID, which can be used to get alt text later.
+ * We assume that there is only one meaningful result in the object.
+ * 
+ * @param {Object} j 
+ */
+export function processImageInfoAPIJSON(j) {
+    let response = {}
+    if (j.query && j.query.pages) {
+        let page_ids = Object.keys(j.query.pages)
+        response['page_id'] = page_ids[0]
+        let data = j.query.pages[response['page_id']]
+        response['url'] = data.imageinfo[0].thumburl
+        if (data.entityterms && data.entityterms.label) {
+            response['label'] = data.entityterms.label[0]
+        }
+    }
+    return response
+}
+
+export default class WikipediaImage extends Media {
+
+    _loadMedia() {
+        var api_url,
+            image_width = this.options.width || 1000,
+            language_code = this.getLanguage().lang.toLowerCase(),
+            self = this;
+
+        try {
+            // Get Media ID
+            this.establishMediaID();
+
+            // API URL
+            api_url = `https://commons.wikimedia.org/w/api.php?action=query&titles=${this.media_id}&prop=imageinfo|entityterms&iiprop=url&&iiurlwidth=${image_width}&format=json&origin=*&wbetlanguage=${language_code}`
+                // API Call
+            getJSON(api_url, function(d) {
+                let response = processImageInfoAPIJSON(d)
+                if (response.url) {
+                    self.base_image_url = response.url
+                    self.page_id = response.page_id
+                    if (!(self.data.alt) && response.label) {
+                        self.data.alt = response.label
+                    }
+
+                    if (!self.options.background) {
+                        self.createMedia();
+                    }
+
+                    self.onLoaded();
+                } else {
+                    self.loadErrorDisplay(self._("wikipedia_image_load_err"));
+                }
+            });
+        } catch (e) {
+            self.loadErrorDisplay(self._(e.message_key));
+        }
+    }
+
+    /**
+     * Analyze the URL provided in the data object passed to the constructor to extract
+     * the Wikimedia commons "page" name
+     */
+    establishMediaID() {
+        let media_id = computeMediaId(this.data.url)
+        if (media_id) {
+            this.media_id = media_id
+        } else {
+            throw new TLError(`Invalid Wikipedia Image URL`)
+        }
+    }
+
+    createMedia() {
+        var self = this;
+
+        // Photo
+        this._el.content_item = this.domCreate("img", "tl-media-item tl-media-image tl-media-wikipedia-image tl-media-shadow", this._el.content);
+
+        if (this.data.alt) {
+            this._el.content_item.alt = this.data.alt;
+        } else if (this.page_id) {
+            let wikibase_id = `M${this.page_id}`
+            let wikibase_url = `https://commons.wikimedia.org/w/api.php?action=wbgetentities&format=json&ids=${wikibase_id}&format=json&origin=*`
+            fetchJSON(wikibase_url).then(j => {
+                if (j.entities && j.entities[wikibase_id]) {
+                    let labels = j.entities[wikibase_id].labels
+                    let language_code = self.getLanguage().lang.toLowerCase()
+                    let label = null
+                    if (labels[language_code]) {
+                        label = labels[language_code]
+                    } else if (language_code.length > 2 && labels[language_code.substr(0, 2)]) {
+                        label = labels[language_code.substr(0, 2)]
+                    } else if (labels['en']) {
+                        label = labels['en']
+                    }
+                    if (label) {
+                        console.log(`wikibase_id: ${self.media_id} alt ${label.value}`)
+                        self.data.alt = label.value
+                        self._el.content_item.alt = self.data.alt
+                    } else {
+                        console.log(`wikibase_id: ${self.media_id} ain't got no alt`)
+                    }
+                }
+            })
+        }
+
+        if (this.data.title) {
+            this._el.content_item.title = this.data.title;
+        }
+
+        // Media Loaded Event
+        this._el.content_item.addEventListener('load', function(e) {
+            self.onMediaLoaded();
+        });
+
+        // Set Image Source
+        this._el.content_item.src = this.getImageURL(this.options.width, this.options.height);
+    }
+
+    _getImageURL(w, h) {
+        if (w && this.base_image_url) {
+            let match = this.base_image_url.match(/(\/\d+px-)/)
+            if (match) {
+                return this.base_image_url.replace(match[1], `/${w}px-`) // Wikipedia will autoscale the image for us
+            }
+        }
+        // they don't always have that pattern!
+        return this.base_image_url
+    }
+
+}
+
+/**
+ * 
+ * 
+ * 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/media/types/__tests__/WikipediaImage.test.js

@@ -0,0 +1,48 @@
+import { computeMediaId, processImageInfoAPIJSON } from "../WikipediaImage"
+import { test, expect } from "@jest/globals"
+
+const TEST_CASES = [
+    ['https://commons.wikimedia.org/wiki/https://commons.wikimedia.org/wiki/File:Beryl-Quartz-Emerald-Zambia-33mm_0885.jpg', 'File:Beryl-Quartz-Emerald-Zambia-33mm_0885.jpg'],
+    ['https://en.wikipedia.org/wiki/Main_Page#/media/File:Symphyotrichum_kentuckiense_233619783_(inflor).jpg', 'File:Symphyotrichum_kentuckiense_233619783_(inflor).jpg'],
+    ['https://es.wikipedia.org/wiki/Portal:M%C3%BAsica#/media/Archivo:David-Bowie_Chicago_2002-08-08_photoby_Adam-Bielawski-cropped.jpg', 'File:David-Bowie_Chicago_2002-08-08_photoby_Adam-Bielawski-cropped.jpg'],
+    ['https://commons.wikimedia.org/wiki/Category:Airdancers#/media/File:Sky-dancer-japan.jpg', 'File:Sky-dancer-japan.jpg']
+]
+
+const IMAGE_INFO_JSON_RESPONSE = {
+    "batchcomplete": "",
+    "query": {
+        "normalized": [{
+            "from": "File:Beryl-Quartz-Emerald-Zambia-33mm_0885.jpg",
+            "to": "File:Beryl-Quartz-Emerald-Zambia-33mm 0885.jpg"
+        }],
+        "pages": {
+            "10450749": {
+                "pageid": 10450749,
+                "ns": 6,
+                "title": "File:Beryl-Quartz-Emerald-Zambia-33mm 0885.jpg",
+                "imagerepository": "local",
+                "imageinfo": [{
+                    "thumburl": "https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Beryl-Quartz-Emerald-Zambia-33mm_0885.jpg/100px-Beryl-Quartz-Emerald-Zambia-33mm_0885.jpg",
+                    "thumbwidth": 100,
+                    "thumbheight": 121,
+                    "thumbmime": "image/jpeg",
+                    "responsiveUrls": { "1.5": "https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Beryl-Quartz-Emerald-Zambia-33mm_0885.jpg/150px-Beryl-Quartz-Emerald-Zambia-33mm_0885.jpg", "2": "https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Beryl-Quartz-Emerald-Zambia-33mm_0885.jpg/200px-Beryl-Quartz-Emerald-Zambia-33mm_0885.jpg" },
+                    "url": "https://upload.wikimedia.org/wikipedia/commons/d/df/Beryl-Quartz-Emerald-Zambia-33mm_0885.jpg",
+                    "descriptionurl": "https://commons.wikimedia.org/wiki/File:Beryl-Quartz-Emerald-Zambia-33mm_0885.jpg",
+                    "descriptionshorturl": "https://commons.wikimedia.org/w/index.php?curid=10450749",
+                    "mime": "image/jpeg"
+                }]
+            }
+        }
+    }
+}
+
+test.each(TEST_CASES)("Ensure correct file identifier is extracted", (url, file_id) =>
+    expect(computeMediaId(url)).toBe(file_id)
+)
+
+test("get image info data", () => {
+    let response = processImageInfoAPIJSON(IMAGE_INFO_JSON_RESPONSE)
+    expect(response.url).toBe("https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Beryl-Quartz-Emerald-Zambia-33mm_0885.jpg/100px-Beryl-Quartz-Emerald-Zambia-33mm_0885.jpg")
+    expect(response.page_id).toBe("10450749")
+})

package/src/js/net/Net.js

@@ -1477,7 +1477,7 @@ window.$ === undefined && (window.$ = Zepto)
 
     /**
      * Add a promisified option to better handle cases where we need the data 
-     * synchronously.
+     * asynchronously.
      * @param {String} url 
      */
     $.fetchJSON = function(url) {

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/SlideNav.js

@@ -39,7 +39,7 @@ export class SlideNav {
 		mergeData(this.data, data);
 		
 		
-		this._el.container = DOM.create("button", "tl-slidenav-" + this.options.direction);
+		this._el.container = DOM.createButton("tl-slidenav-" + this.options.direction);
 		
 		if (Browser.mobile) {
 			this._el.container.setAttribute("ontouchstart"," ");

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");
         }
     }