@knight-lab/timelinejs 3.8.20 → 3.8.21

package/jest.config.js

@@ -1,3 +1,5 @@
+process.env.TZ = 'UTC';
+
 // For a detailed explanation regarding each configuration property, visit:
 // https://jestjs.io/docs/en/configuration.html
 

package/package.json

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

package/src/js/__tests__/Timeline.test.js

@@ -50,14 +50,18 @@ beforeEach(() => {
         '<div id="timeline-embed"></div>';
 })
 
-// these tests fail because the timeline config instantiation is async, and the test
-// proceeds before it's ready. I still haven't figured out how to make Jest wait
-// until it's actually ready, or maybe there's a different problem?
+// Full timeline configuration is asynchronous, so these tests need
+// to be deferred until the timeline is in a "ready" state.
+// However, binding the promise resolution to timeline "on ready"
+// results in test failures because of timeout, even when passing
+// a longer timeout as the third argument to test (up to 10000ms tried)
+// however, when they fire on dataloaded, they pass. This doesn't 
+// seem satisfying, but better than ignoring failed test results
+// since passing is still passing.
 test("Ensure options is optional", async() => {
     let timeline = await new Promise((resolve) => {
         let tl = new Timeline('timeline-embed', TEST_CONFIG)
-        debugger
-        tl.on('ready', () => resolve(tl))
+        tl.on('dataloaded', () => resolve(tl))
     });
     // these tests will fail until we figure out how to deal with
     // the fact that the config creation/setting is async
@@ -65,14 +69,15 @@ test("Ensure options is optional", async() => {
     expect(timeline.config).toBeDefined()
 })
 
-// these tests fail because the timeline config instantiation is async, and the test
-// proceeds before it's ready. I still haven't figured out how to make Jest wait
-// until it's actually ready, or maybe there's a different problem?
-test("test remove", () => {
-    let timeline = new Timeline('timeline-embed',
-        TEST_CONFIG, { // i don't think this is actually used?
-            script_path: 'http://localhost:1234/'
-        });
+test("test remove", async() => {
+    let timeline = await new Promise((resolve) => {
+        let tl = new Timeline('timeline-embed',
+            TEST_CONFIG, { // i don't think this is actually used?
+                script_path: 'http://localhost:1234/'
+            });
+        tl.on('dataloaded', () => resolve(tl))
+    })
+
     expect(timeline.config).toBeDefined()
     expect(timeline.config.events.length).toBe(2)
     expect(timeline.config.event_dict['vimeo']).toBeTruthy()

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

@@ -41,7 +41,7 @@ test("before and after", () => {
 
 test("small dates are human so time is UNIX Epoch based", () => {
     var smalldate = makeDate({ year: 2015 });
-    expect(smalldate.getTime()).toBe(1420092000000)
+    expect(smalldate.getTime()).toBe(1420070400000)
 })
 
 test("big dates are cosmological", () => {
@@ -192,7 +192,7 @@ test("test TLDate.floor", () => {
 
     var early_ce = makeDate(-59149708181438); // 8/14/95 (95 not 1995)
     var floored = early_ce.floor('decade');
-    expect(floored.getTime()).toBe(-59326970964000) // 'Early floored dates should not go into the 20th Century')
+    expect(floored.getTime()).toBe(-59326992000000) // 'Early floored dates should not go into the 20th Century')
 
     var age_scale = makeDate({ year: 1500000 });
     expect(() => {

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

@@ -0,0 +1,76 @@
+{
+    "lang": "nb", 
+    "date": {
+        "month_abbr": [
+            "Jan.", 
+            "Feb.", 
+            "Mars", 
+            "Apr.", 
+            "Mai", 
+            "Juni", 
+            "Juli", 
+            "Aug.", 
+            "Sep.", 
+            "Okt.", 
+            "Nov.", 
+            "Des."
+        ], 
+        "day_abbr": [
+            "Søn.", 
+            "Man.", 
+            "Tir.", 
+            "Ons.", 
+            "Tor.", 
+            "Fre.", 
+            "Lør."
+        ], 
+        "day": [
+            "Søndag", 
+            "Mandag", 
+            "Tirsdag", 
+            "Onsdag", 
+            "Torsdag", 
+            "Fredag", 
+            "Lørdag"
+        ], 
+        "month": [
+            "Januar", 
+            "Februar", 
+            "Mars", 
+            "April", 
+            "Mai", 
+            "Juni", 
+            "Juli", 
+            "August", 
+            "September", 
+            "Oktober", 
+            "November", 
+            "Desember"
+        ]
+    }, 
+    "api": {
+        "wikipedia": "no"
+    }, 
+    "messages": {
+        "loading": "Laster", 
+        "contract_timeline": "Krymp tidslinje", 
+        "return_to_title": "Tilbake til tittel", 
+        "wikipedia": "Fra Wikipedia, den frie encyklopedi", 
+        "loading_content": "Laster innhold", 
+        "expand_timeline": "Utvid tidslinje", 
+        "loading_timeline": "Laster tidslinje... ",
+        "swipe_to_navigate": "Sveip for å navigere<br><span class='tl-button'>OK</span>"
+    }, 
+    "dateformats": {
+        "full_long": "dddd',' d. mmm',' yyyy 'kl.' HH:MM", 
+        "full_short": "d. mmm", 
+        "full": "d. mmmm',' yyyy", 
+        "month_short": "mmm", 
+        "time_no_seconds_small_date": "HH:MM'<br/><small>'d. mmmm',' yyyy'</small>'", 
+        "month": "mmmm yyyy", 
+        "time_no_seconds_short": "HH:MM", 
+        "time_short": "HH:MM:ss", 
+        "year": "yyyy", 
+        "full_long_small_date": "HH:MM'<br/><small>'dddd',' d. mmm',' yyyy'</small>'"
+    }
+}

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

@@ -0,0 +1,76 @@
+{
+    "lang": "nn", 
+    "date": {
+        "month_abbr": [
+            "Jan.", 
+            "Feb.", 
+            "Mars", 
+            "Apr.", 
+            "Mai", 
+            "Juni", 
+            "Juli", 
+            "Aug.", 
+            "Sep.", 
+            "Okt.", 
+            "Nov.", 
+            "Des."
+        ], 
+        "day_abbr": [
+            "Søn.", 
+            "Mån.", 
+            "Tys.", 
+            "Ons.", 
+            "Tor.", 
+            "Fre.", 
+            "Lau."
+        ], 
+        "day": [
+            "Søndag", 
+            "Måndag", 
+            "Tysdag", 
+            "Onsdag", 
+            "Torsdag", 
+            "Fredag", 
+            "Laurdag"
+        ], 
+        "month": [
+            "Januar", 
+            "Februar", 
+            "Mars", 
+            "April", 
+            "Mai", 
+            "Juni", 
+            "Juli", 
+            "August", 
+            "September", 
+            "Oktober", 
+            "November", 
+            "Desember"
+        ]
+    }, 
+    "api": {
+        "wikipedia": "nn"
+    }, 
+    "messages": {
+        "loading": "Lastar", 
+        "contract_timeline": "Krymp tidslinje", 
+        "return_to_title": "Tilbake til tittel", 
+        "wikipedia": "Frå Wikipedia, det frie oppslagsverket", 
+        "loading_content": "Lastar innhold", 
+        "expand_timeline": "Utvid tidslinje", 
+        "loading_timeline": "Lastar tidslinje... ",
+        "swipe_to_navigate": "Sveip for å navigere<br><span class='tl-button'>OK</span>"
+    }, 
+    "dateformats": {
+        "full_long": "dddd',' d. mmm',' yyyy 'kl.' HH:MM", 
+        "full_short": "d. mmm", 
+        "full": "d. mmmm',' yyyy", 
+        "month_short": "mmm", 
+        "time_no_seconds_small_date": "HH:MM'<br/><small>'d. mmmm',' yyyy'</small>'", 
+        "month": "mmmm yyyy", 
+        "time_no_seconds_short": "HH:MM", 
+        "time_short": "HH:MM:ss", 
+        "year": "yyyy", 
+        "full_long_small_date": "HH:MM'<br/><small>'dddd',' d. mmm',' yyyy'</small>'"
+    }
+}

package/src/js/media/types/Audio.js

@@ -25,16 +25,7 @@ export default class Audio extends Media {
         var self = this,
             audio_class = "tl-media-item tl-media-audio tl-media-shadow";
 
-        // Link
-        if (this.data.link) {
-            this._el.content_link = this.domCreate("a", "", this._el.content);
-            this._el.content_link.href = this.data.link;
-            this._el.content_link.target = "_blank";
-            this._el.content_link.setAttribute('rel', 'noopener');
-            this._el.content_item = this.domCreate("audio", audio_class, this._el.content_link);
-        } else {
-            this._el.content_item = this.domCreate("audio", audio_class, this._el.content);
-        }
+        this._el.content_item = this.domCreate("audio", audio_class, this._el.content);
 
         this._el.content_item.controls = true;
         this._el.source_item = this.domCreate("source", "", this._el.content_item);

package/src/js/media/types/Image.js

@@ -25,16 +25,7 @@ export default class Image extends Media {
             image_class = "tl-media-item tl-media-image"
         }
 
-        // Link
-        if (this.data.link) {
-            this._el.content_link = this.domCreate("a", "", this._el.content);
-            this._el.content_link.href = this.data.link;
-            this._el.content_link.target = "_blank";
-            this._el.content_link.setAttribute('rel', 'noopener');
-            this._el.content_item = this.domCreate("img", image_class, this._el.content_link);
-        } else {
-            this._el.content_item = this.domCreate("img", image_class, this._el.content);
-        }
+        this._el.content_item = this.domCreate("img", image_class, this._el.content);
 
         if (this.data.alt) {
             this._el.content_item.alt = this.data.alt;

package/src/js/media/types/Video.js

@@ -25,15 +25,7 @@ export default class Video extends Media {
             video_class = "tl-media-item tl-media-video tl-media-shadow";
 
         // Link
-        if (this.data.link) {
-            this._el.content_link = this.domCreate("a", "", this._el.content);
-            this._el.content_link.href = this.data.link;
-            this._el.content_link.target = "_blank";
-            this._el.content_link.setAttribute('rel', 'noopener')
-            this._el.content_item = this.domCreate("video", video_class, this._el.content_link);
-        } else {
-            this._el.content_item = this.domCreate("video", video_class, this._el.content);
-        }
+        this._el.content_item = this.domCreate("video", video_class, this._el.content);
 
         this._el.content_item.controls = true;
         this._el.source_item = this.domCreate("source", "", this._el.content_item);

package/src/js/timeline/Timeline.js

@@ -770,6 +770,11 @@ class Timeline {
         if (this._loaded.storyslider && this._loaded.timenav) {
             this.fire("loaded", this.config);
             // Go to proper slide
+            if (isTrue(this.options.start_at_end) || this.options.start_at_slide > this.config.events.length) {
+                this.goToEnd();
+            } else {
+                this.goTo(this.options.start_at_slide);
+            }
             if (this.options.hash_bookmark) {
                 if (window.location.hash != "") {
                     this.goToId(window.location.hash.replace("#event-", ""));
@@ -782,12 +787,6 @@ class Timeline {
                         the_timeline.goToId(window.location.hash.replace("#event-", ""));
                     }
                 }, false);
-            } else {
-                if (isTrue(this.options.start_at_end) || this.options.start_at_slide > this.config.events.length) {
-                    this.goToEnd();
-                } else {
-                    this.goTo(this.options.start_at_slide);
-                }
             }
 
         }
@@ -993,4 +992,4 @@ class Timeline {
 
 classMixin(Timeline, I18NMixins, Events)
 
-export { Timeline }
+export { Timeline }

package/src/js/timenav/TimeEra.js

@@ -5,7 +5,6 @@ import * as Browser from "../core/Browser"
 import { removeClass } from "../dom/DOMUtil";
 import { easeInSpline } from "../animation/Ease";
 import * as DOM from "../dom/DOM"
-import { head } from "lodash";
 
 /**
  * A TimeEra represents a span of time marked along the edge of the time 

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

@@ -259,9 +259,11 @@
         },
         {
             "media": {
-                "url": "http://www.kidzone.ws/images-changed/sharks/head.jpg",
-                "caption": "Sharks!",
-                "credit": "Kid Zone"
+                "url": "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Moraine_Lake_17092005.jpg/960px-Moraine_Lake_17092005.jpg",
+                "caption": "Valley of the Ten Peaks and Moraine Lake, Banff National Park, Canada.",
+                "credit": "Wikipedia Commons",
+                "link": "https://en.wikipedia.org/wiki/Rocky_Mountains#/media/File:Moraine_Lake_17092005.jpg",
+                "link_target": "images"
             },
             "start_date": {
                 "year": "1915"
@@ -274,16 +276,18 @@
         },
         {
             "media": {
-                "url": "https://media.giphy.com/media/nEZkc87t9u68U/source.gif",
+                "url": "https://media.giphy.com/media/Bzxeif0cR11ny/giphy.gif",
                 "caption": "Groundhog Day clip",
-                "credit": "USA Today"
+                "credit": "USA Today",
+                "link": "https://giphy.com/gifs/bored-bill-murray-groundhog-day-Bzxeif0cR11ny",
+                "link_target": "images"
             },
             "start_date": {
                 "year": "1916"
             },
             "text": {
                 "headline": "Image, GIF",
-                "text": "To embed a GIF, just copy the URL endig in '.gif'."
+                "text": "To embed a GIF, just copy the URL ending in '.gif'."
             },
             "group": "Image"
         },
@@ -304,9 +308,11 @@
         },
         {
             "media": {
-                "url": "http://upload.wikimedia.org/wikipedia/commons/c/c2/Rocky_Mountains.jpeg",
-                "caption": "Rocky Mountains",
-                "credit": "Wikipedia Commons"
+                "url": "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Moraine_Lake_17092005.jpg/960px-Moraine_Lake_17092005.jpg",
+                "caption": "Valley of the Ten Peaks and Moraine Lake, Banff National Park, Canada.",
+                "credit": "Wikipedia Commons",
+                "link": "https://en.wikipedia.org/wiki/Rocky_Mountains#/media/File:Moraine_Lake_17092005.jpg",
+                "link_target": "images"
             },
             "start_date": {
                 "year": "1918"
@@ -334,8 +340,9 @@
         {
             "media": {
                 "url": "https://en.wikipedia.org/wiki/1997_International_Tennis_Championships_%E2%80%93_Doubles",
-                "caption": "1997 Inrternational Tennis Championships - Doubles",
-                "credit": "Wikipedia"
+                "caption": "1997 International Tennis Championships - Doubles",
+                "credit": "Wikipedia",
+                "link": "https://en.wikipedia.org/wiki/1997_International_Tennis_Championships_%E2%80%93_Doubles"
             },
             "start_date": {
                 "year": "1920"
@@ -436,7 +443,7 @@
         },
         {
             "media": {
-                "url": "https://file-examples.com/wp-content/uploads/2017/10/file-sample_150kB.pdf",
+                "url": "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf",
                 "credit": "file-examples.com"
             },
             "start_date": {
@@ -463,7 +470,7 @@
         },
         {
             "media": {
-                "url": "https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4",
+                "url": "https://file-examples.com/storage/fef12739526267ac9a2b543/2017/04/file_example_MP4_480_1_5MG.mp4",
                 "credit": "file-examples.com"
             },
             "start_date": {
@@ -478,7 +485,7 @@
         },
         {
             "media": {
-                "url": "https://file-examples-com.github.io/uploads/2020/03/file_example_WEBM_480_900KB.webm",
+                "url": "https://file-examples.com/storage/fef12739526267ac9a2b543/2020/03/file_example_WEBM_480_900KB.webm",
                 "credit": "file-examples.com"
             },
             "start_date": {

package/src/template/index.html

@@ -9,6 +9,8 @@
             debug: true,
             height: 650,
             soundcite: true,
+            hash_bookmark: true,
+            start_at_end: true,
             sheets_proxy: 'https://sheets-proxy.knightlab.com/proxy/'
         }
 
@@ -55,6 +57,7 @@
 
             document.querySelectorAll('nav a').forEach(el => {
                 el.addEventListener('click', e => {
+                    window.location.hash = ''
                     e.preventDefault()
                     let url = e.target.attributes['href'].value
                     document.getElementById('timeline-src').value = url
@@ -91,7 +94,7 @@
 <body>
     <h1>Timeline Development</h1>
     <div>
-        <label for="timeline-src">data source URL:</label><input type="text" size="120" name="timeline-src" id="timeline-src">
+        <label for="timeline-src">data source URL:</label><input type="text" size="120" name="timeline-src" id="timeline-src" />
     </div>
     <nav>
         <a href='https://docs.google.com/spreadsheets/u/1/d/1xuY4upIooEeszZ_lCmeNx24eSFWe0rHe9ZdqH2xqVNk/pubhtml'>Women in Computing</a>