@knight-lab/timelinejs 3.8.21 → 3.9.0

package/src/js/ui/MenuBar.js

@@ -4,157 +4,214 @@ import Events from "../core/Events";
 import { DOMMixins } from "../dom/DOMMixins"
 import { easeInOutQuint } from "../animation/Ease"
 import { classMixin, mergeData } from "../core/Util"
-import { addClass, removeClass } from "../dom/DOMUtil"
 import { DOMEvent } from "../dom/DOMEvent"
+import { I18NMixins } from "../language/I18NMixins";
 
 export class MenuBar {
-	constructor(elem, parent_elem, options) {
-		// DOM ELEMENTS
-		this._el = {
-			parent: {},
-			container: {},
-			button_backtostart: {},
-			button_zoomin: {},
-			button_zoomout: {},
-			arrow: {},
-			line: {},
-			coverbar: {},
-			grip: {}
-		};
-
-		this.collapsed = false;
-
-		if (typeof elem === 'object') {
-			this._el.container = elem;
-		} else {
-			this._el.container = DOM.get(elem);
-		}
-
-		if (parent_elem) {
-			this._el.parent = parent_elem;
-		}
-
-		//Options
-		this.options = {
-			width: 					600,
-			height: 				600,
-			duration: 				1000,
-			ease: 					easeInOutQuint,
-			menubar_default_y: 		0
-		};
-
-		// Animation
-		this.animator = {};
-
-		// Merge Data and Options
-		mergeData(this.options, options);
-
-		this._initLayout();
-		this._initEvents();
-	}
-
-	/*	Public
-	================================================== */
-	show(d) {
-
-		var duration = this.options.duration;
-		if (d) {
-			duration = d;
-		}
-	}
-
-	hide(top) {
-	}
-
-	toogleZoomIn(show) {
-		if (show) {
-      removeClass(this._el.button_zoomin,'tl-menubar-button-inactive');
-		} else {
-      addClass(this._el.button_zoomin,'tl-menubar-button-inactive');
-		}
-	}
-
-	toogleZoomOut(show) {
-		if (show) {
-      removeClass(this._el.button_zoomout,'tl-menubar-button-inactive');
-		} else {
-      addClass(this._el.button_zoomout,'tl-menubar-button-inactive');
-		}
-	}
-
-	setSticky(y) {
-		this.options.menubar_default_y = y;
-	}
-
-	/*	Color
-	================================================== */
-	setColor(inverted) {
-		if (inverted) {
-			this._el.container.className = 'tl-menubar tl-menubar-inverted';
-		} else {
-			this._el.container.className = 'tl-menubar';
-		}
-	}
-
-	/*	Update Display
-	================================================== */
-	updateDisplay(w, h, a, l) {
-		this._updateDisplay(w, h, a, l);
-	}
-
-
-	/*	Events
-	================================================== */
-	_onButtonZoomIn(e) {
-		this.fire("zoom_in", e);
-	}
-
-	_onButtonZoomOut(e) {
-		this.fire("zoom_out", e);
-	}
-
-	_onButtonBackToStart(e) {
-		this.fire("back_to_start", e);
-	}
-
-
-	/*	Private Methods
-	================================================== */
-	_initLayout () {
-
-		// Create Layout
-		this._el.button_zoomin = DOM.create('span', 'tl-menubar-button', this._el.container);
-		this._el.button_zoomout = DOM.create('span', 'tl-menubar-button', this._el.container);
-		this._el.button_backtostart = DOM.create('span', 'tl-menubar-button', this._el.container);
-
-		if (Browser.mobile) {
-			this._el.container.setAttribute("ontouchstart"," ");
-		}
-
-		this._el.button_backtostart.innerHTML		= "<span class='tl-icon-goback'></span>";
-		this._el.button_zoomin.innerHTML			= "<span class='tl-icon-zoom-in'></span>";
-		this._el.button_zoomout.innerHTML			= "<span class='tl-icon-zoom-out'></span>";
-
-
-	}
-
-	_initEvents () {
-		DOMEvent.addListener(this._el.button_backtostart, 'click', this._onButtonBackToStart, this);
-		DOMEvent.addListener(this._el.button_zoomin, 'click', this._onButtonZoomIn, this);
-		DOMEvent.addListener(this._el.button_zoomout, 'click', this._onButtonZoomOut, this);
-	}
-
-	// Update Display
-	_updateDisplay(width, height, animate) {
-
-		if (width) {
-			this.options.width = width;
-		}
-		if (height) {
-			this.options.height = height;
-		}
-	}
-
+    constructor(elem, parent_elem, options, language) {
+        // DOM ELEMENTS
+        this._el = {
+            parent: {},
+            container: {},
+            button_forwardtoend: {},
+            button_backtostart: {},
+            button_zoomin: {},
+            button_zoomout: {},
+            arrow: {},
+            line: {},
+            coverbar: {},
+            grip: {}
+        };
+
+        this.collapsed = false;
+
+        if (typeof elem === 'object') {
+            this._el.container = elem;
+        } else {
+            this._el.container = DOM.get(elem);
+        }
+
+        if (parent_elem) {
+            this._el.parent = parent_elem;
+        }
+
+        // Data
+        this.data = {
+            visible_ticks_dates: {}
+        }
+
+        //Options
+        this.options = {
+            width: 600,
+            height: 600,
+            duration: 1000,
+            ease: easeInOutQuint,
+            menubar_default_y: 0
+        };
+
+        // Animation
+        this.animator = {};
+
+        this.setLanguage(language)
+
+        // Merge Data and Options
+        mergeData(this.options, options);
+
+        this._initLayout();
+        this._initEvents();
+    }
+
+    /*	Public
+    ================================================== */
+    show(d) {
+
+        var duration = this.options.duration;
+        if (d) {
+            duration = d;
+        }
+    }
+
+    hide(top) {}
+
+    toogleZoomIn(show) {
+        if (show) {
+            this._el.button_zoomin.removeAttribute('disabled');
+        } else {
+            this._el.button_zoomin.setAttribute('disabled', true);
+        }
+    }
+
+    toogleZoomOut(show) {
+        if (show) {
+            this._el.button_zoomout.removeAttribute('disabled');
+        } else {
+            this._el.button_zoomout.setAttribute('disabled', true);
+        }
+    }
+
+    changeVisibleTicks(visible_ticks) {
+        const minor_ticks = visible_ticks.minor;
+        if (!minor_ticks.length) {
+            this.data.visible_ticks_dates = {};
+            return;
+        }
+
+        const firstTick = minor_ticks[0];
+        const firstYear = this._getTickYear(firstTick);
+
+        const lastTick = minor_ticks[minor_ticks.length - 1];
+        const lastYear = this._getTickYear(lastTick);
+
+        this.data.visible_ticks_dates = {
+            start: firstYear,
+            end: lastYear
+        };
+
+        this._updateZoomAriaLabels()
+    }
+
+    _getTickYear(tick) {
+        return tick.date.data.date_obj.getFullYear();
+    }
+
+    setSticky(y) {
+        this.options.menubar_default_y = y;
+    }
+
+    /*	Color
+    ================================================== */
+    setColor(inverted) {
+        if (inverted) {
+            this._el.container.className = 'tl-menubar tl-menubar-inverted';
+        } else {
+            this._el.container.className = 'tl-menubar';
+        }
+    }
+
+    /*	Update Display
+    ================================================== */
+    updateDisplay(w, h, a, l) {
+        this._updateDisplay(w, h, a, l);
+    }
+
+    /*	Events
+    ================================================== */
+    _onButtonZoomIn(e) {
+        this.fire("zoom_in", e);
+    }
+
+    _onButtonZoomOut(e) {
+        this.fire("zoom_out", e);
+    }
+
+    _onButtonForwardToEnd(e) {
+        this.fire("forward_to_end", e);
+    }
+
+    _onButtonBackToStart(e) {
+        this.fire("back_to_start", e);
+    }
+
+
+    /*	Private Methods
+    ================================================== */
+    _initLayout() {
+
+        // Create Layout
+        this._el.button_zoomin = DOM.create('button', 'tl-menubar-button', this._el.container);
+        this._el.button_zoomout = DOM.create('button', 'tl-menubar-button', this._el.container);
+        this._el.button_forwardtoend = DOM.create('button', 'tl-menubar-button', this._el.container);
+        this._el.button_backtostart = DOM.create('button', 'tl-menubar-button', this._el.container);
+
+        if (Browser.mobile) {
+            this._el.container.setAttribute("ontouchstart", " ");
+        }
+
+        this._el.button_backtostart.innerHTML = "<span class='tl-icon-goback'></span>";
+        this._el.button_backtostart.setAttribute('aria-label', this._('return_to_title'));
+
+        this._el.button_forwardtoend.innerHTML = "<span class='tl-icon-goend'></span>";
+        this._el.button_forwardtoend.setAttribute('aria-label', this._('go_to_end'));
+
+        this._el.button_zoomin.innerHTML = "<span class='tl-icon-zoom-in'></span>";
+        this._el.button_zoomin.setAttribute('aria-label', this._('zoom_in'));
+
+        this._el.button_zoomout.innerHTML = "<span class='tl-icon-zoom-out'></span>";
+        this._el.button_zoomout.setAttribute('aria-label', this._('zoom_out'));
+    }
+
+    _initEvents() {
+        DOMEvent.addListener(this._el.button_forwardtoend, 'click', this._onButtonForwardToEnd, this);
+        DOMEvent.addListener(this._el.button_backtostart, 'click', this._onButtonBackToStart, this);
+        DOMEvent.addListener(this._el.button_zoomin, 'click', this._onButtonZoomIn, this);
+        DOMEvent.addListener(this._el.button_zoomout, 'click', this._onButtonZoomOut, this);
+    }
+
+    // Update Display
+    _updateDisplay(width, height, animate) {
+
+        if (width) {
+            this.options.width = width;
+        }
+        if (height) {
+            this.options.height = height;
+        }
+    }
+
+    // Update Display
+    _updateZoomAriaLabels() {
+        if (Object.keys(this.data.visible_ticks_dates).length == 0) {
+            this._el.button_zoomin.setAttribute('aria-description', '');
+            this._el.button_zoomout.setAttribute('aria-description', '');
+        } else {
+            this._el.button_zoomin.setAttribute('aria-description',
+                this._("aria_label_zoomin",
+                    this.data.visible_ticks_dates));
+            this._el.button_zoomout.setAttribute('aria-description',
+                this._("aria_label_zoomout",
+                    this.data.visible_ticks_dates));
+        }
+    }
 }
 
