jos
10 years ago
13 changed files with 5383 additions and 5010 deletions
Split View
Diff Options
-
+2 -0HISTORY.md
-
+15 -1dist/vis.css
-
+5122 -4988dist/vis.js
-
+1 -1dist/vis.map
-
+1 -1dist/vis.min.css
-
+12 -11dist/vis.min.js
-
+4 -4docs/timeline.html
-
+61 -0examples/timeline/24_background_areas.html
-
+1 -0examples/timeline/index.html
-
+1 -0index.js
-
+6 -3lib/timeline/component/ItemSet.js
-
+15 -1lib/timeline/component/css/item.css
-
+142 -0lib/timeline/component/item/ItemBackground.js
+ 2
- 0
HISTORY.md
View File
+ 15
- 1
dist/vis.css
View File
+ 5122
- 4988
dist/vis.js
File diff suppressed because it is too large
View File
+ 1
- 1
dist/vis.map
File diff suppressed because it is too large
View File
+ 1
- 1
dist/vis.min.css
File diff suppressed because it is too large
View File
+ 12
- 11
dist/vis.min.js
File diff suppressed because it is too large
View File
+ 4
- 4
docs/timeline.html
View File
+ 61
- 0
examples/timeline/24_background_areas.html
View File
| @ -0,0 +1,61 @@ | |||
| <!DOCTYPE HTML> | |||
| <html> | |||
| <head> | |||
| <title>Timeline | Background areas</title> | |||
| <style> | |||
| body, html { | |||
| font-family: arial, sans-serif; | |||
| font-size: 11pt; | |||
| } | |||
| .vis.timeline .item.background.negative { | |||
| background-color: rgba(255, 0, 0, 0.2); | |||
| } | |||
| .vis.timeline .item.background.marker { | |||
| border-left: 2px solid green; | |||
| } | |||
| </style> | |||
| <script src="../../dist/vis.js"></script> | |||
| <link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> | |||
| </head> | |||
| <body> | |||
| <p>This example demonstrates the item type "background", see "Period A" and "Period B". The background areas can be styled with css.</p> | |||
| <div id="visualization"></div> | |||
| <script> | |||
| // create a dataset with items | |||
| // we specify the type of the fields `start` and `end` here to be strings | |||
| // containing an ISO date. The fields will be outputted as ISO dates | |||
| // automatically getting data from the DataSet via items.get(). | |||
| var items = new vis.DataSet({ | |||
| type: { start: 'ISODate', end: 'ISODate' } | |||
| }); | |||
| // add items to the DataSet | |||
| items.add([ | |||
| {id: 'A', content: 'Period A', start: '2014-01-16', end: '2014-01-22', type: 'background'}, | |||
| {id: 'B', content: 'Period B', start: '2014-01-25', end: '2014-01-30', type: 'background', className: 'negative'}, | |||
| {id: 1, content: 'item 1<br>start', start: '2014-01-23'}, | |||
| {id: 2, content: 'item 2', start: '2014-01-18'}, | |||
| {id: 3, content: 'item 3', start: '2014-01-21'}, | |||
| {id: 4, content: 'item 4', start: '2014-01-19', end: '2014-01-24'}, | |||
| {id: 5, content: 'item 5', start: '2014-01-28', type:'point'}, | |||
| {id: 6, content: 'item 6', start: '2014-01-26'} | |||
| ]); | |||
| var container = document.getElementById('visualization'); | |||
| var options = { | |||
| start: '2014-01-10', | |||
| end: '2014-02-10', | |||
| editable: true | |||
| }; | |||
| var timeline = new vis.Timeline(container, items, options); | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 1
- 0
examples/timeline/index.html
View File
+ 1
- 0
index.js
View File
+ 6
- 3
lib/timeline/component/ItemSet.js
View File
+ 15
- 1
lib/timeline/component/css/item.css
View File
+ 142
- 0
lib/timeline/component/item/ItemBackground.js
View File
| @ -0,0 +1,142 @@ | |||
| var Hammer = require('../../../module/hammer'); | |||
| var Item = require('./Item'); | |||
| var ItemRange = require('./ItemRange'); | |||
| /** | |||
| * @constructor ItemBackground | |||
| * @extends Item | |||
| * @param {Object} data Object containing parameters start, end | |||
| * content, className. | |||
| * @param {{toScreen: function, toTime: function}} conversion | |||
| * Conversion functions from time to screen and vice versa | |||
| * @param {Object} [options] Configuration options | |||
| * // TODO: describe options | |||
| */ | |||
| // TODO: implement support for the ItemBackground just having a start, then being displayed as a sort of an annotation | |||
| function ItemBackground (data, conversion, options) { | |||
| this.props = { | |||
| content: { | |||
| width: 0 | |||
| } | |||
| }; | |||
| this.overflow = false; // if contents can overflow (css styling), this flag is set to true | |||
| // validate data | |||
| if (data) { | |||
| if (data.start == undefined) { | |||
| throw new Error('Property "start" missing in item ' + data.id); | |||
| } | |||
| if (data.end == undefined) { | |||
| throw new Error('Property "end" missing in item ' + data.id); | |||
| } | |||
| } | |||
| Item.call(this, data, conversion, options); | |||
| } | |||
| ItemBackground.prototype = new Item (null, null, null); | |||
| ItemBackground.prototype.baseClassName = 'item background'; | |||
| /** | |||
| * Check whether this item is visible inside given range | |||
| * @returns {{start: Number, end: Number}} range with a timestamp for start and end | |||
| * @returns {boolean} True if visible | |||
| */ | |||
| ItemBackground.prototype.isVisible = function(range) { | |||
| // determine visibility | |||
| return (this.data.start < range.end) && (this.data.end > range.start); | |||
| }; | |||
| /** | |||
| * Repaint the item | |||
| */ | |||
| ItemBackground.prototype.redraw = function() { | |||
| var dom = this.dom; | |||
| if (!dom) { | |||
| // create DOM | |||
| this.dom = {}; | |||
| dom = this.dom; | |||
| // background box | |||
| dom.box = document.createElement('div'); | |||
| // className is updated in redraw() | |||
| // contents box | |||
| dom.content = document.createElement('div'); | |||
| dom.content.className = 'content'; | |||
| dom.box.appendChild(dom.content); | |||
| // attach this item as attribute | |||
| dom.box['timeline-item'] = this; | |||
| this.dirty = true; | |||
| } | |||
| // append DOM to parent DOM | |||
| if (!this.parent) { | |||
| throw new Error('Cannot redraw item: no parent attached'); | |||
| } | |||
| if (!dom.box.parentNode) { | |||
| var background = this.parent.dom.background; | |||
| if (!background) { | |||
| throw new Error('Cannot redraw time axis: parent has no background container element'); | |||
| } | |||
| background.appendChild(dom.box); | |||
| } | |||
| this.displayed = true; | |||
| // Update DOM when item is marked dirty. An item is marked dirty when: | |||
| // - the item is not yet rendered | |||
| // - the item's data is changed | |||
| // - the item is selected/deselected | |||
| if (this.dirty) { | |||
| this._updateContents(this.dom.content); | |||
| this._updateTitle(this.dom.content); | |||
| this._updateDataAttributes(this.dom.content); | |||
| // update class | |||
| var className = (this.data.className ? (' ' + this.data.className) : '') + | |||
| (this.selected ? ' selected' : ''); | |||
| dom.box.className = this.baseClassName + className; | |||
| // determine from css whether this box has overflow | |||
| this.overflow = window.getComputedStyle(dom.content).overflow !== 'hidden'; | |||
| // recalculate size | |||
| this.props.content.width = this.dom.content.offsetWidth; | |||
| this.height = 0; // set height zero, so this item will be ignored when stacking items | |||
| this.dirty = false; | |||
| } | |||
| }; | |||
| /** | |||
| * Show the item in the DOM (when not already visible). The items DOM will | |||
| * be created when needed. | |||
| */ | |||
| ItemBackground.prototype.show = ItemRange.prototype.show; | |||
| /** | |||
| * Hide the item from the DOM (when visible) | |||
| * @return {Boolean} changed | |||
| */ | |||
| ItemBackground.prototype.hide = ItemRange.prototype.hide; | |||
| /** | |||
| * Reposition the item horizontally | |||
| * @Override | |||
| */ | |||
| ItemBackground.prototype.repositionX = ItemRange.prototype.repositionX; | |||
| /** | |||
| * Reposition the item vertically | |||
| * @Override | |||
| */ | |||
| ItemBackground.prototype.repositionY = function() { | |||
| var onTop = this.options.orientation === 'top'; | |||
| this.dom.content.style.top = onTop ? '' : '0'; | |||
| this.dom.content.style.bottom = onTop ? '0' : ''; | |||
| }; | |||
| module.exports = ItemBackground; | |||