Browse Source

customeTime additional editable=false functionality. (#3816)

* customTime read-only (i.e. editable = false) patch.

* updated docs for read-only customTime patch
develop
jangajack 6 years ago
committed by Yotam Berkowitz
parent
commit
3405e876cd
6 changed files with 41 additions and 17 deletions
  1. +8
    -4
      docs/timeline/index.html
  2. +5
    -1
      examples/timeline/other/customTimeBars.html
  3. +4
    -1
      examples/timeline/other/customTimeBarsTooltip.html
  4. +6
    -2
      lib/timeline/Core.js
  5. +14
    -9
      lib/timeline/component/CustomTime.js
  6. +4
    -0
      lib/timeline/component/css/customtime.css

+ 8
- 4
docs/timeline/index.html View File

@ -1312,13 +1312,17 @@ function (option, path) {
</tr> </tr>
<tr> <tr>
<td>addCustomTime([time] [, id])</td>
<td>addCustomTime([time] [, id] [, options])</td>
<td>number or String</td> <td>number or String</td>
<td> <td>
Add new vertical bar representing a custom time that can be dragged by the user.
Parameter <code>time</code> can be a Date, Number, or String, and is <code>new Date()</code> by default.
Add new vertical bar representing a custom time that can be optionally dragged by the user.<br>
Parameter <code>time</code> can be a Date, Number, or String, and is <code>new Date()</code> by default.<br>
Parameter <code>id</code> can be Number or String and is <code>undefined</code> by default. Parameter <code>id</code> can be Number or String and is <code>undefined</code> by default.
The <code>id</code>code> is added as CSS class name of the custom time bar, allowing to style multiple time bars differently.
The <code>id</code> is added as CSS class name of the custom time bar, allowing to style multiple time bars differently.<br>
Parameter <code>options</code> can be an Object of available options. <em>At present these options cannot be altered after the custom time bar is created.</em>:
<ul>
<li><code>editable: boolean </code><br>If true (default) the custom time bar can be dragged by the user. If false the time bar is fixed and can only be modified in code.</li>
</ul>
The method returns id of the created bar. The method returns id of the created bar.
</td> </td>
</tr> </tr>

+ 5
- 1
examples/timeline/other/customTimeBars.html View File

@ -22,6 +22,9 @@
<p> <p>
<input type="button" id="add" value="Add custom vertical bar"> <input type="button" id="add" value="Add custom vertical bar">
<input type="text" id="barId" placeholder="custom bar ID"> <input type="text" id="barId" placeholder="custom bar ID">
<input type="checkbox" id="isEdit" placeholder="user can edit time" checked>
<label for="isEdit">Editable: User can change time.</label>
</input>
</p> </p>
<p> <p>
<input type="button" id="remove" value="Remove custom vertical bar"> <input type="button" id="remove" value="Remove custom vertical bar">
@ -55,7 +58,8 @@
try { try {
customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1); customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1);
var barId = document.getElementById('barId').value || undefined; var barId = document.getElementById('barId').value || undefined;
timeline.addCustomTime(customDate, barId);
var usereditable = document.getElementById('isEdit').checked || false;
timeline.addCustomTime(customDate, barId, {editable: usereditable});
document.getElementById('barId').value = ''; document.getElementById('barId').value = '';
} }
catch (err) { catch (err) {

+ 4
- 1
examples/timeline/other/customTimeBarsTooltip.html View File

@ -22,6 +22,8 @@
<p> <p>
<input type="button" id="add" value="Add custom vertical bar"> <input type="button" id="add" value="Add custom vertical bar">
<input type="text" id="barId" placeholder="custom bar ID"> <input type="text" id="barId" placeholder="custom bar ID">
<input type="checkbox" id="isEdit" placeholder="user can edit time" checked>
<label for="isEdit">Editable: User can change time.</label>
</p> </p>
<p> <p>
<input type="button" id="remove" value="Remove custom vertical bar"> <input type="button" id="remove" value="Remove custom vertical bar">
@ -58,7 +60,8 @@
try { try {
customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1); customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1);
var barId = document.getElementById('barId').value || undefined; var barId = document.getElementById('barId').value || undefined;
timeline.addCustomTime(customDate, barId);
var usereditable = document.getElementById('isEdit').checked || false;
timeline.addCustomTime(customDate, barId, { editable: usereditable });
timeline.setCustomTimeTitle(function(time){ timeline.setCustomTimeTitle(function(time){
return "I'm "+barId+"!"; return "I'm "+barId+"!";
}, barId); }, barId);

+ 6
- 2
lib/timeline/Core.js View File

@ -612,9 +612,13 @@ Core.prototype.getEventProperties = function (event) {
* If not provided, `new Date()` will * If not provided, `new Date()` will
* be used. * be used.
* @param {number | string} [id=undefined] Id of the new bar. Optional * @param {number | string} [id=undefined] Id of the new bar. Optional
* @param {object} [options={}] Control options for the new bar. Supported
* optoins are:
* editable {true, false} determines whether the
* bar can be dragged by the user. Default is true.
* @return {number | string} Returns the id of the new bar * @return {number | string} Returns the id of the new bar
*/ */
Core.prototype.addCustomTime = function (time, id) {
Core.prototype.addCustomTime = function (time, id, options) {
var timestamp = time !== undefined var timestamp = time !== undefined
? util.convert(time, 'Date').valueOf() ? util.convert(time, 'Date').valueOf()
: new Date(); : new Date();
@ -626,7 +630,7 @@ Core.prototype.addCustomTime = function (time, id) {
throw new Error('A custom time with id ' + JSON.stringify(id) + ' already exists'); throw new Error('A custom time with id ' + JSON.stringify(id) + ' already exists');
} }
var customTime = new CustomTime(this.body, util.extend({}, this.options, {
var customTime = new CustomTime(this.body, util.extend({}, this.options, options, {
time : timestamp, time : timestamp,
id : id id : id
})); }));

+ 14
- 9
lib/timeline/component/CustomTime.js View File

@ -23,7 +23,8 @@ function CustomTime (body, options) {
locales: locales, locales: locales,
locale: 'en', locale: 'en',
id: undefined, id: undefined,
title: undefined
title: undefined,
editable: true
}; };
this.options = util.extend({}, this.defaultOptions); this.options = util.extend({}, this.defaultOptions);
@ -53,7 +54,7 @@ CustomTime.prototype = new Component();
CustomTime.prototype.setOptions = function(options) { CustomTime.prototype.setOptions = function(options) {
if (options) { if (options) {
// copy all options that we know // copy all options that we know
util.selectiveExtend(['moment', 'locale', 'locales', 'id'], this.options, options);
util.selectiveExtend(['moment', 'locale', 'locales', 'id', 'editable'], this.options, options);
} }
}; };
@ -64,7 +65,7 @@ CustomTime.prototype.setOptions = function(options) {
CustomTime.prototype._create = function() { CustomTime.prototype._create = function() {
var bar = document.createElement('div'); var bar = document.createElement('div');
bar['custom-time'] = this; bar['custom-time'] = this;
bar.className = 'vis-custom-time ' + (this.options.id || '');
bar.className = 'vis-custom-time ' + (!this.options.editable ? 'disabled ' : '') + (this.options.id || '');
bar.style.position = 'absolute'; bar.style.position = 'absolute';
bar.style.top = '0px'; bar.style.top = '0px';
bar.style.height = '100%'; bar.style.height = '100%';
@ -96,12 +97,16 @@ CustomTime.prototype._create = function() {
} }
bar.appendChild(drag); bar.appendChild(drag);
// attach event listeners
this.hammer = new Hammer(drag);
this.hammer.on('panstart', this._onDragStart.bind(this));
this.hammer.on('panmove', this._onDrag.bind(this));
this.hammer.on('panend', this._onDragEnd.bind(this));
this.hammer.get('pan').set({threshold:5, direction: Hammer.DIRECTION_HORIZONTAL});
// if bar is editable by the user, attach drag handlers
if(this.options.editable){
// attach event listeners
this.hammer = new Hammer(drag);
this.hammer.on('panstart', this._onDragStart.bind(this));
this.hammer.on('panmove', this._onDrag.bind(this));
this.hammer.on('panend', this._onDragEnd.bind(this));
this.hammer.get('pan').set({ threshold: 5, direction: Hammer.DIRECTION_HORIZONTAL });
}
}; };
/** /**

+ 4
- 0
lib/timeline/component/css/customtime.css View File

@ -3,4 +3,8 @@
width: 2px; width: 2px;
cursor: move; cursor: move;
z-index: 1; z-index: 1;
}
.vis-custom-time.disabled {
cursor: inherit;
} }

Loading…
Cancel
Save