@knight-lab/timelinejs 3.9.0 → 3.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@knight-lab/timelinejs",
-    "version": "3.9.0",
+    "version": "3.9.2",
     "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/js/date/TLDate.js

@@ -178,13 +178,24 @@ export const TLDate = TLClass.extend({
             this._createDateObj();
         }
 
+        if (data.format && !format) {
+            format = data.format
+        }
         this._setFormat(format, format_short);
     },
 
     setDateFormat: function(format) {
         this.data.format = format;
     },
-
+    /**
+     * Return a string representation of this date. If this date has been created with a `display_date` property,
+     * that value is always returned, regardless of arguments to the method invocation. Otherwise,
+     * the given `Language` is asked to create a string representation based on this Date's data, passing through the provided
+     * `format` String, or, if that is undefined, this date's default format string.
+     * @param {Language} language
+     * @param {String} format
+     * @returns {String} formattedDate
+     */
     getDisplayDate: function(language, format) {
         if (this.data.display_date) {
             return this.data.display_date;
@@ -345,6 +356,14 @@ export const TLDate = TLClass.extend({
         } else if (!this.data.format_short) {
             this.data.format_short = this.findBestFormat(true);
         }
+    },
+    /**
+     * Get the year-only representation of this date. Ticks need this to layout
+     * the time axis, and this needs to work isomorphically for TLDate and BigDate 
+     * @returns {Number}
+     */
+    getFullYear: function() {
+        return this.data.date_obj.getFullYear()
     }
 });
 
@@ -477,6 +496,10 @@ export const BigDate = TLDate.extend({
             this._createDateObj();
         }
 
+        if (data.format && !format) {
+            format = data.format
+        }
+
         this._setFormat(format, format_short);
     },
 
@@ -497,5 +520,13 @@ export const BigDate = TLDate.extend({
         }
 
         throw new TLError("invalid_scale_err", scale);
+    },
+    /**
+     * Get the year-only representation of this date. Ticks need this to layout
+     * the time axis, and this needs to work isomorphically for TLDate and BigDate 
+     * @returns {Number}
+     */
+    getFullYear: function() {
+        return this.data.date_obj.getTime()
     }
 });

package/src/js/date/__tests__/TLDate.test.js

@@ -55,6 +55,16 @@ test("display_text overrides other formatting", () => {
 
 })
 
+test("date constructor format overrides other formatting", () => {
+    var cdate = new TLDate({ year: 2014, month: 12 }, 'yyyy')
+    expect(cdate.getDisplayDate()).toBe('2014')
+})
+
+test("format in constructor data param overrides other formatting", () => {
+    var cdate = new TLDate({ year: 2014, month: 12, format: 'yyyy' })
+    expect(cdate.getDisplayDate()).toBe('2014')
+})
+
 test("handle years in the first century CE correctly", () => {
     var date = makeDate({ year: 75 });
     expect(date.getDisplayDate()).toBe("75")

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"
@@ -58,7 +59,7 @@ export function lookupMediaType(m, image_only) {
         media_types = [{
                 type: "youtube",
                 name: "YouTube",
-                match_str: "^(https?:)?\/*(www.)?youtube|youtu\.be",
+                match_str: "^(https?:)?\/*(www.|m.)?youtube|youtu\.be",
                 cls: YouTube
             },
             {
@@ -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",
@@ -148,7 +167,7 @@ export function lookupMediaType(m, image_only) {
             {
                 type: "googledocs",
                 name: "Google Doc",
-                match_str: "^(https?:)?\/*[^.]*.google.com\/[^\/]*\/d\/[^\/]*\/[^\/]*\?usp=sharing|^(https?:)?\/*drive.google.com\/open\?id=[^\&]*\&authuser=0|^(https?:)?\/\/*drive.google.com\/open\\?id=[^\&]*|^(https?:)?\/*[^.]*.googledrive.com\/host\/[^\/]*\/",
+                match_str: "^(https?:)?\/*[^.]*.google.com\/[^\/]*\/d\/[^\/]*\/[^\/]*\?usp=shar.*|^(https?:)?\/*drive.google.com\/open\?id=[^\&]*\&authuser=0|^(https?:)?\/\/*drive.google.com\/open\\?id=[^\&]*|^(https?:)?\/*[^.]*.googledrive.com\/host\/[^\/]*\/",
                 cls: GoogleDoc
             },
             {
@@ -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/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/timenav/TimeNav.js

@@ -80,7 +80,9 @@ export class TimeNav {
         this._eras = [];
         this.has_eras = false;
 
-        // Groups Array
+        /**
+         * @type TimeGroup
+         */
         this._groups = [];
 
         // Row Height

package/src/js/ui/MenuBar.js

@@ -97,10 +97,10 @@ export class MenuBar {
         }
 
         const firstTick = minor_ticks[0];
-        const firstYear = this._getTickYear(firstTick);
+        const firstYear = firstTick.date.getFullYear();
 
         const lastTick = minor_ticks[minor_ticks.length - 1];
-        const lastYear = this._getTickYear(lastTick);
+        const lastYear = lastTick.date.getFullYear();
 
         this.data.visible_ticks_dates = {
             start: firstYear,
@@ -110,10 +110,6 @@ export class MenuBar {
         this._updateZoomAriaLabels()
     }
 
-    _getTickYear(tick) {
-        return tick.date.data.date_obj.getFullYear();
-    }
-
     setSticky(y) {
         this.options.menubar_default_y = y;
     }
@@ -158,10 +154,10 @@ export class MenuBar {
     _initLayout() {
 
         // Create Layout
-        this._el.button_zoomin = DOM.create('button', 'tl-menubar-button', this._el.container);
-        this._el.button_zoomout = DOM.create('button', 'tl-menubar-button', this._el.container);
-        this._el.button_forwardtoend = DOM.create('button', 'tl-menubar-button', this._el.container);
-        this._el.button_backtostart = DOM.create('button', 'tl-menubar-button', this._el.container);
+        this._el.button_zoomin = DOM.createButton('tl-menubar-button', this._el.container);
+        this._el.button_zoomout = DOM.createButton('tl-menubar-button', this._el.container);
+        this._el.button_forwardtoend = DOM.createButton('tl-menubar-button', this._el.container);
+        this._el.button_backtostart = DOM.createButton('tl-menubar-button', this._el.container);
 
         if (Browser.mobile) {
             this._el.container.setAttribute("ontouchstart", " ");