Add RTL to polymer 3 (#141)

RTL implementation
PolymerElements · Mar 18, 2019 · c2c556c · c2c556c
1 parent 096c55d
commit c2c556c
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 3 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -51,6 +51,16 @@ <h3>Toggle buttons can be checked and disabled</h3>
         </template>
       </demo-snippet>
 
+      <h3>Toggle buttons can be set RTL</h3>
+      <demo-snippet class="centered-demo">
+        <template>
+          <paper-toggle-button dir="rtl">Toggle</paper-toggle-button>
+          <paper-toggle-button dir="rtl" checked>Toggle</paper-toggle-button>
+          <paper-toggle-button dir="rtl" disabled>Disabled</paper-toggle-button>
+          <paper-toggle-button dir="rtl" invalid>Invalid</paper-toggle-button>
+        </template>
+      </demo-snippet>
+
       <h3>Toggle buttons can hide the ripple effect using the <i>noink</i> attribute</h3>
       <demo-snippet class="centered-demo">
         <template>

diff --git a/paper-toggle-button.js b/paper-toggle-button.js
@@ -97,6 +97,7 @@ Polymer({
         position: absolute;
         top: -3px;
         left: 0;
+        right: auto;
         height: 20px;
         width: 20px;
         border-radius: 50%;
@@ -109,6 +110,13 @@ Polymer({
         @apply --paper-toggle-button-unchecked-button;
       }
 
+      :host(:dir(rtl)) .toggle-button,
+      /* Shady DOM workaround */
+      :host([dir="rtl"]) .toggle-button {
+        right: 0;
+        left: auto;
+      }
+
       .toggle-button.dragging {
         -webkit-transition: none;
         transition: none;
@@ -131,6 +139,13 @@ Polymer({
         transform: translate(16px, 0);
       }
 
+      :host(:dir(rtl)):host([checked]) .toggle-button,
+      /* Shady DOM workaround */
+      :host([dir="rtl"][checked]) .toggle-button {
+        -webkit-transform: translate(-16px, 0);
+        transform: translate(-16px, 0);
+      }
+
       :host([checked]:not([disabled])) .toggle-button {
         background-color: var(--paper-toggle-button-checked-button-color, var(--primary-color));
 
@@ -225,6 +240,12 @@ Polymer({
 
   listeners: {track: '_ontrack'},
 
+  __calculateIsRtl: function() {
+    const compStyle = window.getComputedStyle(this);
+    const dir = compStyle.direction;
+    return dir === 'rtl';
+  },
+
   attached: function() {
     afterNextRender(this, function() {
       setTouchAction(this, 'pan-y');
@@ -243,6 +264,7 @@ Polymer({
   },
 
   _trackStart: function(track) {
+    this._isRtl = this.__calculateIsRtl()
     this._width = this.$.toggleBar.offsetWidth / 2;
     /*
      * keep an track-only check state to keep the dragging behavior smooth
@@ -254,10 +276,22 @@ Polymer({
 
   _trackMove: function(track) {
     var dx = track.dx;
-    this._x = Math.min(
-        this._width, Math.max(0, this._trackChecked ? this._width + dx : dx));
+
+    if (this._isRtl) {
+      this._x = Math.max(
+        -this._width, Math.min(0, this._trackChecked ? -this._width + dx : dx));
+    } else {
+      this._x = Math.min(
+          this._width, Math.max(0, this._trackChecked ? this._width + dx : dx));
+    }
+
     this.translate3d(this._x + 'px', 0, 0, this.$.toggleButton);
-    this._userActivate(this._x > (this._width / 2));
+
+    if (this._isRtl) {
+      this._userActivate(this._x < (-this._width / 2));
+    } else {
+      this._userActivate(this._x > (this._width / 2));
+    }
   },
 
   _trackEnd: function(track) {