Refactor List and ListItem. Solve Bugs of Setting Disabled Repeatedly #…

…97
Padax · Oct 13, 2021 · 638338e · 638338e
1 parent e08409b
commit 638338e
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 32 deletions.
diff --git a/index.html b/index.html
@@ -235,7 +235,7 @@
 		</w-list>
 		<w-list mark="circle" appearance="panel">
 			<w-li>Item 1</w-li>
-			<w-li>Item 2</w-li>
+			<w-li disabled><a href="https://www.google.com/">Google</a></w-li>
 			<w-li>Item 3</w-li>
 		</w-list>
 		<w-list mark="circle" appearance="divided-panel">

diff --git a/wc/components/List.js b/wc/components/List.js
@@ -24,6 +24,7 @@ const stylesheet=`
     background-color:var(--color-gray-20);
   }
   div.list[appearance$='panel']>::slotted(*[disabled]){
+    pointer-events:none;
     color:var(--color-gray-40);
   }
   div.list[appearance$='panel']>::slotted(*[disabled]:hover),
@@ -59,6 +60,7 @@ class List extends WComponent{
   init(){
     for(let i=0;i<this.children.length;i++){
       this.children[i].setAttribute("mark", this.mark);
+      this.children[i].setAttribute("index", i);
     }
     this.list=DOM.create("div", {props:{className:"list"}, attrs:{appearance: this.appearance}}, this.shadowRoot);
     DOM.create("slot", {}, this.list);
@@ -68,10 +70,11 @@ class List extends WComponent{
       case 'mark':
         for(let i=0;i<this.children.length;i++){
           this.children[i].setAttribute("mark", args.newValue);
+          this.children[i].setAttribute("index", i);
         }
         break;
       case 'appearance':
-        DOM.modify(this.list, {attrs:{appearance: this.appearance}});
+        DOM.modify(this.list, {attrs:{appearance: args.newValue}});
         break;
     }
   }

diff --git a/wc/components/ListItem.js b/wc/components/ListItem.js
@@ -3,20 +3,23 @@ const stylesheet=`
   :host{
     display:block;
   }
-  div.item>.mark{
+  :host([disabled])>::slotted(*){
+    color:var(--color-gray-40) !important;
+  }
+  :host>.mark{
     display:inline-flex;align-items:center;
   }
-  div.item[mark='circle']>.mark:before{
+  :host([mark='circle'])>.mark:before{
     content:'\\fd2c';
     font-family:var(--icon-font-filled);
     margin-right:8px;
   }
-  div.item[mark='outline-circle']>.mark:before{
+  :host([mark='outline-circle'])>.mark:before{
     content:'\\fd23';
     font-family:var(--icon-font-regular);
     margin-right:8px;
   }
-  div.item[mark='number']>.mark{
+  :host([mark='number'])>.mark{
     margin-left:4px;
     margin-right:8px;
   }
@@ -46,24 +49,18 @@ class ListItem extends WComponent{
   init(){
     // render
     const mark=this.mark;
-    this.markedItem=DOM.create("div", {props:{className:"item"}, attrs:{mark}}, this.shadowRoot);
     if(mark==="number"){
-      // calculate index
-      const itemTagName=window.wconfig.prefix+"-li";
-      let element=this;
-      let index=0;
-      while((element=element.previousSibling)!=null){
-        if(typeof element.tagName==="string" && element.tagName.toLowerCase()===itemTagName){
-          index++;
-        }
-      }
-      DOM.create("div", {props:{className:"mark", textContent:(index+1)+"."}}, this.markedItem);
+      const index=parseInt(this.getAttribute("index"));
+      DOM.create("div", {props:{className:"mark", textContent:(index+1)+"."}}, this.shadowRoot);
     }else{
-      DOM.create("div", {props:{className:"mark"}}, this.markedItem);
+      DOM.create("div", {props:{className:"mark"}}, this.shadowRoot);
     }
-    DOM.create("slot", {}, this.markedItem);
+    DOM.create("slot", {}, this.shadowRoot);
   }
-  update(){
+  update(args){
+    if(args.oldValue===args.newValue){
+      return;
+    }
     // handle disabled
     const attrs={removes:[]};
     if(this.disabled){
@@ -74,20 +71,11 @@ class ListItem extends WComponent{
     DOM.modify(this, {attrs});
     // handle mark
     const mark=this.mark;
-    DOM.modify(this.markedItem, {attrs:{mark}});
     if(mark==="number"){
-      // calculate index
-      const itemTagName=window.wconfig.prefix+"-li";
-      let element=this;
-      let index=0;
-      while((element=element.previousSibling)!=null){
-        if(typeof element.tagName==="string" && element.tagName.toLowerCase()===itemTagName){
-          index++;
-        }
-      }
-      DOM.modify(this.markedItem.querySelector(".mark"), {props:{textContent:(index+1)+"."}});
+      const index=parseInt(this.getAttribute("index"));
+      DOM.modify(this.shadowRoot.querySelector(".mark"), {props:{textContent:(index+1)+"."}});
     }else{
-      DOM.modify(this.markedItem.querySelector(".mark"), {props:{textContent:""}});
+      DOM.modify(this.shadowRoot.querySelector(".mark"), {props:{textContent:""}});
     }
   }
 }