Loading screen template (#3537)

* initial trial * Add onInitialDrawComplete * Add docs * Add to eventListeners examples * Keeping things DRY * Remove callback insertion * Remove call * Add initial loading screen * Fix real initial draw call * Remove activateOnInitialDraw method * Add loading screen option * Add docs * Remove onInitialDrawComplete double doc * Simplify example * Simplify stressPerformance example * Remove extra line
6 years ago · ca8598399e
--- a/docs/timeline/index.html
+++ b/docs/timeline/index.html
@ -773,6 +773,13 @@ function (option, path) {
      <td>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 <code>itemsAlwaysDraggable.item</code> is set <code>true</code>. </td>
    </tr>

    <tr>
      <td>loadingScreenTemplate</td>
      <td>function</td>
      <td>none</td>
      <td>A template function used to generate the timeline initial loading screen. See section <a href="#Templates">Templates</a> for a detailed explanation.</td>
    </tr>

    <tr>
      <td>locale</td>
      <td>String</td>
--- a/examples/timeline/other/loadingScreen.html
+++ b/examples/timeline/other/loadingScreen.html
@ -0,0 +1,58 @@
 <!DOCTYPE HTML>
 <html>

 <head>
  <title>Timeline | Loading screen example</title>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
  <script src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
 </head>

 <body>
  <h1>Timeline with loading screen</h1>
  <div id="visualization"></div>
 </body>

 <script>
  var now = moment();
  var groupCount = 20;
  var itemCount = 400;

  // create a data set with groups
  var groups = new vis.DataSet();
  for (var g = 0; g < groupCount; g++) {
    groups.add({
      id: g,
      content: "group " + g
    });
  }

  var types = ['point', 'range', 'box', 'background']
  // create a dataset with items
  var items = new vis.DataSet();
  for (var i = 0; i < itemCount; i++) {
    var start = now.clone().add(Math.random() * 180, 'days');
    var end = start.clone().add(Math.random() * 30, 'days');
    var group = Math.floor(Math.random() * groupCount);
    items.add({
      id: i,
      type: types[Math.floor(Math.random() * types.length)],
      group: group,
      content: '' + i,
      start: start,
      end: end
    });
  }

  // create visualization
  var container = document.getElementById('visualization');
  var options = {
    loadingScreenTemplate: function() {
      return '<h1>Loading...</h1>'
    }
  };

  var timeline = new vis.Timeline(container, items, groups, options);
 </script>

 </html>
--- 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);
 </script>

 </html>
--- 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);
 };

 /**
--- 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);
--- 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;
 }
--- a/lib/timeline/component/css/timeline.js
+++ 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 }]
  }
 });
--- 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},