-classMixin(MenuBar, DOMMixins, Events)
+classMixin(MenuBar, DOMMixins, Events, I18NMixins)

package/src/js/ui/Swipable.js

@@ -389,4 +389,4 @@ export default class Swipable {
 	}
 }
 
-classMixin(Swipable, Events)
+classMixin(Swipable, Events)

package/src/less/TL.Timeline.Base.less

@@ -13,7 +13,6 @@
 ================================================== */
 
 @import "core/Mixins.less"; 		// Less shortcuts and functions
-@import "core/Reset.less"; 			// CSS Reset
 @import "Typography.less";
 
 // Icons
@@ -81,6 +80,44 @@
 		border: 1px solid darken(@ui-background-color-darker, 10);
 		border-radius: 8px;
 	}
+
+    .tl-attribution {
+        cursor: pointer;
+        z-index:9;
+        position:absolute;
+        bottom:2px;
+        left:0px;
+        font-size:10px;
+        line-height:10px;
+        font-family:@font-sanserif !important;
+        background-color: fadeout(@color-background, 15%);
+        padding:3px;
+
+        a {
+            color:@brand-color;
+            &:hover, &:focus-visible {
+                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);
+        }
+
+    }
 }
 
 /* Portrait

package/src/less/Typography.less

@@ -260,13 +260,12 @@
 		display:block;
 		font-family: @font-main;
 		font-style: italic;
-		background-color:lighten(@color-dark, 90%);
+		background-color:@note-color-background;
 		font-size:@base-font-size;
 		line-height:@base-font-size+2;
 		padding:10px;
 		.border-radius(7px); 
 		color: #8a6d3b;
-		background-color: #fcf8e3;
 		border: 1px solid #faebcc;
 		text-shadow: none;
 	}
@@ -304,4 +303,4 @@
 		margin-top:0px;
 		//padding-top:20px;
 	}
-}
+}

package/src/less/Variables.less

@@ -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;
@@ -109,4 +112,4 @@
 ================================================== */
 .base-sprite() {
 	background-image: url(storymap.png?v1.0);
-}
+}

