@dile/dile-app-drawer - npm Package Compare versions

Comparing version 2.0.1 to 2.0.2

index.js

@@ -1,1 +0,1 @@
-export { DileAppDrawer } from './src/DileAppDrawer.js';
+export { DileAppDrawer, DILE_APP_DRAWER_EVENT_CLOSED, DILE_APP_DRAWER_EVENT_CLOSE_OUTSIDE } from './src/DileAppDrawer.js';

package.json

 {
   "name": "@dile/dile-app-drawer",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Webcomponent to create a animated menu similar to the material design navigation drawer component",
@@ -35,3 +35,3 @@ "keywords": [
   },
-  "gitHead": "20b67c6d67a2322c22c4eff01a9eea04f2f08393"
+  "gitHead": "5a70850e0ee4b0db0f11b090cc510a2558676bfd"
 }

src/DileAppDrawer.js

 import { LitElement, html, css } from "lit-element";
 import { DileCloseOnEscPressed } from '@dile/dile-close-on-esc-pressed-mixin';
 
+export const DILE_APP_DRAWER_EVENT_CLOSE_OUTSIDE = 'dile-app-drawer-click-outside';
+export const DILE_APP_DRAWER_EVENT_CLOSED = 'dile-app-drawer-closed';
+
 export class DileAppDrawer extends DileCloseOnEscPressed(LitElement) {
   static get properties() {
     return {
-      direction: { type: String },
-      opened: { type: Boolean },
-      _currentClass: { type: String },
-      _directionClass: { type: String },
+      direction: {
+        type: String,
+        reflect: true
+      },
+      opened: {
+        type: Boolean,
+        reflect: true
+      }
     };
@@ -16,7 +23,5 @@ }
     super();
+    this.direction = 'top';
     this.opened = false;
-    this._currentClass = "";
-    this.documentCloseHandler = this._documentClose.bind(this);
-    this.direction = 'top';
-    this._directionClass = 'top';
+    this._documentClose = this._documentClose.bind(this);
   }
@@ -29,13 +34,46 @@
       }
