@knight-lab/timelinejs 3.8.18 → 3.8.21

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

@@ -21,7 +21,8 @@
             "text": {
                 "headline": "YouTube Videos",
                 "text": "<p>if Timeline finds a URL that starts with 'youtube.com' or 'youtu.be', it will try to use it to embed a YouTube video. The <em>protocol</em> part of the URL (e.g. <em>https://</em>) is technically optional.</p><p>You can start at a specific point in the video using the <code>t=#m#s</code> parameter: see <a href='http://youtubetime.com/'>http://youtubetime.com/</a></p>"
-            }
+            },
+            "group": "Video"
         },
         {
             "media": {
@@ -35,7 +36,8 @@
             "text": {
                 "headline": "Vimeo",
                 "text": "To embed a Vimeo video, just copy the URL of the Vimeo.com page which shows the video."
-            }
+            },
+            "group": "Video"
         },
         {
             "media": {
@@ -49,7 +51,8 @@
             "text": {
                 "headline": "DailyMotion",
                 "text": "To embed a DailyMotion video, just copy the URL of the page which shows the video."
-            }
+            },
+            "group": "Video"
         },
         {
             "media": {
@@ -63,7 +66,8 @@
             "text": {
                 "headline": "Vine",
                 "text": "To embed a Vine, just copy the URL of the page which shows the vine."
-            }
+            },
+            "group": "Video"
         },
         {
             "media": {
@@ -77,7 +81,8 @@
             "text": {
                 "headline": "SoundCloud",
                 "text": "To embed a SoundCloud clip, just copy the URL of the clip's page."
-            }
+            },
+            "group": "Audio"
         },
         {
             "media": {
@@ -106,7 +111,8 @@
             "text": {
                 "headline": "Twitter Embed",
                 "text": "Or you can copy the embed code if you want."
-            }
+            },
+            "group": "HTML"
         },
         {
             "media": {
@@ -190,7 +196,8 @@
             "text": {
                 "headline": "Instagram",
                 "text": "To embed an Instagram, just copy the URL of the photo's page."
-            }
+            },
+            "group": "Image"
         },
         {
             "media": {
@@ -218,7 +225,8 @@
             "text": {
                 "headline": "Flickr",
                 "text": "To embed a Flickr photo, just copy the URL in the browser bar."
-            }
+            },
+            "group": "Image"
         },
         {
             "media": {
@@ -232,7 +240,8 @@
             "text": {
                 "headline": "Flickr (alt)",
                 "text": "You can also use the embed code URL (with flic.kr)."
-            }
+            },
+            "group": "Image"
         },
         {
             "media": {
@@ -250,31 +259,37 @@
         },
         {
             "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"
             },
             "text": {
                 "headline": "Image, JPG",
-                "text": "To embed a JPG, just copy the URL endig in '.jpg'."
-            }
+                "text": "To embed a JPG, just copy the URL ending in '.jpg'."
+            },
+            "group": "Image"
         },
         {
             "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"
         },
         {
             "media": {
@@ -288,13 +303,16 @@
             "text": {
                 "headline": "Image, PNG",
                 "text": "To embed a PNG, just copy the URL endig in '.png'."
-            }
+            },
+            "group": "Image"
         },
         {
             "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"
@@ -302,7 +320,8 @@
             "text": {
                 "headline": "Image, JPEG",
                 "text": "To embed a JPEG, just copy the URL endig in '.jpeg'."
-            }
+            },
+            "group": "Image"
         },
         {
             "media": {
@@ -321,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"
@@ -344,7 +364,8 @@
             "text": {
                 "headline": "Spotify, Artist",
                 "text": "To embed an artist on Spotify, just copy the 'Spotify URL'."
-            }
+            },
+            "group": "Audio"
         },
         {
             "media": {
@@ -358,7 +379,8 @@
             "text": {
                 "headline": "Spotify, Playlist",
                 "text": "To embed a Spotify playlist, just copy the 'Spotify URL'."
-            }
+            },
+            "group": "Audio"
         },
         {
             "media": {
@@ -372,7 +394,8 @@
             "text": {
                 "headline": "Spotify, Track",
                 "text": "To embed a Spotify track, just copy the 'Spotify URL'."
-            }
+            },
+            "group": "Audio"
         },
         {
             "media": {
@@ -386,7 +409,8 @@
             "text": {
                 "headline": "iFrame",
                 "text": "To embed an iFrame, just copy the iFrame code."
-            }
+            },
+            "group": "HTML"
         },
         {
             "media": {
@@ -400,7 +424,8 @@
             "text": {
                 "headline": "Blockquote",
                 "text": "To display a block quote, input text in HTML blockquote tags."
-            }
+            },
+            "group": "HTML"
         },
         {
             "media": {
@@ -413,11 +438,12 @@
             "text": {
                 "headline": "Imgur",
                 "text": "Just include the URL of an image or gallery page"
-            }
+            },
+            "group": "Image"
         },
         {
             "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": {
@@ -439,11 +465,12 @@
             "text": {
                 "headline": "Audio",
                 "text": "A URL to an audio file (mp3|wav|m4a) will be rendered using the browser's native audio player."
-            }
+            },
+            "group": "Audio"
         },
         {
             "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": {
@@ -453,11 +480,12 @@
             "text": {
                 "headline": "Video (mp4)",
                 "text": "A URL to a video file (mp4) will be rendered using the browser's native video player."
-            }
+            },
+            "group": "Video"
         },
         {
             "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": {
@@ -467,7 +495,8 @@
             "text": {
                 "headline": "Video (webm)",
                 "text": "The Video media type also supports webm files."
-            }
+            },
+            "group": "Video"
         },
         {
             "media": {
@@ -480,7 +509,8 @@
             "text": {
                 "headline": "Wistia",
                 "text": "Wistia is a commercial video hosting service. I don't even remember who requested that TimelineJS support it, and it's hard to find a suitable test URL, but ... "
-            }
+            },
+            "group": "Video"
         }
 
     ]

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>

