From 3d4213fa73ec7847391dd45693b649d856f732df Mon Sep 17 00:00:00 2001 From: jos Date: Mon, 4 May 2015 15:47:16 +0200 Subject: [PATCH] Added an example about orientation of axis and items, and fixed a bug in orientation of items --- examples/timeline/34_orientation.html | 74 +++++++++++++++++++++++++++ examples/timeline/index.html | 1 + lib/timeline/Core.js | 20 +++++--- lib/timeline/Graph2d.js | 6 ++- lib/timeline/Timeline.js | 6 ++- 5 files changed, 99 insertions(+), 8 deletions(-) create mode 100644 examples/timeline/34_orientation.html diff --git a/examples/timeline/34_orientation.html b/examples/timeline/34_orientation.html new file mode 100644 index 00000000..cf907dc4 --- /dev/null +++ b/examples/timeline/34_orientation.html @@ -0,0 +1,74 @@ + + + + Timeline | Orientation + + + + + + + + + +

+ There are a number of orientation options for the time axis and the items. +

+ +

+ + +

+ +

+ + +

+ +
+ + + + \ No newline at end of file diff --git a/examples/timeline/index.html b/examples/timeline/index.html index a618d70e..bfad35dd 100644 --- a/examples/timeline/index.html +++ b/examples/timeline/index.html @@ -46,6 +46,7 @@

31_background_areas_with_groups.html

32_grid_styling.html

33_custom_snapping.html

+

34_orientation.html

requirejs_example.html

diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js index f5b8428c..735b4770 100644 --- a/lib/timeline/Core.js +++ b/lib/timeline/Core.js @@ -218,14 +218,22 @@ Core.prototype.setOptions = function (options) { if ('orientation' in options) { if (typeof options.orientation === 'string') { - this.options.orientation = options.orientation; + this.options.orientation = { + item: options.orientation, + axis: options.orientation + }; } - else if (typeof options.orientation === 'object' && 'axis' in options.orientation) { - this.options.orientation = options.orientation.axis; + else if (typeof options.orientation === 'object') { + if ('item' in options.orientation) { + this.options.orientation.item = options.orientation.item; + } + if ('axis' in options.orientation) { + this.options.orientation.axis = options.orientation.axis; + } } } - if (this.options.orientation === 'both') { + if (this.options.orientation.axis === 'both') { if (!this.timeAxis2) { var timeAxis2 = this.timeAxis2 = new TimeAxis(this.body); timeAxis2.setOptions = function (options) { @@ -680,7 +688,7 @@ Core.prototype._redraw = function() { // reposition the scrollable contents var offset = this.props.scrollTop; - if (options.orientation == 'bottom') { + if (options.orientation.item == 'bottom') { offset += Math.max(this.props.centerContainer.height - this.props.center.height - this.props.border.top - this.props.border.bottom, 0); } @@ -936,7 +944,7 @@ Core.prototype._updateScrollTop = function () { 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') { + if (this.options.orientation.item == 'bottom') { this.props.scrollTop += (scrollTopMin - this.props.scrollTopMin); } this.props.scrollTopMin = scrollTopMin; diff --git a/lib/timeline/Graph2d.js b/lib/timeline/Graph2d.js index 80e720aa..a4e80e0f 100644 --- a/lib/timeline/Graph2d.js +++ b/lib/timeline/Graph2d.js @@ -33,7 +33,11 @@ function Graph2d (container, items, groups, options) { autoResize: true, - orientation: 'bottom', + orientation: { + axis: 'bottom', // axis orientation: 'bottom', 'top', or 'both' + item: 'bottom' // not relevant for Graph2d + }, + width: null, height: null, maxHeight: null, diff --git a/lib/timeline/Timeline.js b/lib/timeline/Timeline.js index ef27b5e5..e4b25613 100644 --- a/lib/timeline/Timeline.js +++ b/lib/timeline/Timeline.js @@ -38,7 +38,11 @@ function Timeline (container, items, groups, options) { autoResize: true, - orientation: 'bottom', // axis orientation: 'bottom', 'top', or 'both' + orientation: { + axis: 'bottom', // axis orientation: 'bottom', 'top', or 'both' + item: 'bottom' // not relevant + }, + width: null, height: null, maxHeight: null,