From 28abf0a5df05c476b0a18fa2a4fbf3cd672da443 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Exner?= Date: Thu, 25 May 2017 20:24:50 +0200 Subject: [PATCH] timeline - items always draggable upgrade for range (#3073) Awesome work! Thanks again! --- docs/timeline/index.html | 16 +++++++- .../editing/itemsAlwaysDraggable.html | 38 +++++++++++++++++++ lib/timeline/component/ItemSet.js | 25 ++++++++++-- lib/timeline/component/item/Item.js | 9 ++++- lib/timeline/component/item/RangeItem.js | 8 ++-- lib/timeline/optionsTimeline.js | 6 ++- 6 files changed, 89 insertions(+), 13 deletions(-) create mode 100644 examples/timeline/editing/itemsAlwaysDraggable.html diff --git a/docs/timeline/index.html b/docs/timeline/index.html index 293f4cca..d847af0a 100644 --- a/docs/timeline/index.html +++ b/docs/timeline/index.html @@ -729,12 +729,24 @@ function (option, path) { - - itemsAlwaysDraggable + + itemsAlwaysDraggable + boolean or Object + Object + When a boolean, applies the value only to itemsAlwaysDraggable.item. + + + itemsAlwaysDraggable.item boolean false If true, all items in the Timeline are draggable without being selected. If false, only the selected item(s) are draggable. + + itemsAlwaysDraggable.range + boolean + false + If true, range of all items in the Timeline is draggable without being selected. If false, range is only draggable for the selected item(s). Only applicable when option itemsAlwaysDraggable.item is set true. + locale diff --git a/examples/timeline/editing/itemsAlwaysDraggable.html b/examples/timeline/editing/itemsAlwaysDraggable.html new file mode 100644 index 00000000..24ab53c2 --- /dev/null +++ b/examples/timeline/editing/itemsAlwaysDraggable.html @@ -0,0 +1,38 @@ + + + Timeline | itemsAlwaysDraggable Option + + + + + +

The itemsAlwaysDraggable option allows to drag items around without first selecting them. When itemsAlwaysDraggable.range is set to true, the range can be changed without selection as well.

+
+ + + + diff --git a/lib/timeline/component/ItemSet.js b/lib/timeline/component/ItemSet.js index 362d4320..0aa845b9 100644 --- a/lib/timeline/component/ItemSet.js +++ b/lib/timeline/component/ItemSet.js @@ -44,7 +44,10 @@ function ItemSet(body, options) { selectable: true, multiselect: false, - itemsAlwaysDraggable: false, + itemsAlwaysDraggable: { + item: false, + range: false, + }, editable: { updateTime: false, @@ -336,12 +339,26 @@ ItemSet.prototype.setOptions = function(options) { if (options) { // copy all options that we know var fields = [ - 'type', 'rtl', 'align', 'order', 'stack', 'stackSubgroups', 'selectable', 'multiselect', 'itemsAlwaysDraggable', + 'type', 'rtl', 'align', 'order', 'stack', 'stackSubgroups', 'selectable', 'multiselect', 'multiselectPerGroup', 'groupOrder', 'dataAttributes', 'template', 'groupTemplate', 'visibleFrameTemplate', 'hide', 'snap', 'groupOrderSwap', 'showTooltips', 'tooltip', 'tooltipOnItemUpdateTime' ]; util.selectiveExtend(fields, this.options, options); + if ('itemsAlwaysDraggable' in options) { + if (typeof options.itemsAlwaysDraggable === 'boolean') { + this.options.itemsAlwaysDraggable.item = options.itemsAlwaysDraggable; + this.options.itemsAlwaysDraggable.range = false; + } + else if (typeof options.itemsAlwaysDraggable === 'object') { + util.selectiveExtend(['item', 'range'], this.options.itemsAlwaysDraggable, options.itemsAlwaysDraggable); + // only allow range always draggable when item is always draggable as well + if (! this.options.itemsAlwaysDraggable.item) { + this.options.itemsAlwaysDraggable.range = false; + } + } + } + if ('orientation' in options) { if (typeof options.orientation === 'string') { this.options.orientation.item = options.orientation === 'top' ? 'top' : 'bottom'; @@ -1285,7 +1302,7 @@ ItemSet.prototype._onDragStart = function (event) { var me = this; var props; - if (item && (item.selected || this.options.itemsAlwaysDraggable)) { + if (item && (item.selected || this.options.itemsAlwaysDraggable.item)) { if (this.options.editable.overrideItems && !this.options.editable.updateTime && @@ -1327,7 +1344,7 @@ ItemSet.prototype._onDragStart = function (event) { else { var baseGroupIndex = this._getGroupIndex(item.data.group); - var itemsToDrag = (this.options.itemsAlwaysDraggable && !item.selected) ? [item.id] : this.getSelection(); + var itemsToDrag = (this.options.itemsAlwaysDraggable.item && !item.selected) ? [item.id] : this.getSelection(); this.touchParams.itemProps = itemsToDrag.map(function (id) { var item = me.items[id]; diff --git a/lib/timeline/component/item/Item.js b/lib/timeline/component/item/Item.js index 9bfa662d..cb16b766 100644 --- a/lib/timeline/component/item/Item.js +++ b/lib/timeline/component/item/Item.js @@ -169,8 +169,13 @@ Item.prototype._repaintDragCenter = function () { }); if (this.dom.box) { - this.dom.box.appendChild(dragCenter); - } + if (this.dom.dragLeft) { + this.dom.box.insertBefore(dragCenter, this.dom.dragLeft); + } + else { + this.dom.box.appendChild(dragCenter); + } + } else if (this.dom.point) { this.dom.point.appendChild(dragCenter); } diff --git a/lib/timeline/component/item/RangeItem.js b/lib/timeline/component/item/RangeItem.js index 7deaf74c..0af637cc 100644 --- a/lib/timeline/component/item/RangeItem.js +++ b/lib/timeline/component/item/RangeItem.js @@ -291,7 +291,7 @@ RangeItem.prototype.repositionY = function() { * @protected */ RangeItem.prototype._repaintDragLeft = function () { - if (this.selected && this.options.editable.updateTime && !this.dom.dragLeft) { + if ((this.selected || this.options.itemsAlwaysDraggable.range) && this.options.editable.updateTime && !this.dom.dragLeft) { // create and show drag area var dragLeft = document.createElement('div'); dragLeft.className = 'vis-drag-left'; @@ -300,7 +300,7 @@ RangeItem.prototype._repaintDragLeft = function () { this.dom.box.appendChild(dragLeft); this.dom.dragLeft = dragLeft; } - else if (!this.selected && this.dom.dragLeft) { + else if (!this.selected && !this.options.itemsAlwaysDraggable.range && this.dom.dragLeft) { // delete drag area if (this.dom.dragLeft.parentNode) { this.dom.dragLeft.parentNode.removeChild(this.dom.dragLeft); @@ -314,7 +314,7 @@ RangeItem.prototype._repaintDragLeft = function () { * @protected */ RangeItem.prototype._repaintDragRight = function () { - if (this.selected && this.options.editable.updateTime && !this.dom.dragRight) { + if ((this.selected || this.options.itemsAlwaysDraggable.range) && this.options.editable.updateTime && !this.dom.dragRight) { // create and show drag area var dragRight = document.createElement('div'); dragRight.className = 'vis-drag-right'; @@ -323,7 +323,7 @@ RangeItem.prototype._repaintDragRight = function () { this.dom.box.appendChild(dragRight); this.dom.dragRight = dragRight; } - else if (!this.selected && this.dom.dragRight) { + else if (!this.selected && !this.options.itemsAlwaysDraggable.range && this.dom.dragRight) { // delete drag area if (this.dom.dragRight.parentNode) { this.dom.dragRight.parentNode.removeChild(this.dom.dragRight); diff --git a/lib/timeline/optionsTimeline.js b/lib/timeline/optionsTimeline.js index 56df9c63..254cfa8c 100644 --- a/lib/timeline/optionsTimeline.js +++ b/lib/timeline/optionsTimeline.js @@ -89,7 +89,11 @@ let allOptions = { repeat: {string}, __type__: {object, array} }, - itemsAlwaysDraggable: { 'boolean': bool}, + itemsAlwaysDraggable: { + item: { 'boolean': bool, 'undefined': 'undefined'}, + range: { 'boolean': bool, 'undefined': 'undefined'}, + __type__: { 'boolean': bool, object} + }, locale:{string}, locales:{ __any__: {any},