Allow switching ltr/rtl

thomasloven · Oct 30, 2021 · 10bf0bf · 10bf0bf
1 parent 684bee6
commit 10bf0bf
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -41,17 +41,18 @@ If you want to control more than one entity with the same slider, use [light gro
 
 Available options:
 
-| Option       | Values         | Description                                                                                                                               | default |
-| ------------ | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------- |
-| `min`        | number         | Minimum value of slider                                                                                                                   |         |
-| `max`        | number         | Maximum value of slider                                                                                                                   |         |
-| `step`       | number         | Step size of slider selection                                                                                                             |         |
-| `toggle`     | `true`/`false` | Show a toggle or mute button if possible                                                                                                  | `false` |
-| `hide_state` | `true`/`false` | `true`: Do not display the current state <br>`false`: Always display current state - even when the card is too narrow for it to be usable | none    |
-| `hide_when_off` | `true`/`false` | `true`: Hide slider when state is off <br>`false`: Always display slider | `false`    |
-| `grow`       | `true`/`false` | Make the slider as wide as possible (which is really just a little bit wider)                                                             | `false` |
-| `full_row`   | `true`/`false` | Hide the icon and name and stretch slider to full width                                                                                   | `false` |
-| `attribute`  | (see below)    | Which attribute the slider should control                                                                                                 |         |
+| Option          | Values         | Description                                                                                                                               | default  |
+| --------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -------- |
+| `min`           | number         | Minimum value of slider                                                                                                                   |          |
+| `max`           | number         | Maximum value of slider                                                                                                                   |          |
+| `step`          | number         | Step size of slider selection                                                                                                             |          |
+| `toggle`        | `true`/`false` | Show a toggle or mute button if possible                                                                                                  | `false`  |
+| `hide_state`    | `true`/`false` | `true`: Do not display the current state <br>`false`: Always display current state - even when the card is too narrow for it to be usable | none     |
+| `hide_when_off` | `true`/`false` | `true`: Hide slider when state is off <br>`false`: Always display slider                                                                  | `false`  |
+| `grow`          | `true`/`false` | Make the slider as wide as possible (which is really just a little bit wider)                                                             | `false`  |
+| `full_row`      | `true`/`false` | Hide the icon and name and stretch slider to full width                                                                                   | `false`  |
+| `attribute`     | (see below)    | Which attribute the slider should control                                                                                                 |          |
+| `dir`           | `ltr`/`rtl`    | Use this to override your languages Right-To-Left or Left-To-Right setting                                                                | language |
 
 Most general Entities row options like `name`, `icon` and `tap_action` et.al. are also supported.
 

diff --git a/src/controllers/controller.ts b/src/controllers/controller.ts
@@ -11,6 +11,7 @@ export interface ControllerConfig {
   step?: number;
   attribute?: string;
   grow?: boolean;
+  dir?: string;
 }
 
 export abstract class Controller {
@@ -78,4 +79,7 @@ export abstract class Controller {
   get step(): number {
     return this._config.step ?? this._step ?? 5;
   }
+  get dir(): string {
+    return this._config.dir ?? undefined;
+  }
 }
diff --git a/src/main.ts b/src/main.ts
@@ -47,11 +47,12 @@ class SliderEntityRow extends LitElement {
         </hui-warning>
       `;
 
-    const dir = this.hass.translationMetadata.translations[
-      this.hass.language || "en"
-    ].isRTL
-      ? "rtl"
-      : "ltr";
+    const dir =
+      c.dir ??
+      this.hass.translationMetadata.translations[this.hass.language || "en"]
+        .isRTL
+        ? "rtl"
+        : "ltr";
 
     const showSlider =
       c.stateObj.state !== "unavailable" &&
@@ -80,9 +81,9 @@ class SliderEntityRow extends LitElement {
                 .dir=${dir}
                 pin
                 @change=${(ev) =>
-                  (c.value = (this.shadowRoot.querySelector(
-                    "ha-slider"
-                  ) as any).value)}
+                  (c.value = (
+                    this.shadowRoot.querySelector("ha-slider") as any
+                  ).value)}
                 class=${this._config.full_row || this._config.grow
                   ? "full"
                   : ""}

diff --git a/test/views/2_options.yaml b/test/views/2_options.yaml
@@ -165,3 +165,17 @@ cards:
             entity: media_player.bedroom
             name: media_player
             toggle: true
+
+  - type: vertical-stack
+    cards:
+      - <<: *desc
+        content: |
+          ## Invert
+      - type: entities
+        show_header_toggle: false
+        entities:
+          - type: custom:slider-entity-row
+            entity: light.bed_light
+          - type: custom:slider-entity-row
+            entity: light.bed_light
+            dir: rtl