jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

timeline - items always draggable upgrade for range (#3073) 

Awesome work! Thanks again!
gemini
Ondřej Exner 7 years ago
committed by yotamberk
parent
87cd18230d
commit
28abf0a5df
6 changed files with 89 additions and 13 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +14
    -2
      docs/timeline/index.html
  2. +38
    -0
      examples/timeline/editing/itemsAlwaysDraggable.html
  3. +21
    -4
      lib/timeline/component/ItemSet.js
  4. +7
    -2
      lib/timeline/component/item/Item.js
  5. +4
    -4
      lib/timeline/component/item/RangeItem.js
  6. +5
    -1
      lib/timeline/optionsTimeline.js

+ 14
- 2
docs/timeline/index.html View File

@ -729,12 +729,24 @@ function (option, path) {
</td> </td>
</tr> </tr>
<tr>
<td>itemsAlwaysDraggable</td>
<tr class='toggle collapsible' onclick="toggleTable('optionTable','itemsAlwaysDraggable', this);">
<td><span parent="itemsAlwaysDraggable" class="right-caret"></span> itemsAlwaysDraggable</td>
<td>boolean or Object</td>
<td>Object</td>
<td>When a boolean, applies the value only to <code>itemsAlwaysDraggable.item</code>.</td>
</tr>
<tr parent="itemsAlwaysDraggable" class="hidden">
<td class="indent">itemsAlwaysDraggable.item</td>
<td>boolean</td> <td>boolean</td>
<td><code>false</code></td> <td><code>false</code></td>
<td>If true, all items in the Timeline are draggable without being selected. If false, only the selected item(s) are draggable.</td> <td>If true, all items in the Timeline are draggable without being selected. If false, only the selected item(s) are draggable.</td>
</tr> </tr>
<tr parent="itemsAlwaysDraggable" class="hidden">
<td class="indent">itemsAlwaysDraggable.range</td>
<td>boolean</td>
<td><code>false</code></td>
<td>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 <code>itemsAlwaysDraggable.item</code> is set <code>true</code>. </td>
</tr>
<tr> <tr>
<td>locale</td> <td>locale</td>

+ 38
- 0
examples/timeline/editing/itemsAlwaysDraggable.html View File

@ -0,0 +1,38 @@
<html>
<head>
<title>Timeline | itemsAlwaysDraggable Option</title>
<meta charset="utf-8">
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>The <code>itemsAlwaysDraggable</code> option allows to drag items around without first selecting them. When <code>itemsAlwaysDraggable.range</code> is set to <code>true</code>, the range can be changed without selection as well.</p>
<div id="mytimeline"></div>
<script>
var container = document.getElementById('mytimeline'),
items = new vis.DataSet();
for (var i = 10; i >= 0; i--) {
var start = new Date(new Date().getTime() + i * 100000);
items.add({
id: i,
content: "item " + i,
start: start,
end: new Date(start.getTime() + 100000)
});
}
var options = {
start: new Date(),
end: new Date(new Date().getTime() + 1000000),
editable: true,
itemsAlwaysDraggable: {
item: true,
range: true
}
};
var timeline = new vis.Timeline(container, items, null, options);
</script>
</body>
</html>

+ 21
- 4
lib/timeline/component/ItemSet.js View File

@ -44,7 +44,10 @@ function ItemSet(body, options) {
selectable: true, selectable: true,
multiselect: false, multiselect: false,
itemsAlwaysDraggable: false,
itemsAlwaysDraggable: {
item: false,
range: false,
},
editable: { editable: {
updateTime: false, updateTime: false,
@ -336,12 +339,26 @@ ItemSet.prototype.setOptions = function(options) {
if (options) { if (options) {
// copy all options that we know // copy all options that we know
var fields = [ 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', 'multiselectPerGroup', 'groupOrder', 'dataAttributes', 'template', 'groupTemplate', 'visibleFrameTemplate',
'hide', 'snap', 'groupOrderSwap', 'showTooltips', 'tooltip', 'tooltipOnItemUpdateTime' 'hide', 'snap', 'groupOrderSwap', 'showTooltips', 'tooltip', 'tooltipOnItemUpdateTime'
]; ];
util.selectiveExtend(fields, this.options, options); 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 ('orientation' in options) {
if (typeof options.orientation === 'string') { if (typeof options.orientation === 'string') {
this.options.orientation.item = options.orientation === 'top' ? 'top' : 'bottom'; this.options.orientation.item = options.orientation === 'top' ? 'top' : 'bottom';
@ -1285,7 +1302,7 @@ ItemSet.prototype._onDragStart = function (event) {
var me = this; var me = this;
var props; var props;
if (item && (item.selected || this.options.itemsAlwaysDraggable)) {
if (item && (item.selected || this.options.itemsAlwaysDraggable.item)) {
if (this.options.editable.overrideItems && if (this.options.editable.overrideItems &&
!this.options.editable.updateTime && !this.options.editable.updateTime &&
@ -1327,7 +1344,7 @@ ItemSet.prototype._onDragStart = function (event) {
else { else {
var baseGroupIndex = this._getGroupIndex(item.data.group); 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) { this.touchParams.itemProps = itemsToDrag.map(function (id) {
var item = me.items[id]; var item = me.items[id];

+ 7
- 2
lib/timeline/component/item/Item.js View File

@ -169,8 +169,13 @@ Item.prototype._repaintDragCenter = function () {
}); });
if (this.dom.box) { 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) { else if (this.dom.point) {
this.dom.point.appendChild(dragCenter); this.dom.point.appendChild(dragCenter);
} }

+ 4
- 4
lib/timeline/component/item/RangeItem.js View File

@ -291,7 +291,7 @@ RangeItem.prototype.repositionY = function() {
* @protected * @protected
*/ */
RangeItem.prototype._repaintDragLeft = function () { 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 // create and show drag area
var dragLeft = document.createElement('div'); var dragLeft = document.createElement('div');
dragLeft.className = 'vis-drag-left'; dragLeft.className = 'vis-drag-left';
@ -300,7 +300,7 @@ RangeItem.prototype._repaintDragLeft = function () {
this.dom.box.appendChild(dragLeft); this.dom.box.appendChild(dragLeft);
this.dom.dragLeft = 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 // delete drag area
if (this.dom.dragLeft.parentNode) { if (this.dom.dragLeft.parentNode) {
this.dom.dragLeft.parentNode.removeChild(this.dom.dragLeft); this.dom.dragLeft.parentNode.removeChild(this.dom.dragLeft);
@ -314,7 +314,7 @@ RangeItem.prototype._repaintDragLeft = function () {
* @protected * @protected
*/ */
RangeItem.prototype._repaintDragRight = function () { 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 // create and show drag area
var dragRight = document.createElement('div'); var dragRight = document.createElement('div');
dragRight.className = 'vis-drag-right'; dragRight.className = 'vis-drag-right';
@ -323,7 +323,7 @@ RangeItem.prototype._repaintDragRight = function () {
this.dom.box.appendChild(dragRight); this.dom.box.appendChild(dragRight);
this.dom.dragRight = 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 // delete drag area
if (this.dom.dragRight.parentNode) { if (this.dom.dragRight.parentNode) {
this.dom.dragRight.parentNode.removeChild(this.dom.dragRight); this.dom.dragRight.parentNode.removeChild(this.dom.dragRight);

+ 5
- 1
lib/timeline/optionsTimeline.js View File

@ -89,7 +89,11 @@ let allOptions = {
repeat: {string}, repeat: {string},
__type__: {object, array} __type__: {object, array}
}, },
itemsAlwaysDraggable: { 'boolean': bool},
itemsAlwaysDraggable: {
item: { 'boolean': bool, 'undefined': 'undefined'},
range: { 'boolean': bool, 'undefined': 'undefined'},
__type__: { 'boolean': bool, object}
},
locale:{string}, locale:{string},
locales:{ locales:{
__any__: {any}, __any__: {any},

Write Preview
Loading…
Cancel
Save