added parts to html elements and deleted attributes

node-projects · Jun 17, 2024 · 66f466a · 66f466a
1 parent 064960e
commit 66f466a
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 51 deletions.
diff --git a/custom-elements.json b/custom-elements.json
@@ -18,20 +18,6 @@
                                 "text": "string"
                             }
                         },
-                        {
-                            "kind": "property",
-                            "name": "sidebarBackgroundColor",
-                            "type": {
-                                "text": "string"
-                            }
-                        },
-                        {
-                            "kind": "property",
-                            "name": "toggleButtonBackgroundColor",
-                            "type": {
-                                "text": "string"
-                            }
-                        },
                         {
                             "kind": "property",
                             "name": "toggleButtonColor",
@@ -60,21 +46,13 @@
                             "fieldName": "sidebarWidth"
                         },
                         {
-                            "name": "sidebar-background-color",
-                            "fieldName": "sidebarBackgroundColor"
-                        },
-                        {
-                            "name": "toggle-button-background-color",
-                            "fieldName": "toggleButtonBackgroundColor"
+                            "name": "sidebar-position",
+                            "fieldName": "sidebarPosition"
                         },
                         {
                             "name": "toggle-button-color",
                             "fieldName": "toggleButtonColor"
                         },
-                        {
-                            "name": "sidebar-position",
-                            "fieldName": "sidebarPosition"
-                        },
                         {
                             "name": "sidebar-toggle-button-top-position",
                             "fieldName": "sidebarToggleButtonTopPosition"

diff --git a/sample/index.html b/sample/index.html
@@ -18,12 +18,26 @@
 
         importShim('../dist/index.js');
     </script>
+
+    <style>
+        node-projects-sidebar::part(sidebar) {
+            background-color: orange;
+        }
+
+        node-projects-sidebar::part(toggle-button) {
+            background-color: blue;
+            color: black;
+        }
+
+        node-projects-sidebar::part(slot-element) {
+            color: white;
+        }
+    </style>
 </head>
 
 <body style="overflow: hidden; padding: none;">
     test
-    <node-projects-sidebar sidebar-width="500" sidebar-toggle-button-top="30" sidebar-background-color="orange"
-        toggle-button-background-color="orange" toggle-button-color="black"
+    <node-projects-sidebar sidebar-width="500" sidebar-toggle-button-top="30"
         style="position: absolute; width: 100%; height: 100%;">
         <div
             style="width: 100%; height: 100%; padding: 20px; display: flex; align-items: center; flex-direction: column;">

diff --git a/src/sidebar/CustomSidebarWebcomponent.ts b/src/sidebar/CustomSidebarWebcomponent.ts
@@ -6,16 +6,10 @@ export class CustomSidebarWebcomponent extends BaseCustomWebComponentConstructor
     public sidebarWidth = "300";
 
     @property(String)
-    public sidebarBackgroundColor = "lightgrey";
-
-    @property(String)
-    public toggleButtonBackgroundColor = "lightgrey";
-
-    @property(String)
-    public toggleButtonColor: "black" | "white" = "black";
+    public sidebarPosition: "left" | "right" = "right";
 
     @property(String)
-    public sidebarPosition: "left" | "right" = "right";
+    public toggleButtonColor: "black" | "white" = "white";
 
     @property(String)
     public sidebarToggleButtonTopPosition = "25";
@@ -26,9 +20,9 @@ export class CustomSidebarWebcomponent extends BaseCustomWebComponentConstructor
     private _observer: MutationObserver;
 
     static override readonly template = html`
-        <div class="sidebar" id="sidebar" collapsed="true">
-            <button class="toggle-button" id="toggle-button"></button>
-            <slot class="sidebar-content" id="sidebar-content"></slot>
+        <div class="sidebar" id="sidebar" collapsed="true" part="sidebar">
+            <button class="toggle-button" id="toggle-button" part="toggle-button"></button>
+            <slot class="sidebar-content" id="sidebar-content" part="slot-element"></slot>
         </div>
     `;
 
@@ -46,7 +40,7 @@ export class CustomSidebarWebcomponent extends BaseCustomWebComponentConstructor
         .sidebar {
             border: none;
             border-radius: 10px 0px 0px 10px;
-            background-color: #7f8c8d;
+            background-color: lightgray;
             position: fixed;
             top: 0px;
             right: 0px;
@@ -57,6 +51,7 @@ export class CustomSidebarWebcomponent extends BaseCustomWebComponentConstructor
         }
 
         .toggle-button {
+            background-color: lightgray;
             display: flex;
             justify-content: center;
             align-items: center;
@@ -65,7 +60,7 @@ export class CustomSidebarWebcomponent extends BaseCustomWebComponentConstructor
             width: 40px;
             height: 50px;
             padding: 0px;
-            color: white;
+            color: black;
             border: none;
             border-radius: 10px 0px 0px 10px;
             cursor: pointer;
@@ -127,20 +122,9 @@ export class CustomSidebarWebcomponent extends BaseCustomWebComponentConstructor
     }
 
     private _initSideBar() {
-        this._sidebar.style.backgroundColor = this.sidebarBackgroundColor;
         this._sidebar.style.maxWidth = this.sidebarWidth + "px";
-        this._toggleButton.style.backgroundColor = this.toggleButtonBackgroundColor;
         this._toggleButton.style.top = "calc(" + this.sidebarToggleButtonTopPosition + "% - 25px)";
-
-        const svg = document.createElement("img");
-        svg.id = "toggle-svg";
-        if (this.toggleButtonColor === "black") {
-            svg.src = "../../assets/sidebarToggleDark.svg";
-        } else {
-            svg.src = "../../assets/sidebarToggle.svg";
-        }
-        this._toggleButton.appendChild(svg);
-
+        this._toggleButton.innerHTML = "|||";
         if (this.sidebarPosition === "left") {
             this._sidebar.style.left = "0px";
             this._toggleButton.style.transform = "translateX(-50%)";