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

Comparing version 1.1.0 to 2.0.0-alpha.0

package.json

 {
   "name": "@dile/dile-app-drawer",
-  "version": "1.1.0",
+  "version": "2.0.0-alpha.0",
   "description": "Webcomponent to create a animated menu similar to the material design navigation drawer component",
@@ -35,3 +35,3 @@ "keywords": [
   },
-  "gitHead": "6788162ce064bfbb3dc716b120081df2471854c8"
+  "gitHead": "7ec542abf33bd691ce1f0dad1c9c2025fafefb3e"
 }

README.md

 # @dile/dile-app-drawer
 
-Web component to create a simple animated menu, useful as app global menu and similar to the material design navigation drawer component.
+Web component to create a simple animated menu, useful as app global menu, with a look & feel similar to the material design navigation drawer component.
 
@@ -32,5 +32,6 @@ ## Installation
 
-This componen only has one property to set the state of the component between opened and closed.
+This componen has two properties:
 
-- **opened**: Boolean property.
+- **opened**: Set the state of the component between opened and closed. Boolean property.
+- **direction**: Defines de animation and direction to open the menú. String property one of "top" or "left". Default is "top".
 
@@ -56,6 +57,10 @@ ## Methods
 ----------------|-------------|---------
---dile-app-drawer-content-height | Height of the menu | auto
+--dile-app-drawer-content-height | Height of the menu | auto (or 100vh on "letf" direction)
+--dile-app-drawer-content-width | Width of the menu | 100vw (or auto on "left" direction)
 --dile-app-drawer-background-color | Background color menu layer | #ddd
---dile-app-drawer-z-index | z-index menu layer | 10000
---dile-app-drawer-closed-top | Drawer content top position in closed state | 40vh 
---dile-app-drawer-closed-left | Drawer content left position in closed state | 0 
+--dile-app-drawer-z-index | z-index menu layer | 10001
+--dile-app-drawer-closed-top | Drawer content top position in closed state | -100vh (or 0 on "left" direction) 
+--dile-app-drawer-closed-left | Drawer content left position in closed state | 0 (or -100vw on "left" direction) 
+--dile-app-drawer-box-shadow | Menu shadow | 0 1px 8px #000 (or 1px 0 8px #000 on "left" direction)
+--dile-app-drawer-modal-background-color | Menu modal layer background color | rgba(20, 20, 20, 0.7)
+--dile-app-drawer-modal-z-index | Menu modal layer z-index | 10000

src/DileAppDrawer.js

 import { LitElement, html, css } from "lit-element";
-import { DileCloseOnEscPressed } from '@dile/dile-close-on-esc-pressed-mixin'
+import { DileCloseOnEscPressed } from '@dile/dile-close-on-esc-pressed-mixin';
+
 export class DileAppDrawer extends DileCloseOnEscPressed(LitElement) {
   static get properties() {
     return {
+      direction: { type: String },
       opened: { type: Boolean },
       _currentClass: { type: String },
+      _directionClass: { type: String },
     };
@@ -16,2 +19,4 @@ }
     this.documentCloseHandler = this._documentClose.bind(this);
+    this.direction = 'top';
+    this._directionClass = 'top';
   }
@@ -24,31 +29,71 @@
       }
-
       .menu {
-        display: none;
         position: fixed;
         box-sizing: border-box;
-        top: -100vh;
-        left: 0;
-        width: 100vw;
-        height: var(--dile-app-drawer-content-height, auto);
         background-color: var(--dile-app-drawer-background-color, #ddd);
-        z-index: var(--dile-app-drawer-z-index, 10000);
-        padding-top: var(--dile-app-drawer-closed-top, 40vh);
-        padding-left: var(--dile-app-drawer-closed-left, 0);
+        z-index: var(--dile-app-drawer-z-index, 10001);
         overflow: hidden;
-        transition-property: top, padding;
-        transition-duration: 0.3s, 0.3s;
-        transition-delay: 0s, 0.31s;
-        transition-timing-function: ease, ease-in;
+        transition-property: transform;
+        transition-duration: 0.3s;
+        transition-timing-function: ease;
+        align-items: flex-end;
       }
-
+      div.top {
+        top: var(--dile-app-drawer-closed-top, -100vh);
+        left: var(--dile-app-drawer-closed-left, 0);
+        height: var(--dile-app-drawer-content-height, auto);
+        width: var(--dile-app-drawer-content-width, 100vw);
+      }
+      div.left {
+        top: var(--dile-app-drawer-closed-top, 0);
+        left: var(--dile-app-drawer-closed-left, -100vw);
+        height: var(--dile-app-drawer-content-height, 100vh);
+        width: var(--dile-app-drawer-content-width, auto);
+        box-shadow: 4px 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 {
+        transform: translateY(100vh);
+        box-shadow: var(--dile-app-drawer-box-shadow, 0 1px 8px #000);
+      }
+      section.top.opened {
+        transform: translateX(0);
+      }
+      div.left.opened {
+        transform: translateX(100vw);
+        box-shadow: var(--dile-app-drawer-box-shadow, 1px 0 8px #000);
+      }
+      section.left.opened {
+        transform: translateX(0);
+      }
 
-      .opened {
+      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;
-        padding: 0;
-        display: block;
+        left: 0;
+        z-index: var(--dile-app-drawer-modal-z-index, 10000);
+        opacity: 0;
+        transition: opacity 0.3s ease;
       }
+      div.modal.opened {
+        opacity: 1;
+      }
     `;
@@ -59,7 +104,10 @@ }
     return html`
+      ${this.modalTemplate}
       <div
-        class="menu ${this._currentClass}"
+        class="menu ${this._directionClass} ${this._currentClass}"
         @click="${this._contentClick}"
       >
-        <slot></slot>
+        <section class="${this._directionClass} ${this._currentClass}">
+          <slot></slot>
+        </section>
       </div>
@@ -69,14 +117,34 @@ `;
 
+  get modalTemplate() {
+    return html`
+      ${this.opened
+        ? html`
+            <div
+              @click=${this.documentCloseHandler}
+              class="modal ${this._currentClass}"
+            ></div>
+          `
+        : ""}
+    `;
+  }
+
   updated(changedProperties) {
     if (changedProperties.has("opened")) {
       if (this.opened) {
-        document.addEventListener("click", this.documentCloseHandler);
         this._currentClass = "opening";
         setTimeout(() => (this._currentClass = "opened"), 100);
+        document.body.style.overflow = 'hidden';
       } else {
-        document.removeEventListener("click", this.documentCloseHandler);
         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";
+      }
+    }
   }
@@ -83,0 +151,0 @@

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

Improved metrics

Total package byte prevSize

9046

increased by39.43%

Lines of code

169

increased by67.33%

Number of lines in readme file

64

increased by8.47%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes