Merge branch 'master' of github.com:Padax/w-components

# Conflicts:
#	wc/WComponent.js

wc/WComponent.js

@@ -18,14 +18,17 @@ class WComponent extends HTMLElement{
     this.createGettersAndSetters();
     this.attachShadow({ mode: 'open' });
     this.setStylesheet(this.stylesheet);
-    this.componentWillRender();
-    this.render();
-    this.componentDidRender();
+    this.init();
   }
-
-  componentWillRender() {}
-  componentDidRender() {}
-
+  /**
+   * Call update method in attribute changed callback if attribute name is acceptable
+   */
+  attributeChangedCallback(name, oldValue, newValue){
+    if(typeof this.constructor.attributes[name] === 'object'){
+      this.update({name, oldValue, newValue});
+    }
+  }
+  update(){}
   /**
    * Dynamically create getters & setters for property-attribute sync 
    *  by parsing class field attribute object.

wc/components/Button.js

@@ -132,7 +132,7 @@ class Button extends WComponent{
   constructor(){
     super();
   }
-  render(){
+  init(){
     const classList=[];
     classList.push(this.display, this.size, this.outlined?"outline-"+this.color:this.color);
     const attrs={};

wc/components/Calendar.js

@@ -77,27 +77,31 @@ class Calendar extends WComponent{
   constructor(){
     super();
   }
-  componentWillRender(){
-    this.calendar=null;
-    this.calendarDate=new Date();
-    this.entries={};
-  }
   changeMonth(offset){
     this.calendarDate.setMonth(this.calendarDate.getMonth()+offset);
-    this.render();
+    this.update();
   }
   addEntry(entry){
     if(this.entries[entry.date]){
       this.entries[entry.date].push(entry);
     }else{
       this.entries[entry.date]=[entry];
     }
+    this.update();
+  }
+  init(){
+    // init fields
+    this.calendar=null;
+    this.calendarDate=new Date();
+    this.entries={};
+    // first render
+    this.render();
+  }
+  update(){
+    this.calendar.remove();
     this.render();
   }
   render(){
-    if(this.calendar!==null){
-      this.calendar.remove();
-    }
     // create calendar
     const calendar=DOM.create("div", {props:{
       className:"calendar"

wc/components/Code.js

@@ -143,7 +143,7 @@ class Code extends WComponent{
 
   };
 
-  render() {
+  init() {
     const props = {
       className: 'code'
     };

wc/components/Dialog.js

@@ -19,7 +19,7 @@ class Dialog extends WComponent{
   constructor(){
     super();
   }
-  render(){
+  init(){
     this.dialog=DOM.create("div", {props:{className:"dialog"}});
     this.head=DOM.create("slot", {props:{name:"head"}}, this.dialog);
     this.main=DOM.create("slot", {props:{name:"main"}}, this.dialog);

wc/components/Form.js

@@ -46,7 +46,7 @@ class Form extends WComponent{
     this.bindEvents();
   }
 
-  attributeChangedCallback(name, oldValue, newValue) {
+  update({ name, oldValue, newValue } = {}) {
     const form = this.shadowRoot.querySelector('form');
     const value = this.getAttributeParserByName(name)(newValue, this.constructor.attributes[name]);
     form[name] = value;
@@ -107,7 +107,7 @@ class Form extends WComponent{
       });
     });
   }
-  render() {
+  init() {
     const attrs = { 
       name: this.name,
       action: this.action, 

wc/components/Heading.js

@@ -60,7 +60,7 @@ class Heading extends WComponent{
     super();
   }
 
-  render() {
+  init() {
     const props = {
       className: `heading${this.underlined ? ' underlined' : ''}`
     };

wc/components/List.js

@@ -53,7 +53,7 @@ class List extends WComponent{
   constructor(){
     super();
   }
-  render(){
+  init(){
     const list=DOM.create("div", {props:{className:"list"}, attrs:{appearance: this.appearance}}, this.shadowRoot);
     DOM.create("slot", {}, list);
     /*

wc/components/ListItem.js

@@ -37,7 +37,7 @@ class ListItem extends WComponent{
   constructor(){
     super();
   }
-  render(){
+  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);

wc/components/Quote.js

@@ -35,7 +35,7 @@ class Quote extends WComponent{
     return this.getDefaultValueByName('align');
   }
 
-  render() {
+  init() {
     DOM.create('style', { props: { textContent: stylesheet } }, this.shadowRoot);
 
     const container = DOM.create('div', { props: { className: this.parseAlign() } }, this.shadowRoot);

wc/components/checkable/Checkable.js

@@ -78,7 +78,8 @@ class Checkable extends WComponent{
     super();
   }
 
-  attributeChangedCallback(name, oldValue, newValue) {
+  update({ name, oldValue, newValue } = {}) {
+    console.log(name, oldValue, newValue); // called right after init because first-added attribute will trigger attributeChangedCallback
     if(name === this.constructor.attributes.checked.name
        || name === this.constructor.attributes.disabled.name) {
       const input = this.shadowRoot.querySelector('input');
@@ -102,7 +103,7 @@ class Checkable extends WComponent{
     };
     this.shadowRoot.addEventListener('click', this.clickHandler);
   }
-  render() {
+  init() {
     const ctn = DOM.create('div', null, this.shadowRoot);
 
     const inputAttrs = { type: this.type };

wc/components/layout/Grid.js

@@ -38,15 +38,15 @@ class Grid extends WComponent{
       }
     `, "grid");
   }
-  render(){
+  init(){
     this.setGridStylesheet(this.columns, this.rows);
     if(!this.container){
       this.container=DOM.create("div", {props:{className:"container"}}, this.shadowRoot);
       DOM.create("slot", {}, this.container);
     }
   }
   attributeChangedCallback(name, oldValue, newValue){
-    this.render();
+    this.init();
   }
 }
 Grid.prototype.stylesheet=stylesheet;

wc/components/layout/Nav.js

@@ -11,7 +11,7 @@ class Nav extends WComponent{
   constructor(){
     super();
   }
-  render(){
+  init(){
     const root=DOM.create("slot", {}, this.shadowRoot);
   }
 }

wc/components/layout/NavPart.js

@@ -99,7 +99,7 @@ class NavPart extends WComponent{
       }
     `);
   }
-  render(){
+  init(){
     let rwdSize = this["rwd-size"];
     if(this["rwd-effect"]!=="none" && rwdSize!=="none"){
       if(rwdSize==="mobile"){

wc/components/layout/Section.js

@@ -20,7 +20,7 @@ class Section extends WComponent{
   constructor(){
     super();
   }
-  render(){
+  init(){
     const grid=DOM.create(`${window.prefix}-grid`, {attrs:{
       columns:3, rows:2
     }, styles:{

wc/components/spa/SPALink.js

@@ -15,7 +15,7 @@ class SPALink extends WComponent{
   constructor(){
     super();
   }
-  render(){
+  init(){
     DOM.create("slot", {events:{
       click:()=>{
         this.changePage()

wc/components/spa/SPAPage.js

@@ -32,45 +32,52 @@ class SPAPage extends WComponent{
       this.setCurrent(this.match(window.location.pathname));
     });
   }
-  componentWillRender(){
-    this.current=this.match(window.location.pathname);
+  init(){
+    // init custom events
     this.events={
       init:new Event("init"),
       dispose:new Event("dispose")
     };
-  }
-  match(path){
-    return path.startsWith(this.path);
-  }
-  setCurrent(current){
-    if(this.current===current){
-      return;
-    }
-    this.current=current;
-    this.render();
-  }
-  render(){
-    const props={
-      className:this.current?"show":"hide"
-    };
+    // handle template
+    this.current=this.match(window.location.pathname);
     if(this.current){ // if shown, take content outside of template
       const template=this.querySelector("template");
       if(template!==null){
         this.appendChild(template.content.cloneNode(true));
         template.remove();
       }
     }
+    // first render
+    this.render();
+  }
+  update(args){
+    this.render();
+  }
+  render(){
+    const props={
+      className:this.current?"show":"hide"
+    };
     if(this.root){
       DOM.modify(this.root, {props: props});
     }else{
       this.root=DOM.create("slot", {props: props}, this.shadowRoot);
     }
+    // fire custom event
     if(this.current){
       this.dispatchEvent(this.events.init);
     }else{
       this.dispatchEvent(this.events.dispose);
     }
   }
+  match(path){
+    return path.startsWith(this.path);
+  }
+  setCurrent(current){
+    if(this.current===current){
+      return;
+    }
+    this.current=current;
+  }
 }
 SPAPage.prototype.stylesheet=stylesheet;
 export default SPAPage;