Browse Source

Merge pull request #2235 from yotamberk/rtl-dir

Support parent dir for RTL timeline and fix a small bug for editable point items
codeClimate
yotamberk 8 years ago
committed by GitHub
parent
commit
b96566ed94
6 changed files with 35 additions and 51 deletions
  1. +1
    -1
      docs/timeline/index.html
  2. +14
    -41
      examples/timeline/other/rtl.html
  3. +1
    -0
      examples/timeline/other/verticalScroll.html
  4. +1
    -2
      lib/timeline/Core.js
  5. +11
    -6
      lib/timeline/Timeline.js
  6. +7
    -1
      lib/timeline/component/item/Item.js

+ 1
- 1
docs/timeline/index.html View File

@ -916,7 +916,7 @@ function (option, path) {
<td>rtl</td>
<td>boolean</td>
<td><code>false</code></td>
<td>If true, the timeline will be right-to-left.</td>
<td>If true, the timeline will be right-to-left. Note: you can achieve rtl timeline by defining a parent node with <code>dir="rtl"</code>. The timeline knows to take the nearest parent node direction and apply it. Notice that the timeline will prefer the <code>option.rtl</code> over any parent <code>dir="rtl"</code></td>
</tr>
<tr>

+ 14
- 41
examples/timeline/other/rtl.html View File

@ -3,32 +3,23 @@
<head>
<title>Timeline | RTL example</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
</style>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
<script src="../../googleAnalytics.js"></script>
</head>
<body>
<p>An editable timeline allows to drag items around, create new items, and remove items. Changes are logged in the browser console.</p>
<h1>Timeline RTL support</h1>
<h2>Using <code>dir = "rtl"</code> in any parent node</h2>
<div id="timeline1" dir="rtl"></div>
<div id="visualization"></div>
<h2>Using <code>options.rtl = true</code></h2>
<div id="timeline2"></div>
<script>
// create a dataset with items
// we specify the type of the fields `start` and `end` here to be strings
// containing an ISO date. The fields will be outputted as ISO dates
// automatically getting data from the DataSet via items.get().
var items = new vis.DataSet({
type: { start: 'ISODate', end: 'ISODate' }
});
var items = new vis.DataSet();
// add items to the DataSet
items.add([
{id: 1, content: '2014-01-23 <br>start', start: '2014-01-23'},
@ -39,38 +30,20 @@
{id: 6, content: '2014-01-26', start: '2014-01-26'}
]);
// log changes to the console
items.on('*', function (event, properties) {
console.log(event, properties.items);
});
var container1 = document.getElementById('timeline1');
var container2 = document.getElementById('timeline2');
var container = document.getElementById('visualization');
var options = {
start: '2014-01-10',
end: '2014-02-10',
height: '300px',
rtl: true,
// allow selecting multiple items using ctrl+click, shift+click, or hold.
multiselect: true,
// allow manipulation of items
editable: true,
/* alternatively, enable/disable individual actions:
editable: {
add: true,
updateTime: true,
updateGroup: true,
remove: true
},
*/
showCurrentTime: true
};
var timeline = new vis.Timeline(container, items, options);
var options1 = Object.assign({}, options)
var timeline1 = new vis.Timeline(container1, items, options1);
var options2 = Object.assign({rtl: true}, options)
var timeline2 = new vis.Timeline(container2, items, options2);
</script>
</body>

+ 1
- 0
examples/timeline/other/verticalScroll.html View File

@ -16,6 +16,7 @@
verticalScroll: true,
zoomKey: 'ctrlKey'</code>
</h2>
<div id="mytimeline1"></div>
<h2>With <code>

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

@ -277,8 +277,7 @@ Core.prototype.setOptions = function (options) {
'start', 'end', 'clickToUse', 'dataAttributes', 'hiddenDates',
'locale', 'locales', 'moment', 'rtl', 'zoomKey', 'horizontalScroll', 'verticalScroll'
];
util.selectiveExtend(fields, this.options, options);
util.selectiveExtend(fields, this.options, options);
if (this.options.rtl) {
this.dom.container.style.direction = "rtl";

+ 11
- 6
lib/timeline/Timeline.js View File

@ -57,12 +57,17 @@ function Timeline (container, items, groups, options) {
minHeight: null
};
this.options = util.deepExtend({}, this.defaultOptions);
if (options) {
this.options.rtl = options.rtl
}
// Create the DOM, props, and emitter
this._create(container);
if (!options || (options && typeof options.rtl == "undefined")) {
this.options.rtl = window.getComputedStyle(this.dom.root, null).direction == "rtl";
} else {
this.options.rtl = options.rtl;
}
// all components listed here will be repainted automatically
this.components = [];
@ -91,17 +96,17 @@ function Timeline (container, items, groups, options) {
};
// range
this.range = new Range(this.body);
this.range = new Range(this.body, this.options);
this.components.push(this.range);
this.body.range = this.range;
// time axis
this.timeAxis = new TimeAxis(this.body);
this.timeAxis = new TimeAxis(this.body, this.options);
this.timeAxis2 = null; // used in case of orientation option 'both'
this.components.push(this.timeAxis);
// current time bar
this.currentTime = new CurrentTime(this.body);
this.currentTime = new CurrentTime(this.body, this.options);
this.components.push(this.currentTime);
// item set

+ 7
- 1
lib/timeline/component/item/Item.js View File

@ -327,7 +327,13 @@ Item.prototype._repaintDragCenter = function () {
dragCenter.className = 'vis-drag-center';
dragCenter.dragCenterItem = this;
this.dom.box.appendChild(dragCenter);
if (this.dom.box) {
this.dom.box.appendChild(dragCenter);
}
else if (this.dom.point) {
this.dom.point.appendChild(dragCenter);
}
this.dom.dragCenter = dragCenter;
}
else if (!this.selected && this.dom.dragCenter) {

Loading…
Cancel
Save