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

Horizontal scroll (#2201) 

* Hide vertically hidden ranged items in groups that are not visible
* Add vertical scroll when zoom is inactive
* Fix review comments
* Add horizontalScroll option
codeClimate
yotamberk 8 years ago
committed by Alexander Wunschik
parent
ea4d56c68b
commit
178e9dc915
5 changed files with 116 additions and 14 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +9
    -0
      docs/timeline/index.html
  2. +77
    -0
      examples/timeline/other/horizontalScroll.html
  3. +4
    -1
      lib/timeline/Core.js
  4. +25
    -13
      lib/timeline/Range.js
  5. +1
    -0
      lib/timeline/optionsTimeline.js

+ 9
- 0
docs/timeline/index.html View File

@ -675,6 +675,15 @@ function (option, path) {
</td> </td>
</tr> </tr>
<tr>
<td>horizontalScroll</td>
<td>Boolean</td>
<td>false</td>
<td>This option allows you to scroll horizontally to move backwards and forwards in the time range.
Only applicable when option <code>zoomCtrl</code> is defined or <code>zoomable</code> is <code>false</code>.
</td>
</tr>
<tr> <tr>
<td>itemsAlwaysDraggable</td> <td>itemsAlwaysDraggable</td>
<td>boolean</td> <td>boolean</td>

+ 77
- 0
examples/timeline/other/horizontalScroll.html View File

@ -0,0 +1,77 @@
<html>
<head>
<title>Timeline | Horizontal Scroll Option</title>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../googleAnalytics.js"></script>
</head>
<body>
<h1>Timeline horizontal scroll option</h1>
<div id="mytimeline"></div>
<script>
// create groups
var numberOfGroups = 25;
var groups = new vis.DataSet()
for (var i = 0; i < numberOfGroups; i++) {
groups.add({
id: i,
content: 'Truck&nbsp;' + i
})
}
// create items
var numberOfItems = 1000;
var items = new vis.DataSet();
var itemsPerGroup = Math.round(numberOfItems/numberOfGroups);
for (var truck = 0; truck < numberOfGroups; truck++) {
var date = new Date();
for (var order = 0; order < itemsPerGroup; order++) {
date.setHours(date.getHours() + 4 * (Math.random() < 0.2));
var start = new Date(date);
date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4));
var end = new Date(date);
items.add({
id: order + itemsPerGroup * truck,
group: truck,
start: start,
end: end,
content: 'Order ' + order
});
}
}
// specify options
var options = {
stack: true,
horizontalScroll: true,
zoomKey: 'ctrlKey',
maxHeight: 400,
start: new Date(),
end: new Date(1000*60*60*24 + (new Date()).valueOf()),
editable: true,
margin: {
item: 10, // minimal margin between items
axis: 5 // minimal margin between items and the axis
},
orientation: 'top'
};
// create a Timeline
var container = document.getElementById('mytimeline');
timeline = new vis.Timeline(container, items, groups, options);
</script>
</body>
</html>

+ 4
- 1
lib/timeline/Core.js View File

