diff --git a/src/timeline/Range.js b/src/timeline/Range.js index 69c7e6b9..c15f2aa0 100644 --- a/src/timeline/Range.js +++ b/src/timeline/Range.js @@ -288,6 +288,8 @@ Range.prototype._onDragStart = function(event, component) { // when releasing the fingers in opposite order from the touch screen if (touchParams.ignore) return; + // TODO: reckon with option movable + touchParams.start = this.start; touchParams.end = this.end; @@ -307,6 +309,9 @@ Range.prototype._onDragStart = function(event, component) { Range.prototype._onDrag = function (event, component, direction) { validateDirection(direction); + // TODO: reckon with option movable + + // refuse to drag when we where pinching to prevent the timeline make a jump // when releasing the fingers in opposite order from the touch screen if (touchParams.ignore) return; @@ -335,6 +340,8 @@ Range.prototype._onDragEnd = function (event, component) { // when releasing the fingers in opposite order from the touch screen if (touchParams.ignore) return; + // TODO: reckon with option movable + if (component.frame) { component.frame.style.cursor = 'auto'; } @@ -357,6 +364,8 @@ Range.prototype._onDragEnd = function (event, component) { Range.prototype._onMouseWheel = function(event, component, direction) { validateDirection(direction); + // TODO: reckon with option zoomable + // retrieve delta var delta = 0; if (event.wheelDelta) { /* IE/Opera. */ @@ -432,6 +441,8 @@ Range.prototype._onHold = function () { Range.prototype._onPinch = function (event, component, direction) { touchParams.ignore = true; + // TODO: reckon with option zoomable + if (event.gesture.touches.length > 1) { if (!touchParams.center) { touchParams.center = getPointer(event.gesture.center, component.frame); diff --git a/src/timeline/Timeline.js b/src/timeline/Timeline.js index b8e2bd1a..5789b431 100644 --- a/src/timeline/Timeline.js +++ b/src/timeline/Timeline.js @@ -110,9 +110,6 @@ function Timeline (container, items, options) { now.clone().add('days', 4).valueOf() ); - // TODO: reckon with options moveable and zoomable - // TODO: put the listeners in setOptions, be able to dynamically change with options moveable and zoomable - // TODO: enable moving again this.range.subscribe(this.controller, this.rootPanel, 'move', 'horizontal'); this.range.subscribe(this.controller, this.rootPanel, 'zoom', 'horizontal'); this.range.on('rangechange', function (properties) { @@ -194,9 +191,24 @@ Timeline.prototype.setOptions = function (options) { this.range.setRange(options.start, options.end); if ('editable' in options || 'selectable' in options) { - // TODO: update current selection according to changed options + if (this.options.selectable) { + // force update of selection + this.setSelection(this.getSelection()); + } + else { + // remove selection + this.setSelection([]); + } } + // validate the callback functions + var validateCallback = (function (fn) { + if (!(this.options[fn] instanceof Function) || this.options[fn].length != 2) { + throw new Error('option ' + fn + ' must be a function ' + fn + '(item, callback)'); + } + }).bind(this); + ['onAdd', 'onUpdate', 'onRemove', 'onMove'].forEach(validateCallback); + this.controller.reflow(); this.controller.repaint(); }; @@ -532,10 +544,6 @@ Timeline.prototype._onMultiSelectItem = function (event) { event.stopPropagation(); } - else { - // create a new item - this._onAddItem(event); - } }; /** diff --git a/src/timeline/component/css/item.css b/src/timeline/component/css/item.css index e482b0e0..1242f9d1 100644 --- a/src/timeline/component/css/item.css +++ b/src/timeline/component/css/item.css @@ -64,16 +64,17 @@ box-sizing: border-box; } -.vis.timeline .item.range { - overflow: hidden; -} - .vis.timeline .item.range .content, .vis.timeline .item.rangeoverflow .content { position: relative; display: inline-block; } +.vis.timeline .item.range .content { + overflow: hidden; + max-width: 100%; +} + .vis.timeline .item.line { padding: 0; position: absolute;