Browse Source

Introduced a forgroundVertical panel, positioned the dots of item boxes there

css_transitions
jos 10 years ago
parent
commit
350d43aec9
3 changed files with 17 additions and 7 deletions
  1. +7
    -0
      src/timeline/Timeline.js
  2. +6
    -7
      src/timeline/component/ItemSet.js
  3. +4
    -0
      src/timeline/component/css/itemset.css

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

@ -346,6 +346,7 @@ Timeline.prototype._create = function () {
this.dom.right = document.createElement('div'); this.dom.right = document.createElement('div');
this.dom.top = document.createElement('div'); this.dom.top = document.createElement('div');
this.dom.bottom = document.createElement('div'); this.dom.bottom = document.createElement('div');
this.dom.foregroundVertical = document.createElement('div');
this.dom.background.className = 'vispanel background'; this.dom.background.className = 'vispanel background';
this.dom.backgroundVertical.className = 'vispanel background vertical'; this.dom.backgroundVertical.className = 'vispanel background vertical';
@ -358,6 +359,7 @@ Timeline.prototype._create = function () {
this.dom.left.className = 'content'; this.dom.left.className = 'content';
this.dom.center.className = 'content'; this.dom.center.className = 'content';
this.dom.right.className = 'content'; this.dom.right.className = 'content';
this.dom.foregroundVertical.className = 'vispanel foreground vertical';
this.dom.root.appendChild(this.dom.background); this.dom.root.appendChild(this.dom.background);
this.dom.root.appendChild(this.dom.backgroundVertical); this.dom.root.appendChild(this.dom.backgroundVertical);
@ -367,6 +369,7 @@ Timeline.prototype._create = function () {
this.dom.root.appendChild(this.dom.rightContainer); this.dom.root.appendChild(this.dom.rightContainer);
this.dom.root.appendChild(this.dom.top); this.dom.root.appendChild(this.dom.top);
this.dom.root.appendChild(this.dom.bottom); this.dom.root.appendChild(this.dom.bottom);
this.dom.root.appendChild(this.dom.foregroundVertical);
this.dom.centerContainer.appendChild(this.dom.center); this.dom.centerContainer.appendChild(this.dom.center);
this.dom.leftContainer.appendChild(this.dom.left); this.dom.leftContainer.appendChild(this.dom.left);
@ -804,6 +807,7 @@ Timeline.prototype.repaint = function() {
dom.centerContainer.style.height = props.centerContainer.height + 'px'; dom.centerContainer.style.height = props.centerContainer.height + 'px';
dom.leftContainer.style.height = props.leftContainer.height + 'px'; dom.leftContainer.style.height = props.leftContainer.height + 'px';
dom.rightContainer.style.height = props.rightContainer.height + 'px'; dom.rightContainer.style.height = props.rightContainer.height + 'px';
dom.foregroundVertical.style.height = props.background.height + 'px';
dom.background.style.width = props.background.width + 'px'; dom.background.style.width = props.background.width + 'px';
dom.backgroundVertical.style.width = props.centerContainer.width + 'px'; dom.backgroundVertical.style.width = props.centerContainer.width + 'px';
@ -811,6 +815,7 @@ Timeline.prototype.repaint = function() {
dom.centerContainer.style.width = props.center.width + 'px'; dom.centerContainer.style.width = props.center.width + 'px';
dom.top.style.width = props.top.width + 'px'; dom.top.style.width = props.top.width + 'px';
dom.bottom.style.width = props.bottom.width + 'px'; dom.bottom.style.width = props.bottom.width + 'px';
dom.foregroundVertical.style.width = props.centerContainer.width + 'px';
// reposition the panels // reposition the panels
dom.background.style.left = '0'; dom.background.style.left = '0';
@ -829,6 +834,8 @@ Timeline.prototype.repaint = function() {
dom.top.style.top = '0'; dom.top.style.top = '0';
dom.bottom.style.left = props.left.width + 'px'; dom.bottom.style.left = props.left.width + 'px';
dom.bottom.style.top = (props.top.height + props.centerContainer.height) + 'px'; dom.bottom.style.top = (props.top.height + props.centerContainer.height) + 'px';
dom.foregroundVertical.style.left = props.left.width + 'px';
dom.foregroundVertical.style.top = '0';
// repaint all components // repaint all components
this.components.forEach(function (component) { this.components.forEach(function (component) {

+ 6
- 7
src/timeline/component/ItemSet.js View File

@ -187,7 +187,7 @@ ItemSet.prototype.show = function show() {
// show axis with dots // show axis with dots
if (!this.dom.axis.parentNode) { if (!this.dom.axis.parentNode) {
this.timeline.dom.bottom.appendChild(this.dom.axis);
this.timeline.dom.foregroundVertical.appendChild(this.dom.axis);
} }
// show labelset containing labels // show labelset containing labels
@ -323,12 +323,11 @@ ItemSet.prototype.repaint = function repaint() {
this.props.height = height; this.props.height = height;
// reposition axis // reposition axis
this.dom.axis.style.left = asSize(options.left, '0');
this.dom.axis.style.right = asSize(options.right, '');
this.dom.axis.style.width = asSize(options.width, '100%');
this.dom.axis.style.height = asSize(0);
this.dom.axis.style.top = asSize((orientation == 'top') ? '0' : '');
this.dom.axis.style.bottom = asSize((orientation == 'top') ? '' : '0');
this.dom.axis.style.top = asSize((orientation == 'top') ?
this.timeline.props.top.height :
this.timeline.props.top.height + this.timeline.props.center.height +
this.timeline.props.border.top + this.timeline.props.border.bottom);
this.dom.axis.style.left = this.timeline.props.border.left + 'px';
// check if this component is resized // check if this component is resized
resized = this._isResized() || resized; resized = this._isResized() || resized;

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

@ -24,6 +24,10 @@
} }
.vis.timeline .axis { .vis.timeline .axis {
position: absolute;
width: 100%;
height: 0;
left: 1px;
} }
.vis.timeline .group { .vis.timeline .group {

Loading…
Cancel
Save