Source: progressbar.js

/**
 * Progressbar Component
 * <BR><BR><img src=../images/progressbar.png width=50% style="border:1px lime dashed";>
 * <BR><BR><a href="../html/progressbar.html">DEMO</a>
 */
class Progressbar extends HTMLElement {
    constructor() {
        console.group("Progressbar.constructor")
	
        super();
        console.groupEnd();
    };
    
    /**
     * Set observable values here. When Changed, attributeChangedCallback is invoked
     * @observedAttributes
     */
    static get observedAttributes() {
        console.group("Progressbar.observedAttributes");
	this.observables = ["min", "max", "value", "width", "type"];
	console.log(this.observables);
        console.groupEnd();
        return this.observables;
    };
    /**
     * This function is called when this is attached to DOM
     * @connectedCallback. 
     */
    connectedCallback() {
        console.group("Progressbar.connectedCallback")
	
	let self = this;
	// FETCH ALL INTERESTING ELEMENTS
	this._fetchElements();
	// FETCH ALL ATTRIBUTES
	this._fetchAttributes();
	// REPLACE CONTENT IF NECESSARY WITH NEW STUFF
	this.innerHTML = `
            <div class="progress" style=width:${this.properties.width}>
                <div class="progress-bar progress-bar-${this.properties.type}" role="progressbar" 
                aria-valuenow="${this.properties.value}" aria-valuemin="${this.properties.min}" 
                aria-valuemax="${this.properties.max}" style="width:${this.properties.value}%">${this.properties.value}%</div>
            </div>`;
	this._finalize();
	// SHOW IT NOW (NO FLICKERS) 
	this.style.visibility = "visible";
        console.groupEnd();
    };
    /**
     * Invoked When component is removed. Usually with a .remove() function call
     * @disconnectedCallback
     */
    disconnectedCallback() {
        console.group("Progressbar.disconnectedCallback")
	/* CLEAN UP NOW */
        console.groupEnd();
    };
    /**
     * Called with .setAttribute(...) function call
     * @attributeChangedCallback
     */
    attributeChangedCallback(attr, oldval, newval) {
        console.group("Progressbar.attributeChangedCallback:", attr, oldval, newval);
	this.properties = this.properties || [];
	// EXAMPLE ONLY. replace with observables
	switch(attr)
	{
	    case "min":
	    this.properties.min = newval;
	    break;
	    case "max":
	    this.properties.max = newval;
	    break;
	    case "value":
	    this.properties.value = newval;
	    let pb = this.querySelector(".progress-bar");
	    pb.innerHTML = this.properties.value + "%";
	    pb.value = this.properties.value;
	    pb.style.width = pb.value+'%';
	    pb.setAttribute.attr('aria-valuenow', pb.value); 
	    break;
	    case "width":
	    this.properties.width = newval;
	    this.style.width = this.properties.width;
	    break;
	    case "type":
	    this.properties.type = newval;
	    break;
	}
	
        console.groupEnd();
    };
    /**
     * Stores DOM elements of interest for future use
     * @_fetchElements
     */
    _fetchElements() {
	console.group("Progressbar._fetchElements");
	
	this.dom = this.dom || [];
	this.dom.content = this.innerHTML;
	console.groupEnd();
    };
    /**
     * Component attributes are _fetched and defaults are set if undefined
     * @_fetchAttributes
     * @param {string} [width=100%] progressbar width
     * @param {string} [min=0] progressbar width min value
     * @param {string} [max=100] progressbar width max value
     * @param {string} [value=0] progressbar current value
     * @param {string} [type=success] progressbar type
     */
    _fetchAttributes() {
	console.group("Progressbar._fetchAttributes");
	
	this.properties = {
	    "cname"   : "Progressbar",
	    "author"  : "Mel Heravi",
	    "version" : "1.0",
	    "min"     : "0",
	    "max"     : "100",
	    "width"   : "100%",
	    "value"   : "0",
	    "type"    : "success"
	};
	
	// FETCH BACKGROUND
	if (this.hasAttribute("min")) {
	    this.properties.min = this.getAttribute("min");
	    console.log("min: ", this.properties.min);
	}
	if (this.hasAttribute("max")) {
	    this.properties.max = this.getAttribute("max");
	    console.log("max: ", this.properties.max);
	}
	if (this.hasAttribute("value")) {
	    this.properties.value = this.getAttribute("value");
	    console.log("value: ", this.properties.value);
	}
	if (this.hasAttribute("width")) {
	    this.properties.width = this.getAttribute("width");
	    console.log("width: ", this.properties.width);
	}
	if (this.hasAttribute("type")) {
	    this.properties.type = this.getAttribute("type");
	    console.log("type: ", this.properties.type);
	}
	console.groupEnd();
    };
    /**
     * A sample callback usage function - see connectedCallback()
     * @_onClick
     */
    _onClick() {
	console.group("Progressbar._onClick:", this.id);
	wc.publish(this, "wc-progressbar", {
	    action: "click",
	    id: this.id
	});
	console.groupEnd();
    };
    /**
     * Destroy the instance object and artifacts
     * @_destroy
     */
    destroy() {
	console.group("Progressbar.destroy:", this.id);
	// FREE POINTER
	delete this;
	// REMOVE ITEM FROM DOM
	this.parentNode.removeChild(this);
	console.groupEnd();
    };
    /**
     * SAVE DATA FOR ANALYTICS
     * @__finalize
     */
    _finalize() {
	console.group("Progressbar._finalize:", this.id);
	this.classList.add("wc");
	// ADD ANALYTICS HERE
	wc.getStats(this, this.properties.cname, this.properties.version);
	
	console.groupEnd();
    };
    /**
     * FOR TESTING PURPOSES
     * @test
     */
    static test() {
	console.group("Progressbar.test");
	console.log("testing results will be printed here...");
	console.groupEnd();
	return true;
    }
}
window.customElements.define('wc-progressbar', Progressbar);