Skip to content

Commit

Permalink
On timeline loaded (almende#3530)
Browse files Browse the repository at this point in the history 
* initial trial

* Add onInitialDrawComplete

* Add docs

* Add to eventListeners examples

* Keeping things DRY

* Remove callback insertion

* Remove call

* Fix initial real first draw complete and fix comments from review

* remove all <code><code>
  • Loading branch information
@yotamberk
yotamberk authored Oct 7, 2017
1 parent 3bc3d16 commit 6afc095
Show file tree
Hide file tree
Showing 5 changed files with 59 additions and 32 deletions.
50 changes: 29 additions & 21 deletions docs/timeline/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -579,7 +579,7 @@ <h2 id="Configuration_Options">Configuration Options</h2>
<td><span parent="editable" class="right-caret"></span> editable</td>
<td>boolean or Object</td>
<td><code>false</code></td>
<td>If true, the items in the timeline can be manipulated. Only applicable when option <code>selectable</code> is <code><code>true</code></code>. See also the callbacks <code>onAdd</code>, <code>onUpdate</code>, <code>onMove</code>, and <code>onRemove</code>. When <code>editable</code> is an object, one can enable or disable individual manipulation actions.
<td>If true, the items in the timeline can be manipulated. Only applicable when option <code>selectable</code> is <code>true</code>. See also the callbacks <code>onAdd</code>, <code>onUpdate</code>, <code>onMove</code>, and <code>onRemove</code>. When <code>editable</code> is an object, one can enable or disable individual manipulation actions.
See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.
</td>
</tr>
Expand Down Expand Up @@ -901,74 +901,82 @@ <h2 id="Configuration_Options">Configuration Options</h2>
<td>onAdd</td>
<td>function</td>
<td>none</td>
<td>Callback function triggered when an item is about to be added: when the user double taps an empty space in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.add</code> are set <code><code>true</code></code>.
<td>Callback function triggered when an item is about to be added: when the user double taps an empty space in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.add</code> are set <code>true</code>.
</td>
</tr>

<tr>
<td>onAddGroup</td>
<td>function</td>
<td>none</td>
<td>Callback function triggered when a group is about to be added. The signature and semantics are the same as for <code>onAdd</code>.
</td>
</tr>

<tr>
<td>onDropObjectOnItem</td>
<td>function</td>
<td>none</td>
<td>Callback function triggered when an object containing <code>target:'item'</code> in its drag data is dropped in to a timeline item.
</td>
</tr>
</tr>

<tr>
<td>onUpdate</td>
<td>onInitialDrawComplete</td>
<td>function</td>
<td>none</td>
<td>Callback function triggered when an item is about to be updated, when the user double taps an item in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code><code>true</code></code>.
<td>Callback function triggered when the timeline is initially drawn. This function fires once per timeline creation.
</td>
</tr>

<tr>
<td>onMove</td>
<td>function</td>
<td>none</td>
<td>Callback function triggered when an item has been moved: after the user has dragged the item to an other position. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code><code>true</code></code>.
<td>Callback function triggered when an item has been moved: after the user has dragged the item to an other position. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code>true</code>.
</td>
</tr>

<tr>
<td>onMoveGroup</td>
<td>function</td>
<td>none</td>
<td>Callback function triggered when a group has been moved: after the user has dragged the group to an other position. The signature and semantics are the same as for <code>onMove</code>.
</td>
</tr>

<tr>
<td>onMoving</td>
<td>function</td>
<td>none</td>
<td>Callback function triggered repeatedly when an item is being moved. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code><code>true</code></code>.
<td>Callback function triggered repeatedly when an item is being moved. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code>true</code>.
</td>
</tr>

<tr>
<td>onRemove</td>
<td>function</td>
<td>none</td>
<td>Callback function triggered when an item is about to be removed: when the user tapped the delete button on the top right of a selected item. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.remove</code> are set <code><code>true</code></code>.
<td>Callback function triggered when an item is about to be removed: when the user tapped the delete button on the top right of a selected item. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.remove</code> are set <code>true</code>.
</td>
</tr>

<tr>
<td>onRemoveGroup</td>
<td>function</td>
<td>none</td>
<td>Callback function triggered when a group is about to be removed. The signature and semantics are the same as for <code>onRemove</code>.
</td>
</tr>


<tr>
<td>onUpdate</td>
<td>function</td>
<td>none</td>
<td>Callback function triggered when an item is about to be updated, when the user double taps an item in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code>true</code>.
</td>
</tr>

<tr>
<td>order</td>
<td>function</td>
Expand Down Expand Up @@ -1054,7 +1062,7 @@ <h2 id="Configuration_Options">Configuration Options</h2>
<td>By default, the timeline shows both minor and major date labels on the
time axis.
For example the minor labels show minutes and the major labels show hours.
When <code>showMajorLabels</code> is <code><code>false</code></code>, no major labels
When <code>showMajorLabels</code> is <code>false</code>, no major labels
are shown.</td>
</tr>

Expand All @@ -1065,7 +1073,7 @@ <h2 id="Configuration_Options">Configuration Options</h2>
<td>By default, the timeline shows both minor and major date labels on the
time axis.
For example the minor labels show minutes and the major labels show hours.
When <code>showMinorLabels</code> is <code><code>false</code></code>, no minor labels
When <code>showMinorLabels</code> is <code>false</code>, no minor labels
are shown. When both <code>showMajorLabels</code> and
<code>showMinorLabels</code> are false, no horizontal axis will be
visible.</td>
Expand Down Expand Up @@ -1225,7 +1233,7 @@ <h2 id="Configuration_Options">Configuration Options</h2>
<td><code>true</code></td>
<td>
Specifies whether the Timeline can be zoomed by pinching or scrolling in the window.
Only applicable when option <code>moveable</code> is set <code><code>true</code></code>.
Only applicable when option <code>moveable</code> is set <code>true</code>.
</td>
</tr>

Expand All @@ -1235,7 +1243,7 @@ <h2 id="Configuration_Options">Configuration Options</h2>
<td><code>''</code></td>
<td>Specifies whether the Timeline is only zoomed when an additional key is down.
Available values are '' (does not apply), 'altKey', 'ctrlKey', or 'metaKey'.
Only applicable when option <code>moveable</code> is set <code><code>true</code></code>.
Only applicable when option <code>moveable</code> is set <code>true</code>.
</td>
</tr>

Expand Down Expand Up @@ -1776,7 +1784,7 @@ <h2 id="Events">Events</h2>

<h2 id="Editing_Items">Editing Items</h2>
<p>
When the Timeline is configured to be editable (both options <code>selectable</code> and <code>editable</code> are <code><code>true</code></code>), the user can:
When the Timeline is configured to be editable (both options <code>selectable</code> and <code>editable</code> are <code>true</code>), the user can:
</p>
<ul>
<li>Select an item by clicking it, and use ctrl+click to or shift+click to select multiple items (when <code>multiselect: true</code>).</li>
Expand Down
3 changes: 2 additions & 1 deletion examples/timeline/interaction/eventListeners.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@

var container = document.getElementById('visualization');
var options = {
editable: true
editable: true,
onInitialDrawComplete: function() { logEvent('Timeline initial draw completed', {}); },
};
var timeline = new vis.Timeline(container, items, options);

Expand Down
7 changes: 6 additions & 1 deletion lib/timeline/Core.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,11 @@ Core.prototype._create = function (container) {
this._redraw();
}
}.bind(this));
this.on('rangechanged', function () {
if (!this.initialRangeChangeDone) {
this.initialRangeChangeDone = true;
}
}.bind(this));
this.on('touch', this._onTouch.bind(this));
this.on('panmove', this._onDrag.bind(this));