+
+      .modal {
+        display: none;
+        position: absolute;
+        width: 100vw;
+        height: 100vh;
+        top: 0;
+        left: 0;
+        z-index: var(--dile-app-drawer-modal-z-index, var(--dile-app-drawer-z-index, 10000));
+        opacity: 0;
+        transition: opacity 0.3s ease;
+        background-color: var(
+          --dile-app-drawer-modal-background-color,
+          rgba(20, 20, 20, 0.7)
+        );
+      }
+
       .menu {
-        position: fixed;
+        position: absolute;
         box-sizing: border-box;
+        z-index: var(--dile-app-drawer-z-index, 10000);
         background-color: var(--dile-app-drawer-background-color, #ddd);
-        z-index: var(--dile-app-drawer-z-index, 10001);
-        overflow: hidden;
         transition: transform 0.3s ease;
-        align-items: flex-end;
-        max-height: 100vh;
       }
-      div.top {
+
+      section {
+        transform: translateX(-100vw);
+        transition: transform 0.2s ease 0.3s;
+      }
+
+      :host([opened]) .modal {
+        display: block;
+        opacity: 1;
+      }
+
+      :host([opened]) .menu {
+        display: block;
+      }
+
+      :host([opened]) section {
+        transform: translateX(0);
+      }
+
+      :host([direction="top"]) .menu {
         top: var(--dile-app-drawer-closed-top, -100vh);
@@ -45,4 +83,6 @@ left: var(--dile-app-drawer-closed-left, 0);
         width: var(--dile-app-drawer-content-width, 100vw);
+        box-shadow: var(--dile-app-drawer-box-shadow, 0 1px 8px #000);
       }
-      div.left {
+
+      :host([direction="left"]) .menu {
         top: var(--dile-app-drawer-closed-top, 0);
@@ -52,49 +92,12 @@ left: var(--dile-app-drawer-closed-left, -100vw);
         width: var(--dile-app-drawer-content-width, auto);
-        box-shadow: 4px 0 8px #000;
+        box-shadow: var(--dile-app-drawer-box-shadow, 1px 0 8px #000);
       }
-      section {
-        transform: translateX(-100vw);
-        transition-property: transform;
-        transition-duration: 0.2s;
-        transition-delay: 0.3s;
-        transition-timing-function: ease;
-      }
-      .opening {
-        display: block;
-      }
-      div.opened {
-        display: block;
-      }
-      div.top.opened {
+
+      :host([direction="top"][opened]) .menu {
         transform: translateY(100vh);
-        box-shadow: var(--dile-app-drawer-box-shadow, 0 1px 8px #000);
       }
-      section.top.opened {
-        transform: translateX(0);
-      }
-      div.left.opened {
+
+      :host([direction="left"][opened]) .menu {
         transform: translateX(100vw);
-        box-shadow: var(--dile-app-drawer-box-shadow, 1px 0 8px #000);
       }
-      section.left.opened {
-        transform: translateX(0);
-      }
-
-      div.modal {
-        background-color: var(
-          --dile-app-drawer-modal-background-color,
-          rgba(20, 20, 20, 0.7)
-        );
-        position: fixed;
-        width: 100vw;
-        height: 100vh;
-        top: 0;
-        left: 0;
-        z-index: var(--dile-app-drawer-modal-z-index, 10000);
-        opacity: 0;
-        transition: opacity 0.3s ease;
-      }
-      div.modal.opened {
-        opacity: 1;
-      }
     `;
@@ -106,7 +109,4 @@ }
       ${this.modalTemplate}
-      <div
-        class="menu ${this._directionClass} ${this._currentClass}"
-        @click="${this._contentClick}"
-      >
-        <section class="${this._directionClass} ${this._currentClass}">
+      <div class="menu" @click="${this._contentClick}">
+        <section>
           <slot></slot>
@@ -119,40 +119,10 @@ </section>
   get modalTemplate() {
-    return html`
-      ${this.opened
-        ? html`
-            <div
-              @click=${this.documentCloseHandler}
-              class="modal ${this._currentClass}"
-            ></div>
-          `
-        : ""}
-    `;
+    return html`<div class="modal" @click=${this._documentClose}></div>`;
   }
 
-  updated(changedProperties) {
-    if (changedProperties.has("opened")) {
-      if (this.opened) {
-        this._currentClass = "opening";
-        setTimeout(() => (this._currentClass = "opened"), 100);
-        document.body.style.overflow = 'hidden';
-      } else {
-        this._currentClass = "opening";
-        setTimeout(() => (this._currentClass = ""), 200);
-        document.body.style.overflow = "visible";
-      }
-    }
-    if(changedProperties.has("direction")) {
-      if (this.direction == "left") {
-        this._directionClass = "left";
-      } else {
-        this._directionClass = "top";
-      }
-    }
-  }
-
   _documentClose() {
-    if (this._currentClass == "opened") {
+    if (this.opened) {
       this.close();
       this.dispatchEvent(
-        new CustomEvent("dile-app-drawer-click-outside", {
+        new CustomEvent(DILE_APP_DRAWER_EVENT_CLOSE_OUTSIDE, {
           bubbles: true,
@@ -164,2 +134,3 @@ composed: true,
   }
+
   toggle() {
@@ -175,3 +146,3 @@ this.opened = !this.opened;
     this.opened = false;
-    this.dispatchEvent(new CustomEvent('dile-app-drawer-closed', {
+    this.dispatchEvent(new CustomEvent(DILE_APP_DRAWER_EVENT_CLOSED, {
       bubbles: true,
@@ -178,0 +149,0 @@ composed: true,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

8096

decreased by-9.93%

Lines of code

130

decreased by-22.62%

No dependency changes