jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Removed the 'rangeoverflow' item type

css_transitions
jos 10 years ago
parent
468e613a26
commit
d78a823d4e
9 changed files with 126 additions and 85 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +7
    -1
      HISTORY.md
  2. +4
    -4
      docs/timeline.html
  3. +55
    -0
      examples/timeline/18_range_overflow.html
  4. +1
    -0
      examples/timeline/index.html
  5. +7
    -3
      src/timeline/component/ItemSet.js
  6. +8
    -8
      src/timeline/component/css/item.css
  7. +29
    -11
      src/timeline/component/item/ItemRange.js
  8. +0
    -57
      src/timeline/component/item/ItemRangeOverflow.js
  9. +15
    -1
      test/timeline.html

+ 7
- 1
HISTORY.md View File

@ -2,12 +2,18 @@
http://visjs.org http://visjs.org
## 2014-06-19, version 2.0.1
## not yet released, version 2.1.0
### Timeline ### Timeline
- Fixed auto detected item type being preferred over the global item `type`. - Fixed auto detected item type being preferred over the global item `type`.
- Throws an error when constructing without new keyword. - Throws an error when constructing without new keyword.
- Removed the 'rangeoverflow' item type. Instead, one can use a regular range
and change css styling of the item contents to:
.vis.timeline .item.range .content {
overflow: visible;
}
### Graph ### Graph

+ 4
- 4
docs/timeline.html View File

