@knight-lab/timelinejs 3.8.16 → 3.8.20

package/index.js

@@ -0,0 +1 @@
+export { Timeline } from './src/js/index.js';

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@knight-lab/timelinejs",
-    "version": "3.8.16",
+    "version": "3.8.20",
     "license": "MPL-2.0",
     "description": "TimelineJS v3: A Storytelling Timeline built in JavaScript, made by Northwestern University Knight Lab.",
     "dependencies": {
-        "dompurify": "^2.0.11"
+        "dompurify": "^2.2.7"
     },
     "devDependencies": {
-        "@babel/cli": "^7.10.1",
+        "@babel/cli": "^7.14.3",
         "@babel/core": "^7.10.2",
         "@babel/preset-env": "^7.10.2",
         "adm-zip": "^0.4.14",
@@ -22,7 +22,7 @@
         "jest": "^25.5.4",
         "less": "^3.11.3",
         "less-loader": "^6.1.1",
-        "lodash": "^4.17.19",
+        "lodash": "^4.17.21",
         "mini-css-extract-plugin": "^0.9.0",
         "npm-run-all": "^4.1.5",
         "prompt": "^1.0.0",

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,31 @@ 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
+
+// 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("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))
+    });
+    // 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()
 })
 
+// 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/'
         });
+    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/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/zh-cn.json

@@ -59,7 +59,7 @@
         "loading_content": "正在加载内容",
         "expand_timeline": "伸展时间",
         "loading_timeline": "加载时间线... ",
-        "swipe_to_navigate": "左右撥來瀏覽<br><span class='tl-button'>OK</span>"
+        "swipe_to_navigate": "左右拨来浏览<br><span class='tl-button'>OK</span>"
     },
     "dateformats": {
         "full_long": "dddd',' yyyy年 mmm d日'um' HH:MM",

package/src/js/media/MediaType.js

@@ -184,7 +184,7 @@ export function lookupMediaType(m, image_only) {
             {
                 type: "video",
                 name: "Video",
-                match_str: /(mp4)(\?.*)?$/i,
+                match_str: /(mp4|webm)(\?.*)?$/i,
                 cls: Video
             },
             {

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

@@ -1,5 +1,7 @@
 import { Media } from "../Media";
+import { transformMediaURL } from "../../core/Util";
 import * as Browser from "../../core/Browser"
+import { trace } from "../../core/Util";
 
 export default class Audio extends Media {
     _loadMedia() {
@@ -16,6 +18,10 @@ 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";
 
@@ -38,9 +44,10 @@ 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
     }
 
     _updateMediaDisplay(layout) {
@@ -49,6 +56,13 @@ export default class Audio extends Media {
         }
     }
 
+    _stopMedia() {
+        if (this.player_element) {
+            this.player_element.pause()
+        }
+    }
+
+
     _getType(url, reg) {
         var ext = url.match(reg);
         var type = "audio/"

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 {
@@ -57,7 +57,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,6 +17,10 @@ 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";
 
@@ -38,9 +43,11 @@ 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
+
     }
 
     _updateMediaDisplay(layout) {
@@ -49,6 +56,12 @@ export default class Video extends Media {
         }
     }
 
+    _stopMedia() {
+        if (this.player_element) {
+            this.player_element.pause()
+        }
+    }
+
     _getType(url, reg) {
         var ext = url.match(reg);
         var type = "video/"
@@ -56,6 +69,9 @@ export default class Video extends Media {
             case "mp4":
                 type += "mp4";
                 break;
+            case "webm":
+                type += "webm";
+                break;
             default:
                 type = "video";
                 break;

package/src/js/timeline/Timeline.js

@@ -50,8 +50,13 @@ function make_keydown_handler(timeline) {
  * @constructor
  * @param {HTMLElement|string} elem - the HTML element, or its ID, to which 
  *     the Timeline should be bound
- * @param {object} - a JavaScript object conforming to the TimelineJS 
- *     configuration format
+ * @param {object|String} - a JavaScript object conforming to the TimelineJS
+ *     configuration format, or a String which is the URL for a Google Sheets document
+ *     or JSON configuration file which Timeline will retrieve and parse into a JavaScript object.
+ *     NOTE: do not pass a JSON String for this. TimelineJS doesn't try to distinguish a 
+ *     JSON string from a URL string. If you have a JSON String literal, parse it using
+ *     `JSON.parse` before passing it to the constructor.
+ *
  * @param {object} [options] - a JavaScript object specifying 
  *     presentation options
  */
@@ -761,16 +766,6 @@ class Timeline {
         return -1;
     }
 
-    _onTimeNavLoaded() {
-        this._loaded.timenav = true;
-        this._onLoaded();
-    }
-
-    _onStorySliderLoaded() {
-        this._loaded.storyslider = true;
-        this._onLoaded();
-    }
-
     _onLoaded() {
         if (this._loaded.storyslider && this._loaded.timenav) {
             this.fire("loaded", this.config);

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