jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

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
mbroad/code-climate-coverage-develop
Yotam Berkowitz 7 years ago
committed by GitHub
parent
3c48a38db5
commit
ca8598399e
8 changed files with 122 additions and 15 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +7
    -0
      docs/timeline/index.html
  2. +58
    -0
      examples/timeline/other/loadingScreen.html
  3. +2
    -11
      examples/timeline/other/stressPerformance.html
  4. +5
    -1
      lib/timeline/Core.js
  5. +22
    -1
      lib/timeline/Timeline.js
  6. +8
    -2
      lib/timeline/component/css/timeline.css
  7. +19
    -0
      lib/timeline/component/css/timeline.js
  8. +1
    -0
      lib/timeline/optionsTimeline.js

+ 7
- 0
docs/timeline/index.html View File

@ -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> <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>
<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> <tr>
<td>locale</td> <td>locale</td>
<td>String</td> <td>String</td>

+ 58
- 0
examples/timeline/other/loadingScreen.html View File

@ -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>

+ 2
- 11
examples/timeline/other/stressPerformance.html View File

@ -49,18 +49,9 @@
// create visualization // create visualization
var container = document.getElementById('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> </script>
</html> </html>

+ 5
- 1
lib/timeline/Core.js View File

@ -27,6 +27,7 @@ Core.prototype._create = function (container) {
this.dom = {}; this.dom = {};
this.dom.container = container; this.dom.container = container;
this.dom.container.style.position = 'relative';
this.dom.root = document.createElement('div'); this.dom.root = document.createElement('div');
this.dom.background = 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.shadowTopRight = document.createElement('div');
this.dom.shadowBottomRight = document.createElement('div'); this.dom.shadowBottomRight = document.createElement('div');
this.dom.rollingModeBtn = document.createElement('div'); this.dom.rollingModeBtn = document.createElement('div');
this.dom.loadingScreen = document.createElement('div');
this.dom.root.className = 'vis-timeline'; this.dom.root.className = 'vis-timeline';
this.dom.background.className = 'vis-panel vis-background'; 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.shadowTopRight.className = 'vis-shadow vis-top';
this.dom.shadowBottomRight.className = 'vis-shadow vis-bottom'; this.dom.shadowBottomRight.className = 'vis-shadow vis-bottom';
this.dom.rollingModeBtn.className = 'vis-rolling-mode-btn'; 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.background);
this.dom.root.appendChild(this.dom.backgroundVertical); 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.leftContainer.appendChild(this.dom.shadowBottomLeft);
this.dom.rightContainer.appendChild(this.dom.shadowTopRight); this.dom.rightContainer.appendChild(this.dom.shadowTopRight);
this.dom.rightContainer.appendChild(this.dom.shadowBottomRight); this.dom.rightContainer.appendChild(this.dom.shadowBottomRight);
// size properties of each of the panels // size properties of each of the panels
this.props = { this.props = {
root: {}, root: {},
@ -333,6 +336,7 @@ Core.prototype._create = function (container) {
// attach the root panel to the provided container // attach the root panel to the provided container
if (!container) throw new Error('No container provided'); if (!container) throw new Error('No container provided');
container.appendChild(this.dom.root); container.appendChild(this.dom.root);
container.appendChild(this.dom.loadingScreen);
}; };
/** /**

+ 22
- 1
lib/timeline/Timeline.js View File

@ -78,6 +78,26 @@ function Timeline (container, items, groups, options) {
this.options.rollingMode = options && options.rollingMode; this.options.rollingMode = options && options.rollingMode;
this.options.onInitialDrawComplete = options && options.onInitialDrawComplete; 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 // all components listed here will be repainted automatically
this.components = []; this.components = [];
@ -183,6 +203,7 @@ function Timeline (container, items, groups, options) {
if (!me.initialDrawDone && me.initialRangeChangeDone) { if (!me.initialDrawDone && me.initialRangeChangeDone) {
me.initialDrawDone = true; me.initialDrawDone = true;
me.dom.root.style.visibility = 'visible'; me.dom.root.style.visibility = 'visible';
me.dom.loadingScreen.parentNode.removeChild(me.dom.loadingScreen);
if (me.options.onInitialDrawComplete) { if (me.options.onInitialDrawComplete) {
setTimeout(() => { setTimeout(() => {
return me.options.onInitialDrawComplete(); return me.options.onInitialDrawComplete();
@ -438,7 +459,7 @@ Timeline.prototype.focus = function(id, options) {
me._redraw(); me._redraw();
} }
}; };
// Enforces the final vertical scroll position // Enforces the final vertical scroll position
var setFinalVerticalPosition = function() { var setFinalVerticalPosition = function() {
var finalVerticalScroll = getItemVerticalScroll(me, item); var finalVerticalScroll = getItemVerticalScroll(me, item);

+ 8
- 2
lib/timeline/component/css/timeline.css View File

@ -2,10 +2,16 @@
.vis-timeline { .vis-timeline {
position: relative; position: relative;
border: 1px solid #bfbfbf; border: 1px solid #bfbfbf;
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
} }
.vis-loading-screen {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}

+ 19
- 0
lib/timeline/component/css/timeline.js View File

@ -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 }]
}
});

+ 1
- 0
lib/timeline/optionsTimeline.js View File

@ -142,6 +142,7 @@ let allOptions = {
snap: {'function': 'function', 'null': 'null'}, snap: {'function': 'function', 'null': 'null'},
start: {date, number, string, moment}, start: {date, number, string, moment},
template: {'function': 'function'}, template: {'function': 'function'},
loadingScreenTemplate: {'function': 'function'},
groupTemplate: {'function': 'function'}, groupTemplate: {'function': 'function'},
visibleFrameTemplate: {string, 'function': 'function'}, visibleFrameTemplate: {string, 'function': 'function'},
showTooltips: { 'boolean': bool}, showTooltips: { 'boolean': bool},

Write Preview
Loading…
Cancel
Save