/*!
* Copyright (c) 2009 Francesco Mele jsbeans@francescomele.com
*
* This Software is licenced under the LGPL Licence (GNU Lesser General
* Public License).
* In addition to the LGPL Licence the Software is subject to the
* following conditions:
*
* i every modification must be public and comunicated to the Author
* ii every "jsbean" added to this library must be self consistent
* except for the dependence from jsbeans-x.x.x.js
* iii copyright notice and this permission notice shall be included
* in all copies or substantial portions of the Software
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
* OTHER DEALINGS IN THE SOFTWARE.
*/
/**
* Pure javascript implementaion of Accordion UI.<br/>
* Accordion implementation needs an <code class="class">AccordionFolder</code> which includes at least one <code class="class">AccordionItem</code>
* @namespace jsbeans
* @class AccordionFolder
* @constructor
* @param accordionFolder {DOM | String} a DOM Object (a result of a <code>document.getElementById</code> call) or an element id.
*/
jsbeans.AccordionFolder = function(accordionFolder) {
var c = null;
if (typeof(accordionFolder) == "undefined") {
c = null;
}
else if (typeof(accordionFolder).toLowerCase() == "string") {
c = document.getElementById(accordionFolder);
if (typeof(c) == "undefined") {
c = null;
}
}
else if (typeof(accordionFolder).toLowerCase() == "object") {
c = accordionFolder;
}
if (c == null) {
return;
}
this._id = "accordionFolder_" + c.id;
this._width = "100%";
this._height = "100%";
var ul = document.createElement("ul");
ul.id = this._id + "_ul";
ul.style.listStyle = "none inside";
ul.style.margin = "0";
ul.style.padding = "0";
ul.className = "accordionFolder";
c.appendChild(ul);
this._ul = ul;
this._container = c;
this._items = new Array();
};
/**
* Shows the n-th <code class="class">AccordionItem</code> according to the {@param} <code class="param">index</code> (zero-based)
* @method showAccordion
* @param index {Integer}
* */
jsbeans.AccordionFolder.prototype.showAccordion = function(index) {
var acc = document.getElementById(this._id + "_acc_" + index);
if (typeof(acc) != "undefined") {
var lis = document.getElementById(this._id + "_ul").childNodes;
for (var i = 0, li; li = lis[i]; i++) {
// titles
if (li && li.tagName && li.tagName.toLowerCase() == "li" && (i % 2) == 0) {
li.className = li.className.split(this._id + "_accordionActive").join("");
li.className = li.className.split("accordionActive").join("");
}
// contents
if (li && li.tagName && li.tagName.toLowerCase() == "li" && (i % 2) != 0) {
li.style.display = "none";
}
}
acc.style.display = "block";
var title = document.getElementById(this._id + "_acc_title_" + index);
if (typeof(title) != "undefined") {
title.className = title.className + " accordionActive " + this._id + "_accordionActive";
}
}
};
/**
* Sets the size (using pixels) of current Accordion.
* @method setSize
* @param width {Integer}
* @param height {Integer}
* */
jsbeans.AccordionFolder.prototype.setSize = function(width, height) {
this._container.style.width = width + "px";
this._width = width + "px";
this._container.style.height = height + "px";
this._height = height + "px";
};
/**
* Override of toString. It returns the string 'jsbeans.AccordionFolder'
* @return {String} 'jsbeans.AccordionFolder'
* */
jsbeans.AccordionFolder.prototype.toString = function() {
return "jsbeans.AccordionFolder";
};
/**
* Renders this Accordion.
* @method dispose
* */
jsbeans.AccordionFolder.prototype.dispose = function() {
var _this = this;
var h = 0;
if (this._height.indexOf("px") != -1) {
h = parseInt(this._height.substring(0, this._height.indexOf("px")));
}
else if (this._height.indexOf("%") != -1) {
h = parseInt(this._height.substring(0, this._height.indexOf("%")));
}
var _def = null;
for (var i = 0, item; item = this._items[i]; i++) {
var li = document.createElement("li");
var div = document.createElement("div");
li.id = this._id + "_acc_title_" + i;
li.className = "accordionTitle";
var a = document.createElement("a");
a.id = this._id + "_acc_title_a_" + i;
a.setAttribute("href", "javascript:void(0)");
a.innerHTML = item.getText();
a.className = "accordionTitleAnchor";
a.index = i;
a.onclick = function() {
_this.showAccordion(this.index);
};
div.appendChild(a);
li.appendChild(div);
this._ul.appendChild(li);
var li = document.createElement("li");
div = document.createElement("div");
li.id = this._id + "_acc_" + i;
div.id = this._id + "_acc_cnt_" + i;
li.className = "accordionContent";
li.appendChild(div);
div.innerHTML = item.getContent();
if (this._height != "100%") {
div.style.height = (h - (a.offsetHeight * this._items.length) - 35) + "px";
}
div.style.overflow = "auto";
if (item._default) {
_def = i;
}
this._ul.appendChild(li);
}
if (_def != null) {
this.showAccordion(_def);
}
else {
this.showAccordion(0);
}
};
/**
* <code class="class">AccordionItem</code> represents an element inside an <code class="class">AccordionFolder</code>.
* @namespace jsbeans
* @class AccordionItem
* @constructor
* @param accordionFolder {AccordionFolder} the parent container
* @param [default_accordion_item] {boolean} true if <code class="this">this</code> <code class="class">AccordionItem</code> is the one opened by default. Optional.
*/
jsbeans.AccordionItem = function(accordionFolder /*, defaultAccordion*/) {
if (accordionFolder == null || typeof(accordionFolder) == "undefined" || accordionFolder.toString() != "jsbeans.AccordionFolder") {
return;
}
this._accordionFolder = accordionFolder;
this._text = "";
this._content = "";
this._default = arguments[1] || false;
this._userClass = null;
accordionFolder._items.push(this);
this.id = accordionFolder._id + "_accordion_" + (accordionFolder._items.length - 1);
};
/**
* Returns the actual text, meaning its title, of <code class="this">this</code> <code class="class">AccordionItem</code>.
* @return {String} actual_title
* */
jsbeans.AccordionItem.prototype.getText = function() {
return this._text;
};
/**
* Sets the actual title of <code class="this">this</code> <code class="class">AccordionItem</code>
* @param {String} actual_title
* */
jsbeans.AccordionItem.prototype.setText = function(txt) {
this._text = txt;
};
/**
* Returns the actual content of <code class="this">this</code> <code class="class">AccordionItem</code>
* @return {String} actual_content
* */
jsbeans.AccordionItem.prototype.getContent = function() {
return this._content;
};
/**
* Sets the actual content. It may be text or HTML.
* @param {String} the_content_to_set
* */
jsbeans.AccordionItem.prototype.setContent = function(cnt) {
this._content = cnt;
};
/**
* Override of toString. It returns the string 'jsbeans.AccordionItem'
* @return {String} 'jsbeans.AccordionItem'
* */
jsbeans.AccordionItem.prototype.toString = function() {
return "jsbeans.AccordionItem";
};