@knight-lab/timelinejs 3.8.18 → 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.18",
+    "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/embed/old-index.html

@@ -8,8 +8,21 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-touch-fullscreen" content="yes">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
-    <link rel="icon" type="image/png" href="https://cdn.knightlab.com/libs/purpleline/latest/img/favicon.png">
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
+    <!-- FAVICONS -->
+    <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.knightlab.com/libs/orangeline/latest/assets/favicons/apple-touch-icon.png">
+    <link rel="icon" type="image/png" href="https://cdn.knightlab.com/libs/orangeline/latest/assets/favicons/favicon-32x32.png" sizes="32x32">
+    <link rel="icon" type="image/png" href="https://cdn.knightlab.com/libs/orangeline/latest/assets/favicons/favicon-16x16.png" sizes="16x16">
+    <link rel="manifest" href="https://cdn.knightlab.com/libs/orangeline/latest/assets/favicons/manifest.json">
+    <link rel="mask-icon" href="https://cdn.knightlab.com/libs/orangeline/latest/assets/favicons/safari-pinned-tab.svg" color="#5bbad5">
+    <!-- 
+      If we want to support loading different versions of timeline like we used to, 
+      this isn't good enough. We used that to get the non-minimized version, for debugging,
+      but now maybe sourcemaps are a better alternative?
+    -->
+    <script id='timeline-script-tag' type="text/javascript" src="https://cdn.knightlab.com/libs/timeline3/3.8.1/js/timeline.js"></script>
+    <link rel="stylesheet" href="https://cdn.knightlab.com/libs/timeline3/3.8.1/css/timeline.css">
+    <!-- Google Analytics should be handled by Timeline -->
+
     <base target="_blank">
 
     <!-- Style-->
@@ -36,25 +49,122 @@
     <div id="timeline-embed"></div>
     <!-- Override -->
     <script type="text/javascript">
