| 18 | export class TimeNav { |
| 19 | |
| 20 | constructor(elem, timeline_config, options, language) { |
| 21 | this.language = language |
| 22 | // DOM ELEMENTS |
| 23 | this._el = { |
| 24 | parent: {}, |
| 25 | container: {}, |
| 26 | slider: {}, |
| 27 | slider_background: {}, |
| 28 | line: {}, |
| 29 | marker_container_mask: {}, |
| 30 | marker_container: {}, |
| 31 | marker_item_container: {}, |
| 32 | timeaxis: {}, |
| 33 | timeaxis_background: {} |
| 34 | }; |
| 35 | |
| 36 | this.collapsed = false; |
| 37 | |
| 38 | if (typeof elem === 'object') { |
| 39 | this._el.container = elem; |
| 40 | } else { |
| 41 | this._el.container = DOM.get(elem); |
| 42 | } |
| 43 | this._el.container.setAttribute('tabindex', '0'); |
| 44 | |
| 45 | // 'application' role supports predictable control of keyboard input in a complex component |
| 46 | this._el.container.setAttribute('role', 'application'); |
| 47 | this._el.container.setAttribute('aria-label', this._('aria_label_timeline_navigation')); |
| 48 | this._el.container.setAttribute('aria-description', |
| 49 | 'Navigate between markers with arrow keys. Press "Home" for the first and "End" for the last markers' |
| 50 | ); |
| 51 | |
| 52 | this.config = timeline_config; |
| 53 | |
| 54 | //Options |
| 55 | this.options = { |
| 56 | width: 600, |
| 57 | height: 600, |
| 58 | duration: 1000, |
| 59 | ease: easeInOutQuint, |
| 60 | has_groups: false, |
| 61 | optimal_tick_width: 50, |
| 62 | scale_factor: 2, // How many screen widths wide should the timeline be |
| 63 | marker_padding: 5, |
| 64 | timenav_height_min: 150, // Minimum timenav height |
| 65 | marker_height_min: 30, // Minimum Marker Height |
| 66 | marker_width_min: 100, // Minimum Marker Width |
| 67 | zoom_sequence: [0.5, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89] // Array of Fibonacci numbers for TimeNav zoom levels http://www.maths.surrey.ac.uk/hosted-sites/R.Knott/Fibonacci/fibtable.html |
| 68 | }; |
| 69 | |
| 70 | // Animation |
| 71 | this.animator = null; |
| 72 | |
| 73 | // Ready state |
| 74 | this.ready = false; |
| 75 | |
| 76 | // Markers Array |
| 77 | this._markers = []; |