Skip to content
This repository was archived by the owner on Jul 29, 2019. It is now read-only.

Support parent dir for RTL timeline and fix a small bug for editable point items #2235

Merged
merged 7 commits into from
Oct 27, 2016
Merged

Support parent dir for RTL timeline and fix a small bug for editable point items #2235

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7373a04
Resolve conflicts
yotamberk Oct 20, 2016
31096e0
Add vertical scroll when zoom is inactive
yotamberk Oct 20, 2016
e3fdbcf
Fix conflict
yotamberk Oct 25, 2016
afdefcc
Merge branch 'develop' of https://github.com/almende/vis into rtl-dir
yotamberk Oct 26, 2016
1053fc6
Fix editable point item
yotamberk Oct 26, 2016
510adfc
Add support to rtl with dir
yotamberk Oct 26, 2016
9d33372
Support parent dir and add docs + examples
yotamberk Oct 26, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/timeline/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -916,7 +916,7 @@ <h2 id="Configuration_Options">Configuration Options</h2>
<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>
Expand Down
55 changes: 14 additions & 41 deletions examples/timeline/other/rtl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'},
Expand All @@ -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>
Expand Down
1 change: 1 addition & 0 deletions examples/timeline/other/verticalScroll.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ <h2>With <code>
verticalScroll: true,
zoomKey: 'ctrlKey'</code>
</h2>

<div id="mytimeline1"></div>

<h2>With <code>
Expand Down
3 changes: 1 addition & 2 deletions lib/timeline/Core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
17 changes: 11 additions & 6 deletions lib/timeline/Timeline.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Copy link
Member

@mojoaxel mojoaxel Oct 27, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This line should be better something like this:

// check if the timelines root element or one of its parents has a direction
var directionFromDom, domNode = this.dom.root;
while (!directionFromDom && domNode) {
    directionFromDom = window.getComputedStyle(domNode, null).direction;
    domNode = domNode.parentElement;
}
this.options.rtl = (directionFromDom && (directionFromDom.toLowerCase() == "rtl"));

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll add this to another PR? Or do you want to revert?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could just change it and push the changes to your branch. Would be cool, if you test it before, I didn't ;-)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tested it and submitted another PR =)

} else {
this.options.rtl = options.rtl;
}

// all components listed here will be repainted automatically
this.components = [];

Expand Down Expand Up @@ -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
Expand Down
8 changes: 7 additions & 1 deletion lib/timeline/component/item/Item.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down