Readme formatting, and start of DOM .children function
This commit is contained in:
parent
f8350e516a
commit
1c014459df
206
README.md
206
README.md
@ -16,121 +16,121 @@ Browser support: IE8+, Latest versions of Firefox, Chrome, Safari, Opera
|
||||
* Function: `$_(selector).module.function(params);`
|
||||
|
||||
## Official Modules: ##
|
||||
**Global**: Core functions
|
||||
###Global###: Core functions
|
||||
|
||||
properties:
|
||||
|
||||
* el: The html object returned by the selector function.
|
||||
|
||||
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)
|
||||
properties:
|
||||
|
||||
* el: The html object returned by the selector function.
|
||||
|
||||
functions:
|
||||
|
||||
Example: $_.ext("zip", function(){ //function });
|
||||
Adds 'zip' function to $_.
|
||||
|
||||
|
||||
**Ajax**: simple, jQuery-like ajax functions
|
||||
|
||||
functions:
|
||||
|
||||
* Get:
|
||||
* each: For applying changes to every item matched by a selector
|
||||
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:
|
||||
Use:
|
||||
$_.post(url, data_object, callback);
|
||||
* Get:
|
||||
Use:
|
||||
$_.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:
|
||||
|
||||
* Parse:
|
||||
Use:
|
||||
$_.qs.parse(hb);
|
||||
|
||||
* Set: This function will set the hash url if browser doesn't have history.pushState
|
||||
Use:
|
||||
$_.qs.set(key, value);
|
||||
|
||||
* Get: Retrieves the value of the key in the url string
|
||||
Use:
|
||||
$_.qs.get(key);
|
||||
functions:
|
||||
|
||||
* Parse:
|
||||
Use:
|
||||
$_.qs.parse(hb);
|
||||
|
||||
* Set: This function will set the hash url if browser doesn't have history.pushState
|
||||
Use:
|
||||
$_.qs.set(key, value);
|
||||
|
||||
* Get: Retrieves the value of the key in the url string
|
||||
Use:
|
||||
$_.qs.get(key);
|
||||
|
||||
**Store**: localstorage wrapper with automatic data serialization
|
||||
###Store###: localstorage wrapper with automatic data serialization
|
||||
|
||||
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:
|
||||
|
||||
functions:
|
||||
* Get:
|
||||
Use:
|
||||
$_.store.get(key);
|
||||
|
||||
*Add:
|
||||
Use:
|
||||
$_(selector).event.add(event, callback);
|
||||
|
||||
*Remove
|
||||
Use:
|
||||
$_(selector).event.remove(event, callback);
|
||||
|
||||
**DOM**: Dom manipulation module
|
||||
* 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
|
||||
|
||||
function:
|
||||
|
||||
*addClass:
|
||||
Use:
|
||||
$_(selector).dom.addClass(className);
|
||||
functions:
|
||||
|
||||
*Add:
|
||||
Use:
|
||||
$_(selector).event.add(event, callback);
|
||||
|
||||
*Remove
|
||||
Use:
|
||||
$_(selector).event.remove(event, callback);
|
||||
|
||||
*RemoveClass:
|
||||
Use:
|
||||
$_(selector).dom.removeClass(className);
|
||||
|
||||
*show: For setting dom elements as visible. Type defaults as "block", can be set with optional second parameter.
|
||||
Use:
|
||||
$_(selector).dom.show([type]);
|
||||
|
||||
*hide: Hides the elements matching the selector
|
||||
Use:
|
||||
$_(selector).dom.hide();
|
||||
|
||||
*attr: Gets, sets, or removes an attribute from a selector.
|
||||
Use:
|
||||
Set: $_(selector).dom.attr(attributeName, attributeValue);
|
||||
Get: $_(selector).dom.attr(attributeName);
|
||||
Remove: $_(selector).dom.attr(attributeName, null);
|
||||
|
||||
*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);
|
||||
|
||||
###DOM###: Dom manipulation module
|
||||
|
||||
functions:
|
||||
|
||||
*addClass:
|
||||
Use:
|
||||
$_(selector).dom.addClass(className);
|
||||
|
||||
*RemoveClass:
|
||||
Use:
|
||||
$_(selector).dom.removeClass(className);
|
||||
|
||||
*show: For setting dom elements as visible. Type defaults as "block", can be set with optional second parameter.
|
||||
Use:
|
||||
$_(selector).dom.show([type]);
|
||||
|
||||
*hide: Hides the elements matching the selector
|
||||
Use:
|
||||
$_(selector).dom.hide();
|
||||
|
||||
*attr: Gets, sets, or removes an attribute from a selector.
|
||||
Use:
|
||||
Set: $_(selector).dom.attr(attributeName, attributeValue);
|
||||
Get: $_(selector).dom.attr(attributeName);
|
||||
Remove: $_(selector).dom.attr(attributeName, null);
|
||||
|
||||
*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);
|
||||
|
||||
|
||||
|
||||
|
||||
392
src/DOM.js
392
src/DOM.js
@ -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
|
||||
*
|
||||
*/
|
||||
(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
|
||||
function _attr(sel, name, value)
|
||||
{
|
||||
@ -280,6 +285,62 @@
|
||||
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 = {
|
||||
@ -367,6 +428,25 @@
|
||||
$_.each(function (e){
|
||||
_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 $_
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user