Browse Source

More editable control of timeline items (#2305)

* Fixed bug introduced in #2284 where overrideItems is set to true when boolean is provided
* Added the option of supplying object to item.editable with updateTime, updateGroup, and remove functioning similarly to timeline.editable but only on a single item
* Updated Documentation to reflect the new feature
* Updated the individualEditableItems example page to show feature usage.
codeClimate
Simon Morris 8 years ago
committed by Alexander Wunschik
parent
commit
baa6f9fdb1
4 changed files with 74 additions and 33 deletions
  1. +23
    -4
      docs/timeline/index.html
  2. +14
    -9
      examples/timeline/editing/individualEditableItems.html
  3. +11
    -10
      lib/timeline/component/ItemSet.js
  4. +26
    -10
      lib/timeline/component/item/Item.js

+ 23
- 4
docs/timeline/index.html View File

@ -237,7 +237,7 @@ var items = new vis.DataSet([
The item properties are defined as:
</p>
<table class="properties">
<table class="properties" id="itemOptionTable">
<tr>
<th>Name</th>
<th>Type</th>
@ -335,11 +335,30 @@ var items = new vis.DataSet([
Types 'box' and 'point' need a start date, the types 'range' and 'background' needs both a start and end date.
</td>
</tr>
<tr>
<td>editable</td>
<td>Boolean</td>
<tr class='toggle collapsible' onclick="toggleTable('itemOptionTable', 'itemEditable', this);">
<td><span parent="itemEditable" class="right-caret"></span> editable</td>
<td>Boolean or Object</td>
<td>no</td>
<td>Override the editable option of the timeline for a specific item (assuming <code>timeline.editable.overrideItems</code> is false).</td>
</tr>
<tr parent="itemEditable" class="hidden">
<td class="indent">editable.remove</td>
<td>boolean</td>
<td>no</td>
<td>If true, item can be deleted by first selecting it, and then clicking the delete button on the top right of the item. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
</tr>
<tr parent="itemEditable" class="hidden">
<td class="indent">editable.updateGroup</td>
<td>boolean</td>
<td>no</td>
<td>If true, item can be dragged from one group to another. Only applicable when the Timeline has groups. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
</tr>
<tr parent="itemEditable" class="hidden">
<td class="indent">editable.updateTime</td>
<td>boolean</td>
<td>no</td>
<td>If true, items can be dragged to another moment int time. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
</tr>
</table>
<h3 id="groups">Groups</h3>

+ 14
- 9
examples/timeline/editing/individualEditableItems.html View File

@ -34,16 +34,21 @@
<div id="visualization"></div>
<script>
// create groups to highligh groupUpdate
var groups = new vis.DataSet([
{id: 1, content: 'Group 1'},
{id: 2, content: 'Group 2'}
]);
// create a DataSet with items
var items = new vis.DataSet([
{id: 1, content: 'Editable', editable: true, start: '2010-08-23'},
{id: 2, content: 'Editable', editable: true, start: '2010-08-23T23:00:00'},
{id: 3, content: 'Read-only', editable: false, start: '2010-08-24T16:00:00'},
{id: 4, content: 'Read-only', editable: false, start: '2010-08-26', end: '2010-09-02'},
{id: 5, content: 'Editable', editable: true, start: '2010-08-28'},
{id: 6, content: 'Read-only', editable: false, start: '2010-08-29'},
{id: 7, content: 'Editable', editable: true, start: '2010-08-31', end: '2010-09-03'},
{id: 8, content: 'Read-only', editable: false, start: '2010-09-04T12:00:00'}
{id: 1, content: 'Editable', editable: true, start: '2010-08-23', group: 1},
{id: 2, content: 'Editable', editable: true, start: '2010-08-23T23:00:00', group: 2},
{id: 3, content: 'Read-only', editable: false, start: '2010-08-24T16:00:00', group: 1},
{id: 4, content: 'Read-only', editable: false, start: '2010-08-26', end: '2010-09-02', group: 2},
{id: 5, content: 'Edit Time Only', editable: { updateTime: true }, start: '2010-08-28', group: 1},
{id: 6, content: 'Edit Group Only', editable: { updateGroup: true }, start: '2010-08-29', group: 2},
{id: 7, content: 'Remove Only', editable: { remove: true }, start: '2010-08-31', end: '2010-09-03', group: 1},
{id: 8, content: 'Default', start: '2010-09-04T12:00:00', group: 2}
]);
var container = document.getElementById('visualization');
@ -51,7 +56,7 @@
editable: true // default for all items
};
var timeline = new vis.Timeline(container, items, options);
var timeline = new vis.Timeline(container, items, groups, options);
</script>
</body>

+ 11
- 10
lib/timeline/component/ItemSet.js View File

@ -361,7 +361,7 @@ ItemSet.prototype.setOptions = function(options) {
this.options.editable.updateGroup = options.editable;
this.options.editable.add = options.editable;
this.options.editable.remove = options.editable;
this.options.editable.overrideItems = options.editable;
this.options.editable.overrideItems = false;
}
else if (typeof options.editable === 'object') {
util.selectiveExtend(['updateTime', 'updateGroup', 'add', 'remove', 'overrideItems'], this.options.editable, options.editable);
@ -1225,8 +1225,8 @@ ItemSet.prototype._onDragStart = function (event) {
}
// override options.editable
if ((item.editable === false || !item.editable)
&& !this.options.editable.overrideItems) {
if ((item.editable != null && !item.editable.updateTime && !item.editable.updateGroup)
&& !this.options.editable.overrideItems) {
return;
}
@ -1361,8 +1361,8 @@ ItemSet.prototype._onDrag = function (event) {
//only calculate the new group for the item that's actually dragged
var selectedItem = this.touchParams.selectedItem;
var updateGroupAllowed = me.options.editable.updateGroup ||
(!this.options.editable.overrideItems && selectedItem.editable === true);
var updateGroupAllowed = ((this.options.editable.overrideItems || selectedItem.editable == null) && this.options.editable.updateGroup) ||
(!this.options.editable.overrideItems && selectedItem.editable != null && selectedItem.editable.updateGroup);
var newGroupBase = null;
if (updateGroupAllowed && selectedItem) {
if (selectedItem.data.group != undefined) {
@ -1388,12 +1388,15 @@ ItemSet.prototype._onDrag = function (event) {
}
var itemData = this._cloneItemData(props.item.data); // clone the data
if (props.item.editable === false && !me.options.editable.overrideItems) {
if (props.item.editable != null
&& !props.item.editable.updateTime
&& !props.item.editable.updateGroup
&& !me.options.editable.overrideItems) {
return;
}
var updateTimeAllowed = me.options.editable.updateTime || (
props.item.editable === true && !me.options.editable.overrideItems);
var updateTimeAllowed = ((this.options.editable.overrideItems || selectedItem.editable == null) && this.options.editable.updateTime) ||
(!this.options.editable.overrideItems && selectedItem.editable != null && selectedItem.editable.updateTime);
if (updateTimeAllowed) {
if (props.dragLeft) {
// drag left side of a range item
@ -1456,8 +1459,6 @@ ItemSet.prototype._onDrag = function (event) {
}
}
var updateGroupAllowed = me.options.editable.updateGroup ||
props.item.editable === true;
if (updateGroupAllowed && (!props.dragLeft && !props.dragRight) && newGroupBase!=null) {
if (itemData.group != undefined) {

+ 26
- 10
lib/timeline/component/item/Item.js View File

@ -30,10 +30,18 @@ function Item (data, conversion, options) {
this.height = null;
this.editable = null;
if (this.data &&
this.data.hasOwnProperty('editable') &&
typeof this.data.editable === 'boolean') {
this.editable = data.editable;
if (this.data && this.data.hasOwnProperty('editable')){
if(typeof this.data.editable === 'boolean') {
this.editable = {
updateTime: this.data.editable,
updateGroup: this.data.editable,
remove: this.data.editable
}
}
else if(typeof options.editable === 'object') {
this.editable = {};
util.selectiveExtend(['updateTime', 'updateGroup', 'remove'], this.editable, data.editable);
};
}
}
@ -68,8 +76,18 @@ Item.prototype.setData = function(data) {
this.parent.itemSet._moveToGroup(this, data.group);
}
if (data.hasOwnProperty('editable') && typeof data.editable === 'boolean') {
this.editable = data.editable;
if (data.hasOwnProperty('editable')){
if (typeof data.editable === 'boolean') {
this.editable = {
updateTime: this.data.editable,
updateGroup: this.data.editable,
remove: this.data.editable
}
}
else if(typeof options.editable === 'object') {
this.editable = {};
util.selectiveExtend(['updateTime', 'updateGroup', 'remove'], this.editable, data.editable);
}
}
this.data = data;
@ -182,10 +200,8 @@ Item.prototype._repaintDragCenter = function () {
* @protected
*/
Item.prototype._repaintDeleteButton = function (anchor) {
var editable = (this.options.editable.remove &&
this.options.editable.overrideItems)
|| (this.data.editable === true &&
!this.options.editable.overrideItems);
var editable = ((this.options.editable.overrideItems || this.editable == null) && this.options.editable.remove) ||
(!this.options.editable.overrideItems && this.editable != null && this.editable.remove);
if (this.selected && editable && !this.dom.deleteButton) {
// create and show button

Loading…
Cancel
Save