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

Added example 22_window_adjustment.html

v3_develop
jos 10 years ago
parent
d2591a8dc3
commit
95127c0683
9 changed files with 24947 additions and 24484 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +24791
    -24423
      dist/vis.js
  2. +1
    -1
      dist/vis.map
  3. +1
    -1
      dist/vis.min.css
  4. +13
    -13
      dist/vis.min.js
  5. +90
    -0
      examples/timeline/22_window_adjustment.html
  6. +1
    -0
      examples/timeline/index.html
  7. +0
    -36
      lib/timeline/Core.js
  8. +8
    -5
      lib/timeline/Range.js
  9. +42
    -5
      lib/timeline/Timeline.js

+ 24791
- 24423
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


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


+ 90
- 0
examples/timeline/22_window_adjustment.html View File

@ -0,0 +1,90 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Adjusting window</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>This example demonstrates functions to adjust the visible window of the Timeline.</p>
<input type="button" id="window1" value="Set window from 2014-01-01 to 2014-04-01"><br>
<input type="button" id="window2" value="Set window from 2014-01-01 to 2014-04-01 without animation"><br>
<input type="button" id="fit" value="Fit all items"><br>
<input type="button" id="select" value="Select & focus items 5 and 6"><br>
<input type="button" id="focus1" value="Focus item 2"><br>
<input type="button" id="focus2" value="Focus items 5 and 6 (slow animation)"><br>
<input type="button" id="focus3" value="Focus current selection"><br>
<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: 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,
showCurrentTime: true
};
var timeline = new vis.Timeline(container, items, options);
document.getElementById('window1').onclick = function() {
timeline.setWindow('2014-01-01', '2014-04-01');
};
document.getElementById('window2').onclick = function() {
timeline.setWindow('2014-01-01', '2014-04-01', {
animate: false
});
};
document.getElementById('fit').onclick = function() {
timeline.fit();
};
document.getElementById('select').onclick = function() {
timeline.setSelection([5, 6], {
focus: true
});
};
document.getElementById('focus1').onclick = function() {
timeline.focus(2);
};
document.getElementById('focus2').onclick = function() {
timeline.focus([5, 6], {
animate: 3000 // ms
});
};
document.getElementById('focus3').onclick = function() {
var selection = timeline.getSelection();
timeline.focus(selection);
};
</script>
</body>
</html>

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

@ -33,6 +33,7 @@
<p><a href="19_localization.html">19_localization.html</a></p> <p><a href="19_localization.html">19_localization.html</a></p>
<p><a href="20_click_to_use.html">20_click_to_use.html</a></p> <p><a href="20_click_to_use.html">20_click_to_use.html</a></p>
<p><a href="21_set_selection.html">21_set_selection.html</a></p> <p><a href="21_set_selection.html">21_set_selection.html</a></p>
<p><a href="22_window_adjustment.html">22_window_adjustment.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>

+ 0
- 36
lib/timeline/Core.js View File

