diff --git a/src/timeline/Timeline.js b/src/timeline/Timeline.js index 616bd655..946a1fc8 100644 --- a/src/timeline/Timeline.js +++ b/src/timeline/Timeline.js @@ -398,7 +398,7 @@ Timeline.prototype.setGroups = function(groupSet) { // remove itemset if existing if (this.itemSet) { - this.itemSet.hide(); // TODO: not so nice having to hide here + //this.itemSet.hide(); // TODO: not so nice having to hide here this.contentPanel.removeChild(this.itemSet); this.itemSet.setItems(); // disconnect from itemset this.itemSet = null; diff --git a/src/timeline/component/Component.js b/src/timeline/component/Component.js index ad0919a1..437e8015 100644 --- a/src/timeline/component/Component.js +++ b/src/timeline/component/Component.js @@ -70,36 +70,6 @@ Component.prototype.repaint = function repaint() { return false; }; -/** - * Hide the component from the DOM - * @return {Boolean} changed - */ -// TODO: remove hide and show -Component.prototype.hide = function hide() { - if (this.frame && this.frame.parentNode) { - this.frame.parentNode.removeChild(this.frame); - return true; - } - else { - return false; - } -}; - -/** - * Show the component in the DOM (when not already visible). - * A repaint will be executed when the component is not visible - * @return {Boolean} changed - */ -// TODO: remove hide and show -Component.prototype.show = function show() { - if (!this.frame || !this.frame.parentNode) { - return this.repaint(); - } - else { - return false; - } -}; - /** * Test whether the component is resized since the last time _isResized() was * called. diff --git a/src/timeline/component/Group.js b/src/timeline/component/Group.js index 7e78e5ee..6595b056 100644 --- a/src/timeline/component/Group.js +++ b/src/timeline/component/Group.js @@ -1,16 +1,16 @@ /** * @constructor Group - * @param {Panel} contentPanel - * @param {Panel} labelPanel + * @param {Panel} contentPanel // TODO: replace with a HTML Element + * @param {Element} labelFrame * @param {Number | String} groupId * @param {Object} [options] Options to set initial property values * // TODO: describe available options * @extends Component */ -function Group (contentPanel, labelPanel, groupId, options) { +function Group (contentPanel, labelFrame, groupId, options) { this.id = util.randomUUID(); this.contentPanel = contentPanel; - this.labelPanel = labelPanel; + this.labelFrame = labelFrame; this.groupId = groupId; this.itemSet = null; // ItemSet @@ -54,14 +54,6 @@ Group.prototype._create = function() { this.dom.inner = inner; }; -/** - * Get the HTML DOM label of this group - * @returns {Element} label - */ -Group.prototype.getLabel = function getLabel() { - return this.dom.label; -}; - /** * Set the group data for this group * @param {Object} data Group data, can contain properties content and className @@ -94,7 +86,6 @@ Group.prototype.setData = function setData(data) { Group.prototype.setItems = function setItems(itemSet) { if (this.itemSet) { // remove current item set - this.itemSet.hide(); this.itemSet.setItems(); this.contentPanel.removeChild(this.itemSet); this.itemSet = null; @@ -119,11 +110,28 @@ Group.prototype.setItems = function setItems(itemSet) { } }; +/** + * hide the group, detach from DOM if needed + */ +Group.prototype.show = function show() { + if (!this.dom.label.parentNode) { + this.labelFrame.appendChild(this.dom.label); + } + + if (!this.contentPanel.hasChild(this.itemSet)) { + this.contentPanel.appendChild(this.itemSet); + } +}; + /** * hide the group, detach from DOM if needed */ Group.prototype.hide = function hide() { - if (this.itemSet) this.itemSet.hide(); + if (this.dom.label.parentNode) { + this.dom.label.parentNode.removeChild(this.dom.label); + } + + this.contentPanel.removeChild(this.itemSet); }; /** @@ -160,6 +168,8 @@ Group.prototype.getSelection = function getSelection() { * @return {boolean} Returns true if the component is resized */ Group.prototype.repaint = function repaint() { + this.show(); + var resized = this.itemSet.repaint(); // TODO: top is redundant, cleanup diff --git a/src/timeline/component/GroupSet.js b/src/timeline/component/GroupSet.js index c720abc8..c5a0d5f2 100644 --- a/src/timeline/component/GroupSet.js +++ b/src/timeline/component/GroupSet.js @@ -245,7 +245,6 @@ GroupSet.prototype.repaint = function repaint() { options = this.options, orientation = this.getOption('orientation'), groupSet = this.dom.groupSet, - labelSet = this.labelSet, resized = false, me = this, queue = this.queue, @@ -273,7 +272,7 @@ GroupSet.prototype.repaint = function repaint() { // TODO: do not recreate the group with every update - group = new Group(me.contentPanel, me.labelPanel, id, groupOptions); + group = new Group(me.contentPanel, me.labelSet.frame, id, groupOptions); group.on('change', me.emit.bind(me, 'change')); // propagate change event group.setRange(me.range); group.setItems(me.itemsData); // attach items data @@ -290,6 +289,7 @@ GroupSet.prototype.repaint = function repaint() { case 'remove': if (group) { + group.hide(); group.setItems(); // detach items data delete groups[id]; } @@ -306,22 +306,10 @@ GroupSet.prototype.repaint = function repaint() { order: this.options.groupOrder }); - // (re)create the labels - // TODO: move label creation to Group - while (labelSet.frame.firstChild) { - labelSet.frame.removeChild(labelSet.firstChild); - } - for (i = 0; i < this.groupIds.length; i++) { - id = this.groupIds[i]; - label = this.groups[id].getLabel(); - labelSet.frame.appendChild(label); - } - // hide the groups now, they will be repainted later in this function // in correct order this.groupIds.forEach(function (id) { - // TODO: hide group here - //groups[id].hide(); + groups[id].hide(); }); resized = true; @@ -392,27 +380,15 @@ GroupSet.prototype.getLabelsWidth = function getLabelsWidth() { * Hide the component from the DOM */ GroupSet.prototype.hide = function hide() { - this.labelPanel.appendChild(this.labelSet); + // hide labelset + this.labelPanel.removeChild(this.labelSet); + // TODO: replace the following with a panel holding all itemsets, do not hide groups individually for (var groupId in this.groups) { if (this.groups.hasOwnProperty(groupId)) { - this.groups.hide(); + this.groups[groupId].hide(); } } - - // TODO: hide labelSet as well - - /* TODO: cleanup - var frame = this.dom.frame; - if (frame && frame.parentNode) { - frame.parentNode.removeChild(frame); - } - - var labels = this.dom.labels; - if (labels && labels.parentNode) { - labels.parentNode.removeChild(labels.parentNode); - } - */ }; /** @@ -421,11 +397,16 @@ GroupSet.prototype.hide = function hide() { * @return {Boolean} changed */ GroupSet.prototype.show = function show() { - if (!this.dom.frame || !this.dom.frame.parentNode) { - return this.repaint(); + // show label set + if (!this.labelPanel.hasChild(this.labelSet)) { + this.labelPanel.removeChild(this.labelSet); } - else { - return false; + + // TODO: replace the following with a panel holding all itemsets, do not show groups individually + for (var groupId in this.groups) { + if (this.groups.hasOwnProperty(groupId)) { + this.groups[groupId].show(); + } } }; diff --git a/src/timeline/component/ItemSet.js b/src/timeline/component/ItemSet.js index 451fbc1d..ff0c38ac 100644 --- a/src/timeline/component/ItemSet.js +++ b/src/timeline/component/ItemSet.js @@ -371,21 +371,6 @@ ItemSet.prototype.getAxis = function getAxis() { return this.dom.axis; }; -/** - * Hide this component from the DOM - */ -ItemSet.prototype.hide = function hide() { - // remove the DOM - if (this.frame && this.frame.parentNode) { - this.frame.parentNode.removeChild(this.frame); - } - /* TODO: cleanup - if (this.dom.axis && this.dom.axis.parentNode) { - this.dom.axis.parentNode.removeChild(this.dom.axis); - } - */ -}; - /** * Set items * @param {vis.DataSet | null} items diff --git a/src/timeline/component/Panel.js b/src/timeline/component/Panel.js index 5184f2e7..b5e010cd 100644 --- a/src/timeline/component/Panel.js +++ b/src/timeline/component/Panel.js @@ -54,10 +54,17 @@ Panel.prototype.appendChild = function (child) { this.childs.push(child); child.parent = this; - var frame = child.getFrame(); + if (!child.getFrame) { + console.log(child); + + } // attach to the DOM + var frame = child.getFrame(); if (frame) { + if (frame.parentNode) { + frame.parentNode.removeChild(frame); + } this.frame.appendChild(frame); } }; @@ -72,6 +79,15 @@ Panel.prototype.insertBefore = function (child, beforeChild) { if (index != -1) { this.childs.splice(index, 0, child); child.parent = this; + + // attach to the DOM + var frame = child.getFrame(); + if (frame) { + if (frame.parentNode) { + frame.parentNode.removeChild(frame); + } + this.frame.appendChild(frame); + } } }; @@ -83,15 +99,13 @@ Panel.prototype.removeChild = function (child) { var index = this.childs.indexOf(child); if (index != -1) { this.childs.splice(index, 1); - - var frame = child.getFrame(); + child.parent = null; // remove from the DOM + var frame = child.getFrame(); if (frame && frame.parentNode) { this.frame.removeChild(frame); } - - child.parent = null; } };