Browse Source

Moved grid lines of TimeAxis to the background panel

css_transitions
jos 10 years ago
parent
commit
9eb056d1cf
3 changed files with 48 additions and 87 deletions
  1. +1
    -1
      src/timeline/Timeline.js
  2. +32
    -79
      src/timeline/component/TimeAxis.js
  3. +15
    -7
      src/timeline/component/css/timeaxis.css

+ 1
- 1
src/timeline/Timeline.js View File

@ -92,7 +92,7 @@ function Timeline (container, items, options) {
this.dom.center.innerHTML = 'center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center'; this.dom.center.innerHTML = 'center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>center';
this.dom.left.innerHTML = '<span style="color: red;">left</span>'; this.dom.left.innerHTML = '<span style="color: red;">left</span>';
this.dom.right.innerHTML = '<span style="color: red;">right</span>'; this.dom.right.innerHTML = '<span style="color: red;">right</span>';
this.dom.top.innerHTML = '<span style="color: red;">top</span>';
//this.dom.top.innerHTML = '<span style="color: red;">top</span>';
//this.dom.bottom.innerHTML = '<span style="color: red;">bottom</span>'; //this.dom.bottom.innerHTML = '<span style="color: red;">bottom</span>';
this.components = []; this.components = [];

+ 32
- 79
src/timeline/component/TimeAxis.js View File

@ -8,7 +8,7 @@
*/ */
function TimeAxis (timeline, options) { function TimeAxis (timeline, options) {
this.dom = { this.dom = {
frame: null,
foreground: null,
majorLines: [], majorLines: [],
majorTexts: [], majorTexts: [],
minorLines: [], minorLines: [],
@ -59,7 +59,11 @@ TimeAxis.prototype.setOptions = Component.prototype.setOptions;
* Create the HTML DOM for the TimeAxis * Create the HTML DOM for the TimeAxis
*/ */
TimeAxis.prototype._create = function _create() { TimeAxis.prototype._create = function _create() {
this.dom.frame = document.createElement('div');
this.dom.foreground = document.createElement('div');
this.dom.background = document.createElement('div');
this.dom.foreground.className = 'timeaxis foreground';
this.dom.background.className = 'timeaxis background';
}; };
/** /**
@ -69,14 +73,12 @@ TimeAxis.prototype._create = function _create() {
TimeAxis.prototype.repaint = function () { TimeAxis.prototype.repaint = function () {
var options = this.options, var options = this.options,
props = this.props, props = this.props,
frame = this.dom.frame;
foreground = this.dom.foreground,
background = this.dom.background;
// determine the correct parent DOM element (depending on option orientation) // determine the correct parent DOM element (depending on option orientation)
var parent = (options.orientation == 'top') ? this.timeline.dom.top : this.timeline.dom.bottom; var parent = (options.orientation == 'top') ? this.timeline.dom.top : this.timeline.dom.bottom;
var parentChanged = (frame.parentNode !== parent);
// update classname
frame.className = 'timeaxis'; // TODO: add className from options if defined
var parentChanged = (foreground.parentNode !== parent);
// calculate character width and height // calculate character width and height
this._calculateCharSize(); this._calculateCharSize();
@ -87,37 +89,34 @@ TimeAxis.prototype.repaint = function () {
showMajorLabels = this.getOption('showMajorLabels'); showMajorLabels = this.getOption('showMajorLabels');
// determine the width and height of the elemens for the axis // determine the width and height of the elemens for the axis
var backgroundHeight = this.timeline.props.background.height;
props.minorLabelHeight = showMinorLabels ? props.minorCharHeight : 0; props.minorLabelHeight = showMinorLabels ? props.minorCharHeight : 0;
props.majorLabelHeight = showMajorLabels ? props.majorCharHeight : 0; props.majorLabelHeight = showMajorLabels ? props.majorCharHeight : 0;
props.height = props.minorLabelHeight + props.majorLabelHeight; props.height = props.minorLabelHeight + props.majorLabelHeight;
props.width = frame.offsetWidth; // TODO: only update the width when the frame is resized?
props.width = foreground.offsetWidth;
props.minorLineHeight = backgroundHeight + props.minorLabelHeight;
props.minorLineHeight = this.timeline.props.center.height + props.minorLabelHeight +
this.timeline.props.border.top + this.timeline.props.border.bottom;
props.minorLineWidth = 1; // TODO: really calculate width props.minorLineWidth = 1; // TODO: really calculate width
props.majorLineHeight = backgroundHeight + this.props.height;
props.majorLineHeight = props.minorLineHeight + props.majorLabelHeight;
props.majorLineWidth = 1; // TODO: really calculate width props.majorLineWidth = 1; // TODO: really calculate width
// take frame offline while updating (is almost twice as fast)
var beforeChild = frame.nextSibling;
frame.parentNode && frame.parentNode.removeChild(frame);
// take foreground and background offline while updating (is almost twice as fast)
var beforeChild = foreground.nextSibling;
foreground.parentNode && foreground.parentNode.removeChild(foreground);
background.parentNode && background.parentNode.removeChild(background);
frame.style.top = '0';
frame.style.left = '0';
frame.style.width = '100%';
frame.style.height = this.props.height + 'px';
foreground.style.height = this.props.height + 'px';
this._repaintLabels(); this._repaintLabels();
this._repaintLine();
// put frame online again at the same place
// put DOM online again (foreground at the same place)
if (beforeChild) { if (beforeChild) {
parent.insertBefore(frame, beforeChild);
parent.insertBefore(foreground, beforeChild);
} }
else { else {
parent.appendChild(frame)
parent.appendChild(foreground)
} }
this.timeline.dom.backgroundVertical.appendChild(background);
return this._isResized() || parentChanged; return this._isResized() || parentChanged;
}; };
@ -220,7 +219,7 @@ TimeAxis.prototype._repaintMinorText = function (x, text, orientation) {
label = document.createElement('div'); label = document.createElement('div');
label.appendChild(content); label.appendChild(content);
label.className = 'text minor'; label.className = 'text minor';
this.dom.frame.appendChild(label);
this.dom.foreground.appendChild(label);
} }
this.dom.minorTexts.push(label); this.dom.minorTexts.push(label);
@ -255,7 +254,7 @@ TimeAxis.prototype._repaintMajorText = function (x, text, orientation) {
label = document.createElement('div'); label = document.createElement('div');
label.className = 'text major'; label.className = 'text major';
label.appendChild(content); label.appendChild(content);
this.dom.frame.appendChild(label);
this.dom.foreground.appendChild(label);
} }
this.dom.majorTexts.push(label); this.dom.majorTexts.push(label);
@ -287,18 +286,16 @@ TimeAxis.prototype._repaintMinorLine = function (x, orientation) {
// create vertical line // create vertical line
line = document.createElement('div'); line = document.createElement('div');
line.className = 'grid vertical minor'; line.className = 'grid vertical minor';
this.dom.frame.appendChild(line);
this.dom.background.appendChild(line);
} }
this.dom.minorLines.push(line); this.dom.minorLines.push(line);
var props = this.props; var props = this.props;
if (orientation == 'top') { if (orientation == 'top') {
line.style.top = this.props.majorLabelHeight + 'px';
line.style.bottom = '';
line.style.top = props.majorLabelHeight + 'px';
} }
else { else {
line.style.top = '';
line.style.bottom = this.props.majorLabelHeight + 'px';
line.style.top = this.timeline.props.top.height + 'px';
} }
line.style.height = props.minorLineHeight + 'px'; line.style.height = props.minorLineHeight + 'px';
line.style.left = (x - props.minorLineWidth / 2) + 'px'; line.style.left = (x - props.minorLineWidth / 2) + 'px';
@ -318,65 +315,21 @@ TimeAxis.prototype._repaintMajorLine = function (x, orientation) {
// create vertical line // create vertical line
line = document.createElement('DIV'); line = document.createElement('DIV');
line.className = 'grid vertical major'; line.className = 'grid vertical major';
this.dom.frame.appendChild(line);
this.dom.background.appendChild(line);
} }
this.dom.majorLines.push(line); this.dom.majorLines.push(line);
var props = this.props; var props = this.props;
if (orientation == 'top') { if (orientation == 'top') {
line.style.top = '0px';
line.style.bottom = '';
line.style.top = '0';
} }
else { else {
line.style.top = '';
line.style.bottom = '0px';
line.style.top = this.timeline.props.top.height + 'px';
} }
line.style.left = (x - props.majorLineWidth / 2) + 'px'; line.style.left = (x - props.majorLineWidth / 2) + 'px';
line.style.height = props.majorLineHeight + 'px'; line.style.height = props.majorLineHeight + 'px';
}; };
/**
* Repaint the horizontal line for the axis
* @private
*/
TimeAxis.prototype._repaintLine = function() {
var line = this.dom.line,
frame = this.dom.frame,
orientation = this.getOption('orientation');
// line before all axis elements
if (this.getOption('showMinorLabels') || this.getOption('showMajorLabels')) {
if (line) {
// put this line at the end of all childs
frame.removeChild(line);
frame.appendChild(line);
}
else {
// create the axis line
line = document.createElement('div');
line.className = 'grid horizontal major';
frame.appendChild(line);
this.dom.line = line;
}
if (orientation == 'top') {
line.style.top = this.height + 'px';
line.style.bottom = '';
}
else {
line.style.top = '';
line.style.bottom = this.height + 'px';
}
}
else {
if (line && line.parentNode) {
line.parentNode.removeChild(line);
delete this.dom.line;
}
}
};
/** /**
* Determine the size of text on the axis (both major and minor axis). * Determine the size of text on the axis (both major and minor axis).
* The size is calculated only once and then cached in this.props. * The size is calculated only once and then cached in this.props.
@ -393,7 +346,7 @@ TimeAxis.prototype._calculateCharSize = function () {
this.dom.measureCharMinor.style.position = 'absolute'; this.dom.measureCharMinor.style.position = 'absolute';
this.dom.measureCharMinor.appendChild(document.createTextNode('0')); this.dom.measureCharMinor.appendChild(document.createTextNode('0'));
this.dom.frame.appendChild(this.dom.measureCharMinor);
this.dom.foreground.appendChild(this.dom.measureCharMinor);
} }
this.props.minorCharHeight = this.dom.measureCharMinor.clientHeight; this.props.minorCharHeight = this.dom.measureCharMinor.clientHeight;
this.props.minorCharWidth = this.dom.measureCharMinor.clientWidth; this.props.minorCharWidth = this.dom.measureCharMinor.clientWidth;
@ -405,7 +358,7 @@ TimeAxis.prototype._calculateCharSize = function () {
this.dom.measureCharMajor.style.position = 'absolute'; this.dom.measureCharMajor.style.position = 'absolute';
this.dom.measureCharMajor.appendChild(document.createTextNode('0')); this.dom.measureCharMajor.appendChild(document.createTextNode('0'));
this.dom.frame.appendChild(this.dom.measureCharMajor);
this.dom.foreground.appendChild(this.dom.measureCharMajor);
} }
this.props.majorCharHeight = this.dom.measureCharMajor.clientHeight; this.props.majorCharHeight = this.dom.measureCharMajor.clientHeight;
this.props.majorCharWidth = this.dom.measureCharMajor.clientWidth; this.props.majorCharWidth = this.dom.measureCharMajor.clientWidth;

+ 15
- 7
src/timeline/component/css/timeaxis.css View File

@ -1,5 +1,20 @@
.vis.timeline .timeaxis { .vis.timeline .timeaxis {
position: relative; position: relative;
overflow: hidden;
}
.vis.timeline .timeaxis.foreground {
top: 0;
left: 0;
width: 100%;
}
.vis.timeline .timeaxis.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
} }
.vis.timeline .timeaxis .text { .vis.timeline .timeaxis .text {
@ -24,13 +39,6 @@
border-right: 1px solid; border-right: 1px solid;
} }
.vis.timeline .timeaxis .grid.horizontal {
position: absolute;
left: 0;
width: 100%;
height: 0;
}
.vis.timeline .timeaxis .grid.minor { .vis.timeline .timeaxis .grid.minor {
border-color: #e5e5e5; border-color: #e5e5e5;
} }

Loading…
Cancel
Save