RTL-friendly align property for drawer

app-drawer-layout/README.md

@@ -6,7 +6,7 @@ In narrow layout, the drawer will be stacked on top of the main content. The dra
 in/out to hide/reveal the main content.
 
 
-By default the drawer is on the left side of the screen:
+By default the drawer is aligned to the start, which is left in LTR layouts:
 
 ```html
 <app-drawer-layout>
@@ -19,11 +19,11 @@ By default the drawer is on the left side of the screen:
 </app-drawer-layout>
 ```
 
-A drawer on the right side of the screen:
+Align the drawer at the end:
 
 ```html
 <app-drawer-layout>
-  <app-drawer position="right">
+  <app-drawer align="end">
     <!-- drawer content -->
   </app-drawer>
   <div>

app-drawer-layout/app-drawer-layout.html

@@ -18,7 +18,7 @@
 In narrow layout, the drawer will be stacked on top of the main content. The drawer will slide
 in/out to hide/reveal the main content.
 
-By default the drawer is on the left side of the screen:
+By default the drawer is aligned to the start, which is left in LTR layouts:
 
 ```html
 <app-drawer-layout>
@@ -31,11 +31,11 @@
 </app-drawer-layout>
 ```
 
-A drawer on the right side of the screen:
+Align the drawer at the end:
 
 ```html
 <app-drawer-layout>
-  <app-drawer position="right">
+  <app-drawer align="end">
     <!\-\- drawer content \-\->
   </app-drawer>
   <div>

app-drawer-layout/demo/demo1.html

@@ -52,7 +52,7 @@
 
   <app-drawer-layout>
 
-    <app-drawer position="left"></app-drawer>
+    <app-drawer></app-drawer>
 
     <app-toolbar>
       <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>

app-drawer-layout/demo/demo2.html

@@ -54,12 +54,12 @@
 
     <app-drawer swipe-open></app-drawer>
 
-    <app-drawer id="rightDrawer" position="right" swipe-open></app-drawer>
+    <app-drawer id="endDrawer" align="end" swipe-open></app-drawer>
 
     <app-toolbar>
       <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
       <div title></div>
-      <paper-icon-button icon="info" onclick="document.getElementById('rightDrawer').toggle();"></paper-icon-button>
+      <paper-icon-button icon="info" onclick="document.getElementById('endDrawer').toggle();"></paper-icon-button>
     </app-toolbar>
 
     <sample-content size="100"></sample-content>

app-drawer-layout/test/app-drawer-layout.html

@@ -129,7 +129,7 @@
             assert.equal(drawerLayout.$.contentContainer.style.marginLeft, '256px');
             assert.equal(drawerLayout.$.contentContainer.style.marginRight, '');
 
-            drawer.position = 'right';
+            drawer.align = 'end';
 
             window.setTimeout(function() {
               assert.equal(drawerLayout.$.contentContainer.style.marginLeft, '');

app-drawer/README.md

@@ -4,16 +4,16 @@ app-drawer is a navigation drawer that can slide in from the left or right.
 
 Example:
 
-Add a drawer on the left side of the screen:
+Align the drawer at the start, which is left in LTR layouts (default):
 
 ```html
 <app-drawer opened></app-drawer>
 ```
 
-Add a drawer on the right side of the screen:
+Align the drawer at the end:
 
 ```html
-<app-drawer position="right" opened></app-drawer>
+<app-drawer align="end" opened></app-drawer>
 ```
 
 To make the contents of the drawer scrollable, create a wrapper for the scroll

app-drawer/app-drawer.html

@@ -16,16 +16,16 @@
 
 Example:
 
-Add a drawer on the left side of the screen (default):
+Align the drawer at the start, which is left in LTR layouts (default):
 
 ```html
 <app-drawer opened></app-drawer>
 ```
 
-Add a drawer on the right side of the screen:
+Align the drawer at the end:
 
 ```html
-<app-drawer position="right" opened></app-drawer>
+<app-drawer align="end" opened></app-drawer>
 ```
 
 To make the contents of the drawer scrollable, create a wrapper for the scroll
@@ -79,7 +79,7 @@
       @apply(--app-drawer-content-container);
     }
 
-    :host([position=right]) > #contentContainer {
+    #contentContainer[position=right] {
       left: auto;
       right: 0;
 
@@ -97,7 +97,7 @@
       visibility: visible;
     }
 
-    :host([swipe-open][position=right]) > #contentContainer::after {
+    :host([swipe-open]) > #contentContainer[position=right]::after {
       left: auto;
       right: 100%;
     }
@@ -135,7 +135,7 @@
 
     <div id="scrim" on-tap="_scrimTapHandler"></div>
 
-    <div id="contentContainer">
+    <div id="contentContainer" position$="{{position}}">
       <content></content>
     </div>
 
