/** * A accordion component - <strike>UX/COE Compliant</strike><BR> * class: * normal - no ux/coe decorations * uxcoe - skined based on our current UX/COE Design * * <BR><BR><img src=../images/accordion.png width=50% style="border:1px lime dashed";> * <BR><BR><a href="../html/accordion.html">DEMO</a> */ class Accordion extends HTMLElement { constructor() { console.group("Accordion.constructor") super(); console.groupEnd(); }; /** * Set observable values here. When Changed, attributeChangedCallback is invoked * @observedAttributes */ static get observedAttributes() { console.group("Accordion.observedAttributes"); let observables = ["single", "active", "width", "height"]; console.log(observables); console.groupEnd(); return observables; }; /** * This function is called when this is attached to DOM * @connectedCallback. */ connectedCallback() { console.group("Accordion.connectedCallback") let self = this; // FETCH ALL INTERESTING ELEMENTS this._fetchElements(); // FETCH ALL ATTRIBUTES this._fetchAttributes(); this.dom.panels = this.querySelectorAll("wc-panel"); // CLOSE ALL EXCEPT ACTIVE PANEL for (let i=0; i < this.dom.panels.length; i++) { let panel = this.dom.panels[i]; // IF NO CLASS DEFINED, USE DEFAULT UXCOE if (this.classList.contains("uxcoe")) { panel.classList.add("uxcoe"); } else { panel.classList.add("normal"); } if (this.properties.active != i) { panel.close(false); } } // IF IT IS SINGLE, SUBSCRIBE TO PANEL EVENTS if (this.properties.single == "true") { wc.subscribe("wc-panel", function(e) { self._onClick(e); }); } // WRAP UP AND ADD STATS this._finalize(); this.style.visibility = "visible"; console.groupEnd(); }; /** * Invoked When component is removed. Usually with a .remove() function call * @disconnectedCallback */ disconnectedCallback() { console.group("Maker.disconnectedCallback") // CLEANUP NOW console.groupEnd(); }; /** * Invoked When component is removed. Usually with a .remove() function call * @disconnectedCallback */ disconnectedCallback() { console.group("Accordion.disconnectedCallback") /* CLEAN UP NOW */ console.groupEnd(); }; /** * Called with .setAttribute(...) function call * @attributeChangedCallback */ attributeChangedCallback(attr, oldval, newval) { console.group("Accordion.attributeChangedCallback:", attr, oldval, newval); this.properties = this.properties || []; // EXAMPLE ONLY. replace with observables switch(attr) { case "width": this.properties.width = newval; this.style.width = this.properties.width; break; case "height": this.properties.height = newval; this.setAttribute("style", "height:" + this.properties.height); break; case "single": this.properties.single = newval; break; case "active": this.properties.active = newval; break; } console.groupEnd(); }; /** * Stores DOM elements of interest for future use * @_fetchElements */ _fetchElements() { console.group("Accordion._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} author component owner * @param {string} version Latest version of this component * @param {string} [width=100%] panel width * @param {boolean} [single=true] only one panel at a time * @param {integer} [active=0] index of active panel */ _fetchAttributes() { console.group("Accordion._fetchAttributes"); this.properties = { "cname" : "Accordion", "author" : "Mel Heravi", "version" : "1.0", "user" : "Mel", "bg" : "yellow", "width" : "100%", "height" : "100%", "single" : "true", "active" : 0 }; if (this.hasAttribute("active")) { this.properties.active = this.getAttribute("active"); console.log("active: ", this.properties.active); } if (this.hasAttribute("width")) { this.properties.width = this.getAttribute("width"); this.width = this.properties.width; console.log("width: ", this.properties.width); } if (this.hasAttribute("single")) { this.properties.single = this.getAttribute("single"); console.log("single: ", this.properties.single); } console.groupEnd(); }; /** * A sample callback usage function - see connectedCallback() * @onClick */ /** * Invoked when user clicks on the panel header. * Only available if "collapsible" parameter is true * @onClick */ _onClick(e) { console.group("Accordion._onClick:", e); let target = e.target; if (e.detail.parentid == this.id) { for (let i = 0; i < this.dom.panels.length; i++){ let panel = this.dom.panels[i]; panel.close(false); } target.open(false); } console.groupEnd(); }; /** * Destroy the instance object and artifacts * @_destroy */ destroy() { console.group("Message.destroy:", this.id); delete this; // REMOVE ITEM FROM DOM this.parentNode.removeChild(this); console.groupEnd(); }; /** * SAVE DATA FOR ANALYTICS * @__finalize */ _finalize() { console.group("Accordion._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("Accordion.test"); console.log("testing results will be printed here..."); console.groupEnd(); return true; } } window.customElements.define('wc-accordion', Accordion);