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

add rtl of groups in timeline

codeClimate
Yotam Berkowitz 8 years ago
parent
0666cb142c
commit
a549ed2d19
11 changed files with 135 additions and 46 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +65
    -22
      dist/vis.js
  2. +2
    -0
      examples/timeline/groups/groupsEditable.html
  3. +8
    -1
      lib/timeline/Core.js
  4. +6
    -3
      lib/timeline/Range.js
  5. +4
    -2
      lib/timeline/Timeline.js
  6. +5
    -1
      lib/timeline/component/CurrentTime.js
  7. +3
    -3
      lib/timeline/component/DataAxis.js
  8. +4
    -4
      lib/timeline/component/ItemSet.js
  9. +32
    -9
      lib/timeline/component/TimeAxis.js
  10. +2
    -1
      lib/timeline/optionsTimeline.js
  11. +4
    -0
      lib/util.js

+ 65
- 22
dist/vis.js View File

@ -5,7 +5,7 @@
* A dynamic, browser-based visualization library. * A dynamic, browser-based visualization library.
* *
* @version 4.15.1 * @version 4.15.1
* @date 2016-03-08
* @date 2016-03-10
* *
* @license * @license
* Copyright (C) 2011-2016 Almende B.V, http://almende.com * Copyright (C) 2011-2016 Almende B.V, http://almende.com
@ -723,6 +723,10 @@ return /******/ (function(modules) { // webpackBootstrap
return elem.getBoundingClientRect().left; return elem.getBoundingClientRect().left;
}; };
exports.getAbsoluteRight = function (elem) {
return elem.getBoundingClientRect().right;
};
/** /**
* Retrieve the absolute top value of a DOM element * Retrieve the absolute top value of a DOM element
* @param {Element} elem A dom element, for example a div * @param {Element} elem A dom element, for example a div
@ -10661,6 +10665,7 @@ return /******/ (function(modules) { // webpackBootstrap
* @extends Core * @extends Core
*/ */
function Timeline(container, items, groups, options) { function Timeline(container, items, groups, options) {
if (!(this instanceof Timeline)) { if (!(this instanceof Timeline)) {
throw new SyntaxError('Constructor must be called with the new operator'); throw new SyntaxError('Constructor must be called with the new operator');
} }
@ -10684,7 +10689,7 @@ return /******/ (function(modules) { // webpackBootstrap
axis: 'bottom', // axis orientation: 'bottom', 'top', or 'both' axis: 'bottom', // axis orientation: 'bottom', 'top', or 'both'
item: 'bottom' // not relevant item: 'bottom' // not relevant
}, },
rtl: false,
moment: moment, moment: moment,
width: null, width: null,
@ -10739,7 +10744,7 @@ return /******/ (function(modules) { // webpackBootstrap
this.components.push(this.currentTime); this.components.push(this.currentTime);
// item set // item set
this.itemSet = new ItemSet(this.body);
this.itemSet = new ItemSet(this.body, this.options);
this.components.push(this.itemSet); this.components.push(this.itemSet);
this.itemsData = null; // DataSet this.itemsData = null; // DataSet
@ -10822,6 +10827,7 @@ return /******/ (function(modules) { // webpackBootstrap
Timeline.prototype.setOptions = function (options) { Timeline.prototype.setOptions = function (options) {
// validate options // validate options
var errorFound = _Validator2.default.validate(options, allOptions); var errorFound = _Validator2.default.validate(options, allOptions);
if (errorFound === true) { if (errorFound === true) {
console.log('%cErrors have been found in the supplied options object.', printStyle); console.log('%cErrors have been found in the supplied options object.', printStyle);
} }
@ -15804,9 +15810,9 @@ return /******/ (function(modules) { // webpackBootstrap
// http://en.wikibooks.org/wiki/Algorithm_Implementation/Strings/Levenshtein_distance#JavaScript // http://en.wikibooks.org/wiki/Algorithm_Implementation/Strings/Levenshtein_distance#JavaScript
/* /*
Copyright (c) 2011 Andrei Mackenzie Copyright (c) 2011 Andrei Mackenzie
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/ */
}, { }, {
@ -15899,7 +15905,6 @@ return /******/ (function(modules) { // webpackBootstrap
zoomMax: 1000 * 60 * 60 * 24 * 365 * 10000 // milliseconds zoomMax: 1000 * 60 * 60 * 24 * 365 * 10000 // milliseconds
}; };
this.options = util.extend({}, this.defaultOptions); this.options = util.extend({}, this.defaultOptions);
this.props = { this.props = {
touch: {} touch: {}
}; };
@ -15941,7 +15946,7 @@ return /******/ (function(modules) { // webpackBootstrap
Range.prototype.setOptions = function (options) { Range.prototype.setOptions = function (options) {
if (options) { if (options) {
// copy the options that we know // copy the options that we know
var fields = ['direction', 'min', 'max', 'zoomMin', 'zoomMax', 'moveable', 'zoomable', 'moment', 'activate', 'hiddenDates', 'zoomKey'];
var fields = ['direction', 'min', 'max', 'zoomMin', 'zoomMax', 'moveable', 'zoomable', 'moment', 'activate', 'hiddenDates', 'zoomKey', 'rtl'];
util.selectiveExtend(fields, this.options, options); util.selectiveExtend(fields, this.options, options);
if ('start' in options || 'end' in options) { if ('start' in options || 'end' in options) {
@ -16446,7 +16451,11 @@ return /******/ (function(modules) { // webpackBootstrap
// calculate the time where the mouse is, check whether inside // calculate the time where the mouse is, check whether inside
// and no scroll action should happen. // and no scroll action should happen.
var clientX = event.center ? event.center.x : event.clientX; var clientX = event.center ? event.center.x : event.clientX;
var x = clientX - util.getAbsoluteLeft(this.body.dom.centerContainer);
if (this.options.rtl) {
var x = clientX - util.getAbsoluteLeft(this.body.dom.centerContainer);
} else {
var x = util.getAbsoluteRight(this.body.dom.centerContainer);-clientX;
}
var time = this.body.util.toTime(x); var time = this.body.util.toTime(x);
return time >= this.start && time <= this.end; return time >= this.start && time <= this.end;
@ -17321,9 +17330,15 @@ return /******/ (function(modules) { // webpackBootstrap
Core.prototype.setOptions = function (options) { Core.prototype.setOptions = function (options) {
if (options) { if (options) {
// copy the known options // copy the known options
var fields = ['width', 'height', 'minHeight', 'maxHeight', 'autoResize', 'start', 'end', 'clickToUse', 'dataAttributes', 'hiddenDates', 'locale', 'locales', 'moment', 'throttleRedraw'];
var fields = ['width', 'height', 'minHeight', 'maxHeight', 'autoResize', 'start', 'end', 'clickToUse', 'dataAttributes', 'hiddenDates', 'locale', 'locales', 'moment', 'rtl', 'throttleRedraw'];
util.selectiveExtend(fields, this.options, options); util.selectiveExtend(fields, this.options, options);
if (this.options.rtl) {
var contentContainer = this.dom.leftContainer;
this.dom.leftContainer = this.dom.rightContainer;
this.dom.rightContainer = contentContainer;
}
this.options.orientation = { item: undefined, axis: undefined }; this.options.orientation = { item: undefined, axis: undefined };
if ('orientation' in options) { if ('orientation' in options) {
if (typeof options.orientation === 'string') { if (typeof options.orientation === 'string') {
@ -18170,8 +18185,8 @@ return /******/ (function(modules) { // webpackBootstrap
*/ */
function ItemSet(body, options) { function ItemSet(body, options) {
this.body = body; this.body = body;
this.defaultOptions = { this.defaultOptions = {
rtl: false,
type: null, // 'box', 'point', 'range', 'background' type: null, // 'box', 'point', 'range', 'background'
orientation: { orientation: {
item: 'bottom' // item orientation: 'top' or 'bottom' item: 'bottom' // item orientation: 'top' or 'bottom'
@ -18374,8 +18389,8 @@ return /******/ (function(modules) { // webpackBootstrap
// add item on doubletap // add item on doubletap
this.hammer.on('doubletap', this._onAddItem.bind(this)); this.hammer.on('doubletap', this._onAddItem.bind(this));
this.groupHammer = new Hammer(this.body.dom.leftContainer); this.groupHammer = new Hammer(this.body.dom.leftContainer);
this.groupHammer.on('panstart', this._onGroupDragStart.bind(this)); this.groupHammer.on('panstart', this._onGroupDragStart.bind(this));
this.groupHammer.on('panmove', this._onGroupDrag.bind(this)); this.groupHammer.on('panmove', this._onGroupDrag.bind(this));
this.groupHammer.on('panend', this._onGroupDragEnd.bind(this)); this.groupHammer.on('panend', this._onGroupDragEnd.bind(this));
@ -18452,7 +18467,7 @@ return /******/ (function(modules) { // webpackBootstrap
ItemSet.prototype.setOptions = function (options) { ItemSet.prototype.setOptions = function (options) {
if (options) { if (options) {
// copy all options that we know // copy all options that we know
var fields = ['type', 'align', 'order', 'stack', 'selectable', 'multiselect', 'itemsAlwaysDraggable', 'multiselectPerGroup', 'groupOrder', 'dataAttributes', 'template', 'groupTemplate', 'hide', 'snap', 'groupOrderSwap'];
var fields = ['type', 'rtl', 'align', 'order', 'stack', 'selectable', 'multiselect', 'itemsAlwaysDraggable', 'multiselectPerGroup', 'groupOrder', 'dataAttributes', 'template', 'groupTemplate', 'hide', 'snap', 'groupOrderSwap'];
util.selectiveExtend(fields, this.options, options); util.selectiveExtend(fields, this.options, options);
if ('orientation' in options) { if ('orientation' in options) {
@ -22915,7 +22930,7 @@ return /******/ (function(modules) { // webpackBootstrap
TimeAxis.prototype.setOptions = function (options) { TimeAxis.prototype.setOptions = function (options) {
if (options) { if (options) {
// copy all options that we know // copy all options that we know
util.selectiveExtend(['showMinorLabels', 'showMajorLabels', 'maxMinorChars', 'hiddenDates', 'timeAxis', 'moment'], this.options, options);
util.selectiveExtend(['showMinorLabels', 'showMajorLabels', 'maxMinorChars', 'hiddenDates', 'timeAxis', 'moment', 'rtl'], this.options, options);
// deep copy the format options // deep copy the format options
util.selectiveDeepExtend(['format'], this.options, options); util.selectiveDeepExtend(['format'], this.options, options);
@ -23019,7 +23034,6 @@ return /******/ (function(modules) { // webpackBootstrap
} else { } else {
this.body.dom.backgroundVertical.appendChild(background); this.body.dom.backgroundVertical.appendChild(background);
} }
return this._isResized() || parentChanged; return this._isResized() || parentChanged;
}; };
@ -23159,7 +23173,6 @@ return /******/ (function(modules) { // webpackBootstrap
TimeAxis.prototype._repaintMinorText = function (x, text, orientation, className) { TimeAxis.prototype._repaintMinorText = function (x, text, orientation, className) {
// reuse redundant label // reuse redundant label
var label = this.dom.redundant.minorTexts.shift(); var label = this.dom.redundant.minorTexts.shift();
if (!label) { if (!label) {
// create new label // create new label
var content = document.createTextNode(''); var content = document.createTextNode('');
@ -23172,7 +23185,13 @@ return /******/ (function(modules) { // webpackBootstrap
label.childNodes[0].nodeValue = text; label.childNodes[0].nodeValue = text;
label.style.top = orientation == 'top' ? this.props.majorLabelHeight + 'px' : '0'; label.style.top = orientation == 'top' ? this.props.majorLabelHeight + 'px' : '0';
// if (this.options.rtl) {
// label.style.right = x + 'px';
// } else {
label.style.left = x + 'px'; label.style.left = x + 'px';
// };
label.className = 'vis-text vis-minor ' + className; label.className = 'vis-text vis-minor ' + className;
//label.title = title; // TODO: this is a heavy operation //label.title = title; // TODO: this is a heavy operation
@ -23206,7 +23225,11 @@ return /******/ (function(modules) { // webpackBootstrap
//label.title = title; // TODO: this is a heavy operation //label.title = title; // TODO: this is a heavy operation
label.style.top = orientation == 'top' ? '0' : this.props.minorLabelHeight + 'px'; label.style.top = orientation == 'top' ? '0' : this.props.minorLabelHeight + 'px';
// if (this.options.rtl) {
// label.style.right = x + 'px';
// } else {
label.style.left = x + 'px'; label.style.left = x + 'px';
// };
return label; return label;
}; };
@ -23237,7 +23260,11 @@ return /******/ (function(modules) { // webpackBootstrap
line.style.top = this.body.domProps.top.height + 'px'; line.style.top = this.body.domProps.top.height + 'px';
} }
line.style.height = props.minorLineHeight + 'px'; line.style.height = props.minorLineHeight + 'px';
// if (this.options.rtl) {
// line.style.right = (x - props.minorLineWidth / 2) + 'px';
// } else {
line.style.left = x - props.minorLineWidth / 2 + 'px'; line.style.left = x - props.minorLineWidth / 2 + 'px';
// };
line.style.width = width + 'px'; line.style.width = width + 'px';
line.className = 'vis-grid vis-vertical vis-minor ' + className; line.className = 'vis-grid vis-vertical vis-minor ' + className;
@ -23270,7 +23297,13 @@ return /******/ (function(modules) { // webpackBootstrap
} else { } else {
line.style.top = this.body.domProps.top.height + 'px'; line.style.top = this.body.domProps.top.height + 'px';
} }
// if (this.options.rtl) {
// line.style.right = (x - props.majorLineWidth / 2) + 'px';
// } else {
line.style.left = x - props.majorLineWidth / 2 + 'px'; line.style.left = x - props.majorLineWidth / 2 + 'px';
// }
line.style.height = props.majorLineHeight + 'px'; line.style.height = props.majorLineHeight + 'px';
line.style.width = width + 'px'; line.style.width = width + 'px';
@ -23293,7 +23326,9 @@ return /******/ (function(modules) { // webpackBootstrap
this.dom.measureCharMinor = document.createElement('DIV'); this.dom.measureCharMinor = document.createElement('DIV');
this.dom.measureCharMinor.className = 'vis-text vis-minor vis-measure'; this.dom.measureCharMinor.className = 'vis-text vis-minor vis-measure';
this.dom.measureCharMinor.style.position = 'absolute'; this.dom.measureCharMinor.style.position = 'absolute';
if (this.options.rtl) {
this.dom.measureCharMinor.style.direction = 'rtl';
}
this.dom.measureCharMinor.appendChild(document.createTextNode('0')); this.dom.measureCharMinor.appendChild(document.createTextNode('0'));
this.dom.foreground.appendChild(this.dom.measureCharMinor); this.dom.foreground.appendChild(this.dom.measureCharMinor);
} }
@ -23305,7 +23340,9 @@ return /******/ (function(modules) { // webpackBootstrap
this.dom.measureCharMajor = document.createElement('DIV'); this.dom.measureCharMajor = document.createElement('DIV');
this.dom.measureCharMajor.className = 'vis-text vis-major vis-measure'; this.dom.measureCharMajor.className = 'vis-text vis-major vis-measure';
this.dom.measureCharMajor.style.position = 'absolute'; this.dom.measureCharMajor.style.position = 'absolute';
if (this.options.rtl) {
this.dom.measureCharMajor.style.direction = 'rtl';
}
this.dom.measureCharMajor.appendChild(document.createTextNode('0')); this.dom.measureCharMajor.appendChild(document.createTextNode('0'));
this.dom.foreground.appendChild(this.dom.measureCharMajor); this.dom.foreground.appendChild(this.dom.measureCharMajor);
} }
@ -24055,7 +24092,11 @@ return /******/ (function(modules) { // webpackBootstrap
var title = locale.current + ' ' + locale.time + ': ' + now.format('dddd, MMMM Do YYYY, H:mm:ss'); var title = locale.current + ' ' + locale.time + ': ' + now.format('dddd, MMMM Do YYYY, H:mm:ss');
title = title.charAt(0).toUpperCase() + title.substring(1); title = title.charAt(0).toUpperCase() + title.substring(1);
this.bar.style.left = x + 'px';
if (this.options.rtl) {
this.bar.style.right = x + 'px';
} else {
this.bar.style.left = x + 'px';
}
this.bar.title = title; this.bar.title = title;
} else { } else {
// remove the line from the DOM // remove the line from the DOM
@ -24162,6 +24203,7 @@ return /******/ (function(modules) { // webpackBootstrap
//globals : //globals :
align: { string: string }, align: { string: string },
rtl: { boolean: boolean, 'undefined': 'undefined' },
autoResize: { boolean: boolean }, autoResize: { boolean: boolean },
throttleRedraw: { number: number }, throttleRedraw: { number: number },
clickToUse: { boolean: boolean }, clickToUse: { boolean: boolean },
@ -24279,6 +24321,7 @@ return /******/ (function(modules) { // webpackBootstrap
var configureOptions = { var configureOptions = {
global: { global: {
align: ['center', 'left', 'right'], align: ['center', 'left', 'right'],
direction: false,
autoResize: true, autoResize: true,
throttleRedraw: [10, 0, 1000, 10], throttleRedraw: [10, 0, 1000, 10],
clickToUse: false, clickToUse: false,
@ -25952,10 +25995,10 @@ return /******/ (function(modules) { // webpackBootstrap
DataAxis.prototype.show = function () { DataAxis.prototype.show = function () {
this.hidden = false; this.hidden = false;
if (!this.dom.frame.parentNode) { if (!this.dom.frame.parentNode) {
if (this.options.orientation === 'left') {
this.body.dom.left.appendChild(this.dom.frame);
} else {
if (this.options.rtl) {
this.body.dom.right.appendChild(this.dom.frame); this.body.dom.right.appendChild(this.dom.frame);
} else {
this.body.dom.left.appendChild(this.dom.frame);
} }
} }

+ 2
- 0
examples/timeline/groups/groupsEditable.html View File

@ -299,6 +299,8 @@
a.value = b.value; a.value = b.value;
b.value = v; b.value = v;
}, },
rtl: true,
orientation: 'both',
editable: true, editable: true,
groupEditable: true, groupEditable: true,
start: new Date(2015, 6, 1), start: new Date(2015, 6, 1),

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

@ -222,11 +222,18 @@ 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',
'locale', 'locales', 'moment', 'rtl',
'throttleRedraw' 'throttleRedraw'
]; ];
util.selectiveExtend(fields, this.options, options); util.selectiveExtend(fields, this.options, options);
if (this.options.rtl) {
var contentContainer = this.dom.leftContainer;
this.dom.leftContainer = this.dom.rightContainer;
this.dom.rightContainer = contentContainer;
}
this.options.orientation = {item:undefined,axis:undefined}; this.options.orientation = {item:undefined,axis:undefined};
if ('orientation' in options) { if ('orientation' in options) {
if (typeof options.orientation === 'string') { if (typeof options.orientation === 'string') {

+ 6
- 3
lib/timeline/Range.js View File

@ -37,7 +37,6 @@ function Range(body, options) {
zoomMax: 1000 * 60 * 60 * 24 * 365 * 10000 // milliseconds zoomMax: 1000 * 60 * 60 * 24 * 365 * 10000 // milliseconds
}; };
this.options = util.extend({}, this.defaultOptions); this.options = util.extend({}, this.defaultOptions);
this.props = { this.props = {
touch: {} touch: {}
}; };
@ -81,7 +80,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'
'moment', 'activate', 'hiddenDates', 'zoomKey', 'rtl'
]; ];
util.selectiveExtend(fields, this.options, options); util.selectiveExtend(fields, this.options, options);
@ -594,7 +593,11 @@ Range.prototype._isInsideRange = function(event) {
// calculate the time where the mouse is, check whether inside // calculate the time where the mouse is, check whether inside
// and no scroll action should happen. // and no scroll action should happen.
var clientX = event.center ? event.center.x : event.clientX; var clientX = event.center ? event.center.x : event.clientX;
var x = clientX - util.getAbsoluteLeft(this.body.dom.centerContainer);
if (this.options.rtl) {
var x = clientX - util.getAbsoluteLeft(this.body.dom.centerContainer);
} else {
var x = util.getAbsoluteRight(this.body.dom.centerContainer); - clientX
}
var time = this.body.util.toTime(x); var time = this.body.util.toTime(x);
return time >= this.start && time <= this.end; return time >= this.start && time <= this.end;

+ 4
- 2
lib/timeline/Timeline.js View File

@ -29,6 +29,7 @@ import Validator from '../shared/Validator';
* @extends Core * @extends Core
*/ */
function Timeline (container, items, groups, options) { function Timeline (container, items, groups, options) {
if (!(this instanceof Timeline)) { if (!(this instanceof Timeline)) {
throw new SyntaxError('Constructor must be called with the new operator'); throw new SyntaxError('Constructor must be called with the new operator');
} }
@ -52,7 +53,7 @@ function Timeline (container, items, groups, options) {
axis: 'bottom', // axis orientation: 'bottom', 'top', or 'both' axis: 'bottom', // axis orientation: 'bottom', 'top', or 'both'
item: 'bottom' // not relevant item: 'bottom' // not relevant
}, },
rtl: false,
moment: moment, moment: moment,
width: null, width: null,
@ -107,7 +108,7 @@ function Timeline (container, items, groups, options) {
this.components.push(this.currentTime); this.components.push(this.currentTime);
// item set // item set
this.itemSet = new ItemSet(this.body);
this.itemSet = new ItemSet(this.body, this.options);
this.components.push(this.itemSet); this.components.push(this.itemSet);
this.itemsData = null; // DataSet this.itemsData = null; // DataSet
@ -191,6 +192,7 @@ Timeline.prototype.redraw = function() {
Timeline.prototype.setOptions = function (options) { Timeline.prototype.setOptions = function (options) {
// validate options // validate options
let errorFound = Validator.validate(options, allOptions); let errorFound = Validator.validate(options, allOptions);
if (errorFound === true) { if (errorFound === true) {
console.log('%cErrors have been found in the supplied options object.', printStyle); console.log('%cErrors have been found in the supplied options object.', printStyle);
} }

+ 5
- 1
lib/timeline/component/CurrentTime.js View File

@ -99,7 +99,11 @@ CurrentTime.prototype.redraw = function() {
var title = locale.current + ' ' + locale.time + ': ' + now.format('dddd, MMMM Do YYYY, H:mm:ss'); var title = locale.current + ' ' + locale.time + ': ' + now.format('dddd, MMMM Do YYYY, H:mm:ss');
title = title.charAt(0).toUpperCase() + title.substring(1); title = title.charAt(0).toUpperCase() + title.substring(1);
this.bar.style.left = x + 'px';
if (this.options.rtl) {
this.bar.style.right = x + 'px';
} else {
this.bar.style.left = x + 'px';
}
this.bar.title = title; this.bar.title = title;
} }
else { else {

+ 3
- 3
lib/timeline/component/DataAxis.js View File

@ -212,11 +212,11 @@ DataAxis.prototype._cleanupIcons = function() {
DataAxis.prototype.show = function() { DataAxis.prototype.show = function() {
this.hidden = false; this.hidden = false;
if (!this.dom.frame.parentNode) { if (!this.dom.frame.parentNode) {
if (this.options.orientation === 'left') {
this.body.dom.left.appendChild(this.dom.frame);
if (this.options.rtl) {
this.body.dom.right.appendChild(this.dom.frame);
} }
else { else {
this.body.dom.right.appendChild(this.dom.frame);
this.body.dom.left.appendChild(this.dom.frame);
} }
} }

+ 4
- 4
lib/timeline/component/ItemSet.js View File

@ -26,8 +26,8 @@ var BACKGROUND = '__background__'; // reserved group id for background items wit
*/ */
function ItemSet(body, options) { function ItemSet(body, options) {
this.body = body; this.body = body;
this.defaultOptions = { this.defaultOptions = {
rtl: false,
type: null, // 'box', 'point', 'range', 'background' type: null, // 'box', 'point', 'range', 'background'
orientation: { orientation: {
item: 'bottom' // item orientation: 'top' or 'bottom' item: 'bottom' // item orientation: 'top' or 'bottom'
@ -96,7 +96,7 @@ function ItemSet(body, options) {
// options is shared by this ItemSet and all its items // options is shared by this ItemSet and all its items
this.options = util.extend({}, this.defaultOptions); this.options = util.extend({}, this.defaultOptions);
// options for getting items from the DataSet with the correct type // options for getting items from the DataSet with the correct type
this.itemOptions = { this.itemOptions = {
type: {start: 'Date', end: 'Date'} type: {start: 'Date', end: 'Date'}
@ -230,8 +230,8 @@ ItemSet.prototype._create = function(){
// add item on doubletap // add item on doubletap
this.hammer.on('doubletap', this._onAddItem.bind(this)); this.hammer.on('doubletap', this._onAddItem.bind(this));
this.groupHammer = new Hammer(this.body.dom.leftContainer); this.groupHammer = new Hammer(this.body.dom.leftContainer);
this.groupHammer.on('panstart', this._onGroupDragStart.bind(this)); this.groupHammer.on('panstart', this._onGroupDragStart.bind(this));
this.groupHammer.on('panmove', this._onGroupDrag.bind(this)); this.groupHammer.on('panmove', this._onGroupDrag.bind(this));
this.groupHammer.on('panend', this._onGroupDragEnd.bind(this)); this.groupHammer.on('panend', this._onGroupDragEnd.bind(this));
@ -308,7 +308,7 @@ ItemSet.prototype._create = function(){
ItemSet.prototype.setOptions = function(options) { ItemSet.prototype.setOptions = function(options) {
if (options) { if (options) {
// copy all options that we know // copy all options that we know
var fields = ['type', 'align', 'order', 'stack', 'selectable', 'multiselect', 'itemsAlwaysDraggable', 'multiselectPerGroup', 'groupOrder', 'dataAttributes', 'template', 'groupTemplate', 'hide', 'snap', 'groupOrderSwap'];
var fields = ['type', 'rtl', 'align', 'order', 'stack', 'selectable', 'multiselect', 'itemsAlwaysDraggable', 'multiselectPerGroup', 'groupOrder', 'dataAttributes', 'template', 'groupTemplate', 'hide', 'snap', 'groupOrderSwap'];
util.selectiveExtend(fields, this.options, options); util.selectiveExtend(fields, this.options, options);
if ('orientation' in options) { if ('orientation' in options) {

+ 32
- 9
lib/timeline/component/TimeAxis.js View File

@ -73,7 +73,8 @@ TimeAxis.prototype.setOptions = function(options) {
'maxMinorChars', 'maxMinorChars',
'hiddenDates', 'hiddenDates',
'timeAxis', 'timeAxis',
'moment'
'moment',
'rtl'
], this.options, options); ], this.options, options);
// deep copy the format options // deep copy the format options
@ -183,7 +184,6 @@ TimeAxis.prototype.redraw = function () {
else { else {
this.body.dom.backgroundVertical.appendChild(background) this.body.dom.backgroundVertical.appendChild(background)
} }
return this._isResized() || parentChanged; return this._isResized() || parentChanged;
}; };
@ -323,7 +323,6 @@ TimeAxis.prototype._repaintLabels = function () {
TimeAxis.prototype._repaintMinorText = function (x, text, orientation, className) { TimeAxis.prototype._repaintMinorText = function (x, text, orientation, className) {
// reuse redundant label // reuse redundant label
var label = this.dom.redundant.minorTexts.shift(); var label = this.dom.redundant.minorTexts.shift();
if (!label) { if (!label) {
// create new label // create new label
var content = document.createTextNode(''); var content = document.createTextNode('');
@ -336,7 +335,13 @@ TimeAxis.prototype._repaintMinorText = function (x, text, orientation, className
label.childNodes[0].nodeValue = text; label.childNodes[0].nodeValue = text;
label.style.top = (orientation == 'top') ? (this.props.majorLabelHeight + 'px') : '0'; label.style.top = (orientation == 'top') ? (this.props.majorLabelHeight + 'px') : '0';
label.style.left = x + 'px';
// if (this.options.rtl) {
// label.style.right = x + 'px';
// } else {
label.style.left = x + 'px';
// };
label.className = 'vis-text vis-minor ' + className; label.className = 'vis-text vis-minor ' + className;
//label.title = title; // TODO: this is a heavy operation //label.title = title; // TODO: this is a heavy operation
@ -370,7 +375,11 @@ TimeAxis.prototype._repaintMajorText = function (x, text, orientation, className
//label.title = title; // TODO: this is a heavy operation //label.title = title; // TODO: this is a heavy operation
label.style.top = (orientation == 'top') ? '0' : (this.props.minorLabelHeight + 'px'); label.style.top = (orientation == 'top') ? '0' : (this.props.minorLabelHeight + 'px');
label.style.left = x + 'px';
// if (this.options.rtl) {
// label.style.right = x + 'px';
// } else {
label.style.left = x + 'px';
// };
return label; return label;
}; };
@ -402,7 +411,11 @@ TimeAxis.prototype._repaintMinorLine = function (x, width, orientation, classNam
line.style.top = this.body.domProps.top.height + 'px'; line.style.top = this.body.domProps.top.height + 'px';
} }
line.style.height = props.minorLineHeight + 'px'; line.style.height = props.minorLineHeight + 'px';
line.style.left = (x - props.minorLineWidth / 2) + 'px';
// if (this.options.rtl) {
// line.style.right = (x - props.minorLineWidth / 2) + 'px';
// } else {
line.style.left = (x - props.minorLineWidth / 2) + 'px';
// };
line.style.width = width + 'px'; line.style.width = width + 'px';
line.className = 'vis-grid vis-vertical vis-minor ' + className; line.className = 'vis-grid vis-vertical vis-minor ' + className;
@ -436,7 +449,13 @@ TimeAxis.prototype._repaintMajorLine = function (x, width, orientation, classNam
else { else {
line.style.top = this.body.domProps.top.height + 'px'; line.style.top = this.body.domProps.top.height + 'px';
} }
line.style.left = (x - props.majorLineWidth / 2) + 'px';
// if (this.options.rtl) {
// line.style.right = (x - props.majorLineWidth / 2) + 'px';
// } else {
line.style.left = (x - props.majorLineWidth / 2) + 'px';
// }
line.style.height = props.majorLineHeight + 'px'; line.style.height = props.majorLineHeight + 'px';
line.style.width = width + 'px'; line.style.width = width + 'px';
@ -459,7 +478,9 @@ TimeAxis.prototype._calculateCharSize = function () {
this.dom.measureCharMinor = document.createElement('DIV'); this.dom.measureCharMinor = document.createElement('DIV');
this.dom.measureCharMinor.className = 'vis-text vis-minor vis-measure'; this.dom.measureCharMinor.className = 'vis-text vis-minor vis-measure';
this.dom.measureCharMinor.style.position = 'absolute'; this.dom.measureCharMinor.style.position = 'absolute';
if (this.options.rtl) {
this.dom.measureCharMinor.style.direction = 'rtl';
}
this.dom.measureCharMinor.appendChild(document.createTextNode('0')); this.dom.measureCharMinor.appendChild(document.createTextNode('0'));
this.dom.foreground.appendChild(this.dom.measureCharMinor); this.dom.foreground.appendChild(this.dom.measureCharMinor);
} }
@ -471,7 +492,9 @@ TimeAxis.prototype._calculateCharSize = function () {
this.dom.measureCharMajor = document.createElement('DIV'); this.dom.measureCharMajor = document.createElement('DIV');
this.dom.measureCharMajor.className = 'vis-text vis-major vis-measure'; this.dom.measureCharMajor.className = 'vis-text vis-major vis-measure';
this.dom.measureCharMajor.style.position = 'absolute'; this.dom.measureCharMajor.style.position = 'absolute';
if (this.options.rtl) {
this.dom.measureCharMajor.style.direction = 'rtl';
}
this.dom.measureCharMajor.appendChild(document.createTextNode('0')); this.dom.measureCharMajor.appendChild(document.createTextNode('0'));
this.dom.foreground.appendChild(this.dom.measureCharMajor); this.dom.foreground.appendChild(this.dom.measureCharMajor);
} }

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

@ -15,7 +15,6 @@ let dom = 'dom';
let moment = 'moment'; let moment = 'moment';
let any = 'any'; let any = 'any';
let allOptions = { let allOptions = {
configure: { configure: {
enabled: {boolean}, enabled: {boolean},
@ -26,6 +25,7 @@ let allOptions = {
//globals : //globals :
align: {string}, align: {string},
rtl: {boolean, 'undefined': 'undefined'},
autoResize: {boolean}, autoResize: {boolean},
throttleRedraw: {number}, throttleRedraw: {number},
clickToUse: {boolean}, clickToUse: {boolean},
@ -143,6 +143,7 @@ let allOptions = {
let configureOptions = { let configureOptions = {
global: { global: {
align: ['center', 'left', 'right'], align: ['center', 'left', 'right'],
direction: false,
autoResize: true, autoResize: true,
throttleRedraw: [10, 0, 1000, 10], throttleRedraw: [10, 0, 1000, 10],
clickToUse: false, clickToUse: false,

+ 4
- 0
lib/util.js View File

@ -599,6 +599,10 @@ exports.getAbsoluteLeft = function (elem) {
return elem.getBoundingClientRect().left; return elem.getBoundingClientRect().left;
}; };
exports.getAbsoluteRight = function (elem) {
return elem.getBoundingClientRect().right;
};
/** /**
* Retrieve the absolute top value of a DOM element * Retrieve the absolute top value of a DOM element
* @param {Element} elem A dom element, for example a div * @param {Element} elem A dom element, for example a div

Write Preview
Loading…
Cancel
Save