-        var lang = window.location.href.match(/&lang=([a-zA-Z]*)&?/);
+        function ready(fn) {
+            if (document.readyState != 'loading') {
+                fn();
+            } else {
+                document.addEventListener('DOMContentLoaded', fn);
+            }
+        }
+
+        function setPageLanguage() {
+            var lang = window.location.href.match(/&lang=([a-zA-Z]*?)&?/);
+
+            if (lang) {
+                document.getElementsByTagName('html')[0].setAttribute('lang', lang[1]);
+            }
 
-        if (lang) {
-            document.getElementsByTagName('html')[0].setAttribute('lang', lang[1]);
         }
-        var trim_point = window.location.href.indexOf('embed/index.html');
-        if (trim_point > 0) {
-            var embed_path = window.location.href.substring(0, trim_point); // supports https access via https://s3.amazonaws.com/cdn.knightlab.com/libs/timeline/latest/embed/index.html
-        } else {
-            var embed_path = "https://cdn.knightlab.com/libs/timeline3/3.6.6/";
+
+        function computeEmbedPath() {
+            var trim_point = window.location.href.indexOf('embed/index.html');
+            if (trim_point > 0) {
+                return window.location.href.substring(0, trim_point); // supports https access via https://s3.amazonaws.com/cdn.knightlab.com/libs/timeline/latest/embed/index.html
+            }
+            return "https://cdn.knightlab.com/libs/timeline3/latest/";
+        }
+
+        function addOembedTag() {
+            // it's not clear that any tools execute this JS to get the URL, but maybe?
+            var oembed_link = document.createElement('link');
+            oembed_link['rel'] = 'alternate';
+            oembed_link['type'] = 'application/json+oembed';
+            oembed_link['href'] = 'https://oembed.knightlab.com/timeline/?url=' + encodeURIComponent(window.location.href);
+            document.head.appendChild(oembed_link);
+        }
+
+        function createEmbedDiv(containerId, width, height) {
+
+            if (typeof(width) != 'string' && typeof(width) != 'number') {
+                width = '100%'
+            }
+
+            if (typeof(height) != 'string' && typeof(height) != 'number') {
+                height = '100%'
+            }
+
+            // default containerId would be 'timeline-embed'
+            t = document.createElement('div');
+            t.style.position = 'relative';
+
+            te = document.getElementById(containerId);
+            te.appendChild(t);
+            te.classList.add("tl-timeline-embed");
+
+            if (width.toString().match("%")) {
+                te.style.width = width.split("%")[0] + "%";
+            } else {
+                width = Number(width) - 2;
+                te.style.width = (width) + 'px';
+            }
+
+            if (height.toString().match("%")) {
+                te.style.height = height;
+                te.classList.add("tl-timeline-full-embed");
+            } else if (width.toString().match("%")) {
+                te.classList.add("tl-timeline-full-embed");
+                height = Number(height) - 16;
+                te.style.height = (height) + 'px';
+            } else {
+                height = height - 16;
+                te.style.height = (height) + 'px';
+            }
         }
-        var oembed_link = document.createElement('link');
-        oembed_link['rel'] = 'alternate';
-        oembed_link['type'] = 'application/json+oembed';
-        oembed_link['href'] = 'https://oembed.knightlab.com/timeline/?url=' + encodeURIComponent(window.location.href);
-        document.head.appendChild(oembed_link);
+
+        /**
+         * Parse all URL parameters as possible Timeline options.
+         * Timeline itself will use or ignore these based on actual
+         * supported options.
+         */
+        function optionsFromUrlParams() {
+            var param_str = window.location.href.slice(window.location.href.indexOf('?') + 1);
+
+            if (param_str.match('#')) {
+                param_str = param_str.split('#')[0];
+            }
+
+            param_str = param_str.split('&');
+
+            var url_vars = {}
+
+            for (var i = 0; i < param_str.length; i++) {
+                var uv = param_str[i].split('=');
+                url_vars[uv[0]] = uv[1];
+            }
+
+            return url_vars;
+        };
+
+        ready(function() {
+            setPageLanguage();
+            var embed_path = computeEmbedPath();
+            addOembedTag();
+
+            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';
+            if (typeof(options.source) == 'undefined') {
+                options.source = '1xuY4upIooEeszZ_lCmeNx24eSFWe0rHe9ZdqH2xqVNk' // women in computing
+            }
+
+            options.soundcite = true;
+
+            window.options = options
+            window.timeline = new TL.Timeline('timeline-embed', options.source, options)
+
+        })
     </script>
-    <script type="text/javascript" src="https://cdn.knightlab.com/libs/timeline3/3.6.6/js/timeline-embed-cdn.js"></script>
-    <!-- END Timeline Embed-->
 </body>
 
-</html>
+</html>

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

@@ -49,16 +49,36 @@ beforeEach(() => {
     document.body.innerHTML =
         '<div id="timeline-embed"></div>';
 })
-test("Ensure options is optional", () => {
-    let timeline = new Timeline('timeline-embed', TEST_CONFIG);
-    // it would have errored
+
+// 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)
+        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
+    // tried some things waiting for 
+    expect(timeline.config).toBeDefined()
 })
 
-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()
     timeline.removeId('vimeo')

package/src/js/core/Util.js

@@ -521,7 +521,7 @@ export function linkify(text, targets, is_touch) {
  * as a direct image link. Some services have predictable transformations we can use rather than explain to people
  * this subtlety.
  */
-export function transformImageURL(url) {
+export function transformMediaURL(url) {
     return url.replace(/(.*)www.dropbox.com\/(.*)/, '$1dl.dropboxusercontent.com/$2')
 }
 

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

@@ -1,4 +1,4 @@
-require('../less/TL.Timeline.less')
+import "../less/TL.Timeline.less"
 export { Timeline }
 from "./timeline/Timeline"
 export { parseGoogleSpreadsheetURL }

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

@@ -1,4 +1,5 @@
 import { Media } from "../Media";
+import { transformMediaURL } from "../../core/Util";
 import * as Browser from "../../core/Browser"
 import { trace } from "../../core/Util";
 
@@ -17,19 +18,14 @@ export default class Audio extends Media {
     }
 
     createMedia() {
+        //Transform URL for Dropbox
+        var url = transformMediaURL(this.data.url),
+            self = this;
+
         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);
@@ -39,7 +35,7 @@ export default class Audio extends Media {
             self.onMediaLoaded();
         });
 
-        this._el.source_item.src = this.data.url;
+        this._el.source_item.src = url;
         this._el.source_item.type = this._getType(this.data.url, this.data.mediatype.match_str);
         this._el.content_item.innerHTML += "Your browser doesn't support HTML5 audio with " + this._el.source_item.type;
         this.player_element = this._el.content_item

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

@@ -1,5 +1,5 @@
 import { Media } from "../Media"
-import { unhtmlify, transformImageURL } from "../../core/Util"
+import { unhtmlify, transformMediaURL } from "../../core/Util"
 import * as Browser from "../../core/Browser"
 
 export default class Image extends Media {
@@ -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;
@@ -57,7 +48,7 @@ export default class Image extends Media {
     }
 
     getImageURL(w, h) {
-        return transformImageURL(this.data.url);
+        return transformMediaURL(this.data.url);
     }
 
     _updateMediaDisplay(layout) {

package/src/js/media/types/PDF.js

@@ -1,11 +1,11 @@
 import { Media } from "../Media";
-import { transformImageURL } from "../../core/Util";
+import { transformMediaURL } from "../../core/Util";
 import * as Browser from "../../core/Browser"
 
 export default class PDF extends Media {
 
     _loadMedia() {
-        var url = transformImageURL(this.data.url),
+        var url = transformMediaURL(this.data.url),
             self = this;
 
         // Create Dom element

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

@@ -1,5 +1,6 @@
 import { Media } from "../Media";
 import * as Browser from "../../core/Browser"
+import { transformMediaURL } from "../../core/Util";
 
 export default class Video extends Media {
     _loadMedia() {
@@ -16,19 +17,15 @@ export default class Video extends Media {
     }
 
     createMedia() {
+        //Transform URL for Dropbox
+        var url = transformMediaURL(this.data.url),
+            self = this;
+
         var self = this,
             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);
@@ -38,7 +35,7 @@ export default class Video extends Media {
             self.onMediaLoaded();
         });
 
-        this._el.source_item.src = this.data.url;
+        this._el.source_item.src = url;
         this._el.source_item.type = this._getType(this.data.url, this.data.mediatype.match_str);
         this._el.content_item.innerHTML += "Your browser doesn't support HTML5 video with " + this._el.source_item.type;
         this.player_element = 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/less/fonts/font.georgia-helvetica.less

@@ -25,7 +25,7 @@
 // Headings
 @font-size-headings: 			42px;
 @font-headings-lineheight: 		@font-size-headings;
-@font-headings-text-transform: 	normal;
+@font-headings-text-transform: 	none;
 @font-size-headings-small: 		24px;
 @font-headings-weight: 			800;
 @font-size-headline-title: 		46px;
@@ -36,4 +36,4 @@
 // Navigation
 @font-navigation-text-transform: 	none;
  
-@import "_font.base.less";
+@import "_font.base.less";

package/src/less/fonts/font.roboto-megrim.less

@@ -29,7 +29,7 @@ https://www.google.com/fonts/specimen/Megrim
 // Headings
 @font-size-headings: 			46px;
 @font-headings-lineheight: 		@font-size-headings;
-@font-headings-text-transform: 	normal;
+@font-headings-text-transform: 	none;
 @font-size-headings-small: 		24px;
 @font-headings-weight: 			400;
 @font-size-headline-title: 		58px;
@@ -40,4 +40,4 @@ https://www.google.com/fonts/specimen/Megrim
 // Navigation
 @font-navigation-text-transform: 	none;
  
-@import "_font.base.less";
+@import "_font.base.less";