Implement prop-attr sync for List and ListItem #97

Padax · Sep 26, 2021 · 5f8a3f9 · 5f8a3f9
1 parent 178589d
commit 5f8a3f9
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 19 deletions.
diff --git a/wc/WComponent.js b/wc/WComponent.js
@@ -27,6 +27,9 @@ class WComponent extends HTMLElement{
    */
   attributeChangedCallback(name, oldValue, newValue){
     if(this.key && this.hasDefinedAttribute(name)){
+      if(oldValue===newValue){
+        return;
+      }
       this.update({name, oldValue, newValue});
     }
   }

diff --git a/wc/components/List.js b/wc/components/List.js
@@ -57,20 +57,23 @@ class List extends WComponent{
     super();
   }
   init(){
-    const list=DOM.create("div", {props:{className:"list"}, attrs:{appearance: this.appearance}}, this.shadowRoot);
-    DOM.create("slot", {}, list);
-    /*
-    const items=this.querySelectorAll(window.prefix+"-li");
-    items.forEach((item)=>{
-      const markedItemAttrs={};
-      if(item.getAttribute("disabled")!==null){
-        markedItemAttrs.disabled=true;
-      }
-      const markedItem=DOM.create("div", {props:{className:"item"}, attrs:markedItemAttrs}, list);
-      DOM.create("div", {props:{className:"mark"}}, markedItem);
-      DOM.replace(item, markedItem);
-    });
-    */
+    for(let i=0;i<this.children.length;i++){
+      this.children[i].setAttribute("mark", this.mark);
+    }
+    this.list=DOM.create("div", {props:{className:"list"}, attrs:{appearance: this.appearance}}, this.shadowRoot);
+    DOM.create("slot", {}, this.list);
+  }
+  update(args){
+    switch(args.name){
+      case 'mark':
+        for(let i=0;i<this.children.length;i++){
+          this.children[i].setAttribute("mark", args.newValue);
+        }
+        break;
+      case 'appearance':
+        DOM.modify(this.list, {attrs:{appearance: this.appearance}});
+        break;
+    }
   }
 }
 List.prototype.stylesheet=stylesheet;

diff --git a/wc/components/ListItem.js b/wc/components/ListItem.js
@@ -28,6 +28,12 @@ class ListItem extends WComponent{
       parser: (value, attr) => AttributeParser.parseBoolAttr(
         value, attr.defaultValue
       )
+    },
+    mark: { 
+      name: 'mark', defaultValue: 'none',
+      parser: (value, attr) => AttributeParser.parseStringAttr(
+        value, attr.defaultValue, /^none$|^circle$|^outline-circle$|^number$/
+      )
     }
   };
   static get observedAttributes() {
@@ -39,8 +45,36 @@ class ListItem extends WComponent{
   }
   init(){
     // render
-    const mark=this.parentElement.mark?this.parentElement.mark:"";
-    const markedItem=DOM.create("div", {props:{className:"item"}, attrs:{mark, disabled: this.disabled}}, this.shadowRoot);
+    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);
+    }else{
+      DOM.create("div", {props:{className:"mark"}}, this.markedItem);
+    }
+    DOM.create("slot", {}, this.markedItem);
+  }
+  update(){
+    // handle disabled
+    const attrs={removes:[]};
+    if(this.disabled){
+      attrs["disabled"]=true;
+    }else{
+      attrs.removes.push("disabled");
+    }
+    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";
@@ -51,11 +85,10 @@ class ListItem extends WComponent{
           index++;
         }
       }
-      DOM.create("div", {props:{className:"mark", textContent:(index+1)+"."}}, markedItem);
+      DOM.modify(this.markedItem.querySelector(".mark"), {props:{textContent:(index+1)+"."}});
     }else{
-      DOM.create("div", {props:{className:"mark"}}, markedItem);
+      DOM.modify(this.markedItem.querySelector(".mark"), {props:{textContent:""}});
     }
-    DOM.create("slot", {}, markedItem);
   }
 }
 ListItem.prototype.stylesheet=stylesheet;

diff --git a/wc/util/DOM.js b/wc/util/DOM.js
@@ -41,6 +41,7 @@ const DOM={
       attributes.removes.forEach((name)=>{
         element.removeAttribute(name);
       });
+      delete attributes.removes;
     }
     for(const name in attributes){
       element.setAttribute(name, attributes[name]);