/*!
* 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 implemetation of Tab UI.<br/>
* @namespace jsbeans
* @class TabFolder
* @constructor
* @param tabContainer {String | DOM} a div (DOM Object or its id) that will contain all generated tabs.
*/
jsbeans.TabFolder = function(tabContainer) {
var c = null;
if (typeof(tabContainer) == "undefined") {
c = null;
}
else if (typeof(tabContainer).toLowerCase() == "string") {
c = document.getElementById(tabContainer);
if (typeof(c) == "undefined") {
c = null;
}
}
else if (typeof(tabContainer).toLowerCase() == "object") {
c = tabContainer;
}
if (c == null) {
return;
}
this._id = "tabFolder_" + c.id;
this._width = "100%";
this._height = "100%";
var ul = document.createElement("ul");
ul.id = tabContainer + "_ul";
ul.style.listStyle = "none inside";
ul.style.margin = "0";
ul.style.padding = "0";
ul.className = "tablist";
c.appendChild(ul);
this._ul = ul;
var div = document.createElement("div");
div.id = tabContainer + "_div";
div.className = "tabs";
c.appendChild(div);
this._div = div;
this._container = c;
this._items = new Array();
};
/**
* Replacer for native toString.<br/>
* Returns "jsbeans.TabFolder"
* @method toString
* @return {String} the string "jsbeans.TabFolder"
* */
jsbeans.TabFolder.prototype.toString = function() {
return "jsbeans.TabFolder";
};
/**
* Sets size of TabFolder.
* @method setSize
* @param width {String | Integer} if String it will be used 'as is', if Integer it will be pixels (width + "px")
* @param height {String | Integer} if String it will be used 'as is', if Integer it will be pixels (height + "px")
* */
jsbeans.TabFolder.prototype.setSize = function(width, height) {
var isNum = function(v) {
if (typeof v == "string") {
return !(v.indexOf("px") != -1 || v.indexOf("pt") != -1 || v.indexOf("%") != -1 || v.indexOf("em") != -1 );
}
return true;
};
var w = isNum(width) ? (width + "px") : width;
var h = isNum(height) ? (height + "px") : height;
this._container.style.width = w;
this._width = w;
this._container.style.height = h;
this._height = h;
};
/**
* Hides any <code class="class">TabItem</code> except the one for the given {@param} <code class="param">tabIndex</code>
* @param tabIndex {Integer}
* */
jsbeans.TabFolder.prototype.showTab = function(/*Integer*/tabIndex) {
for (var i = 0, item; item = this._items[i]; i++) {
item._container.style.display = "none";
item._header.className = item._header.className.split("tab_selected").join("");
item._container.className = item._container.className.split("tabItem_selected").join("");
}
if (tabIndex >= this._items.length) {
return;
}
this._items[tabIndex]._container.style.display = "block";
this._items[tabIndex]._header.className = this._items[tabIndex]._header.className + " tab_selected";
this._items[tabIndex]._container.className = this._items[tabIndex]._container.className + " tabItem_selected";
this._items[tabIndex]._container.innerHTML = this._items[tabIndex].getContent();
};
/**
* NOT IMPLEMENTED YET
* @method setTabItemUserClass
* @param extraClasses {String}
* */
jsbeans.TabFolder.prototype.setTabItemUserClass = function(/*String*/extraClasses) {
// TODO to be implemented
throw new Error("NotImplementedException: jsbeans.TabFolder.setTabItemUserClass is accessible but not implemented yet");
};
/**
* NOT IMPLEMENTED YET
* @method setTabItemUserClassForSelected
* @param extraClasses {String}
* */
jsbeans.TabFolder.prototype.setTabItemUserClassForSelected = function(/*String*/extraClasses) {
// TODO to be implemented
throw new Error("NotImplementedException: jsbeans.TabFolder.setTabItemUserClassForSelected is accessible but not implemented yet");
};
/**
* Renders the UI.
* @method dispose
* */
jsbeans.TabFolder.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");
li.style.cssFloat = "left";
li.style.styleFloat = "left";
li.style.padding = "0 3px";
var a = document.createElement("a");
a.setAttribute("href", "javascript:void(0)");
a.innerHTML = item.getText();
a.index = i;
a.className = this._id + "_tab tab";
item._header = a;
li.appendChild(a);
a.onclick = function() {
_this.showTab(this.index);
};
var div = document.createElement("div");
div.id = "tab_" + i;
div.style.clear = "both";
if (item._default) {
div.style.display = "block";
_def = i;
}
else {
div.style.display = "none";
}
if (item._userClass != null) {
div.className = this._id + "_tabItem tabItem " + item._userClass;
}
else {
div.className = this._id + "_tabItem tabItem";
}
item._container = div;
this._ul.appendChild(li);
this._div.appendChild(div);
if (this._height != "100%") {
div.style.height = (h - a.offsetHeight) + "px";
}
div.style.overflow = "auto";
}
if (_def != null) {
this.showTab(_def);
}
else {
this.showTab(0);
}
};
/**
* <code class="class">TabItem</code> represents an element inside an <code class="class">TabFolder</code>.
* @namespace jsbeans
* @class TabItem
* @constructor
* @param tabFolder {TabFolder} the parent container
* @param [default_tab_item] {boolean} true if <code class="this">this</code> TabItem is the one opened by default. Optional.
* @see TabFolder
*/
jsbeans.TabItem = function(tabFolder /*, defaultTab*/) {
if (tabFolder == null || typeof(tabFolder) == "undefined" || tabFolder.toString() != "jsbeans.TabFolder") {
return;
}
this._tabFolder = tabFolder;
this._text = "";
this._content = "";
this._header = null;
this._container = null;
this._default = arguments[1] || false;
this._userClass = null;
tabFolder._items.push(this);
this.id = "tab_" + (tabFolder._items.length - 1);
};
/**
* Sets the title of <code class="this">this</code> <code class="class">TabItem</code>
* @method setText
* @param text {String}
* */
jsbeans.TabItem.prototype.setText = function(text) {
this._text = text;
};
/**
* Returns the title of <code class="this">this</code> <code class="class">TabItem</code>
* @method getText
* @return {String}
* */
jsbeans.TabItem.prototype.getText = function() {
return this._text;
};
/**
* Sets the content of <code class="this">this</code> <code class="class">TabItem</code> directly of via a function.<br/>
* Sample:
* <pre>
* function contentManager(item) {
* // item.toString() == "jsbeans.TabItem"
* return "A <strong>content</strong>"; // it may be an AJAX call
* }
* tabItem.setContent(contentManager);
* </pre>
* @method setContent
* @param content {String | Function} if <code class="param">content</code> is a Function if will be invoked with <code class="this">this</code> as argument.
* */
jsbeans.TabItem.prototype.setContent = function(content) {
this._content = content;
};
/**
* Returns the content of <code class="this">this</code> <code class="class">TabItem</code> directly of via a function invocation.
* @method getContent
* @return {String} the actual content. If the content is a function as of the one set via <code class="methd">setContent</code>, it will be invoked and returning value will be used.
* */
jsbeans.TabItem.prototype.getContent = function() {
if (!!this._content && typeof this._content != "string" && !this._content.nodeName && this._content.constructor != Array && /function/i.test( this._content + "" )) {
return this._content(this);
}
else {
return this._content;
}
};
/**
* Sets extra style classes at <code class="this">this</code> <code class="class">TabItem</code>. For visual customization.
* @method setUserClass
* @param extraClass {String} one or more style classes
* */
jsbeans.TabItem.prototype.setUserClass = function(extraClass) {
this._userClass = extraClass;
};
/**
* Returns the index of <code class="this">this</code> <code class="class">TabItem</code>
* @method getIndex
* @return {Integer}
* */
jsbeans.TabItem.prototype.getIndex = function() {
return this._header.index;
};
/**
* Replacer for native toString.<br/>
* Returns "jsbeans.TabItem"
* @method toString
* @return {String} the string "jsbeans.TabItem"
* */
jsbeans.TabItem.prototype.toString = function() {
return "jsbeans.TabItem";
};