feat(rtl-option): implement rtl switcher option

exadel-inc · Dec 21, 2021 · 6ca2a31 · 6ca2a31
1 parent e70dedf
commit 6ca2a31
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 2 deletions.
diff --git a/src/core/base/root.ts b/src/core/base/root.ts
@@ -27,6 +27,12 @@ export class UIPRoot extends ESLBaseElement {
    */
   @attr({defaultValue: 'uip-light'}) public theme: string;
 
+  /**
+   * Attribute for controlling UIP components' theme.
+   * Has two values: `uip-light` and `uip-dark`.
+   */
+  @attr({defaultValue: 'LTR'}) public direction: string;
+
   /**
    * Attibute for setup media query rules
    */
@@ -36,7 +42,7 @@ export class UIPRoot extends ESLBaseElement {
   private _rewriteModeRL: ESLMediaRuleList<string>;
 
   static get observedAttributes() {
-    return ['theme', 'mode', 'rewrite-mode'];
+    return ['theme', 'mode', 'rewrite-mode', 'direction'];
   }
 
   /** {@link UIPStateModel} instance to store UI Playground state. */
@@ -48,6 +54,7 @@ export class UIPRoot extends ESLBaseElement {
     this.applyRewriteQuery(this.rewriteMode);
     super.connectedCallback();
     this.theme = String(this.theme);
+    this.direction = String(this.direction);
     this._lastMode = this.mode = String(this.mode);
     this._onQueryChange();
   }
@@ -69,7 +76,7 @@ export class UIPRoot extends ESLBaseElement {
 
   protected attributeChangedCallback(attrName: string, oldVal: string, newVal: string) {
     if (oldVal === newVal) return;
-    if (attrName === 'mode' || attrName === 'theme') {
+    if (attrName === 'mode' || attrName === 'theme' || attrName === 'direction') {
       this._updateStyles(attrName, oldVal, newVal);
       EventUtils.dispatch(this, 'uip:configchange', {
         bubbles: false,

diff --git a/src/core/preview/preview.ts b/src/core/preview/preview.ts
@@ -8,15 +8,38 @@ import {UIPPlugin} from '../base/plugin';
 export class UIPPreview extends UIPPlugin {
   static is = 'uip-preview';
 
+  protected connectedCallback() {
+    super.connectedCallback();
+
+    this.bindEvents();
+  }
+
   @bind
   protected _onRootStateChange(): void {
     if (this.$inner.parentElement === this) this.removeChild(this.$inner);
     this.$inner.innerHTML = this.model!.html;
     this.appendChild(this.$inner);
   }
 
+  protected bindEvents() {
+    this.root?.addEventListener('uip:configchange', this._onRootConfigChange);
+  }
+
+  protected unbindEvents() {
+    this.root?.removeEventListener('uip:configchange', this._onRootConfigChange);
+  }
+
+  /** Callback to catch direction changes from {@link UIPRoot}. */
+  @bind
+  protected _onRootConfigChange(e: CustomEvent) {
+    console.log(e);
+    if (e.detail.attribute !== 'direction') return false;
+    this.$inner.dir = e.detail.value;
+  }
+
   protected disconnectedCallback() {
     if (this.$inner.parentElement === this) this.removeChild(this.$inner);
+    this.unbindEvents();
     super.disconnectedCallback();
   }
 }
diff --git a/src/plugins/options/options.ts b/src/plugins/options/options.ts
@@ -36,6 +36,7 @@ export class UIPOptions extends UIPPlugin {
     this.innerHTML = '';
     this.renderMode();
     this.renderTheme();
+    this.renderDirection();
   }
 
   protected renderMode() {
@@ -74,16 +75,36 @@ export class UIPOptions extends UIPPlugin {
     this.appendChild($theme);
   }
 
+  protected renderDirection() {
+    const $dir = document.createElement('div');
+    CSSClassUtils.add($dir, 'uip-option dir');
+    const dirOptionId = randUID();
+    $dir.innerHTML = `
+        <div class="option-item">
+            <input type="radio" id=${dirOptionId}-uip-ltr name=${dirOptionId}-dir direction="LTR"
+            class="option-radio-btn" ${this.root?.direction === 'LTR' ? 'checked' : ''}>
+            <label class="option-label" for=${dirOptionId}-uip-ltr>LTR</label>
+        </div>
+        <div class="option-item">
+            <input type="radio" id=${dirOptionId}-uip-rtl name=${dirOptionId}-dir direction="RTL"
+            class="option-radio-btn" ${this.root?.direction === 'RTL' ? 'checked' : ''}>
+            <label class="option-label" for=${dirOptionId}-uip-rtl>RTL</label>
+        </div>`;
+    this.appendChild($dir);
+  }
+
   @bind
   protected _onOptionChange(e: Event) {
     const target = e.target as HTMLElement;
 
     const mode = target.getAttribute('mode');
     const theme = target.getAttribute('theme');
+    const dir = target.getAttribute('direction');
 
     if (this.root) {
       if (mode) this.root.mode = mode;
       if (theme) this.root.theme = theme;
+      if (dir) this.root.direction = dir;
     }
   }