Browse Source

Fixed #243, Fixed #270: Implemented support for option `align` for range items.

v3_develop
jos 10 years ago
parent
commit
940e903342
9 changed files with 24659 additions and 24427 deletions
  1. +4
    -3
      HISTORY.md
  2. +24590
    -24378
      dist/vis.js
  3. +1
    -1
      dist/vis.map
  4. +1
    -1
      dist/vis.min.css
  5. +9
    -9
      dist/vis.min.js
  6. +1
    -2
      docs/timeline.html
  7. +1
    -1
      lib/timeline/component/ItemSet.js
  8. +10
    -10
      lib/timeline/component/item/ItemBox.js
  9. +42
    -22
      lib/timeline/component/item/ItemRange.js

+ 4
- 3
HISTORY.md View File

@ -6,9 +6,6 @@ http://visjs.org
### Timeline ### Timeline
- Fixed the `change` event sometimes being fired twice on IE10.
- Fixed canceling moving an item to another group did not move the item
back to the original group.
- Added localization support. - Added localization support.
- Implemented option `clickToUse`. - Implemented option `clickToUse`.
- Implemented function `focus(id)` to center a specific item (or multiple items) - Implemented function `focus(id)` to center a specific item (or multiple items)
@ -20,6 +17,10 @@ http://visjs.org
and `setWindow`. and `setWindow`.
- Implemented functions `setCurrentTime(date)` and `getCurrentTime()`. - Implemented functions `setCurrentTime(date)` and `getCurrentTime()`.
- Implemented a new callback function `onMoving(item, callback)`. - Implemented a new callback function `onMoving(item, callback)`.
- Implemented support for option `align` for range items.
- Fixed the `change` event sometimes being fired twice on IE10.
- Fixed canceling moving an item to another group did not move the item
back to the original group.
- Fixed the `change` event sometimes being fired twice on IE10. - Fixed the `change` event sometimes being fired twice on IE10.
- Fixed canceling moving an item to another group did not move the item - Fixed canceling moving an item to another group did not move the item
back to the original group. back to the original group.

+ 24590
- 24378
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


+ 9
- 9
dist/vis.min.js
File diff suppressed because it is too large
View File


+ 1
- 2
docs/timeline.html View File

@ -360,8 +360,7 @@ var options = {
<td>align</td> <td>align</td>
<td>String</td> <td>String</td>
<td>"center"</td> <td>"center"</td>
<td>Alignment of items with type 'box'. Available values are
'center' (default), 'left', or 'right').</td>
<td>Alignment of items with type 'box' and 'range'. Available values are 'auto' (default), 'center', 'left', or 'right'. For 'box' items, the 'auto' alignment is 'center'. For 'range' items, the auto alignment is dynamic: positioned left and shifted such that the contents is always visible on screen.</td>
</tr> </tr>
<tr> <tr>

+ 1
- 1
lib/timeline/component/ItemSet.js View File

@ -26,7 +26,7 @@ function ItemSet(body, options) {
this.defaultOptions = { this.defaultOptions = {
type: null, // 'box', 'point', 'range' type: null, // 'box', 'point', 'range'
orientation: 'bottom', // 'top' or 'bottom' orientation: 'bottom', // 'top' or 'bottom'
align: 'center', // alignment of box items
align: 'auto', // alignment of box items
stack: true, stack: true,
groupOrder: null, groupOrder: null,

+ 10
- 10
lib/timeline/component/item/ItemBox.js View File

@ -179,12 +179,12 @@ ItemBox.prototype.hide = function() {
* @Override * @Override
*/ */
ItemBox.prototype.repositionX = function() { ItemBox.prototype.repositionX = function() {
var start = this.conversion.toScreen(this.data.start),
align = this.options.align,
left,
box = this.dom.box,
line = this.dom.line,
dot = this.dom.dot;
var start = this.conversion.toScreen(this.data.start);
var align = this.options.align;
var left;
var box = this.dom.box;
var line = this.dom.line;
var dot = this.dom.dot;
// calculate left position of the box // calculate left position of the box
if (align == 'right') { if (align == 'right') {
@ -213,10 +213,10 @@ ItemBox.prototype.repositionX = function() {
* @Override * @Override
*/ */
ItemBox.prototype.repositionY = function() { ItemBox.prototype.repositionY = function() {
var orientation = this.options.orientation,
box = this.dom.box,
line = this.dom.line,
dot = this.dom.dot;
var orientation = this.options.orientation;
var box = this.dom.box;
var line = this.dom.line;
var dot = this.dom.dot;
if (orientation == 'top') { if (orientation == 'top') {
box.style.top = (this.top || 0) + 'px'; box.style.top = (this.top || 0) + 'px';

+ 42
- 22
lib/timeline/component/item/ItemRange.js View File

@ -165,12 +165,11 @@ ItemRange.prototype.hide = function() {
* @Override * @Override
*/ */
ItemRange.prototype.repositionX = function() { ItemRange.prototype.repositionX = function() {
var props = this.props,
parentWidth = this.parent.width,
start = this.conversion.toScreen(this.data.start),
end = this.conversion.toScreen(this.data.end),
padding = this.options.padding,
contentLeft;
var parentWidth = this.parent.width;
var start = this.conversion.toScreen(this.data.start);
var end = this.conversion.toScreen(this.data.end);
var contentLeft;
var contentWidth;
// limit the width of the this, as browsers cannot draw very wide divs // limit the width of the this, as browsers cannot draw very wide divs
if (start < -parentWidth) { if (start < -parentWidth) {
@ -182,33 +181,54 @@ ItemRange.prototype.repositionX = function() {
var boxWidth = Math.max(end - start, 1); var boxWidth = Math.max(end - start, 1);
if (this.overflow) { 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.left = start;
this.width = boxWidth + this.props.content.width; this.width = boxWidth + this.props.content.width;
contentWidth = this.props.content.width;
// Note: The calculation of width is an optimistic calculation, giving // Note: The calculation of width is an optimistic calculation, giving
// a width which will not change when moving the Timeline // a width which will not change when moving the Timeline
// So no restacking needed, which is nicer for the eye;
// So no re-stacking 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;
}
else {
this.left = start; this.left = start;
this.width = boxWidth; this.width = boxWidth;
contentWidth = Math.min(end - start, this.props.content.width);
} }
this.dom.box.style.left = this.left + 'px'; this.dom.box.style.left = this.left + 'px';
this.dom.box.style.width = boxWidth + 'px'; this.dom.box.style.width = boxWidth + 'px';
this.dom.content.style.left = contentLeft + 'px';
switch (this.options.align) {
case 'left':
this.dom.content.style.left = '0';
break;
case 'right':
this.dom.content.style.left = Math.max((boxWidth - contentWidth - 2 * this.options.padding), 0) + 'px';
break;
case 'center':
this.dom.content.style.left = Math.max((boxWidth - contentWidth - 2 * this.options.padding) / 2, 0) + 'px';
break;
default: // 'auto'
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);
}
else {
// 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 - this.props.content.width - 2 * this.options.padding));
// TODO: remove the need for options.padding. it's terrible.
}
else {
contentLeft = 0;
}
}
this.dom.content.style.left = contentLeft + 'px';
}
}; };
/** /**

Loading…
Cancel
Save