package/src/less/icons/Icons.less

@@ -139,6 +139,15 @@
 .tl-icon-goback:after {
 	content: "\e63e";
 }
+.tl-icon-goend:after {
+	content: "\e969";
+}
+.tl-icon-prev2:after {
+	content: "\ea23";
+}
+.tl-icon-next2:after {
+	content: "\ea24";
+}
 .tl-icon-doc-v2:after {
 	content: "\e63f";
 }

package/src/less/media/types/TL.Media.Text.less

@@ -19,6 +19,11 @@
 		.tl-text-content{
 
 		}
+        .tl-text-headline-container {
+            display: flex;
+            flex-direction:column-reverse;
+            -webkit-flex-direction:column-reverse; /* Safari */
+        }
 	}
 	h2.tl-headline-title, h2.tl-headline {
 		margin-top:0;

package/src/less/slider/TL.Slide.less

@@ -4,8 +4,8 @@
 	position:absolute;
 	width:100%;
 	height:100%;
-	padding:0px;
-	margin:0px;
+	padding:0;
+	margin:0;
 	overflow-x:hidden;
 	overflow-y:auto;
 
@@ -39,43 +39,42 @@
 		height:100%;
 
 		z-index:3;
-		.tl-slide-content {
-			//width:100%;
-			display:table;
-			vertical-align:middle;
-			padding-left:100px;
-			padding-right:100px;
-			position:relative;
-			max-width:100%;
-			user-select: text;
-			.tl-media {
-				//display:table-cell;
-				//vertical-align:middle;
-				position:relative;
-				width:100%;
-				min-width:50%;
-				//height:100%;
-				float: left;
-				margin-top:auto;
-				margin-bottom:auto;
-				//margin-right:auto;
-				img, embed, object, video, iframe {
-					//width:100%;
-				}
-			}
-			.tl-text {
-				width:50%;
-				max-width:50%;
-				min-width:120px;
-				//height:100%;
-				//overflow-y:auto;
-				padding: 0 20px 0 20px;
-				display:table-cell;
-				vertical-align:middle;
-				text-align: left;
-				//float:left;
-			}
-		}
+        .tl-slide-content {
+            display:table;
+            vertical-align:middle;
+            direction:rtl; // Text content needs to be read before the media
+            padding-left:100px;
+            padding-right:100px;
+            position:relative;
+            max-width:100%;
+            user-select: text;
+            -webkit-box-sizing: content-box;
+            -moz-box-sizing: content-box;
+            box-sizing: content-box;
+            
+            .tl-media {
+                direction:ltr;
+                position:relative;
+                width:100%;
+                min-width:50%;
+                float: left;
+                margin-top:auto;
+                margin-bottom:auto;
+                img, embed, object, video, iframe {
+
+                }
+            }
+            .tl-text {
+                direction:ltr;
+                width:50%;
+                max-width:50%;
+                min-width:120px;
+                padding: 0 20px 0 20px;
+                display:table-cell;
+                vertical-align:middle;
+                text-align: left;
+            }
+        }
 	}
 
 	&.tl-slide-titleslide {
@@ -245,12 +244,9 @@
 		.tl-slide-content-container {
 			display:block;
 			position:static;
-			height:auto;
 			height:100%;
-			//vertical-align:baseline;
 			display: -webkit-flex; /* Safari */
 			display: flex;
-			//flex-direction:column-reverse;
 			align-items: center;
 			-webkit-align-items: center; /* Safari 7.0+ */
 			.tl-slide-content {
@@ -258,14 +254,13 @@
 
     			display: -webkit-flex; /* Safari */
 				display: flex;
-				flex-direction:column-reverse;
-				-webkit-flex-direction:column-reverse; /* Safari */
+				flex-direction:column;
+				-webkit-flex-direction:column; /* Safari */
 				position:static;
 				height:auto;
 				padding-left:50px;
 				padding-right:50px;
 				.tl-media {
-					position:static;
 					width:100%;
 					height:auto;
 					float: none;