diff --git a/docs/timeline/index.html b/docs/timeline/index.html index 121fa60e..652a5b86 100644 --- a/docs/timeline/index.html +++ b/docs/timeline/index.html @@ -1312,13 +1312,17 @@ function (option, path) {
time
can be a Date, Number, or String, and is new Date()
by default.
+ Add new vertical bar representing a custom time that can be optionally dragged by the user.time
can be a Date, Number, or String, and is new Date()
by default.id
can be Number or String and is undefined
by default.
- The id
code> is added as CSS class name of the custom time bar, allowing to style multiple time bars differently.
+ The id
is added as CSS class name of the custom time bar, allowing to style multiple time bars differently.options
can be an Object of available options. At present these options cannot be altered after the custom time bar is created.:
+ editable: boolean
+ + +
@@ -55,7 +58,8 @@ try { customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1); 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 = ''; } catch (err) { diff --git a/examples/timeline/other/customTimeBarsTooltip.html b/examples/timeline/other/customTimeBarsTooltip.html index 0fe62f36..d86d725d 100644 --- a/examples/timeline/other/customTimeBarsTooltip.html +++ b/examples/timeline/other/customTimeBarsTooltip.html @@ -22,6 +22,8 @@
+ +
@@ -58,7 +60,8 @@ try { customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1); 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){ return "I'm "+barId+"!"; }, barId); diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js index b9f5d57f..dcb0476d 100644 --- a/lib/timeline/Core.js +++ b/lib/timeline/Core.js @@ -612,9 +612,13 @@ Core.prototype.getEventProperties = function (event) { * If not provided, `new Date()` will * be used. * @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 */ -Core.prototype.addCustomTime = function (time, id) { +Core.prototype.addCustomTime = function (time, id, options) { var timestamp = time !== undefined ? util.convert(time, 'Date').valueOf() : 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'); } - var customTime = new CustomTime(this.body, util.extend({}, this.options, { + var customTime = new CustomTime(this.body, util.extend({}, this.options, options, { time : timestamp, id : id })); diff --git a/lib/timeline/component/CustomTime.js b/lib/timeline/component/CustomTime.js index e6807f22..73b1895a 100644 --- a/lib/timeline/component/CustomTime.js +++ b/lib/timeline/component/CustomTime.js @@ -23,7 +23,8 @@ function CustomTime (body, options) { locales: locales, locale: 'en', id: undefined, - title: undefined + title: undefined, + editable: true }; this.options = util.extend({}, this.defaultOptions); @@ -53,7 +54,7 @@ CustomTime.prototype = new Component(); CustomTime.prototype.setOptions = function(options) { if (options) { // 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() { var bar = document.createElement('div'); 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.top = '0px'; bar.style.height = '100%'; @@ -96,12 +97,16 @@ CustomTime.prototype._create = function() { } 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 }); + } }; /** diff --git a/lib/timeline/component/css/customtime.css b/lib/timeline/component/css/customtime.css index 07ca746e..447b8f5d 100644 --- a/lib/timeline/component/css/customtime.css +++ b/lib/timeline/component/css/customtime.css @@ -3,4 +3,8 @@ width: 2px; cursor: move; z-index: 1; +} + +.vis-custom-time.disabled { + cursor: inherit; } \ No newline at end of file