From 3405e876cd821d850ae6d98442b92a41a7eb70f5 Mon Sep 17 00:00:00 2001 From: jangajack Date: Sun, 18 Feb 2018 23:14:49 +1100 Subject: [PATCH] customeTime additional editable=false functionality. (#3816) * customTime read-only (i.e. editable = false) patch. * updated docs for read-only customTime patch --- docs/timeline/index.html | 12 ++++++---- examples/timeline/other/customTimeBars.html | 6 ++++- .../timeline/other/customTimeBarsTooltip.html | 5 +++- lib/timeline/Core.js | 8 +++++-- lib/timeline/component/CustomTime.js | 23 +++++++++++-------- lib/timeline/component/css/customtime.css | 4 ++++ 6 files changed, 41 insertions(+), 17 deletions(-) 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) { - addCustomTime([time] [, id]) + addCustomTime([time] [, id] [, options]) number or String - Add new vertical bar representing a custom time that can be dragged by the user. - Parameter 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.
+ Parameter time can be a Date, Number, or String, and is new Date() by default.
Parameter id can be Number or String and is undefined by default. - The idcode> 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.
+ Parameter options can be an Object of available options. At present these options cannot be altered after the custom time bar is created.: + The method returns id of the created bar. diff --git a/examples/timeline/other/customTimeBars.html b/examples/timeline/other/customTimeBars.html index 41d8d360..c29de0d9 100644 --- a/examples/timeline/other/customTimeBars.html +++ b/examples/timeline/other/customTimeBars.html @@ -22,6 +22,9 @@

+ + +

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