Expand Down Expand Up @@ -324,6 +329,7 @@ Core.prototype._create = function (container) {

this.redrawCount = 0;
this.initialDrawDone = false;
this.initialRangeChangeDone = false;

// attach the root panel to the provided container
if (!container) throw new Error('No container provided');
Expand Down Expand Up @@ -1008,7 +1014,6 @@ Core.prototype._redraw = function() {
} else {
this.redrawCount = 0;
}
this.initialDrawDone = true;

//Emit public 'changed' event for UI updates, see issue #1592
this.body.emitter.emit("changed");
Expand Down
30 changes: 21 additions & 9 deletions lib/timeline/Timeline.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,13 +58,14 @@ function Timeline (container, items, groups, options) {
width: null,
height: null,
maxHeight: null,
minHeight: null
minHeight: null,
};
this.options = util.deepExtend({}, this.defaultOptions);

// Create the DOM, props, and emitter
this._create(container);
if (!options || (options && typeof options.rtl == "undefined")) {
this.dom.root.style.visibility = 'hidden';
var directionFromDom, domNode = this.dom.root;
while (!directionFromDom && domNode) {
directionFromDom = window.getComputedStyle(domNode, null).direction;
Expand All @@ -76,6 +77,7 @@ function Timeline (container, items, groups, options) {
}

this.options.rollingMode = options && options.rollingMode;
this.options.onInitialDrawComplete = options && options.onInitialDrawComplete;

// all components listed here will be repainted automatically
this.components = [];
Expand Down Expand Up @@ -160,11 +162,11 @@ function Timeline (container, items, groups, options) {
}

//Single time autoscale/fit
this.fitDone = false;
this.initialFitDone = false;
this.on('changed', function (){
if (this.itemsData == null || this.options.rollingMode) return;
if (!me.fitDone) {
me.fitDone = true;
if (!me.initialFitDone) {
me.initialFitDone = true;
if (me.options.start != undefined || me.options.end != undefined) {
if (me.options.start == undefined || me.options.end == undefined) {
var range = me.getItemRange();
Expand All @@ -173,11 +175,20 @@ function Timeline (container, items, groups, options) {
var start = me.options.start != undefined ? me.options.start : range.min;
var end = me.options.end != undefined ? me.options.end : range.max;
me.setWindow(start, end, {animation: false});
}
else {
} else {
me.fit({animation: false});
}
}

if (!me.initialDrawDone && me.initialRangeChangeDone) {
me.initialDrawDone = true;
me.dom.root.style.visibility = 'visible';
if (me.options.onInitialDrawComplete) {
setTimeout(() => {
return me.options.onInitialDrawComplete();
}, 0)
}
}
});

// apply options
Expand Down Expand Up @@ -472,21 +483,22 @@ Timeline.prototype.focus = function(id, options) {
* provided to specify duration and easing function.
* Default duration is 500 ms, and default easing
* function is 'easeInOutQuad'.
* @param {function} [callback]
*/
Timeline.prototype.fit = function (options) {
Timeline.prototype.fit = function (options, callback) {
var animation = (options && options.animation !== undefined) ? options.animation : true;
var range;

var dataset = this.itemsData && this.itemsData.getDataSet();
if (dataset.length === 1 && dataset.get()[0].end === undefined) {
// a single item -> don't fit, just show a range around the item from -4 to +3 days
range = this.getDataRange();
this.moveTo(range.min.valueOf(), {animation});
this.moveTo(range.min.valueOf(), {animation}, callback);
}
else {
// exactly fit the items (plus a small margin)
range = this.getItemRange();
this.range.setRange(range.min, range.max, { animation: animation });
this.range.setRange(range.min, range.max, { animation: animation }, callback);
}
};

Expand Down
1 change: 1 addition & 0 deletions lib/timeline/optionsTimeline.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,7 @@ let allOptions = {
onAddGroup: {'function': 'function'},
onMoveGroup: {'function': 'function'},
onRemoveGroup: {'function': 'function'},
onInitialDrawComplete: {'function': 'function'},
order: {'function': 'function'},
orientation: {
axis: {string,'undefined': 'undefined'},
Expand Down

0 comments on commit 6afc095

Please sign in to comment.