Browse Source

Implemented shadows when vertical scroll is possible

css_transitions
jos 10 years ago
parent
commit
fe7cc72666
4 changed files with 82 additions and 30 deletions
  1. +0
    -1
      src/timeline/Range.js
  2. +63
    -29
      src/timeline/Timeline.js
  3. +18
    -0
      src/timeline/component/css/panel.css
  4. +1
    -0
      test/timeline_groups.html

+ 0
- 1
src/timeline/Range.js View File

@ -300,7 +300,6 @@ Range.prototype._onDrag = function (event) {
// 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 (!this.props.touch.allowDragging) return; if (!this.props.touch.allowDragging) return;
console.log('onDrag range');
var delta = (direction == 'horizontal') ? event.gesture.deltaX : event.gesture.deltaY, var delta = (direction == 'horizontal') ? event.gesture.deltaX : event.gesture.deltaY,
interval = (this.props.touch.end - this.props.touch.start), interval = (this.props.touch.end - this.props.touch.start),

+ 63
- 29
src/timeline/Timeline.js View File

@ -107,6 +107,12 @@ Timeline.prototype._create = function (container) {
this.dom.right = document.createElement('div'); this.dom.right = document.createElement('div');
this.dom.top = document.createElement('div'); this.dom.top = document.createElement('div');
this.dom.bottom = document.createElement('div'); this.dom.bottom = document.createElement('div');
this.dom.shadowTop = document.createElement('div');
this.dom.shadowBottom = document.createElement('div');
this.dom.shadowTopLeft = document.createElement('div');
this.dom.shadowBottomLeft = document.createElement('div');
this.dom.shadowTopRight = document.createElement('div');
this.dom.shadowBottomRight = document.createElement('div');
this.dom.background.className = 'vispanel background'; this.dom.background.className = 'vispanel background';
this.dom.backgroundVertical.className = 'vispanel background vertical'; this.dom.backgroundVertical.className = 'vispanel background vertical';
@ -119,6 +125,12 @@ Timeline.prototype._create = function (container) {
this.dom.left.className = 'content'; this.dom.left.className = 'content';
this.dom.center.className = 'content'; this.dom.center.className = 'content';
this.dom.right.className = 'content'; this.dom.right.className = 'content';
this.dom.shadowTop.className = 'shadow top';
this.dom.shadowBottom.className = 'shadow bottom';
this.dom.shadowTopLeft.className = 'shadow top';
this.dom.shadowBottomLeft.className = 'shadow bottom';
this.dom.shadowTopRight.className = 'shadow top';
this.dom.shadowBottomRight.className = 'shadow bottom';
this.dom.root.appendChild(this.dom.background); this.dom.root.appendChild(this.dom.background);
this.dom.root.appendChild(this.dom.backgroundVertical); this.dom.root.appendChild(this.dom.backgroundVertical);
@ -133,6 +145,13 @@ Timeline.prototype._create = function (container) {
this.dom.leftContainer.appendChild(this.dom.left); this.dom.leftContainer.appendChild(this.dom.left);
this.dom.rightContainer.appendChild(this.dom.right); this.dom.rightContainer.appendChild(this.dom.right);
this.dom.centerContainer.appendChild(this.dom.shadowTop);
this.dom.centerContainer.appendChild(this.dom.shadowBottom);
this.dom.leftContainer.appendChild(this.dom.shadowTopLeft);
this.dom.leftContainer.appendChild(this.dom.shadowBottomLeft);
this.dom.rightContainer.appendChild(this.dom.shadowTopRight);
this.dom.rightContainer.appendChild(this.dom.shadowBottomRight);
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('touch', this._onTouch.bind(this)); this.on('touch', this._onTouch.bind(this));
@ -176,7 +195,8 @@ Timeline.prototype._create = function (container) {
top: {}, top: {},
bottom: {}, bottom: {},
border: {}, border: {},
scrollTop: 0
scrollTop: 0,
scrollTopMin: 0
}; };
this.touch = {}; // store state information needed for touch events this.touch = {}; // store state information needed for touch events
@ -571,24 +591,26 @@ Timeline.prototype.redraw = function() {
// update the scrollTop, feasible range for the offset can be changed // 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 // when the height of the Timeline or of the contents of the center changed
this._setScrollTop(this._getScrollTop());
this._updateScrollTop();
// reposition the scrollable contents // reposition the scrollable contents
var offset;
if (options.orientation == 'top') {
offset = this.props.scrollTop;
}
else { // orientation == 'bottom'
// keep the items aligned to the axis at the bottom
offset = this.props.scrollTop + props.centerContainer.height - props.center.height;
}
dom.center.style.left = '0';
dom.center.style.top = offset + 'px';
dom.left.style.left = '0';
dom.left.style.top = offset + 'px';
dom.right.style.left = '0';
dom.right.style.top = offset + 'px';
var offset = this.props.scrollTop;
dom.center.style.left = '0';
dom.center.style.top = offset + 'px';
dom.left.style.left = '0';
dom.left.style.top = offset + 'px';
dom.right.style.left = '0';
dom.right.style.top = offset + 'px';
// show shadows when vertical scrolling is available
var visibilityTop = this.props.scrollTop == 0 ? 'hidden' : '';
var visibilityBottom = this.props.scrollTop == this.props.scrollTopMin ? 'hidden' : '';
dom.shadowTop.style.visibility = visibilityTop;
dom.shadowBottom.style.visibility = visibilityBottom;
dom.shadowTopLeft.style.visibility = visibilityTop;
dom.shadowBottomLeft.style.visibility = visibilityBottom;
dom.shadowTopRight.style.visibility = visibilityTop;
dom.shadowBottomRight.style.visibility = visibilityBottom;
// redraw all components // redraw all components
this.components.forEach(function (component) { this.components.forEach(function (component) {
@ -745,21 +767,33 @@ Timeline.prototype._onDrag = function (event) {
* @private * @private
*/ */
Timeline.prototype._setScrollTop = function (scrollTop) { 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;
this.props.scrollTop = scrollTop;
this._updateScrollTop();
return this.props.scrollTop;
};
/**
* Update the current scrollTop when the height of the containers has been changed
* @returns {Number} scrollTop Returns the applied scrollTop
* @private
*/
Timeline.prototype._updateScrollTop = function () {
// recalculate the scrollTopMin
var scrollTopMin = this.props.centerContainer.height - this.props.center.height; // is negative or zero
if (scrollTopMin != this.props.scrollTopMin) {
// in case of bottom orientation, change the scrollTop such that the contents
// do not move relative to the time axis at the bottom
if (this.options.orientation == 'bottom') {
this.props.scrollTop += (scrollTopMin - this.props.scrollTopMin);
}
this.props.scrollTopMin = scrollTopMin;
} }
// apply new scroll top
this.props.scrollTop = scrollTop;
// limit the scrollTop to the feasible scroll range
if (this.props.scrollTop > 0) this.props.scrollTop = 0;
if (this.props.scrollTop < scrollTopMin) this.props.scrollTop = scrollTopMin;
return scrollTop;
return this.props.scrollTop;
}; };
/** /**

+ 18
- 0
src/timeline/component/css/panel.css View File

@ -49,3 +49,21 @@
.vis.timeline .vispanel > .content { .vis.timeline .vispanel > .content {
position: relative; position: relative;
} }
.vis.timeline .vispanel .shadow {
position: absolute;
width: 100%;
height: 1px;
box-shadow: 0 0 10px rgba(0,0,0,0.8);
z-index: 1;
}
.vis.timeline .vispanel .shadow.top {
top: -1px;
left: 0;
}
.vis.timeline .vispanel .shadow.bottom {
bottom: -1px;
left: 0;
}

+ 1
- 0
test/timeline_groups.html View File

@ -72,6 +72,7 @@
// create visualization // create visualization
var container = document.getElementById('visualization'); var container = document.getElementById('visualization');
var options = { var options = {
//orientation: 'top',
editable: { editable: {
add: true, add: true,
remove: true, remove: true,

Loading…
Cancel
Save