NigelOToole / progress-tracker

A HTML component to illustrate the steps in a multi step process e.g. a multi step form, a timeline or a quiz.

Home Page:http://nigelotoole.github.io/progress-tracker/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add support for RTL language.

jrockowitz opened this issue · comments

@NigelOToole First off, YOU ROCK!!! This is the cleanest, easiest to implement progress tracker I have ever seen.

I am including your library in the Webform module for Drupal 8.

Someone just created an issue noting that RTL is not supported.

wizard progress bar - rtl

I hoping that you would just need to tweak the progress bar's layout based on the [dir="rtl"] attribute.

Thanks very much. This is something I have thought about implementing but dont have any experience with. Can you offer any help with this? Perhaps create a codepen with the progress tracker and a suggested way to implement this?

I am not a front-end dev but I was able to add RTL support for the Webform module specific progress bar layouts using the below CSS, which I am sure can be optimized.

[dir="rtl"] .progress-step:not(:last-child)::after {
  display: none;
}

[dir="rtl"] .progress-step:not(:first-child)::after {
  content: '';
  display: block;
  position: absolute;
  z-index: -10;
  top: 12px;
  bottom: 12px;
  right: -14px;
  width: 100%;
  height: 4px;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}

[dir="rtl"] .progress-tracker--center .progress-step::after {
  right: -50%
}

Here is the JS Fiddle. https://jsfiddle.net/jrockowitz/fwtpdvfp/11/

I have updated the plugin with some basic RTL support, please have a look.