@ -202,8 +202,8 @@ var items = [
<td>type</td> <td>type</td>
<td>String</td> <td>String</td>
<td>'box'</td> <td>'box'</td>
<td>The type of the item. Can be 'box' (default), 'point', 'range', or 'rangeoverflow'.
Types 'box' and 'point' need a start date, and types 'range' and 'rangeoverflow' need both a start and end date. Types 'range' and rangeoverflow are equal, except that overflowing text in 'range' is hidden, while visible in 'rangeoverflow'.
<td>The type of the item. Can be 'box' (default), 'point', or 'range'.
Types 'box' and 'point' need a start date, and type 'range' needs both a start and end date.
</td> </td>
</tr> </tr>
<tr> <tr>
@ -604,8 +604,8 @@ var options = {
<tr> <tr>
<td>type</td> <td>type</td>
<td>String</td> <td>String</td>
<td>'box'</td>
<td>Specifies the default type for the timeline items. Choose from 'box', 'point', 'range', and 'rangeoverflow'. Note that individual items can override this default type.
<td>none</td>
<td>Specifies the default type for the timeline items. Choose from 'box', 'point', and 'range'. Note that individual items can override this default type. If undefined, the Timeline will auto detect the type from the items data: if a start and end date is available, a 'range' will be created, and else, a 'box' is created.
</td> </td>
</tr> </tr>

+ 55
- 0
examples/timeline/18_range_overflow.html View File

@ -0,0 +1,55 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Range overflow</title>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {
font-family: sans-serif;
}
.vis.timeline .item.range .content {
overflow: visible;
}
</style>
</head>
<body>
<p>
In case of ranges being spread over a wide range of time, it can be interesting to have the text contents of the ranges overflow the box. This can be achieved by changing the overflow property of the contents to visible with css:
</p>
<pre>
.vis.timeline .item.range .content {
overflow: visible;
}
</pre>
<div id="visualization"></div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{id: 1, content: 'item 1 with overflowing text content', start: '2014-04-20', end: '2014-04-26'},
{id: 2, content: 'item 2 with overflowing text content', start: '2014-05-14', end: '2014-05-18'},
{id: 3, content: 'item 3 with overflowing text content', start: '2014-06-18', end: '2014-06-22'},
{id: 4, content: 'item 4 with overflowing text content', start: '2014-06-16', end: '2014-06-17'},
{id: 5, content: 'item 5 with overflowing text content', start: '2014-06-25', end: '2014-06-27'},
{id: 6, content: 'item 6 with overflowing text content', start: '2014-09-27', end: '2014-09-28'}
]);
// Configuration for the Timeline
var options = {
editable: true
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

+ 1
- 0
examples/timeline/index.html View File

@ -29,6 +29,7 @@
<p><a href="15_item_class_names.html">15_item_class_names.html</a></p> <p><a href="15_item_class_names.html">15_item_class_names.html</a></p>
<p><a href="16_navigation_menu.html">16_navigation_menu.html</a></p> <p><a href="16_navigation_menu.html">16_navigation_menu.html</a></p>
<p><a href="17_data_serialization.html">17_data_serialization.html</a></p> <p><a href="17_data_serialization.html">17_data_serialization.html</a></p>
<p><a href="18_range_overflow.html">18_range_overflow.html</a></p>
<p><a href="requirejs/requirejs_example.html">requirejs_example.html</a></p> <p><a href="requirejs/requirejs_example.html">requirejs_example.html</a></p>

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

@ -13,7 +13,7 @@ function ItemSet(body, options) {
this.body = body; this.body = body;
this.defaultOptions = { this.defaultOptions = {
type: null, // 'box', 'point', 'range', 'rangeoverflow'
type: null, // 'box', 'point', 'range'
orientation: 'bottom', // 'top' or 'bottom' orientation: 'bottom', // 'top' or 'bottom'
align: 'center', // alignment of box items align: 'center', // alignment of box items
stack: true, stack: true,
@ -114,7 +114,6 @@ ItemSet.prototype = new Component();
ItemSet.types = { ItemSet.types = {
box: ItemBox, box: ItemBox,
range: ItemRange, range: ItemRange,
rangeoverflow: ItemRangeOverflow,
point: ItemPoint point: ItemPoint
}; };
@ -696,6 +695,11 @@ ItemSet.prototype._onUpdate = function(ids) {
item.id = id; // TODO: not so nice setting id afterwards item.id = id; // TODO: not so nice setting id afterwards
me._addItem(item); me._addItem(item);
} }
else if (type == 'rangeoverflow') {
// TODO: deprecated since version 2.1.0 (or 3.0.0?). cleanup some day
throw new TypeError('Item type "rangeoverflow" is deprecated. Use css styling instead: ' +
'.vis.timeline .item.range .content {overflow: visible;}');
}
else { else {
throw new TypeError('Unknown item type "' + type + '"'); throw new TypeError('Unknown item type "' + type + '"');
} }
@ -1205,7 +1209,7 @@ ItemSet.prototype._onAddItem = function (event) {
}; };
// when default type is a range, add a default end date to the new item // when default type is a range, add a default end date to the new item
if (this.options.type === 'range' || this.options.type == 'rangeoverflow') {
if (this.options.type === 'range') {
var end = this.body.util.toTime(x + this.props.width / 5); var end = this.body.util.toTime(x + this.props.width / 5);
newItem.end = snap ? snap(end) : end; newItem.end = snap ? snap(end) : end;
} }

+ 8
- 8
src/timeline/component/css/item.css View File

@ -41,15 +41,13 @@
border-radius: 4px; border-radius: 4px;
} }
.vis.timeline .item.range,
.vis.timeline .item.rangeoverflow{
.vis.timeline .item.range {
border-style: solid; border-style: solid;
border-radius: 2px; border-radius: 2px;
box-sizing: border-box; box-sizing: border-box;
} }
.vis.timeline .item.range .content,
.vis.timeline .item.rangeoverflow .content {
.vis.timeline .item.range .content {
position: relative; position: relative;
display: inline-block; display: inline-block;
} }
@ -59,6 +57,10 @@
max-width: 100%; max-width: 100%;
} }
.vis.timeline .item.range.overflow .content {
overflow: visible;
}
.vis.timeline .item.line { .vis.timeline .item.line {
padding: 0; padding: 0;
position: absolute; position: absolute;
@ -82,8 +84,7 @@
cursor: pointer; cursor: pointer;
} }
.vis.timeline .item.range .drag-left,
.vis.timeline .item.rangeoverflow .drag-left {
.vis.timeline .item.range .drag-left {
position: absolute; position: absolute;
width: 24px; width: 24px;
height: 100%; height: 100%;
@ -94,8 +95,7 @@
z-index: 10000; z-index: 10000;
} }
.vis.timeline .item.range .drag-right,
.vis.timeline .item.rangeoverflow .drag-right {
.vis.timeline .item.range .drag-right {
position: absolute; position: absolute;
width: 24px; width: 24px;
height: 100%; height: 100%;

+ 29
- 11
src/timeline/component/item/ItemRange.js View File

@ -14,6 +14,7 @@ function ItemRange (data, conversion, options) {
width: 0 width: 0
} }
}; };
this.overflow = false; // if contents can overflow (css styling), this flag is set to true
// validate data // validate data
if (data) { if (data) {
@ -107,6 +108,9 @@ ItemRange.prototype.redraw = function() {
// recalculate size // recalculate size
if (this.dirty) { if (this.dirty) {
// determine from css whether this box has overflow
this.overflow = window.getComputedStyle(dom.content).overflow !== 'hidden';
this.props.content.width = this.dom.content.offsetWidth; this.props.content.width = this.dom.content.offsetWidth;
this.height = this.dom.box.offsetHeight; this.height = this.dom.box.offsetHeight;
@ -151,6 +155,7 @@ ItemRange.prototype.hide = function() {
* Reposition the item horizontally * Reposition the item horizontally
* @Override * @Override
*/ */
// TODO: delete the old function
ItemRange.prototype.repositionX = function() { ItemRange.prototype.repositionX = function() {
var props = this.props, var props = this.props,
parentWidth = this.parent.width, parentWidth = this.parent.width,
@ -166,22 +171,35 @@ ItemRange.prototype.repositionX = function() {
if (end > 2 * parentWidth) { if (end > 2 * parentWidth) {
end = 2 * parentWidth; end = 2 * parentWidth;
} }
var boxWidth = Math.max(end - start, 1);
// when range exceeds left of the window, position the contents at the left of the visible area
if (start < 0) {
contentLeft = Math.min(-start,
(end - start - props.content.width - 2 * padding));
// TODO: remove the need for options.padding. it's terrible.
}
else {
contentLeft = 0;
if (this.overflow) {
// when range exceeds left of the window, position the contents at the left of the visible area
contentLeft = Math.max(-start, 0);
this.left = start;
this.width = boxWidth + this.props.content.width;
// Note: The calculation of width is an optimistic calculation, giving
// a width which will not change when moving the Timeline
// So no restacking needed, which is nicer for the eye;
} }
else { // no overflow
// when range exceeds left of the window, position the contents at the left of the visible area
if (start < 0) {
contentLeft = Math.min(-start,
(end - start - props.content.width - 2 * padding));
// TODO: remove the need for options.padding. it's terrible.
}
else {
contentLeft = 0;
}
this.left = start;
this.width = Math.max(end - start, 1);
this.left = start;
this.width = boxWidth;
}
this.dom.box.style.left = this.left + 'px'; this.dom.box.style.left = this.left + 'px';
this.dom.box.style.width = this.width + 'px';
this.dom.box.style.width = boxWidth + 'px';
this.dom.content.style.left = contentLeft + 'px'; this.dom.content.style.left = contentLeft + 'px';
}; };

+ 0
- 57
src/timeline/component/item/ItemRangeOverflow.js View File

@ -1,57 +0,0 @@
/**
* @constructor ItemRangeOverflow
* @extends ItemRange
* @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
*/
function ItemRangeOverflow (data, conversion, options) {
this.props = {
content: {
left: 0,
width: 0
}
};
ItemRange.call(this, data, conversion, options);
}
ItemRangeOverflow.prototype = new ItemRange (null, null, null);
ItemRangeOverflow.prototype.baseClassName = 'item rangeoverflow';
/**
* Reposition the item horizontally
* @Override
*/
ItemRangeOverflow.prototype.repositionX = function() {
var parentWidth = this.parent.width,
start = this.conversion.toScreen(this.data.start),
end = this.conversion.toScreen(this.data.end),
contentLeft;
// limit the width of the this, as browsers cannot draw very wide divs
if (start < -parentWidth) {
start = -parentWidth;
}
if (end > 2 * parentWidth) {
end = 2 * parentWidth;
}
// when range exceeds left of the window, position the contents at the left of the visible area
contentLeft = Math.max(-start, 0);
this.left = start;
var boxWidth = Math.max(end - start, 1);
this.width = boxWidth + this.props.content.width;
// Note: The calculation of width is an optimistic calculation, giving
// a width which will not change when moving the Timeline
// So no restacking needed, which is nicer for the eye
this.dom.box.style.left = this.left + 'px';
this.dom.box.style.width = boxWidth + 'px';
this.dom.content.style.left = contentLeft + 'px';
};

+ 15
- 1
test/timeline.html View File

@ -15,6 +15,15 @@
#visualization .itemset { #visualization .itemset {
/*background: rgba(255, 255, 0, 0.5);*/ /*background: rgba(255, 255, 0, 0.5);*/
} }
/*
.vis.timeline .item.range .content {
overflow: hidden;
max-width: none;
}
*/
</style> </style>
</head> </head>
@ -70,7 +79,12 @@
{_id: 2, content: 'item 2', start: now.clone().add('days', -2).toDate() }, {_id: 2, content: 'item 2', start: now.clone().add('days', -2).toDate() },
{_id: 3, content: 'item 3', start: now.clone().add('days', 2).toDate()}, {_id: 3, content: 'item 3', start: now.clone().add('days', 2).toDate()},
{ {
_id: 4, content: 'item 4',
_id: 4, content: 'item 4 asdfjkadsf adksfk adskfadks aksdfk asdfkkadkskafdskdfs ',
start: now.clone().add('days', 0).toDate(),
end: now.clone().add('days', 7).toDate(), className: 'overflow'
},
{
_id: 7, content: 'item 7 asdfjkadsf adksfk adskfadks aksdfk asdfkkadkskafdskdfs ',
start: now.clone().add('days', 0).toDate(), start: now.clone().add('days', 0).toDate(),
end: now.clone().add('days', 7).toDate() end: now.clone().add('days', 7).toDate()
}, },

Write Preview
Loading…
Cancel
Save