@flowingcode/fc-applayout - npm Package Compare versions

Comparing version 0.9.3 to 0.9.4

fc-applayout.js

@@ -29,3 +29,2 @@ /**
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/app-layout/app-header/app-header";
 /**
@@ -70,4 +69,14 @@ * An example element.
         this.shadow = true;
+        /**
+         * Makes the drawer to be opened by default, in a non modal way
+         */
+        this.drawerPersistent = false;
+        /**
+         * Makes the drawer to be shown below the header
+         */
+        this.drawerBelowHeader = false;
         this.addEventListener('item-clicked', () => {
-            this.drawer.close();
+            if (!this.drawerPersistent) {
+                this.drawer.close();
+            }
         });
@@ -88,3 +97,3 @@ }
         </app-header>
-        <app-drawer part="drawer" align="${this.drawerAlign}" ?swipe-open=${this.swipeOpen} id="drawer" style="transition-duration: 200ms; touch-action: pan-y;">
+        <app-drawer ?persistent=${this.drawerPersistent} part="drawer" align="${this.drawerAlign}" ?swipe-open=${this.swipeOpen} id="drawer" style="transition-duration: 200ms; touch-action: pan-y;">
           <slot name="profile"></slot>
@@ -95,3 +104,3 @@ <paper-listbox role="listbox" tabindex="0">
         </app-drawer>
-        <div><slot name="content"></slot></div>
+        <div id="content"><slot name="content"></slot></div>
       </div>
@@ -102,2 +111,3 @@ `;
         this.drawer.toggle();
+        this._updateLeftMargin();
     }
@@ -108,8 +118,40 @@ firstUpdated() {
     }
+    updated(changedProps) {
+        if (changedProps.has('drawerPersistent')) {
+            this.drawer.opened = this.drawerPersistent;
+            this._updateLeftMargin();
+        }
+        if (changedProps.has('drawerBelowHeader')) {
+            this._updateZIndex();
+        }
+    }
+    _updateZIndex() {
+        if (this.drawerBelowHeader) {
+            this.header.style.zIndex = "1001";
+            this.drawer.style.top = this.header.clientHeight - 120 + "px";
+        }
+        else {
+            this.header.style.zIndex = "1000";
+            this.drawer.style.top = "-120px";
+        }
+    }
+    _updateLeftMargin() {
+        if (this.drawerPersistent) {
+            if (this.drawer.opened) {
+                let marginWidth = this.drawer.clientWidth + "px";
+                if (!this.drawerBelowHeader) {
+                    this.header.style.marginLeft = marginWidth;
+                }
+                this.content.style.marginLeft = marginWidth;
+            }
+            else {
+                if (!this.drawerBelowHeader) {
+                    this.header.style.marginLeft = "0px";
+                }
+                this.content.style.marginLeft = "0px";
+            }
+        }
+    }
 };
 FcAppLayoutElement.styles = css `
