Inserts the new element after the parent in the DOM.
*/
//
after: function (vElem) {
var oTargetElement = this.dom,
oNewElement = JSLITE.dom.getDom(vElem),
parent = oTargetElement.parentNode;
if (parent.lastChild === oTargetElement) {
parent.appendChild(oNewElement);
} else {
parent.insertBefore(oNewElement, oTargetElement.nextSibling);
}
return this;
},
//
/**
* @function JSLITE.Element.ajax
* @param {String} sURL The URL of the document to be fetched
* @return {String}
* @describe
This is an alias of JSLITE.ajax.get. It returns the responseText. Please keep in mind that it performs a synchronous request and as such is blocking.
* @example
//create a tooltip whose results are that of a synchronous Ajax request;
var oLink = JSLITE.dom.get("testy");
oLink.tooltip(oLink.ajax("ajax_sync.html"));
*/
//
ajax: function (sURL) {
return JSLITE.ajax.get(sURL);
},
//
/**
* @function JSLITE.Element.animate
* @param {Object} o An object of animation config options
* @return {JSLITE.Element}
* @describe
Animates an object.
*/
//
animate: function (o) {
o.elem = o.elem || this.dom;
new JSLITE.ux.Animation(o).run(); //account for every possible property, undefined values are ok;
return this;
},
//
/**
* @function JSLITE.Element.append
* @param {JSLITE.Element/HTMLElement/Array} vElem
* @return {JSLITE.Element}
* @describe
Appends a JSLITE.Element or HTMLElement or a collection of them to a parent. When appending multiple elements, a document fragment is used for optimization.
If bCache is true, a reference to each HTMLElement will be stored in JSLITE.disabled. Each element in the cache can then be accessed by its id attribute value. Usually, this isn't necessary and re-enabling the element (JSLITE.Element.enable) will remove the reference from the cache.
Important: If disabling links, a disabled class is expected. The default class resides in jslite.css but can be overridden by a user-defined stylesheet.
* @example
var cLis = JSLITE.dom.gets("#theList li");
cLis.disable("disabled");
//a class name is not needed when disabling s;
var cInputs = JSLITE.dom.gets("#theForm input");
cInputs.disable();
*/
//
disable: function (bCache) {
var oDom = this.dom,
oElem,
i;
/*store the onclick handler (if any) and return false*/
if (oDom.onclick) {
oDom.originalHandler = oDom.onclick;
}
oDom.onclick = function () {
return false;
};
/*if this element has a handler (W3C) in the cache then remove it*/
if (JSLITE.events[oDom.id]) {
oElem = JSLITE.events[oDom.id];
for (i in oElem) {
if (oElem.hasOwnProperty(i)) {
JSLITE.dom.event.remove(oDom, i, oElem[i]);
}
}
}
if (oDom.nodeName.toLocaleLowerCase() === "input") {
oDom.disabled = true;
} else {
this.addClass("disabled");
}
if (bCache) {
JSLITE.disabled[oDom.id] = oDom;
}
return this;
},
//
/**
* @function JSLITE.Element.enable
* @param {None}
* @return {JSLITE.Element}
* @describe
If the element is in the JSLITE.disabled cache, it's removed.
* @example
cLis.enable();
//a class name is not needed when re-enabling s;
cInputs.enable();
*/
//
enable: function () {
var oDom = this.dom,
oElem,
i;
if (oDom.originalHandler) {
oDom.onclick = this.dom.originalHandler;
oDom.originalHandler = null;
} else {
oDom.onclick = null;
}
/*if this element has a handler (W3C) in the cache then readd it*/
if (JSLITE.events[oDom.id]) {
oElem = JSLITE.events[oDom.id];
for (i in oElem) {
if (oElem.hasOwnProperty(i)) {
JSLITE.dom.event.add(oDom, i, oElem[i]);
}
}
}
if (oDom.nodeName.toLocaleLowerCase() === "input") {
oDom.disabled = false;
} else {
this.removeClass("disabled");
}
if (JSLITE.disabled[oDom.id]) {
delete JSLITE.disabled[oDom.id];
}
return this;
},
//
/**
* @function JSLITE.Element.getStyle
* @param {String} sName CSS property name
* @return {String/Null}
* @describe
Supply a CSS property to lookup. Returns the result of the lookup or null.
NOTE: this method doesn't support composite objects (JSLITE.Composite).
* @example
this.tooltip.width = parseInt(JSLITE.dom.fly(this.tooltip).getStyle("width"), 10);
*/
//
getStyle: function (sName) {
//if the property exists in style[] then it's been set recently and is current;
if (this.dom.style[sName]) {
return this.dom.style[sName];
} else if (document.defaultView && document.defaultView.getComputedStyle) { //w3c;
/*it uses the traditional 'text-align' style of rule writing instead of 'textAlign'*/
sName = sName.replace(/([A-Z])/g, "-$1");
sName = sName.toLocaleLowerCase();
//get the style object and get the value of the property if it exists;
var obj = document.defaultView.getComputedStyle(this.dom, "");
return obj && obj.getPropertyValue(sName);
} else if (this.dom.currentStyle) { //ie and early versions of opera;
return this.dom.currentStyle[sName];
} else { //otherwise, some other browser is being used;
return null;
}
},
//
/*wrapping classname in spaces means that a regexp isn't needed*/
/**
* @function JSLITE.Element.hasClass
* @param {String} sClass
* @return {None}
* @describe
Queries to see if an element has the specified class.
Note that in this example that the property names must be precise in that they will map to actual HTMLOptionElement properties. For instance, when adding children to a select dom element, value will map to the option element's value attribute and text will map to the text property of the element. (Also, note that you can add custom attributes.) For example:
* @example
var oList = JSLITE.dom.get("myList");
var aTest = [1, 2, 3, 4, 5, 6];
var aTest2 = ["one", "two", "three", "four", "five", "six"];
//create a list where both Option.text and Option.value are the same;
oList.list(aTest);
//create a list where both Option.text and Option.value are different;
oList.list(aTest, aTest2);
//when the first function argument is an array of arguments,
only one function argument should be passed;
var aTeams = [
{value: "Philadelphia", text: "Phillies"},
{value: "Atlanta", text: "Braves"},
{value: "Florida", text: "Marlins"},
{value: "New York", text: "Mets"},
{value: "Washington", text: "Nationals"}
];
oList.list(aTeams);
*/
//
list: function (aFirst, aSecond) {
if (["SELECT", "UL", "OL"].join().indexOf(this.dom.nodeName) === -1) {
throw new Error("Method only acts on lists.");
}
var that = this.dom,
oAttr,
sNodeName,
attr,
fn = function (el, index, arr) {
/*"this" will refer either to the Array on which the method is called
or to the option Object if it's passed as the second arg;
- this allows us to pass either one array objects or two;
- one array: value and text are the same;
- two arrays: value is contained in the second array;
*/
if (that.nodeName === "SELECT") {
that.options[that.options.length] = new Option(arr[index], this[index], false, false);
} else {
JSLITE.dom.create({tag: "li",
attr: { innerHTML: arr[index] },
parent: that
});
}
};
if (aFirst[0].constructor === Object) {
sNodeName = that.nodeName === "SELECT" ? "option" : "li";
aFirst.forEach(function (oRow) {
oAttr = {};
for (attr in oRow) {
if (oRow.hasOwnProperty(attr)) {
oAttr[attr] = oRow[attr];
}
}
JSLITE.dom.create({tag: sNodeName,
attr: oAttr,
parent: that
});
});
} else {
/*
- if aSecond is undefined then only one array was passed to JSLITE.Element.list;
- if we don't set aFirst as the second parameter then "this" will equal the window object in the callback (the second argument to forEach is the context);
- this allows us to set the option's value to be the same as the option's text;
*/
aFirst.forEach(fn, aSecond || aFirst);
}
return this;
},
//
/**
* @function JSLITE.Element.next
* @param {String} vElem Optional
* @param {Boolean} bReturnDOM Optional
* @return {JSLITE.Element/HTMLElement}
* @describe
Returns a JSLITE.Element wrapper. If bReturnDOM is true, returns an HTMLElement.
*/
//
next: function (vElem, bReturnDOM) {
if (vElem && typeof vElem === "boolean") {
bReturnDOM = vElem;
vElem = undefined;
}
var oNext = JSLITE.dom.getDom(this).nextSibling;
return oNext.nodeType === 1 ?
bReturnDOM ?
oNext :
JSLITE.dom.fly(oNext)
: arguments.callee.call(oNext, vElem, bReturnDOM);
},
//
/**
* @function JSLITE.Element.on
* @param {String/Array} vType The type of event, i.e. click or change or ["click", "change"]
* @param {Function} fn The callback function
* @return {None}
* @describe
Binds one or more event listeners to the element and adds it/them to the cache. If listening to more than one type of event, pass the events as an array as the first argument.
* @example
var func = function (e) {
alert("Hello, World!");
e.preventDefault();
};
var cLinks = JSLITE.dom.gets("#menubar a");
cLinks.on("click", func);
- or -
cLinks.on(["click", "mouseover"], func); //pass multiple event to listen to as an array;
*/
//
on: function (vType, fn) {
if (typeof vType === "string") {
vType = [vType];
}
vType.forEach(function (sType) {
JSLITE.dom.event.add(this.dom, sType, fn);
//create the object for each id;
var o = null, arr = [];
if (!JSLITE.events[this.dom.id]) {
JSLITE.events[this.dom.id] = {};
}
o = JSLITE.events[this.dom.id];
//within each id object store the handler for each event type;
if (!o[sType]) {
o[sType] = fn;
} else { //if there's more than one handler for a given type then create an array of the handlers and assign it to the type;
if (!JSLITE.isArray(o[sType])) {
arr = JSLITE.toArray(o);
arr.push(fn);
o[sType] = arr;
} else { //it's already been cast to an array;
o[sType].push(fn);
}
}
}.bind(this));
},
//
/**
* @function JSLITE.Element.parent
* @param {String} vElem Optional
* @param {Boolean} bReturnDOM Optional
* @return {JSLITE.Element/HTMLElement}
* @describe
If no argument is given, return the element's parent. Else, return the first parent whose nodeName matches the passed parameter.
Returns a JSLITE.Element wrapper. If bReturnDOM is true, returns an HTMLElement. Returns false if no parent is found.
* @example
var oParent = JSLITE.dom.get("#test p span").parent();
var oParent = JSLITE.dom.get("#test p span").parent("div").setStyle({background: "red", fontFamily: "arial"}); //parent() returns a JSLITEElement by default;
var oParent = JSLITE.dom.get("#test p span").parent("div", true).style.background = "red"; //have parent() return the HTMLElement;
*/
//
parent: function (vElem, bReturnDOM) {
var fnReturnElement = function () {
return bReturnDOM ?
oParent :
JSLITE.dom.get(oParent)
},
oParent = JSLITE.dom.getDom(this).parentNode;
if (!oParent) {
throw new Error("Parent could not be found");
}
if (vElem && typeof vElem === "boolean") {
bReturnDOM = vElem;
vElem = undefined;
}
//return oParent.nodeType === 1 ? oParent : arguments.callee.call(oParent);
if (oParent.nodeType === 1) {
if (vElem && typeof vElem !== "boolean") {
if (oParent.nodeName.toLocaleLowerCase() !== vElem) { //a specific parent nodeName was passed in and the parent hasn't found it yet so keep recursing;
return arguments.callee.call(oParent, vElem, bReturnDOM); //this has to return the final value since it's recursive and we could be dealing with many execution contexts by nature of it being a recursive function;
} else {
return fnReturnElement();
}
} else {
return fnReturnElement();
}
} else {
arguments.callee.call(oParent, vElem, bReturnDOM);
}
},
//
/**
* @function JSLITE.Element.previous
* @param {String} vElem Optional
* @param {Boolean} bReturnDOM Optional
* @return {HTMLElement}
* @describe
Returns a JSLITE.Element wrapper. If bReturnDOM is true, returns an HTMLElement.
*/
//
previous: function (vElem, bReturnDOM) {
if (vElem && typeof vElem === "boolean") {
bReturnDOM = vElem;
vElem = undefined;
}
var oPrevious = JSLITE.dom.getDom(this).previousSibling;
if (!oPrevious) {
throw new Error("Previous sibling could not be found");
}
return oPrevious.nodeType === 1 ?
bReturnDOM ?
oPrevious :
JSLITE.dom.fly(oPrevious)
: arguments.callee.call(oPrevious, vElem, bReturnDOM);
},
//
/**
* @function JSLITE.Element.remove
* @param {None/String/HTMLElement/JSLITE.Element/Boolean} vElem The element(s) to remove
* @return {JSLITE.Element/JSLITE.Composite}
* @describe
Removes an HTMLElement from the DOM and stores it in the JSLITE.garbage cache.
This method can be used in the following ways:
If no param is passed, the method removes itself.
If a non-Boolean param is passed, remove that specific HTMLElement from the DOM.
If the Boolean true is passed as the param, remove all children of the current element.
Please note that since this method returns the object it's bound to to allow for method chaining, the removed HTMLElement is not returned. Therefore, all removed elements are accessible via the global JSLITE.garbage cache by their id attribute values.
* @example
JSLITE.dom.get("five").remove("two"); //removes the element with the id "two";
JSLITE.dom.get("five").remove(true); //removes all children of element "five";
//later on in the code you need a reference to the removed element for whatever reason;
var oRemovedElement = JSLITE.garbage["two"];
*/
//
remove: function (vElem) {
var cChildren,
i,
o;
if (typeof vElem === "boolean" && vElem) {
cChildren = this.dom.childNodes;
for (i = 0; cChildren[i];) {
cChildren[i].parentNode.removeChild(cChildren[i]); //remember a node list is a live list;
}
} else {
o = JSLITE.dom.getDom(vElem || this);
//JSLITE.garbage[o.id] = o.parentNode.removeChild(o);
o.parentNode.removeChild(o);
}
return this;
},
//
/**
* @function JSLITE.Element.replaceClass
* @param {String} sNewClass
* @param {String} sCurrentClass
* @return {JSLITE.Element}
* @describe
Swaps out the class or adds it if it doesn't exist.
*/
//
replaceClass: function (sNewClass, sCurrentClass) {
/*swap out the class or just add it if sCurrentClass doesn't exist*/
if (this.hasClass(sCurrentClass)) {
this.dom.className = this.dom.className.replace(sCurrentClass, sNewClass);
} else {
//this.dom.className += " " + sNewClass;
this.addClass(sNewClass);
}
return this;
},
//
/**
* @function JSLITE.Element.removeClass
* @param {String/Array} v
* @return {JSLITE.Element}
* @describe
Pass either one class or multiple classes as an array to be removed.
*/
//
removeClass: function (v) {
var i = 0,
len;
v = v instanceof Array ? v : [v];
for (len = v.length; i < len; i++) {
if (this.hasClass(v[i])) {
this.dom.className = this.dom.className.replace(v[i], "");
}
}
return this;
},
//
/**
* @function JSLITE.Element.serialize
* @param {None}
* @return {String}
* @describe
Retrieves a form's input, select and textarea elements and gathers their values, delimiting them by an ampersand into key-value pairs that can be then used in an HTTP POST method.
Uses either the Core DOM textContent property or Internet Explorer's proprietary innerText property to retrieve all of the text nodes within an element node.
Removes the class if the element already has it or adds it if it doesn't.
*/
//
toggleClass: function (sClassname) {
if (this.hasClass(sClassname)) {
this.removeClass(sClassname);
} else {
this.addClass(sClassname);
}
return this;
},
//
/**
* @function JSLITE.Element.tooltip
* @param {Mixed} vTip String or Array
* @param {Boolean} bAnimate True if tooltip should be animated
* @return {JSLITE.Element}
* @describe
Pass a string or any identifier that has a string value as the sole argument or an array of string values.
An element can have an animated tooltip by passing a second parameter with a value of true.
If an array, the method expects tokenized strings which would each map to an HTMLElement attribute. If you want one of the array elements to map to an HTMLElement attribute, tokenize it by enclosing it in curly braces. Otherwise, the array element will be interpreted as a plain string.
Note any formatting should be passed along in the array as its own element. You can also pass along any string or a string of HTML.
* @example
JSLITE.dom.get("theLink").tooltip("This is my tooltip.");
//and/or
oForm.tooltip($("thePara").innerHTML);
//a tooltip can be animated by passing a second parameter of true;
JSLITE.dom.get("theLink").tooltip("This is my tooltip.", true);
//you wanted to get the value of the rel and href attributes for every link on the page;
//each tooltip will contain the value of each link's rel attribute;
JSLITE.dom.gets("a[rel]").tooltip(["{rel}"]);
//gets the value of the link's rel and href attributes (not equal to '#') and does some formatting;
JSLITE.dom.gets("a[href!=#][rel]").tooltip(["{rel}", " {", "{href}", "}"]);
*/
//
tooltip: function (vTip, bAnimate) {
var that = this.dom;
if (JSLITE.isArray(vTip)) {
if (vTip.length > 1) {
vTip = vTip.join("").replace(/\{([a-z]+)\}/gi, function (a, b) {
return that.getAttribute(b);
});
} else {
vTip = that.getAttribute(vTip[0]);
}
}
JSLITE.ux.Tooltip.init.call(this, vTip, bAnimate);
return this;
},
//
/**
* @function JSLITE.Element.trim
* @param {String}
* @return {String}
* @describe
Checks to see if the element is a text box. If it is, then it passes the value to JSLITE.trim to do a standard trim..
*/
//
trim: function () {
var oDom = JSLITE.dom.getDom(this);
if (!JSLITE.dom.isTextBox(oDom)) {
return;
}
oDom.value = JSLITE.trim(oDom.value);
return this;
},
//
/**
* @function JSLITE.Element.un
* @param {String/Array} vType The type of event, i.e. click or change or ["click", "change"]
* @param {Function} fn The callback function
* @return {None}
* @describe
Unbinds one or more event listeners from the element and removes it/them from the cache. If removing more than one type of event, pass the events as an array as the first argument.
* @example
//...previous code...;
cLinks.un("click", func);
- or -
cLinks.un(["click", "mouseover"], func);
*/
//
un: function (vType, fn) {
if (typeof vType === "string") {
vType = [vType];
}
vType.forEach(function (sType) {
JSLITE.dom.event.remove(this.dom, sType, fn);
delete JSLITE.events[this.dom.id][sType];
}.bind(this));
},
//
/**
* @function JSLITE.Element.validate
* @param {Function} callback Optional
* @param {Object} config Optional A map of configurable properties that will override the defaults
* @return {JSLITE.Element/JSLITE.Composite}
* @describe
Searches the form the method was invoked on for any form elements whose classes are matched by regular expressions which determine the elements to be candidates for validation. Note that binding a handler to the form's submit event and defining the callback is still the responsibility of the developer. Please refer to the example.
The form elements to be validated must have their classes set to predetermined values, otherwise the class that performs the validation won't recognize them as elements to be validated.
The following are the valid validation classes:
required
required-email
required-phone
required-ssn
required-zip
Note that since forms will have different HTML structures, the options.classMap property can be used to target the element that should have
the textError class attached to it.
* @example
var callback = function (e) {
var oScrubber = this.dom.scrubber;
if (oScrubber.getErrors() > 0) {
console.log(oScrubber.getErrors() + " validation errors");
} else {
JSLITE.ajax.load({
url: "lib/php/controller.php",
data: "json",
type: "POST",
postvars: this.elements,
onSuccess: function (sResponse) {
//do something useful...;
}
});
}
e.preventDefault();
};
//validate an entire form;
var oContactForm = JSLITE.dom.get("contactForm");
oContactForm.validate(callback);
//attach a handler to a single form element;
var oZip = JSLITE.dom.get("zip");
oZip.validate();
---------------------------------------------------------
NOTE that the class that implements the validation behavior uses regular expressions to determine
which form elements to bind change listeners to. This needs to be established in the markup.
An example form:
Nice, clean markup with no custom attributes. Sweet!
*/
//
validate: function (callback/*, config*/) {
var that = this,
config = typeof callback === "object" ? callback : arguments[1],
func = typeof callback === "function" ? callback : null,
oScrubber;
if (this.dom.nodeName.toLocaleLowerCase() !== "form") {
throw new Error("This method can only be invoked on a form object.");
}
//JSLITE.dom.cleanWhitespace(this.dom);
this.dom.scrubber = new JSLITE.ux.Scrubber(this, config); //bind the new scrubber instance to the form;
//if the object is in the events cache and already has a submit event handler bound to it then we can just invoke scrubber;
if (JSLITE.events[this.dom.id] && JSLITE.events[this.dom.id].submit) {
oScrubber = this.dom.scrubber; //store a reference to the object or it becomes null after this statement (don't know why yet);
oScrubber.validate.call(oScrubber);
return oScrubber.getErrors.call(oScrubber); //return the number of errors (if any) so the handler can use it;
} else {
this.on("submit", function (e) {
this.scrubber.validate();
if (func) {
func.call(that, e); //ensures that the form will be the value of "this" w/in the callback;
} else { //if there's no callback then it's a simple test (if there are errors don't submit, if there aren't send it along);
if (this.scrubber.getErrors()) {
e.preventDefault();
}
}
});
}
return this;
},
//
/**
* @function JSLITE.Element.value
* @param {Mixed}
* @return {JSLITE.Element/Mixed}
* @describe
When acting as a getter, it will return the text content of the element (just the text, no HTML). If operating on an input element, it will return the element's value property.
When acting as a setter, it will set the element's innerHTML property. If operating on an input element, it will set the element's value property.
Chaining is allowed when used as a setter.
* @example
JSLITE.dom.gets("input").setStyle({background: "#CCC"}).value("test test i'm a test");
*/
//
value: function (v) {
if (v) { //if setting, return this to allow for chaining;
!JSLITE.dom.isTextBox(this) ?
this.dom.innerHTML = v :
this.dom.value = v;
return this; //allow for chaining;
} else { //if getting, return the value;
return this.textContent() || this.dom.value;
}
}
//
};