@knight-lab/timelinejs 3.8.21 → 3.9.1

package/src/less/slider/TL.SlideNav.less

@@ -8,9 +8,17 @@
 	top: 45%;
 	z-index:10;
 	cursor:pointer;
-	
-	.tl-slidenav-content-container {
-		height:200px;
+    padding: 0;
+    outline-offset:5px;
+    background-color: transparent;
+    border: none;
+    text-align: inherit;
+    text-transform: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+
+    .tl-slidenav-content-container {
 		width:100px;
 		position:absolute;
 	}
@@ -121,23 +129,29 @@
 
 /* NAVIGATION HOVER
 ================================================== */
-.tl-slidenav-previous:hover, .tl-slidenav-next:hover {
-	.tl-slidenav-title {
-		.opacity(100);
-	}
-	.tl-slidenav-description {
-		.opacity(@opacity-slide-nav-desc-hover);
-	}
+.tl-slidenav-previous, .tl-slidenav-next {
+    &:hover, &:focus-visible {
+        .tl-slidenav-title {
+            .opacity(100);
+        }
+        .tl-slidenav-description {
+            .opacity(@opacity-slide-nav-desc-hover);
+        }
+    }
 }
-.tl-slidenav-next:hover {
-	.tl-slidenav-icon {
-        margin-left: 100 - 20px;
-	}
+.tl-slidenav-next {
+    &:hover, &:focus-visible {
+        .tl-slidenav-icon {
+            margin-left: 100 - 20px;
+        }
+    }
 }
-.tl-slidenav-previous:hover {
-	.tl-slidenav-icon {
-		margin-left: -4px;
-	}
+.tl-slidenav-previous {
+    &:hover, &:focus-visible {
+        .tl-slidenav-icon {
+            margin-left: -4px;
+        }
+    }
 }
 
 // Mobile, iPhone and skinny
@@ -165,17 +179,21 @@
 			.opacity(33);
 		}
 	}
-	.tl-slidenav-next:hover {
-		.tl-slidenav-icon {
-	       margin-left:32 - 20px;
-		   .opacity(100);
-		}
+	.tl-slidenav-next {
+        &:hover, &:focus-visible {
+            .tl-slidenav-icon {
+                margin-left:32 - 20px;
+                .opacity(100);
+            }
+        }
 	}
-	.tl-slidenav-previous:hover {
-		.tl-slidenav-icon {
-			margin-left: -4px;
-			.opacity(100);
-		}
+	.tl-slidenav-previous {
+        &:hover, &:focus-visible {
+            .tl-slidenav-icon {
+                margin-left: -4px;
+                .opacity(100);
+            }
+        }
 	}
 	
 }
@@ -183,33 +201,42 @@
 
 
 .tl-layout-landscape.tl-mobile {
-	.tl-slidenav-next:hover {
-		right: 70px;
-		.tl-slidenav-icon {
-	       margin-left:32 - 24px;
-		   .opacity(100);
-		}
-	}
-	.tl-slidenav-next:active {
-		.tl-slidenav-icon {
-			margin-left: 0px;
-		   .opacity(100);
-		}
-	}
-	.tl-slidenav-previous:hover {
-		.tl-slidenav-icon {
-			//margin-left: 0px;
-			margin-left: 100 - 20px;
-			.opacity(100);
-		}
-	}
-	.tl-slidenav-previous:active {
-		.tl-slidenav-icon {
-		   .opacity(100);
-		   margin-left: -4px;
-		}
-	}
+    .tl-slidenav-next {
+        &:hover {
+            /**
+            * On mobile the hover state stays on the button after the click
+            * Show the default margin as before the click
+            */
+            .tl-slidenav-icon {
+                margin-left: 100 - 24px;
+                .opacity(100);
+            }
+        }
 
+        &:active {
+            .tl-slidenav-icon {
+                margin-left: 100 - 20px;
+            }
+        }
+    }
+    .tl-slidenav-previous {
+        &:hover {
+            /**
+            * On mobile the hover state stays on the button after the click
+            * Show the default margin as before the click
+            */
+            .tl-slidenav-icon {
+                margin-left: 0px;
+                .opacity(100);
+            }
+        }
+
+        &:active {
+            .tl-slidenav-icon {
+                margin-left: -4px;
+            }
+        }
+    }
 }
 
 .tl-layout-portrait.tl-mobile {
@@ -240,4 +267,4 @@
 	.tl-slidenav-previous, .tl-slidenav-next {
 		display:none;
 	}
-}
+}

package/src/less/themes/contrast/Variables.less

@@ -46,14 +46,14 @@
 @color-text-inverted:			darken(@color-background,5);
 @color-header-text-inverted:	@color-background;
 
-@color-text-credit:				#757575;
+@color-text-credit:				#686868;
 
 /* UI COLOR
 ================================================== */
 @ui-background-color:			darken(@color-background, 5);
 @ui-background-color-darker:	darken(@color-background, 10);
 @marker-color: 					darken(@ui-background-color,5);
-@marker-outline-color: 			darken(@ui-background-color,10);
+@marker-outline-color: 			darken(@ui-background-color,40);
 @marker-selected-text-color: 	@color-background;
 @marker-text-color: 			darken(@marker-color,50);
 @marker-dot-color: 				darken(@marker-color, 33);
@@ -81,6 +81,9 @@
 @base-spacing: 					15px;
 @arrow-size: 					20px;
 
+// Note
+@note-color-background:         #fcf8e3;
+
 // Marker
 @time-marker-border-radius: 	4px;
 @marker-icon-size: 				24px;
@@ -108,5 +111,5 @@
 /* GFX
 ================================================== */
 .base-sprite() {
-	background-image: url(storymap.png?v1.0);
-}
+    background-image: url(storymap.png?v1.0);
+}

package/src/less/themes/dark/TL.Theme.Dark.less

@@ -11,6 +11,6 @@
 
 /* Includes 
 ================================================== */
-@import "Variables.less"; 					// Variables (easy way to make style changes) 
+@import "Variables.less"; 					// Variables (easy way to make style changes)
 
-@import "../../TL.Timeline.Base.less"; 	// Base Less File
+@import "../../TL.Timeline.Base.less"; 	// Base Less File

package/src/less/themes/dark/Variables.less

@@ -81,6 +81,9 @@
 @base-spacing: 					15px;
 @arrow-size: 					20px;
 
+// Note
+@note-color-background:         lighten(@color-background, 70);
+
 // Marker
 @time-marker-border-radius: 	5px;
 @marker-icon-size: 				24px;
@@ -109,4 +112,4 @@
 ================================================== */
 .base-sprite() {
 	background-image: url(storymap.png?v1.0);
-}
+}

