Browse Source

Added a test example for groups. Added ContentPanel (not yet in use)

css_transitions
josdejong 11 years ago
parent
commit
6c085b1cce
4 changed files with 218 additions and 17 deletions
  1. +113
    -0
      src/timeline/component/ContentPanel.js
  2. +2
    -2
      src/timeline/component/TimeAxis.js
  3. +17
    -15
      src/timeline/component/item/ItemBox.js
  4. +86
    -0
      test/timeline_groups.html

+ 113
- 0
src/timeline/component/ContentPanel.js View File

@ -0,0 +1,113 @@
/**
* A content panel can contain a groupset or an itemset, and can handle
* vertical scrolling
* @param {Component} [parent]
* @param {Component[]} [depends] Components on which this components depends
* (except for the parent)
* @param {Object} [options] Available parameters:
* {String | Number | function} [left]
* {String | Number | function} [top]
* {String | Number | function} [width]
* {String | Number | function} [height]
* {String | function} [className]
* @constructor ContentPanel
* @extends Panel
*/
function ContentPanel(parent, depends, options) {
this.id = util.randomUUID();
this.parent = parent;
this.depends = depends;
this.options = options || {};
}
ContentPanel.prototype = new Component();
/**
* Set options. Will extend the current options.
* @param {Object} [options] Available parameters:
* {String | function} [className]
* {String | Number | function} [left]
* {String | Number | function} [top]
* {String | Number | function} [width]
* {String | Number | function} [height]
*/
ContentPanel.prototype.setOptions = Component.prototype.setOptions;
/**
* Get the container element of the panel, which can be used by a child to
* add its own widgets.
* @returns {HTMLElement} container
*/
ContentPanel.prototype.getContainer = function () {
return this.frame;
};
/**
* Repaint the component
* @return {Boolean} changed
*/
ContentPanel.prototype.repaint = function () {
var changed = 0,
update = util.updateProperty,
asSize = util.option.asSize,
options = this.options,
frame = this.frame;
if (!frame) {
frame = document.createElement('div');
frame.className = 'content-panel';
var className = options.className;
if (className) {
if (typeof className == 'function') {
util.addClassName(frame, String(className()));
}
else {
util.addClassName(frame, String(className));
}
}
this.frame = frame;
changed += 1;
}
if (!frame.parentNode) {
if (!this.parent) {
throw new Error('Cannot repaint panel: no parent attached');
}
var parentContainer = this.parent.getContainer();
if (!parentContainer) {
throw new Error('Cannot repaint panel: parent has no container element');
}
parentContainer.appendChild(frame);
changed += 1;
}
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%'));
changed += update(frame.style, 'height', asSize(options.height, '100%'));
return (changed > 0);
};
/**
* Reflow the component
* @return {Boolean} resized
*/
ContentPanel.prototype.reflow = function () {
var changed = 0,
update = util.updateProperty,
frame = this.frame;
if (frame) {
changed += update(this, 'top', frame.offsetTop);
changed += update(this, 'left', frame.offsetLeft);
changed += update(this, 'width', frame.offsetWidth);
changed += update(this, 'height', frame.offsetHeight);
}
else {
changed += 1;
}
return (changed > 0);
};

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

@ -360,8 +360,8 @@ TimeAxis.prototype._repaintLine = function() {
line.style.top = this.props.lineTop + 'px'; line.style.top = this.props.lineTop + 'px';
} }
else { else {
if (line && axis.parentElement) {
frame.removeChild(axis.line);
if (line && line.parentElement) {
frame.removeChild(line.line);
delete this.dom.line; delete this.dom.line;
} }
} }

+ 17
- 15
src/timeline/component/item/ItemBox.js View File

@ -66,31 +66,33 @@ ItemBox.prototype.repaint = function repaint() {
if (!this.parent) { if (!this.parent) {
throw new Error('Cannot repaint item: no parent attached'); throw new Error('Cannot repaint item: no parent attached');
} }
var foreground = this.parent.getForeground();
if (!foreground) {
throw new Error('Cannot repaint time axis: ' +
'parent has no foreground container element');
}
var background = this.parent.getBackground();
if (!background) {
throw new Error('Cannot repaint time axis: ' +
'parent has no background container element');
}
var axis = this.parent.getAxis();
if (!background) {
throw new Error('Cannot repaint time axis: ' +
'parent has no axis container element');
}
if (!dom.box.parentNode) { if (!dom.box.parentNode) {
var foreground = this.parent.getForeground();
if (!foreground) {
throw new Error('Cannot repaint time axis: ' +
'parent has no foreground container element');
}
foreground.appendChild(dom.box); foreground.appendChild(dom.box);
changed = true; changed = true;
} }
if (!dom.line.parentNode) { if (!dom.line.parentNode) {
var background = this.parent.getBackground();
if (!background) {
throw new Error('Cannot repaint time axis: ' +
'parent has no background container element');
}
background.appendChild(dom.line); background.appendChild(dom.line);
changed = true; changed = true;
} }
if (!dom.dot.parentNode) { if (!dom.dot.parentNode) {
var axis = this.parent.getAxis();
if (!background) {
throw new Error('Cannot repaint time axis: ' +
'parent has no axis container element');
}
axis.appendChild(dom.dot); axis.appendChild(dom.dot);
changed = true; changed = true;
} }

+ 86
- 0
test/timeline_groups.html View File

@ -0,0 +1,86 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Group example</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
#visualization {
box-sizing: border-box;
width: 100%;
height: 300px;
}
</style>
<!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.3.1/moment.min.js"></script>
<script src="../vis.js"></script>
</head>
<body>
<div>
<label for="orientation">Orientation</label>
<select id="orientation">
<option value="top">top</option>
<option value="bottom" selected>bottom</option>
</select>
</div>
<script>
var orientation = document.getElementById('orientation');
orientation.onchange = function () {
timeline.setOptions({
orientation: orientation.value
});
};
</script>
<br>
<div id="visualization"></div>
<script>
var now = moment().minutes(0).seconds(0).milliseconds(0);
var groupCount = 3;
var itemCount = 20;
// create a data set with groups
var names = ['John', 'Alston', 'Lee', 'Grant'];
var groups = new vis.DataSet();
for (var g = 0; g < groupCount; g++) {
groups.add({id: g, content: names[g]});
}
// create a dataset with items
var items = new vis.DataSet();
for (var i = 0; i < itemCount; i++) {
var start = now.clone().add('hours', Math.random() * 200);
var group = Math.floor(Math.random() * groupCount);
items.add({
id: i,
group: group,
content: 'item ' + i +
' <span style="color:#97B0F8;">(' + names[group] + ')</span>',
start: start,
type: 'box'
});
}
// create visualization
var container = document.getElementById('visualization');
var options = {
//height: 200,
groupOrder: 'content'
};
var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setGroups(groups);
timeline.setItems(items);
</script>
</body>
</html>

Loading…
Cancel
Save