@@ -169,12 +169,22 @@
         },
 
         /**
-         * The position of the drawer on the screen ('left' or 'right').
+         * The alignment of the drawer on the screen ('start', 'end', 'left', or 'right').
+         * 'start' computes to left and 'end' to right in LTR layout and vice versa in RTL
+         * layout.
+         */
+        align: {
+          type: String,
+          value: 'start',
+        },
+
+        /**
+         * The computed, read-only position of the drawer on the screen ('left' or 'right').
          */
         position: {
           type: String,
-          value: 'left',
-          reflectToAttribute: true
+          readOnly: true,
+          computed: '_computePosition(align)'
         },
 
         /**
@@ -252,6 +262,20 @@
         }, 1);
       },
 
+      _isRTL: function() {
+        return window.getComputedStyle(this).direction === 'rtl';
+      },
+
+      _computePosition: function() {
+        switch (this.align) {
+          case 'start':
+            return this._isRTL() ? 'right' : 'left';
+          case 'end':
+            return this._isRTL() ? 'left' : 'right';
+        }
+        return this.align;
+      },
+
       _scrimTapHandler: function() {
         if (this.persistent) {
           return;
@@ -291,7 +315,7 @@
         this.style.visibility = 'visible';
 
         var rect = this.$.contentContainer.getBoundingClientRect();
-        if (this.position == 'left') {
+        if (this.position === 'left') {
           this._translateOffset = rect.left;
         } else {
           this._translateOffset = rect.right - window.innerWidth;

app-drawer/demo/demo2.html

@@ -60,7 +60,7 @@
 
     <sample-content size="100"></sample-content>
 
-    <app-drawer id="drawer" position="right" swipe-open>
+    <app-drawer id="drawer" align="end" swipe-open>
       <div style="height: 100%; overflow: auto;">
         <template is="dom-repeat" id="menu" items="[[items]]">
           <paper-icon-item class="iconItem">

app-drawer/test/app-drawer.html

@@ -60,15 +60,45 @@
       test('default values', function() {
         assert.isFalse(drawer.opened);
         assert.isFalse(drawer.persistent);
-        assert.equal(drawer.position, 'left');
+        assert.equal(drawer.align, 'start');
         assert.isFalse(drawer.swipeOpen);
       });
 
       test('set scroll direction', function() {
         assert.equal(drawer['__polymerGesturesTouchAction'], 'pan-y');
       });
 
+      test('computed position', function() {
+        document.dir = 'ltr';
+        drawer.align = 'start';
+
+        assert.equal(drawer.position, 'left');
+
+        drawer.align = 'end';
+
+        assert.equal(drawer.position, 'right');
+
+        drawer.align = 'left';
+
+        assert.equal(drawer.position, 'left');
+
+        document.dir = 'rtl';
+        drawer.align = 'start';
+
+        assert.equal(drawer.position, 'right');
+
+        drawer.align = 'end';
+
+        assert.equal(drawer.position, 'left');
+
+        drawer.align = 'right';
+
+        assert.equal(drawer.position, 'right');
+      });
+
       test('left drawer opens and closes', function() {
+        drawer.align = 'left';
+
         var contentContainerClientRect = contentContainer.getBoundingClientRect();
         assert.isTrue(contentContainerClientRect.right <= 0);
 
@@ -84,7 +114,7 @@
       });
 
       test('right drawer opens and closes', function() {
-        drawer.position = 'right';
+        drawer.align = 'right';
 
         var contentContainerClientRect = contentContainer.getBoundingClientRect();
         assert.isTrue(contentContainerClientRect.left >= window.innerWidth);
@@ -127,7 +157,7 @@
       test('app-drawer-reset-layout', function(done) {
         var listenerSpy = sinon.spy();
         drawer.addEventListener('app-drawer-reset-layout', listenerSpy);
-        drawer.position = 'right';
+        drawer.align = 'right';
 
         window.setTimeout(function() {
           assert.isTrue(listenerSpy.called);
@@ -172,6 +202,7 @@
       test('left drawer swiping', function() {
         var drawerWidth = drawer.getWidth();
         var halfWidth = drawerWidth / 2;
+        drawer.align = 'left';
         drawer.fire('track', { state: 'start' });
         drawer.fire('track', { state: 'track', dx: -halfWidth, ddx: -halfWidth });
 
@@ -210,7 +241,7 @@
       test('right drawer swiping', function() {
         var drawerWidth = drawer.getWidth();
         var halfWidth = drawerWidth / 2;
-        drawer.position = 'right';
+        drawer.align = 'right';
         drawer.fire('track', { state: 'start' });
         drawer.fire('track', { state: 'track', dx: halfWidth, ddx: halfWidth });
 
@@ -268,6 +299,7 @@
 
       test('left drawer flicking', function() {
         var drawerWidth = drawer.getWidth();
+        drawer.align = 'left';
         drawer.fire('track', { state: 'start' });
         drawer.fire('track', { state: 'track', dx: 0, ddx: 0 });
         drawer.fire('track', { state: 'end', dx: 0.1, ddx: 0.1 });
@@ -315,7 +347,7 @@
 
       test('right drawer flicking', function() {
         var drawerWidth = drawer.getWidth();
-        drawer.position = 'right';
+        drawer.align = 'right';
         drawer.fire('track', { state: 'start' });
         drawer.fire('track', { state: 'track', dx: 0, ddx: 0 });
         drawer.fire('track', { state: 'end', dx: -0.1, ddx: -0.1 });

demo/demo1.html

@@ -35,13 +35,13 @@
       background-color: #eee;
     }
 
-    #leftDrawer {
+    #startDrawer {
       --app-drawer-content-container: {
         box-shadow: 1px 0 2px 1px rgba(0,0,0,0.18);
       }
     }
 
-    #rightDrawer {
+    #endDrawer {
       --app-drawer-content-container: {
         box-shadow: -1px 0 2px 1px rgba(0,0,0,0.18);
       }
@@ -83,9 +83,9 @@
       </app-toolbar>
     </app-header>
 
-    <app-drawer id="leftDrawer" position="left"></app-drawer>
+    <app-drawer id="startDrawer" align="start"></app-drawer>
 
-    <app-drawer id="rightDrawer" position="right"></app-drawer>
+    <app-drawer id="endDrawer" align="end"></app-drawer>
 
     <sample-content size="100"></sample-content>
 
@@ -95,11 +95,11 @@
 
   (function(scope) {
     scope.toggleLeft = function() {
-      this.$.leftDrawer.toggle();
+      this.$.startDrawer.toggle();
     };
 
     scope.toggleRight = function() {
-      this.$.rightDrawer.toggle();
+      this.$.endDrawer.toggle();
     };
   })(document.querySelector('#app'));