Browse Source

Created simple skeleton with panels: left, right, top, bottom, center.

css_transitions
jos 10 years ago
parent
commit
67e8d25aa9
2 changed files with 173 additions and 12 deletions
  1. +151
    -2
      src/timeline/Timeline.js
  2. +22
    -10
      src/timeline/component/css/panel.css

+ 151
- 2
src/timeline/Timeline.js View File

@ -78,6 +78,26 @@ function Timeline (container, items, options) {
toTime: me._toTime.bind(me) toTime: me._toTime.bind(me)
}); });
// Create the main DOM
this._create();
// attach the root panel to the provided container
if (!container) throw new Error('No container provided');
container.appendChild(this.dom.root);
// TODO: remove temporary contents
this.dom.background.innerHTML = '<span style="color: #d3d3d3;">background</span>';
this.dom.center.innerHTML = '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<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>';
this.dom.left.innerHTML = 'left';
this.dom.right.innerHTML = 'right';
this.dom.top.innerHTML = 'top';
this.dom.bottom.innerHTML = 'bottom';
this.repaint();
/* TODO
// root panel // root panel
var rootOptions = util.extend(Object.create(this.options), { var rootOptions = util.extend(Object.create(this.options), {
height: function () { height: function () {
@ -284,11 +304,66 @@ function Timeline (container, items, options) {
if (items) { if (items) {
this.setItems(items); this.setItems(items);
} }
*/
} }
// turn Timeline into an event emitter // turn Timeline into an event emitter
Emitter(Timeline.prototype); Emitter(Timeline.prototype);
/**
* Create the main DOM for the Timeline: a root panel containing left, right,
* top, bottom, content, and background panel.
* @private
*/
Timeline.prototype._create = function () {
this.dom = {};
this.dom.root = document.createElement('div');
this.dom.background = document.createElement('div');
this.dom.centerContainer= document.createElement('div');
this.dom.leftContainer = document.createElement('div');
this.dom.rightContainer = document.createElement('div');
this.dom.center = document.createElement('div');
this.dom.left = document.createElement('div');
this.dom.right = document.createElement('div');
this.dom.top = document.createElement('div');
this.dom.bottom = document.createElement('div');
this.dom.background.className = 'vispanel background';
this.dom.centerContainer.className= 'vispanel center';
this.dom.leftContainer.className = 'vispanel left';
this.dom.rightContainer.className = 'vispanel right';
this.dom.top.className = 'vispanel top';
this.dom.bottom.className = 'vispanel bottom';
this.dom.left.className = 'content';
this.dom.center.className = 'content';
this.dom.right.className = 'content';
this.dom.root.appendChild(this.dom.background);
this.dom.root.appendChild(this.dom.centerContainer);
this.dom.root.appendChild(this.dom.leftContainer);
this.dom.root.appendChild(this.dom.rightContainer);
this.dom.root.appendChild(this.dom.top);
this.dom.root.appendChild(this.dom.bottom);
this.dom.centerContainer.appendChild(this.dom.center);
this.dom.leftContainer.appendChild(this.dom.left);
this.dom.rightContainer.appendChild(this.dom.right);
this.props = {
root: {},
background: {},
centerContainer: {},
leftContainer: {},
rightContainer: {},
center: {},
left: {},
right: {},
top: {},
bottom: {}
};
};
/** /**
* Set options * Set options
* @param {Object} options TODO: describe the available options * @param {Object} options TODO: describe the available options
@ -365,7 +440,7 @@ Timeline.prototype.setOptions = function (options) {
} }
// repaint everything // repaint everything
this.rootPanel.repaint();
this.repaint();
}; };
/** /**
@ -606,7 +681,81 @@ Timeline.prototype.getWindow = function setWindow() {
* option autoResize=false * option autoResize=false
*/ */
Timeline.prototype.repaint = function repaint() { Timeline.prototype.repaint = function repaint() {
this.rootPanel.repaint();
var options = this.options,
props = this.props,
dom = this.dom,
editable = options.editable.updateTime || options.editable.updateGroup;
// update class names
dom.root.className = 'vis timeline root ' + options.orientation + (editable ? ' editable' : '');
// update root height options
dom.root.style.maxHeight = util.option.asSize(options.maxHeight, '');
dom.root.style.minHeight = util.option.asSize(options.minHeight, '');
props.center.height = dom.center.offsetHeight;
props.left.height = dom.left.offsetHeight;
props.right.height = dom.right.offsetHeight;
props.top.height = dom.top.offsetHeight;
props.bottom.height = dom.bottom.offsetHeight;
var borderHeight = dom.centerContainer.offsetHeight - dom.centerContainer.clientHeight;
var borderWidth = dom.centerContainer.offsetWidth - dom.centerContainer.clientWidth;
var rootBorderHeight= dom.root.offsetHeight - dom.root.clientHeight;
// apply auto height
// TODO: only calculate autoHeight when needed (else we cause an extra reflow/repaint of the DOM)
var contentHeight = Math.max(props.left.height, props.center.height, props.right.height);
var autoHeight = props.top.height + contentHeight + props.bottom.height + borderHeight + rootBorderHeight;
dom.root.style.height = util.option.asSize(options.height, autoHeight + 'px');
// calculate heights of the content panels
props.root.height = dom.root.offsetHeight;
props.background.height = props.root.height;
var containerHeight = props.root.height - props.top.height - props.bottom.height - borderHeight;
props.centerContainer.height = containerHeight;
props.leftContainer.height = containerHeight;
props.rightContainer.height = containerHeight;
// calculate the widths of the panels
props.root.width = dom.root.offsetWidth;
props.background.width = props.root.width;
props.left.width = dom.left.offsetWidth;
props.right.width = dom.right.offsetWidth;
var centerWidth = props.root.width - props.left.width - props.right.width - borderWidth;
props.center.width = centerWidth;
props.top.width = centerWidth;
props.bottom.width = centerWidth;
// resize the panels
dom.background.style.height = props.background.height + 'px';
dom.centerContainer.style.height = props.centerContainer.height + 'px';
dom.leftContainer.style.height = props.leftContainer.height + 'px';
dom.rightContainer.style.height = props.rightContainer.height + 'px';
dom.background.style.width = props.background.width + 'px';
dom.centerContainer.style.width = props.center.width + 'px';
dom.leftContainer.style.width = props.left.width + 'px';
dom.rightContainer.style.width = props.right.width + 'px';
dom.top.style.width = props.top.width + 'px';
dom.bottom.style.width = props.bottom.width + 'px';
// reposition the panels
dom.background.style.left = '0';
dom.background.style.top = '0';
dom.centerContainer.style.left = props.left.width + 'px';
dom.centerContainer.style.top = props.top.height + 'px';
dom.leftContainer.style.left = '0';
dom.leftContainer.style.top = props.top.height + 'px';
dom.rightContainer.style.left = (props.left.width + props.center.width) + 'px';
dom.rightContainer.style.top = props.top.height + 'px';
dom.top.style.left = props.left.width + 'px';
dom.top.style.top = '0';
dom.bottom.style.left = props.left.width + 'px';
dom.bottom.style.top = (props.top.height + props.centerContainer.height) + 'px';
/* TODO: repaint contents
this.rootPanel.repaint();
*/
}; };
/** /**

+ 22
- 10
src/timeline/component/css/panel.css View File

@ -1,28 +1,40 @@
.vis.timeline.rootpanel {
.vis.timeline.root {
position: relative; position: relative;
border: 1px solid #bfbfbf;
overflow: hidden; overflow: hidden;
padding: 0;
margin: 0;
border: 1px solid #bfbfbf;
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;
/**/
} }
.vis.timeline .vpanel {
.vis.timeline .vispanel {
position: absolute; position: absolute;
overflow: hidden; overflow: hidden;
padding: 0;
margin: 0;
box-sizing: border-box; box-sizing: border-box;
} }
.vis.timeline .vpanel.side {
.vis.timeline .vispanel.left,
.vis.timeline .vispanel.right {
border-top: 1px solid #bfbfbf;
border-bottom: 1px solid #bfbfbf;
}
.vis.timeline .vispanel.top,
.vis.timeline .vispanel.bottom {
border-left: 1px solid #bfbfbf;
border-right: 1px solid #bfbfbf; border-right: 1px solid #bfbfbf;
} }
.vis.timeline .vpanel.side.hidden {
.vis.timeline .vispanel.center {
border: 1px solid #bfbfbf;
}
.vis.timeline .vispanel.hidden {
display: none; display: none;
} }

Loading…
Cancel
Save