Browse Source

Some fixes in positioning of groups

css_transitions
josdejong 11 years ago
parent
commit
5ac671af79
7 changed files with 62 additions and 31 deletions
  1. +9
    -5
      src/timeline/Timeline.js
  2. +18
    -6
      src/timeline/component/GroupSet.js
  3. +6
    -6
      src/timeline/component/RootPanel.js
  4. +1
    -1
      src/timeline/component/TimeAxis.js
  5. +27
    -3
      src/timeline/component/css/groupset.css
  6. +0
    -10
      src/timeline/component/css/itemset.css
  7. +1
    -0
      test/timeline.html

+ 9
- 5
src/timeline/Timeline.js View File

@ -114,7 +114,7 @@ function Timeline (container, items, options) {
this.customtime = new CustomTime(this.timeaxis, [], rootOptions); this.customtime = new CustomTime(this.timeaxis, [], rootOptions);
this.controller.add(this.customtime); this.controller.add(this.customtime);
// create itemset or groupset
// create groupset
this.setGroups(null); this.setGroups(null);
this.itemsData = null; // DataSet this.itemsData = null; // DataSet
@ -125,7 +125,7 @@ function Timeline (container, items, options) {
this.setOptions(options); this.setOptions(options);
} }
// set data (must be after options are applied)
// create itemset and groupset
if (items) { if (items) {
this.setItems(items); this.setItems(items);
} }
@ -233,8 +233,8 @@ Timeline.prototype.setGroups = function(groups) {
this.groupsData = groups; this.groupsData = groups;
// switch content type between ItemSet or GroupSet when needed // switch content type between ItemSet or GroupSet when needed
var type = this.groupsData ? GroupSet : ItemSet;
if (!(this.content instanceof type)) {
var Type = this.groupsData ? GroupSet : ItemSet;
if (!(this.content instanceof Type)) {
// remove old content set // remove old content set
if (this.content) { if (this.content) {
this.content.hide(); this.content.hide();
@ -262,6 +262,9 @@ Timeline.prototype.setGroups = function(groups) {
width: '100%', width: '100%',
height: function () { height: function () {
if (me.options.height) { if (me.options.height) {
if (!util.isNumber(me.options.height)) {
throw new TypeError('Number expected for property height');
}
return me.itemPanel.height - me.timeaxis.height; return me.itemPanel.height - me.timeaxis.height;
} }
else { else {
@ -283,7 +286,8 @@ Timeline.prototype.setGroups = function(groups) {
return me.labelPanel.getContainer(); return me.labelPanel.getContainer();
} }
}); });
this.content = new type(this.itemPanel, [this.timeaxis], options);
this.content = new Type(this.itemPanel, [this.timeaxis], options);
if (this.content.setRange) { if (this.content.setRange) {
this.content.setRange(this.range); this.content.setRange(this.range);
} }

+ 18
- 6
src/timeline/component/GroupSet.js View File

@ -161,7 +161,8 @@ GroupSet.prototype.repaint = function repaint() {
asElement = util.option.asElement, asElement = util.option.asElement,
options = this.options, options = this.options,
frame = this.dom.frame, frame = this.dom.frame,
labels = this.dom.labels;
labels = this.dom.labels,
labelSet = this.dom.labelSet;
// create frame // create frame
if (!this.parent) { if (!this.parent) {
@ -196,9 +197,14 @@ GroupSet.prototype.repaint = function repaint() {
if (!labels) { if (!labels) {
labels = document.createElement('div'); labels = document.createElement('div');
labels.className = 'labels'; labels.className = 'labels';
//frame.appendChild(labels);
this.dom.labels = 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 != labelContainer) {
if (labels.parentNode) { if (labels.parentNode) {
labels.parentNode.removeChild(labels.parentNode); labels.parentNode.removeChild(labels.parentNode);
@ -213,7 +219,8 @@ GroupSet.prototype.repaint = function repaint() {
changed += update(frame.style, 'width', asSize(options.width, '100%')); changed += update(frame.style, 'width', asSize(options.width, '100%'));
// reposition labels // reposition labels
changed += update(labels.style, 'top', asSize(options.top, '0px'));
changed += update(labelSet.style, 'top', asSize(options.top, '0px'));
changed += update(labelSet.style, 'height', asSize(options.height, this.height + 'px'));
var me = this, var me = this,
queue = this.queue, queue = this.queue,
@ -233,6 +240,11 @@ GroupSet.prototype.repaint = function repaint() {
case 'update': case 'update':
if (!group) { if (!group) {
var groupOptions = Object.create(me.options); var groupOptions = Object.create(me.options);
util.extend(groupOptions, {
height: null,
maxHeight: null
});
group = new Group(me, id, groupOptions); group = new Group(me, id, groupOptions);
group.setItems(me.itemsData); // attach items data group.setItems(me.itemsData); // attach items data
groups[id] = group; groups[id] = group;
@ -288,13 +300,13 @@ GroupSet.prototype.repaint = function repaint() {
} }
// (re)create the labels // (re)create the labels
while (labels.firstChild) {
labels.removeChild(labels.firstChild);
while (labelSet.firstChild) {
labelSet.removeChild(labelSet.firstChild);
} }
for (i = 0; i < orderedGroups.length; i++) { for (i = 0; i < orderedGroups.length; i++) {
id = orderedGroups[i]; id = orderedGroups[i];
label = this._createLabel(id); label = this._createLabel(id);
labels.appendChild(label);
labelSet.appendChild(label);
} }
changed++; changed++;

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

@ -45,12 +45,6 @@ RootPanel.prototype.repaint = function () {
if (!frame) { if (!frame) {
frame = document.createElement('div'); frame = document.createElement('div');
frame.className = 'vis timeline rootpanel';
var className = options.className;
if (className) {
util.addClassName(frame, util.option.asString(className));
}
this.frame = frame; this.frame = frame;
@ -64,6 +58,12 @@ RootPanel.prototype.repaint = function () {
changed += 1; changed += 1;
} }
frame.className = 'vis timeline rootpanel ' + options.orientation;
var className = options.className;
if (className) {
util.addClassName(frame, util.option.asString(className));
}
changed += update(frame.style, 'top', asSize(options.top, '0px')); changed += update(frame.style, 'top', asSize(options.top, '0px'));
changed += update(frame.style, 'left', asSize(options.left, '0px')); changed += update(frame.style, 'left', asSize(options.left, '0px'));
changed += update(frame.style, 'width', asSize(options.width, '100%')); changed += update(frame.style, 'width', asSize(options.width, '100%'));

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

@ -104,7 +104,7 @@ TimeAxis.prototype.repaint = function () {
this.frame = frame; this.frame = frame;
changed += 1; changed += 1;
} }
frame.className = 'axis ' + orientation;
frame.className = 'axis';
// TODO: custom className? // TODO: custom className?
if (!frame.parentNode) { if (!frame.parentNode) {

+ 27
- 3
src/timeline/component/css/groupset.css View File

@ -20,16 +20,40 @@
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
} }
.vis.timeline .labels .label {
.vis.timeline .labels .label-set {
position: absolute; position: absolute;
left: 0;
top: 0; top: 0;
left: 0;
width: 100%; width: 100%;
height: 100%;
overflow: hidden;
border-top: none;
border-bottom: 1px solid #bfbfbf; border-bottom: 1px solid #bfbfbf;
}
.vis.timeline .labels .label-set .label {
position: absolute;
left: 0;
top: 0;
width: 100%;
color: #4d4d4d; color: #4d4d4d;
} }
.vis.timeline .labels .label .inner {
.vis.timeline.top .labels .label-set .label,
.vis.timeline.top .groupset .itemset-axis {
border-top: 1px solid #bfbfbf;
border-bottom: none;
}
.vis.timeline.bottom .labels .label-set .label,
.vis.timeline.bottom .groupset .itemset-axis {
border-top: none;
border-bottom: 1px solid #bfbfbf;
}
.vis.timeline .labels .label-set .label .inner {
display: inline-block; display: inline-block;
padding: 5px; padding: 5px;
} }

+ 0
- 10
src/timeline/component/css/itemset.css View File

@ -15,13 +15,3 @@
.vis.timeline .itemset-axis { .vis.timeline .itemset-axis {
position: absolute; position: absolute;
} }
.vis.timeline .groupset .itemset-axis {
border-top: 1px solid #bfbfbf;
}
/* TODO: with orientation=='bottom', this will more or less overlap with timeline axis
.vis.timeline .groupset .itemset-axis:last-child {
border-top: none;
}
*/

+ 1
- 0
test/timeline.html View File

@ -66,6 +66,7 @@
start: now.clone().add('days', -7), start: now.clone().add('days', -7),
end: now.clone().add('days', 7), end: now.clone().add('days', 7),
//maxHeight: 200, //maxHeight: 200,
height: 200,
//start: moment('2013-01-01'), //start: moment('2013-01-01'),
//end: moment('2013-12-31'), //end: moment('2013-12-31'),
min: moment('2013-01-01'), min: moment('2013-01-01'),

Loading…
Cancel
Save