Browse Source

neatly applying option editable everywhere

css_transitions
josdejong 10 years ago
parent
commit
285257e6fc
6 changed files with 19 additions and 9 deletions
  1. +6
    -1
      src/timeline/Timeline.js
  2. +5
    -4
      src/timeline/component/ItemSet.js
  3. +2
    -1
      src/timeline/component/RootPanel.js
  4. +3
    -0
      src/timeline/component/css/item.css
  5. +1
    -1
      src/timeline/component/item/Item.js
  6. +2
    -2
      src/timeline/component/item/ItemRange.js

+ 6
- 1
src/timeline/Timeline.js View File

@ -33,7 +33,7 @@ function Timeline (container, items, options) {
onUpdate: function (item, callback) { onUpdate: function (item, callback) {
callback(item); callback(item);
}, },
onMoved: function (item, callback) {
onMove: function (item, callback) {
callback(item); callback(item);
}, },
onRemove: function (item, callback) { onRemove: function (item, callback) {
@ -193,6 +193,10 @@ Timeline.prototype.setOptions = function (options) {
// both start and end are optional // both start and end are optional
this.range.setRange(options.start, options.end); this.range.setRange(options.start, options.end);
if ('editable' in options || 'selectable' in options) {
// TODO: update current selection according to changed options
}
this.controller.reflow(); this.controller.reflow();
this.controller.repaint(); this.controller.repaint();
}; };
@ -445,6 +449,7 @@ Timeline.prototype._onSelectItem = function (event) {
*/ */
Timeline.prototype._onAddItem = function (event) { Timeline.prototype._onAddItem = function (event) {
if (!this.options.selectable) return; if (!this.options.selectable) return;
if (!this.options.editable) return;
var me = this, var me = this,
item = ItemSet.itemFromTarget(event); item = ItemSet.itemFromTarget(event);

+ 5
- 4
src/timeline/component/ItemSet.js View File

@ -779,7 +779,9 @@ ItemSet.prototype._onDragEnd = function (event) {
if (this.touchParams.itemProps) { if (this.touchParams.itemProps) {
// prepare a change set for the changed items // prepare a change set for the changed items
var changes = [], var changes = [],
me = this;
me = this,
dataset = this._myDataSet(),
type;
this.touchParams.itemProps.forEach(function (props) { this.touchParams.itemProps.forEach(function (props) {
var id = props.item.id, var id = props.item.id,
@ -788,11 +790,11 @@ ItemSet.prototype._onDragEnd = function (event) {
var changed = false; var changed = false;
if ('start' in props.item.data) { if ('start' in props.item.data) {
changed = (props.start != props.item.data.start.valueOf()); changed = (props.start != props.item.data.start.valueOf());
item.start = util.convert(props.item.data.start, me.itemsData.convert['start']);
item.start = util.convert(props.item.data.start, dataset.convert['start']);
} }
if ('end' in props.item.data) { if ('end' in props.item.data) {
changed = changed || (props.end != props.item.data.end.valueOf()); changed = changed || (props.end != props.item.data.end.valueOf());
item.end = util.convert(props.item.data.end, me.itemsData.convert['end']);
item.end = util.convert(props.item.data.end, dataset.convert['end']);
} }
// only apply changes when start or end is actually changed // only apply changes when start or end is actually changed
@ -815,7 +817,6 @@ ItemSet.prototype._onDragEnd = function (event) {
// apply the changes to the data (if there are changes) // apply the changes to the data (if there are changes)
if (changes.length) { if (changes.length) {
var dataset = this._myDataSet();
dataset.update(changes); dataset.update(changes);
} }

+ 2
- 1
src/timeline/component/RootPanel.js View File

@ -77,7 +77,8 @@ RootPanel.prototype.repaint = function () {
changed += 1; changed += 1;
} }
frame.className = 'vis timeline rootpanel ' + options.orientation;
frame.className = 'vis timeline rootpanel ' + options.orientation +
(options.editable ? ' editable' : '');
var className = options.className; var className = options.className;
if (className) { if (className) {
util.addClassName(frame, util.option.asString(className)); util.addClassName(frame, util.option.asString(className));

+ 3
- 0
src/timeline/component/css/item.css View File

@ -12,6 +12,9 @@
border-color: #FFC200; border-color: #FFC200;
background-color: #FFF785; background-color: #FFF785;
z-index: 999; z-index: 999;
}
.vis.timeline.editable .item.selected {
cursor: move; cursor: move;
} }

+ 1
- 1
src/timeline/component/item/Item.js View File

@ -87,7 +87,7 @@ Item.prototype.setOffset = function setOffset(offset) {
* @private * @private
*/ */
Item.prototype._repaintDeleteButton = function (anchor) { Item.prototype._repaintDeleteButton = function (anchor) {
if (this.selected && !this.dom.deleteButton) {
if (this.selected && this.options.editable && !this.dom.deleteButton) {
// create and show button // create and show button
var parent = this.parent; var parent = this.parent;
var id = this.id; var id = this.id;

+ 2
- 2
src/timeline/component/item/ItemRange.js View File

@ -259,7 +259,7 @@ ItemRange.prototype.reposition = function reposition() {
* @private * @private
*/ */
ItemRange.prototype._repaintDragLeft = function () { ItemRange.prototype._repaintDragLeft = function () {
if (this.selected && !this.dom.dragLeft) {
if (this.selected && this.options.editable && !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 = 'drag-left'; dragLeft.className = 'drag-left';
@ -289,7 +289,7 @@ ItemRange.prototype._repaintDragLeft = function () {
* @private * @private
*/ */
ItemRange.prototype._repaintDragRight = function () { ItemRange.prototype._repaintDragRight = function () {
if (this.selected && !this.dom.dragRight) {
if (this.selected && this.options.editable && !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 = 'drag-right'; dragRight.className = 'drag-right';

Loading…
Cancel
Save