@ -323,42 +323,6 @@ Core.prototype.clear = function(what) {
} }
}; };
/**
* Set Core window such that it fits all items
* @param {Object} [options] Available options:
* `animate: boolean | number`
* If true (default), the range is animated
* smoothly to the new window.
* If a number, the number is taken as duration
* for the animation. Default duration is 500 ms.
*/
Core.prototype.fit = function(options) {
// apply the data range as range
var dataRange = this.getItemRange();
// add 5% space on both sides
var start = dataRange.min;
var end = dataRange.max;
if (start != null && end != null) {
var interval = (end.valueOf() - start.valueOf());
if (interval <= 0) {
// prevent an empty interval
interval = 24 * 60 * 60 * 1000; // 1 day
}
start = new Date(start.valueOf() - interval * 0.05);
end = new Date(end.valueOf() + interval * 0.05);
}
// skip range set if there is no start and end date
if (start === null && end === null) {
return;
}
var animate = (options && options.animate !== undefined) ? options.animate : true;
this.range.setRange(start, end, animate);
};
/** /**
* Set the visible window. Both parameters are optional, you can change only * Set the visible window. Both parameters are optional, you can change only
* start or only end. Syntax: * start or only end. Syntax:

+ 8
- 5
lib/timeline/Range.js View File

@ -100,8 +100,8 @@ function validateDirection (direction) {
/** /**
* Set a new start and end range * Set a new start and end range
* @param {Number} [start]
* @param {Number} [end]
* @param {Date | Number | String} [start]
* @param {Date | Number | String} [end]
* @param {boolean | number} [animate=false] If true, the range is animated * @param {boolean | number} [animate=false] If true, the range is animated
* smoothly to the new window. * smoothly to the new window.
* If animate is a number, the * If animate is a number, the
@ -110,6 +110,9 @@ function validateDirection (direction) {
* *
*/ */
Range.prototype.setRange = function(start, end, animate) { Range.prototype.setRange = function(start, end, animate) {
var _start = start != undefined ? util.convert(start, 'Date').valueOf() : null;
var _end = end != undefined ? util.convert(end, 'Date').valueOf() : null;
this._cancelAnimation(); this._cancelAnimation();
if (animate) { if (animate) {
@ -123,8 +126,8 @@ Range.prototype.setRange = function(start, end, animate) {
if (!me.props.touch.dragging) { if (!me.props.touch.dragging) {
var now = new Date().valueOf(); var now = new Date().valueOf();
var time = now - initTime; var time = now - initTime;
var s = util.easeInOutQuad(time, initStart, start, duration);
var e = util.easeInOutQuad(time, initEnd, end, duration);
var s = util.easeInOutQuad(time, initStart, _start, duration);
var e = util.easeInOutQuad(time, initEnd, _end, duration);
changed = me._applyRange(s, e); changed = me._applyRange(s, e);
anyChanged = anyChanged || changed; anyChanged = anyChanged || changed;
if (changed) { if (changed) {
@ -148,7 +151,7 @@ Range.prototype.setRange = function(start, end, animate) {
return next(); return next();
} }
else { else {
var changed = this._applyRange(start, end);
var changed = this._applyRange(_start, _end);
if (changed) { if (changed) {
var params = {start: new Date(this.start), end: new Date(this.end)}; var params = {start: new Date(this.start), end: new Date(this.end)};
this.body.emitter.emit('rangechange', params); this.body.emitter.emit('rangechange', params);

+ 42
- 5
lib/timeline/Timeline.js View File

@ -197,6 +197,41 @@ Timeline.prototype.getSelection = function() {
return this.itemSet && this.itemSet.getSelection() || []; return this.itemSet && this.itemSet.getSelection() || [];
}; };
/**
* Set Timeline window such that it fits all items
* @param {Object} [options] Available options:
* `animate: boolean | number`
* If true (default), the range is animated
* smoothly to the new window.
* If a number, the number is taken as duration
* for the animation. Default duration is 500 ms.
*/
Timeline.prototype.fit = function(options) {
// apply the data range as range
var dataRange = this.getItemRange();
// add 5% space on both sides
var start = dataRange.min;
var end = dataRange.max;
if (start != null && end != null) {
var interval = (end.valueOf() - start.valueOf());
if (interval <= 0) {
// prevent an empty interval
interval = 24 * 60 * 60 * 1000; // 1 day
}
start = new Date(start.valueOf() - interval * 0.05);
end = new Date(end.valueOf() + interval * 0.05);
}
// skip range set if there is no start and end date
if (start === null && end === null) {
return;
}
var animate = (options && options.animate !== undefined) ? options.animate : true;
this.range.setRange(start, end, animate);
};
/** /**
* Adjust the visible window such that the selected item (or multiple items) * Adjust the visible window such that the selected item (or multiple items)
* are centered on screen. * are centered on screen.
@ -238,12 +273,14 @@ Timeline.prototype.focus = function(id, options) {
} }
}); });
// calculate the new middle and interval for the window
var middle = (start + end) / 2;
var interval = Math.max((this.range.end - this.range.start), (end - start) * 1.1);
if (start !== null && end !== null) {
// calculate the new middle and interval for the window
var middle = (start + end) / 2;
var interval = Math.max((this.range.end - this.range.start), (end - start) * 1.1);
var animate = (options && options.animate !== undefined) ? options.animate : true;
this.range.setRange(middle - interval / 2, middle + interval / 2, animate);
var animate = (options && options.animate !== undefined) ? options.animate : true;
this.range.setRange(middle - interval / 2, middle + interval / 2, animate);
}
}; };
/** /**

Write Preview
Loading…
Cancel
Save