fix: update touch optimized on slot change (#146)

vaadin · Feb 25, 2020 · ac45a28 · ac45a28
1 parent 1979511
commit ac45a28
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 2 deletions.
diff --git a/src/vaadin-app-layout.html b/src/vaadin-app-layout.html
@@ -176,6 +176,7 @@
     <div part="navbar" id="navbarBottom" bottom hidden>
       <slot name="navbar-bottom"></slot>
     </div>
+    <div hidden><slot id="touchSlot" name="navbar touch-optimized"></slot></div>
   </template>
   <script>
     (function() {
@@ -358,7 +359,16 @@
 
           this._updateTouchOptimizedMode();
 
-          this._navbarChildObserver = new Polymer.FlattenedNodesObserver(this.$.drawerSlot, (info) => {
+          const navbarSlot = this.$.navbarTop.firstElementChild;
+          this._navbarChildObserver = new Polymer.FlattenedNodesObserver(navbarSlot, (info) => {
+            this._updateTouchOptimizedMode();
+          });
+
+          this._touchChildObserver = new Polymer.FlattenedNodesObserver(this.$.touchSlot, (info) => {
+            this._updateTouchOptimizedMode();
+          });
+
+          this._drawerChildObserver = new Polymer.FlattenedNodesObserver(this.$.drawerSlot, (info) => {
             this._updateDrawerSize();
           });
           this._updateDrawerSize();
@@ -374,6 +384,8 @@
           super.disconnectedCallback();
 
           this._navbarChildObserver && this._navbarChildObserver.disconnect();
+          this._drawerChildObserver && this._drawerChildObserver.disconnect();
+          this._touchChildObserver && this._touchChildObserver.disconnect();
           window.removeEventListener('resize', this.__boundResizeListener);
           this.removeEventListener('drawer-toggle-click', this.__drawerToggleClickListener);
           this.removeEventListener('close-overlay-drawer', this.__drawerToggleClickListener);

diff --git a/test/empty-layout-test.html b/test/empty-layout-test.html
@@ -0,0 +1,82 @@
+<!doctype html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>vaadin-app-layout tests</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+  <link rel="import" href="../vaadin-app-layout.html">
+  <link rel="import" href="../vaadin-drawer-toggle.html">
+</head>
+
+<body>
+  <test-fixture id="empty-layout">
+    <template>
+      <vaadin-app-layout></vaadin-app-layout>
+    </template>
+  </test-fixture>
+
+  <script>
+    describe('empty layout', () => {
+      let layout;
+
+      beforeEach(done => {
+        layout = fixture('empty-layout');
+
+        Polymer.RenderStatus.afterNextRender(layout, done);
+      });
+
+      it('should update slot to navbar-bottom when adding node dynamically', done => {
+        // force touch-optimized=true to use bottom navbar
+        window.ShadyCSS.styleSubtree(layout, {'--vaadin-app-layout-touch-optimized': 'true'});
+        const toggle = document.createElement('vaadin-drawer-toggle');
+        toggle.setAttribute('slot', 'navbar touch-optimized');
+        layout.appendChild(toggle);
+
+        Polymer.RenderStatus.afterNextRender(toggle, () => {
+          expect(toggle.getAttribute('slot')).to.equal('navbar-bottom');
+          done();
+        });
+      });
+
+      it('should update slot to navbar when adding node dynamically', done => {
+        // force touch-optimized=true to use bottom navbar
+        window.ShadyCSS.styleSubtree(layout, {'--vaadin-app-layout-touch-optimized': 'false'});
+        const toggle = document.createElement('vaadin-drawer-toggle');
+        toggle.setAttribute('slot', 'navbar touch-optimized');
+        layout.appendChild(toggle);
+
+        Polymer.RenderStatus.afterNextRender(toggle, () => {
+          expect(toggle.getAttribute('slot')).to.equal('navbar');
+          done();
+        });
+      });
+
+      it('should make node visible when adding to "navbar touch-optimized" slot', done => {
+        // force touch-optimized=true to use bottom navbar
+        window.ShadyCSS.styleSubtree(layout, {'--vaadin-app-layout-touch-optimized': 'true'});
+        const toggle = document.createElement('vaadin-drawer-toggle');
+        toggle.setAttribute('slot', 'navbar touch-optimized');
+        layout.appendChild(toggle);
+
+        Polymer.RenderStatus.afterNextRender(toggle, () => {
+          expect(toggle.offsetHeight).to.be.greaterThan(0);
+          done();
+        });
+      });
+
+      it('should make node visible when adding to "navbar" slot dynamically', done => {
+        const toggle = document.createElement('vaadin-drawer-toggle');
+        toggle.setAttribute('slot', 'navbar');
+        layout.appendChild(toggle);
+
+        Polymer.RenderStatus.afterNextRender(toggle, () => {
+          expect(toggle.offsetHeight).to.be.greaterThan(0);
+          done();
+        });
+      });
+    });
+  </script>
+</body>
diff --git a/test/test-suites.js b/test/test-suites.js
@@ -1,3 +1,4 @@
 window.AppLayoutElementSuites = [
-  'vaadin-app-layout-test.html'
+  'vaadin-app-layout-test.html',
+  'empty-layout-test.html'
 ];