Browse Source

Group labels start to work again

css_transitions
josdejong 10 years ago
parent
commit
834de3bfdf
6 changed files with 30 additions and 113 deletions
  1. +7
    -10
      src/timeline/Timeline.js
  2. +0
    -70
      src/timeline/component/ContentPanel.js
  3. +15
    -32
      src/timeline/component/GroupSet.js
  4. +1
    -1
      src/timeline/component/RootPanel.js
  5. +6
    -0
      src/timeline/component/css/groupset.css
  6. +1
    -0
      src/timeline/component/css/panel.css

+ 7
- 10
src/timeline/Timeline.js View File

@ -85,17 +85,14 @@ function Timeline (container, items, options) {
bottom: null,
left: '0',
rigth: null,
height: null,
height: '100%',
width: function () {
/* TODO: dynamically determine the width of the label panel
if (me.content && typeof me.content.getLabelsWidth === 'function') {
return me.content.getLabelsWidth();
}
else {
return 0;
}
*/
return 200;
if (me.groupSet) {
return me.groupSet.getLabelsWidth();
}
else {
return 0;
}
}
});
this.labelPanel = new Panel(labelOptions);

+ 0
- 70
src/timeline/component/ContentPanel.js View File

@ -1,70 +0,0 @@
/**
* A content panel can contain a groupset or an itemset, and can handle
* vertical scrolling
* @param {Component} [parent]
* @param {Component[]} [depends] Components on which this components depends
* (except for the parent)
* @param {Object} [options] Available parameters:
* {String | Number | function} [left]
* {String | Number | function} [top]
* {String | Number | function} [width]
* {String | Number | function} [height]
* {String | function} [className]
* @constructor ContentPanel
* @extends Panel
*/
function ContentPanel(parent, depends, options) {
this.id = util.randomUUID();
this.parent = parent;
this.depends = depends;
this.options = options || {};
}
ContentPanel.prototype = new Component();
/**
* Set options. Will extend the current options.
* @param {Object} [options] Available parameters:
* {String | function} [className]
* {String | Number | function} [left]
* {String | Number | function} [top]
* {String | Number | function} [width]
* {String | Number | function} [height]
*/
ContentPanel.prototype.setOptions = Component.prototype.setOptions;
/**
* Get the container element of the panel, which can be used by a child to
* add its own widgets.
* @returns {HTMLElement} container
*/
ContentPanel.prototype.getContainer = function () {
return this.frame;
};
/**
* Repaint the component
*/
ContentPanel.prototype.repaint = function () {
var asString = util.option.asString,
options = this.options,
frame = this.frame;
// create frame
if (!frame) {
frame = document.createElement('div');
this.frame = frame;
if (!this.parent) throw new Error('Cannot repaint panel: no parent attached');
var parentContainer = this.parent.getContainer();
if (!parentContainer) throw new Error('Cannot repaint panel: parent has no container element');
parentContainer.appendChild(frame);
}
// update className
frame.className = 'content-panel' + (options.className ? (' ' + asString(options.className)) : '');
// update frame size
this._updateSize();
};

+ 15
- 32
src/timeline/component/GroupSet.js View File

@ -223,35 +223,24 @@ GroupSet.prototype.repaint = function repaint() {
var parentContainer = this.parent.getContainer();
if (!parentContainer) throw new Error('Cannot repaint GroupSet: parent has no container element');
parentContainer.appendChild(frame);
}
// update classname
frame.className = 'groupset' + (options.className ? (' ' + asString(options.className)) : '');
// create labels
var labelContainer = this.labelPanel.getContainer();
if (!labelContainer) throw new Error('Cannot repaint groupset: option "labelContainer" not defined');
/* TODO: labels
// create labels
var labelContainer = asElement(options.labelContainer);
if (!labelContainer) {
throw new Error('Cannot repaint groupset: option "labelContainer" not defined');
}
if (!labels) {
labels = document.createElement('div');
labels.className = 'labels';
labelContainer.appendChild(labels);
this.dom.labels = labels;
}
if (!labelSet) {
labelSet = document.createElement('div');
labelSet.className = 'label-set';
labels.appendChild(labelSet);
this.dom.labelSet = labelSet;
}
if (!labels.parentNode || labels.parentNode != labelContainer) {
if (labels.parentNode) {
labels.parentNode.removeChild(labels.parentNode);
}
labelContainer.appendChild(labels);
}
*/
// update classname
frame.className = 'groupset' + (options.className ? (' ' + asString(options.className)) : '');
var me = this,
queue = this.queue,
@ -302,9 +291,6 @@ GroupSet.prototype.repaint = function repaint() {
}
});
// the groupset depends on each of the groups
//this.depends = this.groups; // TODO: gives a circular reference through the parent
// update the top positions of the groups in the correct order
var orderedGroups = this.groupsData.getIds({
order: this.options.groupOrder
@ -323,7 +309,6 @@ GroupSet.prototype.repaint = function repaint() {
})(groups[orderedGroups[i]], groups[orderedGroups[i - 1]]);
}
/* TODO
// (re)create the labels
while (labelSet.firstChild) {
labelSet.removeChild(labelSet.firstChild);
@ -333,7 +318,6 @@ GroupSet.prototype.repaint = function repaint() {
label = this._createLabel(id);
labelSet.appendChild(label);
}
*/
}
// repaint all groups
@ -389,11 +373,9 @@ GroupSet.prototype.repaint = function repaint() {
this.width = frame.offsetWidth;
this.height = frame.offsetHeight;
/* TODO
// reposition labels
labelSet.style.top = asSize(options.top, '0');
labelSet.style.height = fixedHeight ? asSize(options.height) : this.height + 'px';
*/
};
/**
@ -446,15 +428,16 @@ GroupSet.prototype.getLabelsWidth = function getContainer() {
/**
* Hide the component from the DOM
* @return {Boolean} changed
*/
GroupSet.prototype.hide = function hide() {
if (this.dom.frame && this.dom.frame.parentNode) {
this.dom.frame.parentNode.removeChild(this.dom.frame);
return true;
var frame = this.dom.frame;
if (frame && frame.parentNode) {
frame.parentNode.removeChild(frame);
}
else {
return false;
var labels = this.dom.labels;
if (labels && labels.parentNode) {
labels.parentNode.removeChild(labels.parentNode);
}
};

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

@ -119,7 +119,7 @@ RootPanel.prototype._watch = function () {
me.lastWidth = me.frame.clientWidth;
me.lastHeight = me.frame.clientHeight;
me.repaint();
// TODO: emit a resize event
// TODO: emit a resize event instead?
}
}
};

+ 6
- 0
src/timeline/component/css/groupset.css View File

@ -34,6 +34,9 @@
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: height .4s ease-in-out;
transition: height .4s ease-in-out;
}
.vis.timeline .labels .label-set .vlabel {
@ -45,6 +48,9 @@
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: top .4s ease-in-out, height .4s ease-in-out;
transition: top .4s ease-in-out, height .4s ease-in-out;
}
.vis.timeline.top .labels .label-set .vlabel,

+ 1
- 0
src/timeline/component/css/panel.css View File

@ -7,6 +7,7 @@
-moz-box-sizing: border-box;
box-sizing: border-box;
/* FIXME: there is an issue with the height of the items when panel height is animated */
-webkit-transition: height .4s ease-in-out;
transition: height .4s ease-in-out;
}

Loading…
Cancel
Save