package/src/less/timenav/TL.TimeMarker.less

@@ -232,14 +232,14 @@
 
 		
 	}
-	
-	/* Hover State
+
+	/* Hover | Focus State
 	================================================== */
-	&:hover {
+	&:hover, &:focus {
 		
 		.tl-timemarker-timespan {
-			background-color: fadeout(@marker-text-color, 85%);
-			
+			background-color: fadeout(@marker-text-color, 75%);
+
 			.tl-timemarker-timespan-content {
 				background-color: @marker-text-color;
 			}
@@ -256,7 +256,7 @@
 		}
 		
 		.tl-timemarker-content-container {
-			background-color: darken(@marker-color,15);
+            background-color: darken(@marker-color,45);
 			border-color: darken(@marker-color,25);
 			.property-animation(height, @animation-duration-fast/2, @animation-ease);
 			.property-animation(width, @animation-duration-fast/2, @animation-ease);
@@ -283,7 +283,7 @@
 						color:@marker-selected-text-color;
 						&.tl-headline-fadeout {
 							&:after {
-								.marker-text-fade(darken(@marker-color,15),80%);
+                                .marker-text-fade(darken(@marker-color,45),80%);
 							}
 						}
 						
@@ -303,9 +303,9 @@
 		
 	}
 	
-	/* Hover Active State
+	/* Hover | Focus Active State
 	================================================== */
-	&:hover {
+	&:hover, &:focus {
 		&.tl-timemarker-active {
 			.tl-timemarker-content-container {
 				.tl-timemarker-content {
@@ -334,6 +334,12 @@
 			}
 		}
 	}
+
+    /* Focus-visible State
+    ================================================== */
+    &:focus-visible {
+        outline: none;
+    }
 	
 	/* Active Markers
 	================================================== */
@@ -463,7 +469,7 @@
 			
 			.tl-timemarker-timespan {
 				&:after {
-					background-color: fadeout(darken(@ui-background-color,100),75%);
+					background-color: fadeout(darken(@ui-background-color,100),65%);
 				}
 			}
 			.tl-timemarker-line-left, .tl-timemarker-line-right {

package/src/less/timenav/TL.TimeNav.less

@@ -12,55 +12,7 @@
 	//border-top: 1px solid #e3e3e3;
 	//box-shadow: inset 10px 10px 5px 0px rgba(0,0,0,0.75);
 	//.box-shadow(inset -7px 0px 7px rgba(0,0,0,.30));
-	
-	.tl-attribution {
-		cursor: pointer;
-		z-index:9;
-		position:absolute;
-		bottom:2px;
-		left:0px;
-		font-size:10px;
-		line-height:10px;
-		font-family:@font-sanserif !important;
-		//height:100%;
-		//background-color: @color-background;
-		background-color: fadeout(@color-background, 15%);
-		padding:3px;
-		
-		/*
-		right:-26px;
-		top:30px;
-		transform: rotate(90deg);
-		-ms-transform: rotate(90deg);
-		-webkit-transform: rotate(90deg);
-		background-color: fadeout(@ui-background-color, 15%);
-		*/
-		a {
-			
-			color:@brand-color;
-			//margin-left:10px;
-			&:hover {
-				color:@color-dark;
-				text-decoration: none;
-				.tl-knightlab-logo {
-					background-color: #c34528;
-				}
-			}
-		}
-		.tl-knightlab-logo {
-			display: inline-block;
-			vertical-align: middle;
-			height: 8px;
-			width: 8px;
-			margin-right:3px;
-			background-color: #c34528;
-			background-color:@brand-color;
-			transform: rotate(45deg);
-			-ms-transform: rotate(45deg);
-			-webkit-transform: rotate(45deg);
-		}
-		
-	}
+
 	.tl-timenav-line {
 		position: absolute;
 		top: 0;
@@ -162,4 +114,4 @@
 	.tl-timenav {
 
 	}
-}
+}

package/src/less/ui/TL.MenuBar.Button.less

@@ -3,28 +3,30 @@
 
 .tl-menubar-button {
 	//border-left: 1px solid darken(@color-background,10);
+    border:none;
 	font-size: 18px;
 	line-height:18px;
 	//padding: 6px 12px 6px 12px;
 	//padding:12px;
 	background-color:fadeout(@ui-background-color, 10%);
 	cursor:pointer;
-	padding: 6px 12px 6px 12px;
+	padding: 5px 10px 5px 10px;
 	display:inline-block;
 	display:block;
 	//color:@color-text;
 	color:@marker-color-menubar-button;
 	[class^="tl-icon-"], [class*=" tl-icon-"] {
-		
+
 	}
-	
-	&.tl-menubar-button-inactive {
+
+	&:disabled {
 		opacity:0.33;
+        cursor:default;
 	}
-	&:hover {
+	&:hover, &:focus-visible {
 		background:@color-foreground;
 		color:@color-background;
-		&.tl-menubar-button-inactive {
+		&:disabled {
 			color:darken(@marker-color,15);
 			background-color:fadeout(@ui-background-color, 10%);
 		}

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

@@ -8,11 +8,14 @@
         "text": {
             "headline": "TimelineJS Media Types",
             "text": "<p>TimelineJS supports many media types. This provides a simple way to test them all. This page tests a simple image on a remote server. Also, if the Timeline was created with the <code>soundcite</code> option set to <code>true</code> then   <span class='soundcite' data-url='https://soundcite.knightlab.com/media/bach-cello-suite.mp3' data-start='0' data-end='164000' data-plays='1'>this should be an active SoundCite player.</span></p>"
+        },
+        "background": {
+            "color": "papayawhip"
         }
     },
     "events": [{
             "media": {
-                "url": "https://www.youtube.com/watch?v=pi2v1m6gmD8&t=5m21s",
+                "url": "https://m.youtube.com/watch?v=pi2v1m6gmD8&t=5m21s",
                 "caption": "the Monkey section of David Van Tieghem's <em>Ear Drums</em>"
             },
             "start_date": {
@@ -22,6 +25,9 @@
                 "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>"
             },
+            "background": {
+                "color": "#F45B69"
+            },
             "group": "Video"
         },
         {
@@ -37,6 +43,9 @@
                 "headline": "Vimeo",
                 "text": "To embed a Vimeo video, just copy the URL of the Vimeo.com page which shows the video."
             },
+            "background": {
+                "url": "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Morsk%C3%A9_oko_%28v_m%C3%A1ji%29_004.jpg/1280px-Morsk%C3%A9_oko_%28v_m%C3%A1ji%29_004.jpg"
+            },
             "group": "Video"
         },
         {
@@ -52,6 +61,9 @@
                 "headline": "DailyMotion",
                 "text": "To embed a DailyMotion video, just copy the URL of the page which shows the video."
             },
+            "background": {
+                "color": "#8B94A3"
+            },
             "group": "Video"
         },
         {
@@ -67,6 +79,9 @@
                 "headline": "Vine",
                 "text": "To embed a Vine, just copy the URL of the page which shows the vine."
             },
+            "background": {
+                "url": "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Crescent_Moon_-_Valencia%2C_CA_%2850727236562%29.jpg/1280px-Crescent_Moon_-_Valencia%2C_CA_%2850727236562%29.jpg"
+            },
             "group": "Video"
         },
         {
@@ -82,6 +97,9 @@
                 "headline": "SoundCloud",
                 "text": "To embed a SoundCloud clip, just copy the URL of the clip's page."
             },
+            "background": {
+                "color": "#9567E0"
+            },
             "group": "Audio"
         },
         {
@@ -302,7 +320,7 @@
             },
             "text": {
                 "headline": "Image, PNG",
-                "text": "To embed a PNG, just copy the URL endig in '.png'."
+                "text": "To embed a PNG, just copy the URL ending in '.png'."
             },
             "group": "Image"
         },
@@ -319,7 +337,7 @@
             },
             "text": {
                 "headline": "Image, JPEG",
-                "text": "To embed a JPEG, just copy the URL endig in '.jpeg'."
+                "text": "To embed a JPEG, just copy the URL ending in '.jpeg'."
             },
             "group": "Image"
         },
@@ -337,6 +355,38 @@
                 "text": "To embed a Google Doc, just copy the Shareable link."
             }
         },
