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

Added option to supply ID for the new custom time bar

v3_develop
Oleg Yapparov 9 years ago
parent
01207417f3
commit
9c469d02ba
3 changed files with 59 additions and 37 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +8
    -6
      docs/timeline.html
  2. +12
    -10
      examples/timeline/34_add_custom_timebar.html
  3. +39
    -21
      lib/timeline/Core.js

+ 8
- 6
docs/timeline.html View File

@ -855,10 +855,12 @@ var options = {
</tr> </tr>
<tr> <tr>
<td>addCustomTime(time)</td>
<td>Number</td>
<td>addCustomTime(time[, id])</td>
<td>Number | String</td>
<td> <td>
Add new vertical bar representing custom time. Each new line is assigned a unique ID and can be dragged by the user. Parameter <code>time</code> can be a Date, Number, or String. Returns ID of the newly created bar. Only applicable when the option showCustomTime is true.
Only applicable when the option showCustomTime is true.<br>
Add new vertical bar representing custom time that can be dragged by the user. Parameter <code>time</code> can be a Date, Number, or String. Parameter <code>id</code> can be Number or String. If <code>id</code> is provided, it will be used as ID for the new vertical bar, otherwise the ID will be auto generated.<br>
Returns ID of the newly created bar.
</td> </td>
</tr> </tr>
<tr> <tr>
@ -984,7 +986,7 @@ timeline.clear({options: true}); // clear options only
<tr> <tr>
<td>setCustomTime(time [, id])</td> <td>setCustomTime(time [, id])</td>
<td>none</td> <td>none</td>
<td>Adjust the custom time bar. Only applicable when the option <code>showCustomTime</code> is true. <code>time</code> can be a Date object, numeric timestamp, or ISO date string. Parameter <code>id</code> represents ID of the custom time bar, provided by <code>addCustomTime</code> method.
<td>Adjust the custom time bar. Only applicable when the option <code>showCustomTime</code> is true. Parameter <code>time</code> can be a Date object, numeric timestamp, or ISO date string. Parameter <code>id</code> represents ID of the custom time bar, provided by <code>addCustomTime</code> method and can be a Number or String.
</td> </td>
</tr> </tr>
@ -1145,7 +1147,7 @@ timeline.off('select', onSelect);
</td> </td>
<td> <td>
<ul> <ul>
<li><code>id</code> (Number): Vertical bar ID.</li>
<li><code>id</code> (Number | String): Vertical bar ID.</li>
<li><code>time</code> (Date): the current time.</li> <li><code>time</code> (Date): the current time.</li>
</ul> </ul>
</td> </td>
@ -1158,7 +1160,7 @@ timeline.off('select', onSelect);
</td> </td>
<td> <td>
<ul> <ul>
<li><code>id</code> (Number): Vertical bar ID.</li>
<li><code>id</code> (Number | String): Vertical bar ID.</li>
<li><code>time</code> (Date): the current time.</li> <li><code>time</code> (Date): the current time.</li>
</ul> </ul>
</td> </td>

+ 12
- 10
examples/timeline/34_add_custom_timebar.html View File

@ -16,18 +16,18 @@
<body> <body>
<p> <p>
<input type="button" id="add" value="Add custom vertical bar" />
<span id="addCustomTime"></span>
<input type="button" id="add" value="Add custom vertical bar">
<input type="text" id="barId" placeholder="custom bar ID">
</p> </p>
<p> <p>
<input type="button" id="remove" value="Remove custom vertical bar" />
<input type="text" id="barIndex" value="1" />
<input type="button" id="remove" value="Remove custom vertical bar">
<input type="text" id="barIndex" value="1" placeholder="custom bar ID">
</p> </p>
<p> <p>
<code><strong>timechange</strong></code> bar index: <span id="timechangeBar"></span> event: <span id="timechangeEvent"></span>
<code><strong>timechange</strong></code> bar index: <span id="timechangeBar"></span>. Time: <span id="timechangeEvent"></span>
</p> </p>
<p> <p>
<code><strong>timechanged</strong></code> bar index: <span id="timechangedBar"></span> event: <span id="timechangedEvent"></span>
<code><strong>timechanged</strong></code> bar index: <span id="timechangedBar"></span>. Time: <span id="timechangedEvent"></span>
</p><br> </p><br>
<div id="visualization"></div> <div id="visualization"></div>
@ -46,16 +46,18 @@
// Set first time bar // Set first time bar
customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1); customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1);
timeline.addCustomTime(customDate);
timeline.addCustomTime(customDate, 1);
document.getElementById('add').onclick = function () { document.getElementById('add').onclick = function () {
customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1); customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1);
timeline.addCustomTime(customDate);
var barId = document.getElementById('barId').value || undefined;
timeline.addCustomTime(customDate, barId);
document.getElementById('barId').value = '';
}; };
document.getElementById('remove').onclick = function () { document.getElementById('remove').onclick = function () {
var index = document.getElementById('barIndex');
timeline.removeCustomTime(parseInt(index.value));
timeline.removeCustomTime(document.getElementById('barIndex').value);
document.getElementById('barIndex').value = '';
}; };
timeline.on('timechange', function (properties) { timeline.on('timechange', function (properties) {

+ 39
- 21
lib/timeline/Core.js View File

@ -289,7 +289,7 @@ Core.prototype.setCustomTime = function (time, id) {
throw new Error('Cannot get custom time: Custom time bar is not enabled'); throw new Error('Cannot get custom time: Custom time bar is not enabled');
} }
var barId = util.option.asNumber(id) || 0;
var barId = id || 0;
this.components.forEach(function (element, index, components) { this.components.forEach(function (element, index, components) {
if (element instanceof CustomTime && element.options.id === barId) { if (element instanceof CustomTime && element.options.id === barId) {
@ -308,8 +308,8 @@ Core.prototype.getCustomTime = function(id) {
throw new Error('Cannot get custom time: Custom time bar is not enabled'); throw new Error('Cannot get custom time: Custom time bar is not enabled');
} }
var barId = util.option.asNumber(id) || 0,
customTime = this.customTime.getCustomTime();;
var barId = id || 0,
customTime = this.customTime.getCustomTime();
this.components.forEach(function (element, index, components) { this.components.forEach(function (element, index, components) {
if (element instanceof CustomTime && element.options.id === barId) { if (element instanceof CustomTime && element.options.id === barId) {
@ -322,11 +322,12 @@ Core.prototype.getCustomTime = function(id) {
/** /**
* Add custom vertical bar * Add custom vertical bar
* param {Date | String | Number} time A Date, unix timestamp, or
* @param {Date | String | Number} time A Date, unix timestamp, or
* ISO date string. Time point where the new bar should be placed * ISO date string. Time point where the new bar should be placed
* @return {int} ID of the new bar
* @param {Number | String} ID of the new bar
* @return {Number | String} ID of the new bar
*/ */
Core.prototype.addCustomTime = function (time) {
Core.prototype.addCustomTime = function (time, id) {
if (!this.currentTime) { if (!this.currentTime) {
throw new Error('Option showCurrentTime must be true'); throw new Error('Option showCurrentTime must be true');
} }
@ -336,24 +337,47 @@ Core.prototype.addCustomTime = function (time) {
} }
var ts = util.convert(time, 'Date').valueOf(), var ts = util.convert(time, 'Date').valueOf(),
customTime, id;
numIds, customTime, customBarId;
// All bar IDs are kept in 1 array, mixed types
// Bar with ID 0 is the default bar.
if (!this.customBarIds || this.customBarIds.constructor !== Array) {
this.customBarIds = [0];
}
// If the ID is not provided, generate one, otherwise just use it
if (id === undefined) {
numIds = this.customBarIds.filter(function (element) {
return util.isNumber(element);
});
customBarId = numIds.length > 0 ? Math.max.apply(null, numIds) + 1 : 1;
if ('customLastId' in this) {
id = ++this.customLastId;
} else { } else {
id = this.customLastId = 1;
// Check for duplicates
this.customBarIds.forEach(function (element) {
if (element === id) {
throw new Error('Custom time ID already exists');
}
});
customBarId = id;
} }
this.customBarIds.push(customBarId);
customTime = new CustomTime(this.body, { customTime = new CustomTime(this.body, {
showCustomTime : true, showCustomTime : true,
time : ts, time : ts,
id : id
id : customBarId
}); });
this.components.push(customTime); this.components.push(customTime);
this.redraw(); this.redraw();
return id;
return customBarId;
}; };
/** /**
@ -362,20 +386,14 @@ Core.prototype.addCustomTime = function (time) {
* @return {boolean} True if the bar exists and is removed, false otherwise * @return {boolean} True if the bar exists and is removed, false otherwise
*/ */
Core.prototype.removeCustomTime = function (id) { Core.prototype.removeCustomTime = function (id) {
var me = this;
var reduceLastId = function() {
if ('customLastId' in me && me.customLastId > 0) {
me.customLastId--;
}
};
var me = this;
this.components.forEach(function (bar, index, components) { this.components.forEach(function (bar, index, components) {
if (bar instanceof CustomTime && bar.options.id === id) { if (bar instanceof CustomTime && bar.options.id === id) {
// Only the lines added by the user will be removed // Only the lines added by the user will be removed
if (bar.options.id > 0) {
reduceLastId();
if (bar.options.id !== 0) {
me.customBarIds.splice(me.customBarIds.indexOf(id), 1);
components.splice(index, 1); components.splice(index, 1);
bar.destroy(); bar.destroy();
} }

Write Preview
Loading…
Cancel
Save