Readme formatting, and start of DOM .children function

This commit is contained in:
Timothy Warren 2011-07-26 15:29:30 -04:00
parent f8350e516a
commit 1c014459df
2 changed files with 339 additions and 259 deletions

206
README.md
View File

@ -16,121 +16,121 @@ Browser support: IE8+, Latest versions of Firefox, Chrome, Safari, Opera
* Function: `$_(selector).module.function(params);` * Function: `$_(selector).module.function(params);`
## Official Modules: ## ## Official Modules: ##
**Global**: Core functions ###Global###: Core functions
properties: properties:
* el: The html object returned by the selector function. * el: The html object returned by the selector function.
functions: functions:
* each: For applying changes to every item matched by a selector
Use:
$_(selector).dom.each(callback);
Example : $_(".foo").dom.each(function(e){
$_(e).dom.text(value);
}):
* ext: For extending the library, adds this.el to the object or function supplied
Use: $_.ext("name", functionOrObject)
Example: $_.ext("zip", function(){ //function }); * each: For applying changes to every item matched by a selector
Adds 'zip' function to $_.
**Ajax**: simple, jQuery-like ajax functions
functions:
* Get:
Use: Use:
$_.get(url, data_object, callback); $_(selector).dom.each(callback);
Example : $_(".foo").dom.each(function(e){
$_(e).dom.text(value);
}):
* ext: For extending the library, adds this.el to the object or function supplied
Use: $_.ext("name", functionOrObject)
Example: $_.ext("zip", function(){ //function });
Adds 'zip' function to $_.
###Ajax###: simple, jQuery-like ajax functions
functions:
* Post: * Get:
Use: Use:
$_.post(url, data_object, callback); $_.get(url, data_object, callback);
* Post:
Use:
$_.post(url, data_object, callback);
**QS**: querystring parsing and serialization for hashbang strings, and pushState urls ###QS###: querystring parsing and serialization for hashbang strings, and pushState urls
functions: functions:
* Parse: * Parse:
Use: Use:
$_.qs.parse(hb); $_.qs.parse(hb);
* Set: This function will set the hash url if browser doesn't have history.pushState * Set: This function will set the hash url if browser doesn't have history.pushState
Use: Use:
$_.qs.set(key, value); $_.qs.set(key, value);
* Get: Retrieves the value of the key in the url string * Get: Retrieves the value of the key in the url string
Use: Use:
$_.qs.get(key); $_.qs.get(key);
**Store**: localstorage wrapper with automatic data serialization ###Store###: localstorage wrapper with automatic data serialization
functions: functions:
* Get:
Use:
$_.store.get(key);
* Set
Use:
$_.store.set(key, value);
* getALL: Retreives all localstorage data in raw form
Use:
$_.store.getAll();
**Event**: wrapper for applying events to DOM objects
functions: * Get:
Use:
$_.store.get(key);
*Add: * Set
Use: Use:
$_(selector).event.add(event, callback); $_.store.set(key, value);
*Remove * getALL: Retreives all localstorage data in raw form
Use: Use:
$_(selector).event.remove(event, callback); $_.store.getAll();
**DOM**: Dom manipulation module
###Event###: wrapper for applying events to DOM objects
function: functions:
*addClass: *Add:
Use: Use:
$_(selector).dom.addClass(className); $_(selector).event.add(event, callback);
*Remove
Use:
$_(selector).event.remove(event, callback);
*RemoveClass: ###DOM###: Dom manipulation module
Use:
$_(selector).dom.removeClass(className); functions:
*show: For setting dom elements as visible. Type defaults as "block", can be set with optional second parameter. *addClass:
Use: Use:
$_(selector).dom.show([type]); $_(selector).dom.addClass(className);
*hide: Hides the elements matching the selector *RemoveClass:
Use: Use:
$_(selector).dom.hide(); $_(selector).dom.removeClass(className);
*attr: Gets, sets, or removes an attribute from a selector. *show: For setting dom elements as visible. Type defaults as "block", can be set with optional second parameter.
Use: Use:
Set: $_(selector).dom.attr(attributeName, attributeValue); $_(selector).dom.show([type]);
Get: $_(selector).dom.attr(attributeName);
Remove: $_(selector).dom.attr(attributeName, null); *hide: Hides the elements matching the selector
Use:
*text: Gets or sets the text in between an element's tags $_(selector).dom.hide();
Use:
Set: $_(selector).dom.text(text); *attr: Gets, sets, or removes an attribute from a selector.
Get: $_(selector).dom.text(); Use:
Set: $_(selector).dom.attr(attributeName, attributeValue);
*css: Sets css styles on the selected element(s) Get: $_(selector).dom.attr(attributeName);
Use: Remove: $_(selector).dom.attr(attributeName, null);
Set: $_(selector).dom.css(property, value);
*text: Gets or sets the text in between an element's tags
Use:
Set: $_(selector).dom.text(text);
Get: $_(selector).dom.text();
*css: Sets css styles on the selected element(s)
Use:
Set: $_(selector).dom.css(property, value);
Get: $_(selector).dom.css(property);

View File

@ -1,166 +1,171 @@
/*
* classList.js: Cross-browser full element.classList implementation.
* 2011-06-15
*
* By Eli Grey, http://eligrey.com
* Public Domain.
* NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
*/
if (typeof document !== "undefined" && !("classList" in document.createElement("a")))
{
(function (view){
var classListProp = "classList",
protoProp = "prototype",
elemCtrProto = (view.HTMLElement || view.Element)[protoProp],
objCtr = Object,
strTrim = String[protoProp].trim ||
function ()
{
return this.replace(/^\s+|\s+$/g, "");
},
arrIndexOf = Array[protoProp].indexOf ||
function (item)
{
var
i = 0,
len = this.length;
for (; i < len; i++)
{
if (i in this && this[i] === item)
{
return i;
}
}
return -1;
}
// Vendors: please allow content code to instantiate DOMExceptions
,
DOMEx = function (type, message)
{
this.name = type;
this.code = DOMException[type];
this.message = message;
},
checkTokenAndGetIndex = function (classList, token)
{
if (token === "")
{
throw new DOMEx("SYNTAX_ERR", "An invalid or illegal string was specified");
}
if (/\s/.test(token))
{
throw new DOMEx("INVALID_CHARACTER_ERR", "String contains an invalid character");
}
return arrIndexOf.call(classList, token);
},
ClassList = function (elem)
{
var
trimmedClasses = strTrim.call(elem.className),
classes = trimmedClasses ? trimmedClasses.split(/\s+/) : [],
i = 0,
len = classes.length;
for (; i < len; i++)
{
this.push(classes[i]);
}
this._updateClassName = function ()
{
elem.className = this.toString();
};
},
classListProto = ClassList[protoProp] = [],
classListGetter = function ()
{
return new ClassList(this);
};
// Most DOMException implementations don't allow calling DOMException's toString()
// on non-DOMExceptions. Error's toString() is sufficient here.
DOMEx[protoProp] = Error[protoProp];
classListProto.item = function (i)
{
return this[i] || null;
};
classListProto.contains = function (token)
{
token += "";
return checkTokenAndGetIndex(this, token) !== -1;
};
classListProto.add = function (token)
{
token += "";
if (checkTokenAndGetIndex(this, token) === -1)
{
this.push(token);
this._updateClassName();
}
};
classListProto.remove = function (token)
{
token += "";
var index = checkTokenAndGetIndex(this, token);
if (index !== -1)
{
this.splice(index, 1);
this._updateClassName();
}
};
classListProto.toggle = function (token)
{
token += "";
if (checkTokenAndGetIndex(this, token) === -1)
{
this.add(token);
}
else
{
this.remove(token);
}
};
classListProto.toString = function ()
{
return this.join(" ");
};
if (objCtr.defineProperty)
{
var classListPropDesc = {
get: classListGetter,
enumerable: true,
configurable: true
};
try
{
objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
}
catch (ex)
{ // IE 8 doesn't support enumerable:true
if (ex.number === -0x7FF5EC54)
{
classListPropDesc.enumerable = false;
objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
}
}
}
else if (objCtr[protoProp].__defineGetter__)
{
elemCtrProto.__defineGetter__(classListProp, classListGetter);
}
}(self));
}
// --------------------------------------------------------------------------
/** /**
* Dom manipulation object * Dom manipulation object
* *
*/ */
(function (){ (function (){
var d; var d, tag_reg, id_reg, class_reg;
tag_reg = /^([\w\-]+)$/;
id_reg = /#([\w\-]+$)/;
class_reg = /\.([\w\-]+)$/;
/*
* classList.js: Cross-browser full element.classList implementation.
* 2011-06-15
*
* By Eli Grey, http://eligrey.com
* Public Domain.
* NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
*/
if (typeof document !== "undefined" && !("classList" in document.createElement("a")))
{
(function (view){
var classListProp = "classList",
protoProp = "prototype",
elemCtrProto = (view.HTMLElement || view.Element)[protoProp],
objCtr = Object,
strTrim = String[protoProp].trim ||
function ()
{
return this.replace(/^\s+|\s+$/g, "");
},
arrIndexOf = Array[protoProp].indexOf ||
function (item)
{
var
i = 0,
len = this.length;
for (; i < len; i++)
{
if (i in this && this[i] === item)
{
return i;
}
}
return -1;
}
// Vendors: please allow content code to instantiate DOMExceptions
,
DOMEx = function (type, message)
{
this.name = type;
this.code = DOMException[type];
this.message = message;
},
checkTokenAndGetIndex = function (classList, token)
{
if (token === "")
{
throw new DOMEx("SYNTAX_ERR", "An invalid or illegal string was specified");
}
if (/\s/.test(token))
{
throw new DOMEx("INVALID_CHARACTER_ERR", "String contains an invalid character");
}
return arrIndexOf.call(classList, token);
},
ClassList = function (elem)
{
var
trimmedClasses = strTrim.call(elem.className),
classes = trimmedClasses ? trimmedClasses.split(/\s+/) : [],
i = 0,
len = classes.length;
for (; i < len; i++)
{
this.push(classes[i]);
}
this._updateClassName = function ()
{
elem.className = this.toString();
};
},
classListProto = ClassList[protoProp] = [],
classListGetter = function ()
{
return new ClassList(this);
};
// Most DOMException implementations don't allow calling DOMException's toString()
// on non-DOMExceptions. Error's toString() is sufficient here.
DOMEx[protoProp] = Error[protoProp];
classListProto.item = function (i)
{
return this[i] || null;
};
classListProto.contains = function (token)
{
token += "";
return checkTokenAndGetIndex(this, token) !== -1;
};
classListProto.add = function (token)
{
token += "";
if (checkTokenAndGetIndex(this, token) === -1)
{
this.push(token);
this._updateClassName();
}
};
classListProto.remove = function (token)
{
token += "";
var index = checkTokenAndGetIndex(this, token);
if (index !== -1)
{
this.splice(index, 1);
this._updateClassName();
}
};
classListProto.toggle = function (token)
{
token += "";
if (checkTokenAndGetIndex(this, token) === -1)
{
this.add(token);
}
else
{
this.remove(token);
}
};
classListProto.toString = function ()
{
return this.join(" ");
};
if (objCtr.defineProperty)
{
var classListPropDesc = {
get: classListGetter,
enumerable: true,
configurable: true
};
try
{
objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
}
catch (ex)
{ // IE 8 doesn't support enumerable:true
if (ex.number === -0x7FF5EC54)
{
classListPropDesc.enumerable = false;
objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
}
}
}
else if (objCtr[protoProp].__defineGetter__)
{
elemCtrProto.__defineGetter__(classListProp, classListGetter);
}
}(self));
}
// --------------------------------------------------------------------------
//Private function for getting/setting attributes //Private function for getting/setting attributes
function _attr(sel, name, value) function _attr(sel, name, value)
{ {
@ -280,6 +285,62 @@
console.log("Property " + prop + " nor an equivalent seems to exist"); console.log("Property " + prop + " nor an equivalent seems to exist");
} }
function _sel_filter(filter, curr_sel)
{
var i,
len = curr_sel.length,
matches = [];
if(typeof filter !== "string")
{
return filter;
}
//Filter by tag
if(filter.match(tag_reg))
{
for(i=0;i<len;i++)
{
if(curr_sell[i].tagName.toLowerCase() == filter.toLowerCase())
{
matches.push(curr_sel[i]);
}
}
}
else if(filter.match(class_reg))
{
for(i=0;i<len;i++)
{
if(curr_sel[i].classList.contains(filter))
{
matches.push(curr_sel[i]);
}
}
}
else if(filter.match(id_reg))
{
return document.getElementById(filter);
}
else
{
console.log(filter+" is not a valid filter");
}
return (matches.length === 1) ? matches[0] : matches;
}
function _set_sel(sel)
{
for(var i in $_)
{
if(typeof $_[i] === "object")
{
$_[i].el = sel;
}
}
}
// -------------------------------------------------------------------------- // --------------------------------------------------------------------------
d = { d = {
@ -367,6 +428,25 @@
$_.each(function (e){ $_.each(function (e){
_css(e, prop, val); _css(e, prop, val);
}); });
},
children: function(filter)
{
var sel;
if(typeof sel === "undefined")
{
sel = this.el.children;
}
else
{
sel = _sel_filter(filter, this.el.children);
}
//Update the $_ object to reflect the new selector
_set_sel(sel);
//Return the $_ object for chaining
return $_
} }
}; };