diff --git a/src/timeline/component/GroupSet.js b/src/timeline/component/GroupSet.js index c5a0d5f2..e02c6526 100644 --- a/src/timeline/component/GroupSet.js +++ b/src/timeline/component/GroupSet.js @@ -58,10 +58,10 @@ GroupSet.prototype = new Panel(); */ GroupSet.prototype._create = function _create () { // TODO: reimplement groupSet DOM elements - var groupSet = document.createElement('div'); - groupSet.className = 'groupset'; - groupSet['timeline-groupset'] = this; - this.dom.groupSet = groupSet; + var frame = document.createElement('div'); + frame.className = 'groupset'; + frame['timeline-groupset'] = this; + this.frame = frame; this.labelSet = new Panel({ className: 'labelSet', @@ -76,7 +76,7 @@ GroupSet.prototype._create = function _create () { * @returns {null} Get frame is not supported by GroupSet */ GroupSet.prototype.getFrame = function getFrame() { - return null; + return this.frame; }; /** @@ -244,7 +244,7 @@ GroupSet.prototype.repaint = function repaint() { asString = util.option.asString, options = this.options, orientation = this.getOption('orientation'), - groupSet = this.dom.groupSet, + frame = this.frame, resized = false, me = this, queue = this.queue, @@ -272,7 +272,7 @@ GroupSet.prototype.repaint = function repaint() { // TODO: do not recreate the group with every update - group = new Group(me.contentPanel, me.labelSet.frame, id, groupOptions); + group = new Group(me, 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 @@ -349,20 +349,12 @@ GroupSet.prototype.repaint = function repaint() { } // update classname - groupSet.className = 'groupset' + (options.className ? (' ' + asString(options.className)) : ''); - - // reposition groupSet frame - groupSet.style.top = asSize((orientation == 'top') ? '0' : ''); - groupSet.style.bottom = asSize((orientation == 'top') ? '' : '0'); - groupSet.style.left = asSize(options.left, ''); - groupSet.style.right = asSize(options.right, ''); - groupSet.style.width = asSize(options.width, '100%'); - groupSet.style.height = asSize(height); + frame.className = 'groupset' + (options.className ? (' ' + asString(options.className)) : ''); // calculate actual size and position - this.top = groupSet.offsetTop; - this.left = groupSet.offsetLeft; - this.width = groupSet.offsetWidth; + this.top = frame.offsetTop; + this.left = frame.offsetLeft; + this.width = frame.offsetWidth; this.height = height; return resized; @@ -443,7 +435,7 @@ GroupSet.prototype._onRemove = function _onRemove(ids) { * @param {String} action can be 'add', 'update', 'remove' */ GroupSet.prototype._toQueue = function _toQueue(ids, action) { - // TODO: remove this queuing thing, immediately apply it + // TODO: remove this queuing thing, immediately apply changes var queue = this.queue; ids.forEach(function (id) { diff --git a/src/timeline/component/Panel.js b/src/timeline/component/Panel.js index b5e010cd..4b7378a4 100644 --- a/src/timeline/component/Panel.js +++ b/src/timeline/component/Panel.js @@ -15,6 +15,9 @@ function Panel(options) { this.childs = []; this.options = options || {}; + + // create frame + this.frame = document.createElement('div'); } Panel.prototype = new Component(); @@ -35,15 +38,7 @@ Panel.prototype.setOptions = Component.prototype.setOptions; * @returns {HTMLElement} frame */ Panel.prototype.getFrame = function () { - var frame = this.frame; - - // create frame - if (!frame) { - frame = document.createElement('div'); - this.frame = frame; - } - - return frame; + return this.frame; }; /** @@ -54,11 +49,6 @@ Panel.prototype.appendChild = function (child) { this.childs.push(child); child.parent = this; - if (!child.getFrame) { - console.log(child); - - } - // attach to the DOM var frame = child.getFrame(); if (frame) { diff --git a/src/timeline/component/css/groupset.css b/src/timeline/component/css/groupset.css index e401efb8..cf0dafb0 100644 --- a/src/timeline/component/css/groupset.css +++ b/src/timeline/component/css/groupset.css @@ -1,11 +1,11 @@ -.vis.timeline .groupset { +/* TODO: cleanup +.vis.timeline .groupSet { position: relative; padding: 0; margin: 0; } -/* TODO: cleanup .vis.timeline .labels { position: absolute; top: 0;