+        {
+            "media": {
+                "url": "https://drive.google.com/file/d/10YmjqDEEThebdRQ1Ws2J5PRpDXbFDjTL/view?usp=sharing",
+                "caption": "Knight Lab Logo",
+                "credit": "Zach Wise"
+            },
+            "start_date": {
+                "year": "1919",
+                "month": "6"
+            },
+            "text": {
+                "headline": "PNG image on Google Drive",
+                "text": "To embed an image from Google Drive, just copy the Shareable link. Note that images embedded this way will appear within a Google Drive 'viewer', and so will look quite different from normally embedded images."
+            }
+        },
+        {
+            "media": {
+                "url": "https://drive.google.com/uc?id=10YmjqDEEThebdRQ1Ws2J5PRpDXbFDjTL",
+                "caption": "Knight Lab Logo",
+                "credit": "Zach Wise"
+            },
+            "start_date": {
+                "year": "1919",
+                "month": "7"
+            },
+            "text": {
+                "headline": "PNG image on Google Drive",
+                "text": "This hack may make a Google Drive image work more like an image"
+            }
+        },
+
+
         {
             "media": {
                 "url": "https://en.wikipedia.org/wiki/1997_International_Tennis_Championships_%E2%80%93_Doubles",

package/src/template/cosmo.json

@@ -0,0 +1,113 @@
+{
+    "title": {
+        "media": {
+            "url": "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/CMB_Timeline300_no_WMAP.jpg/1280px-CMB_Timeline300_no_WMAP.jpg",
+            "caption": "Timeline of the universe.",
+            "credit": "NASA with modifications by Cherkash <a href=\"https://en.wikipedia.org/wiki/File:CMB_Timeline300_no_WMAP.jpg\">via Wikipedia</a>"
+        },
+        "text": {
+            "headline": "Cosmological Scale Timeline",
+            "text": "A test case for looking at how TimelineJS handles dates beyond those supported by the JS Date class"
+        },
+        "background": {
+            "color": "papayawhip"
+        }
+    },
+    "events": [{
+            "media": {
+                "url": "https://en.wikipedia.org/wiki/Big_Bang"
+            },
+            "start_date": {
+                "year": "-13800000000"
+            },
+            "text": {
+                "headline": "The Big Bang",
+                "text": "As far back as we can go"
+            },
+            "background": {
+                "color": "#F45B69"
+            }
+        },
+        {
+            "start_date": {
+                "year": "-13799630000"
+            },
+            "text": {
+                "headline": "The Dark Ages and large-scale structure emergence",
+                "text": "I guess this image shows things that are 13.1 billion years old? Not sure I followed tbh."
+            },
+            "background": {
+                "url": "https://upload.wikimedia.org/wikipedia/commons/b/bf/Webb%27s_First_Deep_Field.jpg"
+            }
+        },
+        {
+            "start_date": {
+                "year": "-12800000000"
+            },
+            "text": {
+                "headline": "The universe as it appears today"
+            },
+            "background": {
+                "url": "https://upload.wikimedia.org/wikipedia/commons/b/bf/Webb%27s_First_Deep_Field.jpg"
+            }
+        },
+        {
+            "start_date": {
+                "year": "-4600000000"
+            },
+            "text": {
+                "headline": "The formation of the Solar System"
+            },
+            "background": {
+                "url": "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/The_Mysterious_Case_of_the_Disappearing_Dust.jpg/1280px-The_Mysterious_Case_of_the_Disappearing_Dust.jpg"
+            }
+        },
+        {
+            "start_date": {
+                "year": "-538800000"
+            },
+
+            "end_date": {
+                "year": "-251902000"
+            },
+            "text": {
+                "headline": "Paleozoic era"
+            },
+            "background": {
+                "url": "https://upload.wikimedia.org/wikipedia/commons/4/49/Trilobite_Heinrich_Harder.jpg"
+            }
+        },
+        {
+            "media": {
+                "url": "https://commons.wikimedia.org/wiki/File:Ape_skeletons.png",
+                "caption": "The hominoids are descendants of a common ancestor.",
+                "credit": "<a href=\"https://en.wikipedia.org/wiki/Human_evolution\">Wikipedia</a>"
+            },
+            "start_date": {
+                "year": "-315000"
+            },
+            "text": {
+                "headline": "approximate date of appearance of Homo sapiens"
+            },
+            "background": {
+                "color": "white"
+            }
+        },
+        {
+            "media": {
+                "url": "https://commons.wikimedia.org/wiki/File:0854_Ein_Krug_aus_Bronocice,_3.550_v._Chr..JPG",
+                "caption": "Bronocice pot",
+                "credit": "<a href=\"https://en.wikipedia.org/wiki/Bronocice_pot\">Wikipedia</a>"
+            },
+            "start_date": {
+                "year": "-3500"
+            },
+            "text": {
+                "headline": "oldest known depiction of a wheeled vehicle"
+            },
+            "background": {
+                "color": "black"
+            }
+        }
+    ]
+}

package/src/template/index.html

@@ -2,15 +2,17 @@
 
 <head>
     <title>Bundled TimelineJS test page</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
     <!-- this is normally done by embed page -->
     <script>
         var options = {
-            language: 'es',
+            lang: 'es',
             debug: true,
             height: 650,
             soundcite: true,
             hash_bookmark: true,
-            start_at_end: true,
+            start_at_end: false,
+            autolink: false,
             sheets_proxy: 'https://sheets-proxy.knightlab.com/proxy/'
         }
 
@@ -104,4 +106,4 @@
     <div id='timeline-embed'></div>
 </body>
 
-</html>
+</html>