@ -161,6 +161,9 @@ Core.prototype._create = function (container) {
// prevent scrolling when zoomKey defined or activated // prevent scrolling when zoomKey defined or activated
if (!me.options.zoomKey || event[me.options.zoomKey]) return if (!me.options.zoomKey || event[me.options.zoomKey]) return
// prevent scrolling vertically when horizontalScroll is true
if (me.options.horizontalScroll) return
var delta = 0; var delta = 0;
if (event.wheelDelta) { /* IE/Opera. */ if (event.wheelDelta) { /* IE/Opera. */
delta = event.wheelDelta / 120; delta = event.wheelDelta / 120;
@ -254,7 +257,7 @@ Core.prototype.setOptions = function (options) {
var fields = [ var fields = [
'width', 'height', 'minHeight', 'maxHeight', 'autoResize', 'width', 'height', 'minHeight', 'maxHeight', 'autoResize',
'start', 'end', 'clickToUse', 'dataAttributes', 'hiddenDates', 'start', 'end', 'clickToUse', 'dataAttributes', 'hiddenDates',
'locale', 'locales', 'moment', 'rtl', 'zoomKey'
'locale', 'locales', 'moment', 'rtl', 'zoomKey', 'horizontalScroll'
]; ];
util.selectiveExtend(fields, this.options, options); util.selectiveExtend(fields, this.options, options);

+ 25
- 13
lib/timeline/Range.js View File

@ -81,7 +81,7 @@ Range.prototype.setOptions = function (options) {
// copy the options that we know // copy the options that we know
var fields = [ var fields = [
'direction', 'min', 'max', 'zoomMin', 'zoomMax', 'moveable', 'zoomable', 'direction', 'min', 'max', 'zoomMin', 'zoomMax', 'moveable', 'zoomable',
'moment', 'activate', 'hiddenDates', 'zoomKey', 'rtl'
'moment', 'activate', 'hiddenDates', 'zoomKey', 'rtl', 'horizontalScroll'
]; ];
util.selectiveExtend(fields, this.options, options); util.selectiveExtend(fields, this.options, options);
@ -483,15 +483,10 @@ Range.prototype._onDragEnd = function (event) {
* @private * @private
*/ */
Range.prototype._onMouseWheel = function(event) { Range.prototype._onMouseWheel = function(event) {
// only allow zooming when configured as zoomable and moveable
if (!(this.options.zoomable && this.options.moveable)) return;
// only zoom when the mouse is inside the current range
if (!this._isInsideRange(event)) return;
// Prevent default actions caused by mouse wheel
// (else the page and timeline both zoom and scroll)
event.preventDefault();
// only zoom when the according key is pressed and the zoomKey option is set
if (this.options.zoomKey && !event[this.options.zoomKey]) return;
// retrieve delta // retrieve delta
var delta = 0; var delta = 0;
if (event.wheelDelta) { /* IE/Opera. */ if (event.wheelDelta) { /* IE/Opera. */
@ -502,6 +497,27 @@ Range.prototype._onMouseWheel = function(event) {
delta = -event.detail / 3; delta = -event.detail / 3;
} }
// don't allow zoom when the according key is pressed and the zoomKey option or not zoomable but movable
if ((this.options.zoomKey && !event[this.options.zoomKey] && this.options.zoomable)
|| (!this.options.zoomable && this.options.moveable)) {
if (this.options.horizontalScroll) {
// calculate a single scroll jump relative to the range scale
var diff = delta * (this.end - this.start) / 20;
// calculate new start and end
var newStart = this.start - diff;
var newEnd = this.end - diff;
this.setRange(newStart, newEnd);
}
return;
}
// only allow zooming when configured as zoomable and moveable
if (!(this.options.zoomable && this.options.moveable)) return;
// only zoom when the mouse is inside the current range
if (!this._isInsideRange(event)) return;
// If delta is nonzero, handle it. // If delta is nonzero, handle it.
// Basically, delta is now positive if wheel was scrolled up, // Basically, delta is now positive if wheel was scrolled up,
// and negative, if wheel was scrolled down. // and negative, if wheel was scrolled down.
@ -524,10 +540,6 @@ Range.prototype._onMouseWheel = function(event) {
this.zoom(scale, pointerDate, delta); this.zoom(scale, pointerDate, delta);
} }
// Prevent default actions caused by mouse wheel
// (else the page and timeline both zoom and scroll)
event.preventDefault();
}; };
/** /**

+ 1
- 0
lib/timeline/optionsTimeline.js View File

@ -26,6 +26,7 @@ let allOptions = {
//globals : //globals :
align: {string}, align: {string},
rtl: {boolean, 'undefined': 'undefined'}, rtl: {boolean, 'undefined': 'undefined'},
horizontalScroll: {boolean, 'undefined': 'undefined'},
autoResize: {boolean}, autoResize: {boolean},
clickToUse: {boolean}, clickToUse: {boolean},
dataAttributes: {string, array}, dataAttributes: {string, array},

Write Preview
Loading…
Cancel
Save