From 48353b3c08c4cdd14e4b8b44ae0d1145f61f07f8 Mon Sep 17 00:00:00 2001 From: Wes Date: Thu, 9 Nov 2023 22:51:58 -0800 Subject: [PATCH 1/3] hi --- README.md | 3 +++ index.html | 18 +++++++++++++++++- package-lock.json | 4 ++-- package.json | 2 +- side-drawer.js | 16 ++++++++++++---- 5 files changed, 35 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index a5ee396..c4ea12f 100644 --- a/README.md +++ b/README.md @@ -67,6 +67,9 @@ This web component uses [HTML templates](https://caniuse.com/#feat=template), th - Example: `drawer.open = true` - In (p)react you might need to set undefined in your JSX (since false !== undefined for html attribute existence) - Example: `` +- `right` + - Add this attribute so the drawer opens from the right instead of the left. + - Example: `` ### Events diff --git a/index.html b/index.html index 1d68897..6282d73 100644 --- a/index.html +++ b/index.html @@ -296,7 +296,7 @@

Example Customization

border-top-right-radius: 20%; border-bottom-right-radius: 20%; - +
  • @@ -312,6 +312,11 @@

    Example Customization

    --side-drawer-overlay-opacity: .25;
    • +
  • + + <side-drawer right><side-drawer> + +
    • @@ -347,11 +352,13 @@

    Example Customization

    const menuButton2 = document.querySelector("#menuButton2"); const menuButton3 = document.querySelector("#menuButton3"); const menuButton4 = document.querySelector("#menuButton4"); + const menuButton5 = document.querySelector("#menuButton5"); const drawer = document.querySelector("#drawer"); const drawer2 = document.querySelector("#drawer2"); const drawer3 = document.querySelector("#drawer3"); const drawer4 = document.querySelector("#drawer4"); + const drawer5 = document.querySelector("#drawer5"); menuButton.addEventListener("opened", (ev) => { drawer.open = true; @@ -365,6 +372,9 @@

    Example Customization

    menuButton4.addEventListener("opened", (ev) => { drawer4.open = true; }); + menuButton5.addEventListener("opened", (ev) => { + drawer5.open = true; + }); drawer.addEventListener("open", (ev) => { menuButton.open = true; @@ -378,6 +388,9 @@

    Example Customization

    drawer4.addEventListener("open", (ev) => { menuButton4.open = true; }); + drawer5.addEventListener("open", (ev) => { + menuButton5.open = true; + }); drawer.addEventListener("close", (ev) => { menuButton.open = false; @@ -391,6 +404,9 @@

    Example Customization

    drawer4.addEventListener("close", (ev) => { menuButton4.open = false; }); + drawer5.addEventListener("close", (ev) => { + menuButton5.open = false; + }); } diff --git a/package-lock.json b/package-lock.json index 1134b61..e9abeb5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "side-drawer", - "version": "3.1.0", + "version": "4.1.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "side-drawer", - "version": "3.1.0", + "version": "4.1.0", "license": "MIT", "devDependencies": { "@custom-elements-manifest/analyzer": "^0.8.4", diff --git a/package.json b/package.json index 85e1f39..c4bb59a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "side-drawer", - "version": "4.0.3", + "version": "4.1.0", "description": "A simple side drawer element with no dependencies and small as possible", "keywords": [ "web component", diff --git a/side-drawer.js b/side-drawer.js index 96e79c8..bd32c27 100644 --- a/side-drawer.js +++ b/side-drawer.js @@ -32,6 +32,12 @@ dialog { visibility: hidden; } +:host([right]) dialog { + left: unset; + right: 0; + transform: translateX(100%); +} + /* putting this here in case this is ever fixed: https://github.com/whatwg/html/issues/7732 */ dialog, @@ -44,6 +50,8 @@ dialog:modal { box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.5); border-top-right-radius: inherit; border-bottom-right-radius: inherit; + border-top-left-radius: inherit; + border-bottom-left-radius: inherit; } dialog::backdrop { @@ -63,7 +71,7 @@ dialog[open] { :host([open]) dialog[open], :host([open]) dialog[open]::backdrop { - transition-delay:0s; + transition-delay: 0s; transform: none; } @@ -167,13 +175,13 @@ export class SideDrawer extends HTMLElement { () => { this._dialog.close(); }, - { once: true }, + { once: true } ); this.dispatchEvent( new CustomEvent("close", { bubbles: true, - }), + }) ); } else { this._dialog.showModal(); @@ -181,7 +189,7 @@ export class SideDrawer extends HTMLElement { this.dispatchEvent( new CustomEvent("open", { bubbles: true, - }), + }) ); } } From 6e28198e6b3fa161f41155d505c24aa2ee0a3a79 Mon Sep 17 00:00:00 2001 From: Wes Date: Thu, 9 Nov 2023 23:04:43 -0800 Subject: [PATCH 2/3] fix that --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 6282d73..d75c9ba 100644 --- a/index.html +++ b/index.html @@ -296,7 +296,7 @@

    Example Customization

    border-top-right-radius: 20%; border-bottom-right-radius: 20%; - +
  • From 266815a9831540cb9a99034e3869162f8f7dde1a Mon Sep 17 00:00:00 2001 From: Wes Date: Thu, 9 Nov 2023 23:06:33 -0800 Subject: [PATCH 3/3] format --- side-drawer.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/side-drawer.js b/side-drawer.js index bd32c27..ba37fec 100644 --- a/side-drawer.js +++ b/side-drawer.js @@ -175,13 +175,13 @@ export class SideDrawer extends HTMLElement { () => { this._dialog.close(); }, - { once: true } + { once: true }, ); this.dispatchEvent( new CustomEvent("close", { bubbles: true, - }) + }), ); } else { this._dialog.showModal(); @@ -189,7 +189,7 @@ export class SideDrawer extends HTMLElement { this.dispatchEvent( new CustomEvent("open", { bubbles: true, - }) + }), ); } }