Browse Source

Support parent dir and add docs + examples

codeClimate
Yotam Berkowitz 8 years ago
parent
commit
9d33372f0b
4 changed files with 21 additions and 50 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. +5
    -8
      lib/timeline/Timeline.js

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

@ -916,7 +916,7 @@ function (option, path) {
<td>rtl</td> <td>rtl</td>
<td>boolean</td> <td>boolean</td>
<td><code>false</code></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>
<tr> <tr>

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

@ -3,32 +3,23 @@
<head> <head>
<title>Timeline | RTL example</title> <title>Timeline | RTL example</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
</style>
<script src="../../../dist/vis.js"></script> <script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
<script src="../../googleAnalytics.js"></script> <script src="../../googleAnalytics.js"></script>
</head> </head>
<body> <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> <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 // add items to the DataSet
items.add([ items.add([
{id: 1, content: '2014-01-23 <br>start', start: '2014-01-23'}, {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'} {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 = { var options = {
start: '2014-01-10', start: '2014-01-10',
end: '2014-02-10', end: '2014-02-10',
height: '300px', 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> </script>
</body> </body>

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

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

+ 5
- 8
lib/timeline/Timeline.js View File

@ -58,19 +58,16 @@ function Timeline (container, items, groups, options) {
}; };
this.options = util.deepExtend({}, this.defaultOptions); this.options = util.deepExtend({}, this.defaultOptions);
// Create the DOM, props, and emitter
this._create(container);
if (!options || (options && typeof options.rtl == "undefined")) { if (!options || (options && typeof options.rtl == "undefined")) {
if (container.dir) {
this.options.rtl = container.dir == "rtl";
} else if (document.dir) {
this.options.rtl = document.dir == "rtl";
}
this.options.rtl = window.getComputedStyle(this.dom.root, null).direction == "rtl";
} else { } else {
this.options.rtl = options.rtl; this.options.rtl = options.rtl;
} }
// Create the DOM, props, and emitter
this._create(container);
// all components listed here will be repainted automatically // all components listed here will be repainted automatically
this.components = []; this.components = [];

Loading…
Cancel
Save