diff --git a/docs/timeline/index.html b/docs/timeline/index.html index 0b6f46c0..03e53cfe 100644 --- a/docs/timeline/index.html +++ b/docs/timeline/index.html @@ -773,6 +773,13 @@ function (option, path) { If true, range of all items in the Timeline is draggable without being selected. If false, range is only draggable for the selected item(s). Only applicable when option itemsAlwaysDraggable.item is set true. + + loadingScreenTemplate + function + none + A template function used to generate the timeline initial loading screen. See section Templates for a detailed explanation. + + locale String diff --git a/examples/timeline/other/loadingScreen.html b/examples/timeline/other/loadingScreen.html new file mode 100644 index 00000000..80ca4aa8 --- /dev/null +++ b/examples/timeline/other/loadingScreen.html @@ -0,0 +1,58 @@ + + + + + Timeline | Loading screen example + + + + + + +

Timeline with loading screen

+
+ + + + + \ No newline at end of file diff --git a/examples/timeline/other/stressPerformance.html b/examples/timeline/other/stressPerformance.html index 94906e06..d26f4117 100644 --- a/examples/timeline/other/stressPerformance.html +++ b/examples/timeline/other/stressPerformance.html @@ -49,18 +49,9 @@ // create visualization var container = document.getElementById('visualization'); - var options = { - width: '100%', - showCurrentTime: false, - stack: true, - selectable: true, - editable: true, - }; + var options = {}; - var timeline = new vis.Timeline(container); - timeline.setOptions(options); - timeline.setGroups(groups); - timeline.setItems(items); + var timeline = new vis.Timeline(container, items, groups, options); \ No newline at end of file diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js index d3f73764..376eacb7 100644 --- a/lib/timeline/Core.js +++ b/lib/timeline/Core.js @@ -27,6 +27,7 @@ Core.prototype._create = function (container) { this.dom = {}; this.dom.container = container; + this.dom.container.style.position = 'relative'; this.dom.root = document.createElement('div'); this.dom.background = document.createElement('div'); @@ -47,6 +48,7 @@ Core.prototype._create = function (container) { this.dom.shadowTopRight = document.createElement('div'); this.dom.shadowBottomRight = document.createElement('div'); this.dom.rollingModeBtn = document.createElement('div'); + this.dom.loadingScreen = document.createElement('div'); this.dom.root.className = 'vis-timeline'; this.dom.background.className = 'vis-panel vis-background'; @@ -67,6 +69,7 @@ Core.prototype._create = function (container) { this.dom.shadowTopRight.className = 'vis-shadow vis-top'; this.dom.shadowBottomRight.className = 'vis-shadow vis-bottom'; this.dom.rollingModeBtn.className = 'vis-rolling-mode-btn'; + this.dom.loadingScreen.className = 'vis-loading-screen'; this.dom.root.appendChild(this.dom.background); this.dom.root.appendChild(this.dom.backgroundVertical); @@ -87,7 +90,7 @@ Core.prototype._create = function (container) { this.dom.leftContainer.appendChild(this.dom.shadowBottomLeft); this.dom.rightContainer.appendChild(this.dom.shadowTopRight); this.dom.rightContainer.appendChild(this.dom.shadowBottomRight); - + // size properties of each of the panels this.props = { root: {}, @@ -333,6 +336,7 @@ Core.prototype._create = function (container) { // attach the root panel to the provided container if (!container) throw new Error('No container provided'); container.appendChild(this.dom.root); + container.appendChild(this.dom.loadingScreen); }; /** diff --git a/lib/timeline/Timeline.js b/lib/timeline/Timeline.js index 60974393..184c4891 100644 --- a/lib/timeline/Timeline.js +++ b/lib/timeline/Timeline.js @@ -78,6 +78,26 @@ function Timeline (container, items, groups, options) { this.options.rollingMode = options && options.rollingMode; this.options.onInitialDrawComplete = options && options.onInitialDrawComplete; + this.options.loadingScreenTemplate = options && options.loadingScreenTemplate; + + // Prepare loading screen + var loadingScreenFragment = document.createElement('div'); + if (this.options.loadingScreenTemplate) { + var templateFunction = this.options.loadingScreenTemplate.bind(this); + var loadingScreen = templateFunction(this.dom.loadingScreen); + if ((loadingScreen instanceof Object) && !(loadingScreen instanceof Element)) { + templateFunction(loadingScreenFragment) + } else { + if (loadingScreen instanceof Element) { + loadingScreenFragment.innerHTML = ''; + loadingScreenFragment.appendChild(loadingScreen); + } + else if (loadingScreen != undefined) { + loadingScreenFragment.innerHTML = loadingScreen; + } + } + } + this.dom.loadingScreen.appendChild(loadingScreenFragment); // all components listed here will be repainted automatically this.components = []; @@ -183,6 +203,7 @@ function Timeline (container, items, groups, options) { if (!me.initialDrawDone && me.initialRangeChangeDone) { me.initialDrawDone = true; me.dom.root.style.visibility = 'visible'; + me.dom.loadingScreen.parentNode.removeChild(me.dom.loadingScreen); if (me.options.onInitialDrawComplete) { setTimeout(() => { return me.options.onInitialDrawComplete(); @@ -438,7 +459,7 @@ Timeline.prototype.focus = function(id, options) { me._redraw(); } }; - + // Enforces the final vertical scroll position var setFinalVerticalPosition = function() { var finalVerticalScroll = getItemVerticalScroll(me, item); diff --git a/lib/timeline/component/css/timeline.css b/lib/timeline/component/css/timeline.css index a45d467c..e8ad0e5f 100644 --- a/lib/timeline/component/css/timeline.css +++ b/lib/timeline/component/css/timeline.css @@ -2,10 +2,16 @@ .vis-timeline { position: relative; border: 1px solid #bfbfbf; - overflow: hidden; padding: 0; margin: 0; - box-sizing: border-box; } + +.vis-loading-screen { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; +} \ No newline at end of file diff --git a/lib/timeline/component/css/timeline.js b/lib/timeline/component/css/timeline.js new file mode 100644 index 00000000..fd3d3bd5 --- /dev/null +++ b/lib/timeline/component/css/timeline.js @@ -0,0 +1,19 @@ +import { StyleSheet } from 'react-native'; + +export default StyleSheet.create({ + 'vis-timeline': { + 'position': 'relative', + 'border': [{ 'unit': 'px', 'value': 1 }, { 'unit': 'string', 'value': 'solid' }, { 'unit': 'string', 'value': '#bfbfbf' }], + 'overflow': 'hidden', + 'padding': [{ 'unit': 'px', 'value': 0 }, { 'unit': 'px', 'value': 0 }, { 'unit': 'px', 'value': 0 }, { 'unit': 'px', 'value': 0 }], + 'margin': [{ 'unit': 'px', 'value': 0 }, { 'unit': 'px', 'value': 0 }, { 'unit': 'px', 'value': 0 }, { 'unit': 'px', 'value': 0 }], + 'boxSizing': 'border-box' + }, + 'vis-loading-screen': { + 'width': [{ 'unit': '%H', 'value': 1 }], + 'height': [{ 'unit': '%V', 'value': 1 }], + 'position': 'absolute', + 'top': [{ 'unit': 'px', 'value': 0 }], + 'left': [{ 'unit': 'px', 'value': 0 }] + } +}); diff --git a/lib/timeline/optionsTimeline.js b/lib/timeline/optionsTimeline.js index 820b6b3e..e13e6ae6 100644 --- a/lib/timeline/optionsTimeline.js +++ b/lib/timeline/optionsTimeline.js @@ -142,6 +142,7 @@ let allOptions = { snap: {'function': 'function', 'null': 'null'}, start: {date, number, string, moment}, template: {'function': 'function'}, + loadingScreenTemplate: {'function': 'function'}, groupTemplate: {'function': 'function'}, visibleFrameTemplate: {string, 'function': 'function'}, showTooltips: { 'boolean': bool},