/**
* A Carousel - <strike>UX/COE Compliant</strike>
* <BR><BR><img src=../images/carousel.png width=80% style="border:1px lime dashed";>
* <BR><BR><a href="../html/carousel.html">DEMO</a>
*/
class Carousel extends HTMLElement {
constructor() {
console.group("Carousel.constructor")
super();
console.groupEnd();
};
/**
* Set observable values here. When Changed, attributeChangedCallback is invoked
* @observedAttributes
*/
static get observedAttributes() {
console.group("Carousel.observedAttributes");
this.observables = ["background"];
console.log(this.observables);
console.groupEnd();
return this.observables;
};
/**
* This function is called when this is attached to DOM
* @connectedCallback.
*/
connectedCallback() {
console.group("Carousel.connectedCallback")
let self = this;
// MAKE SURE OUR COMPONENT HAS GLOBAL CLASS
this.classList.add("wc");
// FETCH ALL INTERESTING ELEMENTS
this._fetchElements();
// FETCH ALL ATTRIBUTES
this._fetchAttributes();
let id = this.id;
let tstr = "<div id='" + id + "-container" + "' class='carousel slide' data-ride='carousel'><ol class='carousel-indicators'>";
for (let i=0; i<this.dom.items.length; i++) {
// ALWAYS ACTIVATE FIRST ITEM
let tmp = ""
if (i == 0) {
tmp = " class='active'"
} else {
tmp = ""
}
tstr += "<li data-target='#" + id + "-container" + "' data-slide-to='" + i + "'" + tmp + "></li>";
}
tstr += "</ol>";
tstr += "<div class='carousel-inner'>";
for (let i=0; i<this.dom.items.length; i++) {
// ALWAYS ACTIVATE FIRST ITEM
let tmp = ""
if (i == 0) {
tmp = " active"
} else {
tmp = ""
}
let caption = this.dom.items[i].getAttribute("caption");
tstr += "<div class='item" + tmp + "'>" +
this.dom.items[i].querySelector("wc-carousel-item-content").innerHTML +
"<div class='carousel-caption-fixed'>" + caption + "</div></div>";
}
tstr += "</div>";
tstr += "<a class='left carousel-control' href='#" + id + "-container" + "' role='button' data-slide='prev'>"
tstr += "<span class='glyphicon glyphicon-chevron-left'></span>"
tstr += "<a class='right carousel-control' href='#" + id + "-container" + "' role='button' data-slide='next'>"
tstr += "<span class='glyphicon glyphicon-chevron-right'></span>"
this.innerHTML = tstr;
// WRAP UP AND ADD STATS
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("Carousel.disconnectedCallback")
/* CLEAN UP NOW */
console.groupEnd();
};
/**
* Called with .setAttribute(...) function call
* @attributeChangedCallback
*/
attributeChangedCallback(attr, oldval, newval) {
console.group("Carousel.attributeChangedCallback:", attr, oldval, newval);
this.properties = this.properties || [];
// EXAMPLE ONLY. replace with observables
switch(attr)
{
case "background":
this.properties.background = newval;
this.style.background = this.properties.background;
break;
}
console.groupEnd();
};
/**
* Stores DOM elements of interest for future use
* @_fetchElements
*/
_fetchElements() {
console.group("Carousel._fetchElements");
this.dom = this.dom || [];
this.dom.content = this.innerHTML;
this.dom.items = this.querySelectorAll("wc-carousel-item");
console.groupEnd();
};
/**
* Component attributes are _fetched and defaults are set if undefined
* @_fetchAttributes
* @param {string} [background=indianred] background color
*/
_fetchAttributes() {
console.group("Carousel._fetchAttributes");
this.properties = {
"cname" : "Carousel",
"author" : "Mel Heravi",
"version" : "1.0",
"background" : "indianred"
};
// EXAMPLE ONLY. replace with attributes
if (this.hasAttribute("background")) {
this.properties.background = this.getAttribute("background");
console.log("background: ", this.properties.background);
}
console.groupEnd();
};
/**
* Destroy the instance object and artifacts
* @_destroy
*/
destroy() {
console.group("Message.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("Carousel._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("Carousel.test");
console.log("testing results will be printed here...");
console.groupEnd();
return true;
}
}
window.customElements.define('wc-carousel', Carousel);