package/src/template/my-own-timeline.csv

@@ -0,0 +1,14 @@
+Year,Month,Day,Time,End Year,End Month,End Day,End Time,Display Date,Headline,Text,Media,Media Credit,Media Caption,Media Thumbnail,Type,Group,Background
+,,,,,,,,,MY OWN CSV,"<p class=""lead"">In this sample timeline, we'll walk you through what TimelineJS can do by looking at some of the more important contributions women have made to computer science.</p>",,,,,title,,https://upload.wikimedia.org/wikipedia/commons/1/17/World%27s_First_Computer%2C_the_Electronic_Numerical_Integrator_and_Calculator_%28ENIAC%29.gif
+1815,12,10,,1852,11,27,,,Ada Lovelace,"<p>Women have been programming since before it was a thing. Take <a href=""https://en.wikipedia.org/wiki/Ada_Lovelace"">Ada Lovelace</a>: Daughter of Lord Byron, she's often credited as the first computer programmer. Her work on <a href=""https://en.wikipedia.org/wiki/Analytical_Engine"">Charles Babbage's Analytical Engine</a> contains notes of the first machine-implemented algorithm.</p><span class=""tl-note"">This slide demonstrates a simple ""image"" media type.</span>",https://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Ada_Lovelace_portrait.jpg/713px-Ada_Lovelace_portrait.jpg,Wikimedia Commons,"<a href=""https://en.wikipedia.org/wiki/Ada_Lovelace#/media/File:Ada_Lovelace_portrait.jpg"" title="""">Portrait by Alfred Edward Chalon</a>",,,,
+1948,3,14,,,,,,,Edith Clarke: Bucking the Trend,,"<blockquote>There is no demand for women engineers, as such, as there are for women doctors; but there's always a demand for anyone who can do a good piece of work. <cite>Edith Clarke, first female professor of electrical engineering in the United States</cite></blockquote>",,,,,,
+1943,7,,,1946,,,,,...And the women who made it work,"<p>The ENIAC programmers included a number of women: Jean Bartik, Marlyn Wescoff Meltzer, Ruth Lichterman Teitelbaum, Kay McNulty Mauchly Antonelli, Frances Spence, and Frances Elizabeth ""Betty"" Holberton. Despite their groundbreaking work, the Army never released the names of the women who worked on the ENIAC, and they were largely forgotten until Kathy Kleiman discovered their story in 1985.</p> <span class=""tl-note"">You can add a YouTube URL like this video on the ENIAC Women.
+.</span>",https://www.youtube.com/watch?v=aPweFhhXFvY,"<a href=""https://www.youtube.com/channel/UCHDr4RtxwA1KqKGwxgdK4Vg"">Computer History Museum</a>",Jean Bartik talks about the ENIAC women,,,,https://upload.wikimedia.org/wikipedia/commons/c/cd/ARL_ENIAC_02.png
+1943,6,5,,,,,,,The First Computer,"Code named ""Project PX"" and funded by the United States Army, the first general-purpose computer was the Electronic Numerical Integrator And Computer (ENIAC). It was developed at the University of Pennsylvania's Moore School of Electrical Engineering. 
+<p><span class=""tl-note"">Timeline can easily embed Google Maps</span>","https://www.google.com/maps/place/University+of+Pennsylvania/@39.9522188,-75.1932137,17z/data=!3m1!4b1!4m2!3m1!1s0x89c6c65a7f3bccc1:0x9eaa6a2b2d6fe94",,,,,,
+1951,,,,,,,,,Rózsa Péter writes recursion,"<p>Hungarian-born Rózsa Péter studied number theory and poetry before becoming interested in the idea that would become recursion theory. She published her paper ""Recursive Functions"" in 1951, but it wasn't until the mid-50's that she began to apply her work to the realm of computers. </p><span class=""tl-note"">This excerpt is embedded from Wikipedia. Just include the URL to the Wikipedia article.</span>",https://en.wikipedia.org/wiki/Reduction_(recursion_theory),Wikipedia,,,,,
+1952,,,,,,,,,Grace Hopper invents the compiler,"<p>In her career with the Navy, Rear Admiral Grace Hopper worked on the first commercial computer (UNIVAC) and laid the groundwork for the programming language COBOL. But her most notable invention was the compiler, which can transform a source language into binary code. (In other words, it can translate the code you and I write into 0s and 1s.) She developed it in 1952, but she said ""Nobody would touch it. They told me computers could only do arithmetic.""</p><span class=""tl-note"">Embed sound clips from Soundcloud.</span>",https://soundcloud.com/innovationhub/grace-hopper-the-life-of-a-coding-pioneer,"<a href=""http://blogs.wgbh.org/innovation-hub/2017/12/8/life-legacy-grace-hopper/"">Innovation Hub</a>","An audio biography of Grace Hopper produced by Innovation Hub, originally published December 08, 2017.",,,,
+1956,,,,1962,,,,,Contributions to space exploration,"One of the first African-American women to earn a Ph.D in mathematics, Evelyn Boyd Granville focused on aeronautics and space during her career. In 1956, she worked with NASA and IBM on Project Mercury, the first manned space flight. She worked with NASA again a few years later on the Apollo Project.<span class=""tl-note"">Videos from Vimeo are also easy to embed.</span>",https://vimeo.com/304869290,National Archives (posted by Ira Gallen),Project Mercury training footage,,,,
+1958,,,,,,,,,The First PhD in Computer Science,"One of the first women (if not the first woman) to earn a Ph.D in computer science, Sister Mary Kenneth Keller also contributed to the development of the BASIC language during her time at Dartmouth College. She then founded the computer science department at Clarke College and directed it for the next 20 years.",https://www.women.cs.cmu.edu/ada/Resources/Women/pictures/mary_keller.png,The Ada Project,,,,,
+1972,,,,,,,,,Karen Spärck Jones makes search possible,"A professor at Cambridge Computer Laboratory, Spärck Jones was interested in natural language processing and information retrieval. In 1972, she introduced the concept of inverse document frequency, which most search engines still rely on.",https://www.youtube.com/watch?v=4-DyVzj-f3c,BCS Karen Sparck Jones Lecture,"""How to enjoy a career in computing: the power of networks,"" Professor Dame Wendy Hall",,,,
+1985,,,,,,,,,"""The Mother of the Internet""","Often called ""the Mother of the Internet,"" Radia Perlman's work on spanning tree protocol enabled the development of modern networking. She holds more than 100 patents, which is what mothers do best.",https://www.youtube.com/watch?v=I7FYG-XVgk4,Imagining the Internet,Radia Perlman's acceptance speech at being inducted into the Internet Hall of Fame.,,,,