Browse Source

Halfway implementing Timeline.destroy

css_transitions
jos 10 years ago
parent
commit
ebb8626513
6 changed files with 118 additions and 7 deletions
  1. +57
    -6
      src/timeline/Timeline.js
  2. +7
    -0
      src/timeline/component/Component.js
  3. +11
    -1
      src/timeline/component/CurrentTime.js
  4. +13
    -0
      src/timeline/component/CustomTime.js
  5. +15
    -0
      src/timeline/component/ItemSet.js
  6. +15
    -0
      src/timeline/component/TimeAxis.js

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

@ -205,6 +205,53 @@ Timeline.prototype._create = function (container) {
container.appendChild(this.dom.root); container.appendChild(this.dom.root);
}; };
/**
* Destroy the Timeline, clean up all DOM elements and event listeners.
*/
Timeline.prototype.destroy = function () {
// unbind datasets
this.clear();
// remove all event listeners
this.off();
// stop checking for changed size
this._stopAutoResize();
// remove from DOM
if (this.dom.root.parentNode) {
this.dom.root.parentNode.removeChild(this.dom.root);
}
this.dom = null;
// cleanup hammer touch events
for (var event in this.listeners) {
if (this.listeners.hasOwnProperty(event)) {
this.hammer.off(event, this.listeners[event]);
}
}
this.listeners = null;
this.hammer = null;
// give all components the opportunity to cleanup
this.components.forEach(function (component) {
component.destroy();
});
// remove all components
this.components = [];
this.range = null;
this.timeAxis = null;
this.itemSet = null;
this.currentTime = null;
this.customTime = null;
//this.body.util.snap = null;
//this.body.util.toTime = null;
//this.body.util.toScreen = null;
this.body = null;
};
/** /**
* Set options. Options will be passed to all components loaded in the Timeline. * Set options. Options will be passed to all components loaded in the Timeline.
* @param {Object} [options] * @param {Object} [options]
@ -503,6 +550,8 @@ Timeline.prototype.redraw = function() {
props = this.props, props = this.props,
dom = this.dom; dom = this.dom;
if (!dom) return; // when destroyed
// update class names // update class names
dom.root.className = 'vis timeline root ' + options.orientation; dom.root.className = 'vis timeline root ' + options.orientation;
@ -680,7 +729,7 @@ Timeline.prototype._startAutoResize = function () {
this._stopAutoResize(); this._stopAutoResize();
function checkSize() {
this._onResize = function() {
if (me.options.autoResize != true) { if (me.options.autoResize != true) {
// stop watching when the option autoResize is changed to false // stop watching when the option autoResize is changed to false
me._stopAutoResize(); me._stopAutoResize();
@ -697,12 +746,12 @@ Timeline.prototype._startAutoResize = function () {
me.emit('change'); me.emit('change');
} }
} }
}
};
// TODO: automatically cleanup the event listener when the frame is deleted
util.addEventListener(window, 'resize', checkSize);
// add event listener to window resize
util.addEventListener(window, 'resize', this._onResize);
this.watchTimer = setInterval(checkSize, 1000);
this.watchTimer = setInterval(this._onResize, 1000);
}; };
/** /**
@ -715,7 +764,9 @@ Timeline.prototype._stopAutoResize = function () {
this.watchTimer = undefined; this.watchTimer = undefined;
} }
// TODO: remove event listener on window.resize
// remove event listener on window.resize
util.removeEventListener(window, 'resize', this._onResize);
this._onResize = null;
}; };
/** /**

+ 7
- 0
src/timeline/component/Component.js View File

@ -28,6 +28,13 @@ Component.prototype.redraw = function() {
return false; return false;
}; };
/**
* Destroy the component. Cleanup DOM and event listeners
*/
Component.prototype.destroy = function() {
// should be implemented by the component
};
/** /**
* Test whether the component is resized since the last time _isResized() was * Test whether the component is resized since the last time _isResized() was
* called. * called.

+ 11
- 1
src/timeline/component/CurrentTime.js View File

@ -37,6 +37,16 @@ CurrentTime.prototype._create = function() {
this.bar = bar; this.bar = bar;
}; };
/**
* Destroy the CurrentTime bar
*/
CurrentTime.prototype.destroy = function () {
this.options.showCurrentTime = false;
this.redraw(); // will remove the bar from the DOM and stop refreshing
this.body = null;
};
/** /**
* Set options for the component. Options will be merged in current options. * Set options for the component. Options will be merged in current options.
* @param {Object} options Available parameters: * @param {Object} options Available parameters:
@ -76,8 +86,8 @@ CurrentTime.prototype.redraw = function() {
// remove the line from the DOM // remove the line from the DOM
if (this.bar.parentNode) { if (this.bar.parentNode) {
this.bar.parentNode.removeChild(this.bar); this.bar.parentNode.removeChild(this.bar);
this.stop();
} }
this.stop();
} }
return false; return false;

+ 13
- 0
src/timeline/component/CustomTime.js View File

@ -68,6 +68,19 @@ CustomTime.prototype._create = function() {
this.hammer.on('dragend', this._onDragEnd.bind(this)); this.hammer.on('dragend', this._onDragEnd.bind(this));
}; };
/**
* Destroy the CustomTime bar
*/
CustomTime.prototype.destroy = function () {
this.options.showCustomTime = false;
this.redraw(); // will remove the bar from the DOM
this.hammer.enable(false);
this.hammer = null;
this.body = null;
};
/** /**
* Repaint the component * Repaint the component
* @return {boolean} Returns true if the component is resized * @return {boolean} Returns true if the component is resized

+ 15
- 0
src/timeline/component/ItemSet.js View File

@ -288,6 +288,21 @@ ItemSet.prototype.markDirty = function() {
this.stackDirty = true; this.stackDirty = true;
}; };
/**
* Destroy the ItemSet
*/
ItemSet.prototype.destroy = function() {
this.hide();
this.setItems(null);
this.setGroups(null);
this.hammer.enable(false);
this.hammer = null;
this.body = null;
this.conversion = null;
};
/** /**
* Hide the component from the DOM * Hide the component from the DOM
*/ */

+ 15
- 0
src/timeline/component/TimeAxis.js View File

@ -73,6 +73,21 @@ TimeAxis.prototype._create = function() {
this.dom.background.className = 'timeaxis background'; this.dom.background.className = 'timeaxis background';
}; };
/**
* Destroy the TimeAxis
*/
TimeAxis.prototype.destroy = function() {
// remove from DOM
if (this.dom.foreground.parentNode) {
this.dom.foreground.parentNode.removeChild(this.dom.foreground);
}
if (this.dom.background.parentNode) {
this.dom.background.parentNode.removeChild(this.dom.background);
}
this.body = null;
};
/** /**
* Repaint the component * Repaint the component
* @return {boolean} Returns true if the component is resized * @return {boolean} Returns true if the component is resized

Loading…
Cancel
Save