Browse Source

Implemented support for vertical dragging (needs some refinement)

css_transitions
jos 10 years ago
parent
commit
0420c72b60
3 changed files with 87 additions and 21 deletions
  1. +1
    -0
      HISTORY.md
  2. +3
    -12
      src/timeline/Range.js
  3. +83
    -9
      src/timeline/Timeline.js

+ 1
- 0
HISTORY.md View File

@ -6,6 +6,7 @@ http://visjs.org
### Timeline ### Timeline
- Implemented support for dragging the timeline contents vertically.
- Implemented options `zoomable` and `moveable`. - Implemented options `zoomable` and `moveable`.
- Changed default value of option `showCurrentTime` to true. - Changed default value of option `showCurrentTime` to true.
- Internal refactoring and simplification of the code. - Internal refactoring and simplification of the code.

+ 3
- 12
src/timeline/Range.js View File

@ -276,8 +276,6 @@ Range.prototype._onDragStart = function(event) {
// when releasing the fingers in opposite order from the touch screen // when releasing the fingers in opposite order from the touch screen
if (touchParams.ignore) return; if (touchParams.ignore) return;
// TODO: reckon with option movable
touchParams.start = this.start; touchParams.start = this.start;
touchParams.end = this.end; touchParams.end = this.end;
@ -287,7 +285,7 @@ Range.prototype._onDragStart = function(event) {
}; };
/** /**
* Perform dragging operating.
* Perform dragging operation
* @param {Event} event * @param {Event} event
* @private * @private
*/ */
@ -298,9 +296,6 @@ Range.prototype._onDrag = function (event) {
var direction = this.options.direction; var direction = this.options.direction;
validateDirection(direction); validateDirection(direction);
// TODO: reckon with option movable
// refuse to drag when we where pinching to prevent the timeline make a jump // refuse to drag when we where pinching to prevent the timeline make a jump
// when releasing the fingers in opposite order from the touch screen // when releasing the fingers in opposite order from the touch screen
if (touchParams.ignore) return; if (touchParams.ignore) return;
@ -319,7 +314,7 @@ Range.prototype._onDrag = function (event) {
}; };
/** /**
* Stop dragging operating.
* Stop dragging operation
* @param {event} event * @param {event} event
* @private * @private
*/ */
@ -331,8 +326,6 @@ Range.prototype._onDragEnd = function (event) {
// when releasing the fingers in opposite order from the touch screen // when releasing the fingers in opposite order from the touch screen
if (touchParams.ignore) return; if (touchParams.ignore) return;
// TODO: reckon with option movable
if (this.body.dom.root) { if (this.body.dom.root) {
this.body.dom.root.style.cursor = 'auto'; this.body.dom.root.style.cursor = 'auto';
} }
@ -404,7 +397,7 @@ Range.prototype._onTouch = function (event) {
touchParams.center = null; touchParams.center = null;
// don't move the range when dragging a selected event // don't move the range when dragging a selected event
// TODO: it's not so neat to have to know about the state of the ItemSet
// TODO: it's not so neat to have to know about ItemSet here
var item = ItemSet.itemFromTarget(event); var item = ItemSet.itemFromTarget(event);
if (item && item.selected && this.options.editable) { if (item && item.selected && this.options.editable) {
touchParams.ignore = true; touchParams.ignore = true;
@ -430,8 +423,6 @@ Range.prototype._onPinch = function (event) {
touchParams.ignore = true; touchParams.ignore = true;
// TODO: reckon with option zoomable
if (event.gesture.touches.length > 1) { if (event.gesture.touches.length > 1) {
if (!touchParams.center) { if (!touchParams.center) {
touchParams.center = getPointer(event.gesture.center, this.body.dom.center); touchParams.center = getPointer(event.gesture.center, this.body.dom.center);

+ 83
- 9
src/timeline/Timeline.js View File

@ -135,6 +135,8 @@ Timeline.prototype._create = function (container) {
this.on('rangechange', this.redraw.bind(this)); this.on('rangechange', this.redraw.bind(this));
this.on('change', this.redraw.bind(this)); this.on('change', this.redraw.bind(this));
this.on('dragstart', this._onDragStart.bind(this));
this.on('drag', this._onDrag.bind(this));
// create event listeners for all interesting events, these events will be // create event listeners for all interesting events, these events will be
// emitted via emitter // emitted via emitter
@ -146,7 +148,7 @@ Timeline.prototype._create = function (container) {
var me = this; var me = this;
var events = [ var events = [
'pinch', 'pinch',
//'tap', 'doubletap', 'hold', // TODO: catching the events here disables selecting an item
'tap', 'doubletap', 'hold',
'dragstart', 'drag', 'dragend', 'dragstart', 'drag', 'dragend',
'mousewheel', 'DOMMouseScroll' // DOMMouseScroll is needed for Firefox 'mousewheel', 'DOMMouseScroll' // DOMMouseScroll is needed for Firefox
]; ];
@ -171,7 +173,8 @@ Timeline.prototype._create = function (container) {
right: {}, right: {},
top: {}, top: {},
bottom: {}, bottom: {},
border: {}
border: {},
scrollTop: 0
}; };
// attach the root panel to the provided container // attach the root panel to the provided container
@ -183,8 +186,8 @@ Timeline.prototype._create = function (container) {
* Set options. Options will be passed to all components loaded in the Timeline. * Set options. Options will be passed to all components loaded in the Timeline.
* @param {Object} [options] * @param {Object} [options]
* {String} orientation * {String} orientation
* Vertical orienation for the Timeline:
* 'bottom' (default) or 'top'
* Vertical orientation for the Timeline,
* can be 'bottom' (default) or 'top'.
* {String | Number} width * {String | Number} width
* Width for the timeline, a number in pixels or * Width for the timeline, a number in pixels or
* a css string like '1000px' or '75%'. '100%' by default. * a css string like '1000px' or '75%'. '100%' by default.
@ -563,21 +566,26 @@ Timeline.prototype.redraw = function() {
dom.bottom.style.left = props.left.width + 'px'; dom.bottom.style.left = props.left.width + 'px';
dom.bottom.style.top = (props.top.height + props.centerContainer.height) + 'px'; dom.bottom.style.top = (props.top.height + props.centerContainer.height) + 'px';
// update the scrollTop, feasible range for the offset can be changed
// when the height of the Timeline or of the contents of the center changed
this._setScrollTop(this._getScrollTop());
// reposition the scrollable contents // reposition the scrollable contents
var offset; var offset;
if (options.orientation == 'top') { if (options.orientation == 'top') {
offset = 0;
offset = this.props.scrollTop;
} }
else { // orientation == 'bottom' else { // orientation == 'bottom'
// keep the items aligned to the axis at the bottom // keep the items aligned to the axis at the bottom
offset = props.centerContainer.height - props.center.height;
offset = this.props.scrollTop + props.centerContainer.height - props.center.height;
} }
dom.center.style.left = '0'; dom.center.style.left = '0';
dom.center.style.top = offset+ 'px';
dom.center.style.top = offset + 'px';
dom.left.style.left = '0'; dom.left.style.left = '0';
dom.left.style.top = offset+ 'px';
dom.left.style.top = offset + 'px';
dom.right.style.left = '0'; dom.right.style.left = '0';
dom.right.style.top = offset+ 'px';
dom.right.style.top = offset + 'px';
// redraw all components // redraw all components
this.components.forEach(function (component) { this.components.forEach(function (component) {
@ -679,3 +687,69 @@ Timeline.prototype._stopAutoResize = function () {
// TODO: remove event listener on window.resize // TODO: remove event listener on window.resize
}; };
/**
* Start moving the timeline vertically
* @param {Event} event
* @private
*/
Timeline.prototype._onDragStart = function (event) {
touchParams.initialScrollTop = this.props.scrollTop;
};
/**
* Move the timeline vertically
* @param {Event} event
* @private
*/
Timeline.prototype._onDrag = function (event) {
/* TODO: no dragging when pinching
// refuse to drag when we where pinching to prevent the timeline make a jump
// when releasing the fingers in opposite order from the touch screen
if (touchParams.pinching) return;
*/
var delta = event.gesture.deltaY;
var oldScrollTop = this._getScrollTop();
var newScrollTop = this._setScrollTop(touchParams.initialScrollTop + delta);
if (newScrollTop != oldScrollTop) {
this.redraw(); // TODO: this causes two redraws when dragging, the other is triggered by rangechange already
}
};
/**
* Apply a scrollTop
* @param {Number} scrollTop
* @returns {Number} scrollTop Returns the applied scrollTop
* @private
*/
Timeline.prototype._setScrollTop = function (scrollTop) {
// limit the scrollTop to the feasible scroll range
var scrollTopMax = Math.max(this.props.center.height - this.props.centerContainer.height, 0);
if (this.options.orientation == 'top') {
if (scrollTop > 0) scrollTop = 0;
if (scrollTop < -scrollTopMax) scrollTop = -scrollTopMax;
}
else { // orientation == 'bottom'
if (scrollTop < 0) scrollTop = 0;
if (scrollTop > scrollTopMax) scrollTop = scrollTopMax;
}
// apply new scroll top
this.props.scrollTop = scrollTop;
return scrollTop;
};
/**
* Get the current scrollTop
* @returns {number} scrollTop
* @private
*/
Timeline.prototype._getScrollTop = function () {
return this.props.scrollTop;
};
// global (private) object to store drag params
var touchParams = {};

Loading…
Cancel
Save