-    fc-menuitem fc-menuitem {
-      background-color: var(--lumo-primary-color-10pct);
-    }
-
     app-toolbar {
@@ -179,4 +221,16 @@ background-color: #4285f4;
 __decorate([
+    property({ type: Boolean })
+], FcAppLayoutElement.prototype, "drawerPersistent", void 0);
+__decorate([
+    property({ type: Boolean })
+], FcAppLayoutElement.prototype, "drawerBelowHeader", void 0);
+__decorate([
     query('#drawer')
 ], FcAppLayoutElement.prototype, "drawer", void 0);
+__decorate([
+    query('#header')
+], FcAppLayoutElement.prototype, "header", void 0);
+__decorate([
+    query('#content')
+], FcAppLayoutElement.prototype, "content", void 0);
 FcAppLayoutElement = __decorate([
@@ -183,0 +237,0 @@ customElement('fc-applayout')

package.json

 {
   "name": "@flowingcode/fc-applayout",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "description": "Responsive and flexible LitElement based Application Layout",
@@ -5,0 +5,0 @@ "keywords": [

src/fc-applayout.ts

@@ -17,2 +17,3 @@ /**
 import {AppDrawerElement} from '@polymer/app-layout/app-drawer/app-drawer';
+import {AppHeaderElement} from '@polymer/app-layout/app-header/app-header';
 import {ThemableElement} from '@vaadin/themable-element/themable-element.js';
@@ -26,3 +27,2 @@ import "@polymer/app-layout/app-scroll-effects/app-scroll-effects";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/app-layout/app-header/app-header";
 
@@ -40,6 +40,2 @@ /**
   static styles = css`
-    fc-menuitem fc-menuitem {
-      background-color: var(--lumo-primary-color-10pct);
-    }
-
     app-toolbar {
@@ -131,2 +127,14 @@ background-color: #4285f4;
   shadow = true;    
+
+ /**
+  * Makes the drawer to be opened by default, in a non modal way
+  */
+  @property({type: Boolean})
+  drawerPersistent = false;    
+
+ /**
+  * Makes the drawer to be shown below the header
+  */
+  @property({type: Boolean})
+  drawerBelowHeader = false;
   
@@ -136,2 +144,8 @@ @query('#drawer')
 
+  @query('#header')
+  header!: AppHeaderElement;
+
+  @query('#content')
+  content!: HTMLDivElement;
+
   render() {
@@ -149,3 +163,3 @@ return html`
         </app-header>
-        <app-drawer part="drawer" align="${this.drawerAlign}" ?swipe-open=${this.swipeOpen} id="drawer" style="transition-duration: 200ms; touch-action: pan-y;">
+        <app-drawer ?persistent=${this.drawerPersistent} part="drawer" align="${this.drawerAlign}" ?swipe-open=${this.swipeOpen} id="drawer" style="transition-duration: 200ms; touch-action: pan-y;">
           <slot name="profile"></slot>
@@ -156,3 +170,3 @@ <paper-listbox role="listbox" tabindex="0">
         </app-drawer>
-        <div><slot name="content"></slot></div>
+        <div id="content"><slot name="content"></slot></div>
       </div>
@@ -164,2 +178,3 @@ `;
     this.drawer.toggle();
+    this._updateLeftMargin();
   }
@@ -170,3 +185,5 @@
     this.addEventListener('item-clicked', () => {
-      this.drawer.close();
+      if (!this.drawerPersistent) {
+        this.drawer.close();
+      }
     });
@@ -180,2 +197,39 @@ }
 
+  updated(changedProps: { has: (arg0: string) => any; get: (arg0: string) => any; }) {
+    if (changedProps.has('drawerPersistent')) {
+      this.drawer.opened=this.drawerPersistent;
+      this._updateLeftMargin();
+    }
+    if (changedProps.has('drawerBelowHeader')) {
+      this._updateZIndex();
+    }
+  }
+
+  private _updateZIndex() {
+    if (this.drawerBelowHeader) {
+      this.header.style.zIndex = "1001";
+      this.drawer.style.top = this.header.clientHeight - 120 + "px";
+    } else {
+      this.header.style.zIndex = "1000";
+      this.drawer.style.top = "-120px";
+    }
+  }
+
+  _updateLeftMargin() {
+    if (this.drawerPersistent) {
+      if (this.drawer.opened) {
+        let marginWidth = this.drawer.clientWidth + "px";
+        if (!this.drawerBelowHeader) {
+          this.header.style.marginLeft = marginWidth;
+        }
+        this.content.style.marginLeft = marginWidth;
+      } else {
+        if (!this.drawerBelowHeader) {
+          this.header.style.marginLeft = "0px";
+        }
+        this.content.style.marginLeft = "0px";
+      }
+    }
+  }
+
 }
@@ -182,0 +236,0 @@

No alert changes

Improved metrics

Total package byte prevSize

103883

increased by3.42%

Lines of code

985

increased by11.68%

No dependency changes