From 9d33372f0bd893faae12d242b19ce942a96dda9a Mon Sep 17 00:00:00 2001 From: Yotam Berkowitz Date: Wed, 26 Oct 2016 22:23:46 +0300 Subject: [PATCH] Support parent dir and add docs + examples --- docs/timeline/index.html | 2 +- examples/timeline/other/rtl.html | 55 ++++++--------------- examples/timeline/other/verticalScroll.html | 1 + lib/timeline/Timeline.js | 13 ++--- 4 files changed, 21 insertions(+), 50 deletions(-) diff --git a/docs/timeline/index.html b/docs/timeline/index.html index c7051a57..231654c4 100644 --- a/docs/timeline/index.html +++ b/docs/timeline/index.html @@ -916,7 +916,7 @@ function (option, path) { rtl boolean false - If true, the timeline will be right-to-left. + If true, the timeline will be right-to-left. Note: you can achieve rtl timeline by defining a parent node with dir="rtl". The timeline knows to take the nearest parent node direction and apply it. Notice that the timeline will prefer the option.rtl over any parent dir="rtl" diff --git a/examples/timeline/other/rtl.html b/examples/timeline/other/rtl.html index fd7405d5..f53b1802 100644 --- a/examples/timeline/other/rtl.html +++ b/examples/timeline/other/rtl.html @@ -3,32 +3,23 @@ Timeline | RTL example - - -

An editable timeline allows to drag items around, create new items, and remove items. Changes are logged in the browser console.

+

Timeline RTL support

+ +

Using dir = "rtl" in any parent node

+
-
+

Using options.rtl = true

+
diff --git a/examples/timeline/other/verticalScroll.html b/examples/timeline/other/verticalScroll.html index 07a68ad4..ddf946f0 100644 --- a/examples/timeline/other/verticalScroll.html +++ b/examples/timeline/other/verticalScroll.html @@ -16,6 +16,7 @@ verticalScroll: true, zoomKey: 'ctrlKey' +

With diff --git a/lib/timeline/Timeline.js b/lib/timeline/Timeline.js index a2d528df..97eafd24 100644 --- a/lib/timeline/Timeline.js +++ b/lib/timeline/Timeline.js @@ -58,19 +58,16 @@ function Timeline (container, items, groups, options) { }; this.options = util.deepExtend({}, this.defaultOptions); + + // Create the DOM, props, and emitter + this._create(container); + 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 { this.options.rtl = options.rtl; } - // Create the DOM, props, and emitter - this._create(container); - // all components listed here will be repainted automatically this.components = [];