From 5ac671af7924341d98c6ad442dd368e4c4c0fb6e Mon Sep 17 00:00:00 2001 From: josdejong Date: Fri, 8 Nov 2013 15:34:37 +0100 Subject: [PATCH] Some fixes in positioning of groups --- src/timeline/Timeline.js | 14 +++++++----- src/timeline/component/GroupSet.js | 24 +++++++++++++++----- src/timeline/component/RootPanel.js | 12 +++++----- src/timeline/component/TimeAxis.js | 2 +- src/timeline/component/css/groupset.css | 30 ++++++++++++++++++++++--- src/timeline/component/css/itemset.css | 10 --------- test/timeline.html | 1 + 7 files changed, 62 insertions(+), 31 deletions(-) diff --git a/src/timeline/Timeline.js b/src/timeline/Timeline.js index 53faed5f..b0d24ac3 100644 --- a/src/timeline/Timeline.js +++ b/src/timeline/Timeline.js @@ -114,7 +114,7 @@ function Timeline (container, items, options) { this.customtime = new CustomTime(this.timeaxis, [], rootOptions); this.controller.add(this.customtime); - // create itemset or groupset + // create groupset this.setGroups(null); this.itemsData = null; // DataSet @@ -125,7 +125,7 @@ function Timeline (container, items, options) { this.setOptions(options); } - // set data (must be after options are applied) + // create itemset and groupset if (items) { this.setItems(items); } @@ -233,8 +233,8 @@ Timeline.prototype.setGroups = function(groups) { this.groupsData = groups; // 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 if (this.content) { this.content.hide(); @@ -262,6 +262,9 @@ Timeline.prototype.setGroups = function(groups) { width: '100%', height: function () { 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; } else { @@ -283,7 +286,8 @@ Timeline.prototype.setGroups = function(groups) { 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) { this.content.setRange(this.range); } diff --git a/src/timeline/component/GroupSet.js b/src/timeline/component/GroupSet.js index c0643754..616bb42c 100644 --- a/src/timeline/component/GroupSet.js +++ b/src/timeline/component/GroupSet.js @@ -161,7 +161,8 @@ GroupSet.prototype.repaint = function repaint() { asElement = util.option.asElement, options = this.options, frame = this.dom.frame, - labels = this.dom.labels; + labels = this.dom.labels, + labelSet = this.dom.labelSet; // create frame if (!this.parent) { @@ -196,9 +197,14 @@ GroupSet.prototype.repaint = function repaint() { if (!labels) { labels = document.createElement('div'); labels.className = 'labels'; - //frame.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); @@ -213,7 +219,8 @@ GroupSet.prototype.repaint = function repaint() { changed += update(frame.style, 'width', asSize(options.width, '100%')); // 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, queue = this.queue, @@ -233,6 +240,11 @@ GroupSet.prototype.repaint = function repaint() { case 'update': if (!group) { var groupOptions = Object.create(me.options); + util.extend(groupOptions, { + height: null, + maxHeight: null + }); + group = new Group(me, id, groupOptions); group.setItems(me.itemsData); // attach items data groups[id] = group; @@ -288,13 +300,13 @@ GroupSet.prototype.repaint = function repaint() { } // (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++) { id = orderedGroups[i]; label = this._createLabel(id); - labels.appendChild(label); + labelSet.appendChild(label); } changed++; diff --git a/src/timeline/component/RootPanel.js b/src/timeline/component/RootPanel.js index bbeafa63..2b18ea99 100644 --- a/src/timeline/component/RootPanel.js +++ b/src/timeline/component/RootPanel.js @@ -45,12 +45,6 @@ RootPanel.prototype.repaint = function () { if (!frame) { 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; @@ -64,6 +58,12 @@ RootPanel.prototype.repaint = function () { 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, 'left', asSize(options.left, '0px')); changed += update(frame.style, 'width', asSize(options.width, '100%')); diff --git a/src/timeline/component/TimeAxis.js b/src/timeline/component/TimeAxis.js index ec976939..d4d1f3ee 100644 --- a/src/timeline/component/TimeAxis.js +++ b/src/timeline/component/TimeAxis.js @@ -104,7 +104,7 @@ TimeAxis.prototype.repaint = function () { this.frame = frame; changed += 1; } - frame.className = 'axis ' + orientation; + frame.className = 'axis'; // TODO: custom className? if (!frame.parentNode) { diff --git a/src/timeline/component/css/groupset.css b/src/timeline/component/css/groupset.css index f392ae08..590c3b82 100644 --- a/src/timeline/component/css/groupset.css +++ b/src/timeline/component/css/groupset.css @@ -20,16 +20,40 @@ -moz-box-sizing: border-box; } -.vis.timeline .labels .label { +.vis.timeline .labels .label-set { position: absolute; - left: 0; top: 0; + left: 0; width: 100%; + height: 100%; + + overflow: hidden; + + border-top: none; border-bottom: 1px solid #bfbfbf; +} + +.vis.timeline .labels .label-set .label { + position: absolute; + left: 0; + top: 0; + width: 100%; 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; padding: 5px; } diff --git a/src/timeline/component/css/itemset.css b/src/timeline/component/css/itemset.css index 7e994fdc..3e1d2885 100644 --- a/src/timeline/component/css/itemset.css +++ b/src/timeline/component/css/itemset.css @@ -15,13 +15,3 @@ .vis.timeline .itemset-axis { 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; -} -*/ diff --git a/test/timeline.html b/test/timeline.html index 8b725a7b..96023a3a 100644 --- a/test/timeline.html +++ b/test/timeline.html @@ -66,6 +66,7 @@ start: now.clone().add('days', -7), end: now.clone().add('days', 7), //maxHeight: 200, + height: 200, //start: moment('2013-01-01'), //end: moment('2013-12-31'), min: moment('2013-01-01'),