Source: include.js

/**
 * A Include component - <strike>UX/COE Compliant</strike>
 * <BR>you can include anything inside a parent
 * <ol>
 * <li> From URL's
 * <li> From Files on your server
 * </ol>
 * <BR><BR><a href="../html/include.html">DEMO</a>
 */
class Include extends HTMLElement {
    /**
     * This function is called when this is attached to DOM
     * @connectedCallback. 
     */
    connectedCallback() {
        console.group("Include.connectedCallback")
	
	let self = this;

	// MAKE SURE OUR COMPONENT HAS GLOBAL CLASS
	this.classList.add("wc");

	// FETCH ALL ATTRIBUTES
	this._fetchAttributes();

	let parent = this.parentNode;

	wc.load(this.parentNode, this.properties.url);
	//$(this.parentNode).load(this.properties.url);

	// WRAP UP AND ADD STATS
	this._finalize();

	// SHOW IT NOW (NO FLICKERS) 
	this.style.visibility = "visible";

        console.groupEnd();
    };

    /**
     * Component attributes are _fetched and defaults are set if undefined
     * @_fetchAttributes
     * @param {string} [url=indianred] url color
     */
    _fetchAttributes() {
	console.group("Include._fetchAttributes");
	
	this.properties = this.properties || [];

	// EXAMPLE ONLY. replace with attributes
	if (this.hasAttribute("url")) {
	    this.properties.url = this.getAttribute("url");
	    console.log("url: ", this.properties.url);
	}

	console.groupEnd();
    };

    /**
     * SAVE DATA FOR ANALYTICS
     * @__finalize
     */
    _finalize() {
	console.group("Include._finalize:", this.id);

	this.classList.add("wc");

	// ADD ANALYTICS HERE
	wc.getStats(this, "Include", "1.0");
	
	console.groupEnd();
    };

    /**
     * FOR TESTING PURPOSES
     * @test
     */
    static test() {
	console.group("Include.test");

	console.log("testing results will be printed here...");

	console.groupEnd();
	return true;
    }
}

window.customElements.define('wc-include', Include);