@knight-lab/timelinejs 3.8.21 → 3.9.0

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,6 +8,9 @@
         "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": [{
@@ -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/index.html

@@ -10,7 +10,8 @@
             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/'
         }
 

package/webpack.common.js

@@ -14,16 +14,19 @@ module.exports = {
         library: "TL" // https://webpack.js.org/configuration/output/#outputlibrary
     },
     plugins: [
-        new CopyPlugin([{
-            from: "./src/js/language/locale/*.json",
-            to: path.join(output_path, "js/locale"),
-            flatten: true
-        }]),
-        new CopyPlugin([{
-            from: './src/embed/*',
-            to: path.join(output_path, "embed"),
-            flatten: true
-        }]),
+        new CopyPlugin({
+            patterns: [{
+                    from: "./src/js/language/locale/*.json",
+                    to: path.join(output_path, "js/locale"),
+                    flatten: true
+                },
+                {
+                    from: './src/embed/*',
+                    to: path.join(output_path, "embed"),
+                    flatten: true
+                }
+            ]
+        }),
         new CleanWebpackPlugin({
             cleanStaleWebpackAssets: true
         }),

package/webpack.dev.js

@@ -1,16 +1,26 @@
 const merge = require('webpack-merge')
 const common = require('./webpack.common.js')
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const path = require('path');
 
 module.exports = merge.smart({
     mode: 'development',
     devtool: 'inline-source-map',
     devServer: {
-        contentBase: ['./src/template', './src/css'],
-        contentBasePublicPath: ['/', '/css'],
-        stats: 'verbose',
-        openPage: "/index.html",
-        disableHostCheck: true
+        open: true,
+        allowedHosts: 'all',
+        devMiddleware: {
+            stats: 'normal'
+        },
+        static: [{
+                directory: path.join(__dirname, "src/template"),
+                publicPath: "/"
+            },
+            {
+                directory: path.join(__dirname, "src/css"),
+                publicPath: "/css"
+            }
+        ]
     },
     module: {
         rules: [{
@@ -23,4 +33,4 @@ module.exports = merge.smart({
             template: 'src/template/index.html'
         })
     ]
-}, common)
+}, common)