Readme formatting, and start of DOM .children function
This commit is contained in:
parent
f8350e516a
commit
1c014459df
170
README.md
170
README.md
@ -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
|
* each: For applying changes to every item matched by a selector
|
||||||
Use:
|
Use:
|
||||||
$_(selector).dom.each(callback);
|
$_(selector).dom.each(callback);
|
||||||
|
|
||||||
Example : $_(".foo").dom.each(function(e){
|
Example : $_(".foo").dom.each(function(e){
|
||||||
$_(e).dom.text(value);
|
$_(e).dom.text(value);
|
||||||
}):
|
}):
|
||||||
|
|
||||||
* ext: For extending the library, adds this.el to the object or function supplied
|
* ext: For extending the library, adds this.el to the object or function supplied
|
||||||
Use: $_.ext("name", functionOrObject)
|
Use: $_.ext("name", functionOrObject)
|
||||||
|
|
||||||
Example: $_.ext("zip", function(){ //function });
|
Example: $_.ext("zip", function(){ //function });
|
||||||
Adds 'zip' function to $_.
|
Adds 'zip' function to $_.
|
||||||
|
|
||||||
|
|
||||||
**Ajax**: simple, jQuery-like ajax functions
|
###Ajax###: simple, jQuery-like ajax functions
|
||||||
|
|
||||||
functions:
|
functions:
|
||||||
|
|
||||||
|
* 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
|
||||||
|
|
||||||
|
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
|
||||||
|
|
||||||
|
functions:
|
||||||
|
|
||||||
* Get:
|
* Get:
|
||||||
Use:
|
Use:
|
||||||
$_.get(url, data_object, callback);
|
$_.store.get(key);
|
||||||
|
|
||||||
* Post:
|
* Set
|
||||||
Use:
|
Use:
|
||||||
$_.post(url, data_object, callback);
|
$_.store.set(key, value);
|
||||||
|
|
||||||
**QS**: querystring parsing and serialization for hashbang strings, and pushState urls
|
* getALL: Retreives all localstorage data in raw form
|
||||||
|
Use:
|
||||||
functions:
|
$_.store.getAll();
|
||||||
|
|
||||||
* 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
|
|
||||||
|
|
||||||
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
|
###Event###: wrapper for applying events to DOM objects
|
||||||
|
|
||||||
functions:
|
functions:
|
||||||
|
|
||||||
*Add:
|
*Add:
|
||||||
Use:
|
Use:
|
||||||
$_(selector).event.add(event, callback);
|
$_(selector).event.add(event, callback);
|
||||||
|
|
||||||
*Remove
|
*Remove
|
||||||
Use:
|
Use:
|
||||||
$_(selector).event.remove(event, callback);
|
$_(selector).event.remove(event, callback);
|
||||||
|
|
||||||
**DOM**: Dom manipulation module
|
###DOM###: Dom manipulation module
|
||||||
|
|
||||||
function:
|
functions:
|
||||||
|
|
||||||
*addClass:
|
*addClass:
|
||||||
Use:
|
Use:
|
||||||
$_(selector).dom.addClass(className);
|
$_(selector).dom.addClass(className);
|
||||||
|
|
||||||
*RemoveClass:
|
*RemoveClass:
|
||||||
Use:
|
Use:
|
||||||
$_(selector).dom.removeClass(className);
|
$_(selector).dom.removeClass(className);
|
||||||
|
|
||||||
*show: For setting dom elements as visible. Type defaults as "block", can be set with optional second parameter.
|
*show: For setting dom elements as visible. Type defaults as "block", can be set with optional second parameter.
|
||||||
Use:
|
Use:
|
||||||
$_(selector).dom.show([type]);
|
$_(selector).dom.show([type]);
|
||||||
|
|
||||||
*hide: Hides the elements matching the selector
|
*hide: Hides the elements matching the selector
|
||||||
Use:
|
Use:
|
||||||
$_(selector).dom.hide();
|
$_(selector).dom.hide();
|
||||||
|
|
||||||
*attr: Gets, sets, or removes an attribute from a selector.
|
*attr: Gets, sets, or removes an attribute from a selector.
|
||||||
Use:
|
Use:
|
||||||
Set: $_(selector).dom.attr(attributeName, attributeValue);
|
Set: $_(selector).dom.attr(attributeName, attributeValue);
|
||||||
Get: $_(selector).dom.attr(attributeName);
|
Get: $_(selector).dom.attr(attributeName);
|
||||||
Remove: $_(selector).dom.attr(attributeName, null);
|
Remove: $_(selector).dom.attr(attributeName, null);
|
||||||
|
|
||||||
*text: Gets or sets the text in between an element's tags
|
*text: Gets or sets the text in between an element's tags
|
||||||
Use:
|
Use:
|
||||||
Set: $_(selector).dom.text(text);
|
Set: $_(selector).dom.text(text);
|
||||||
Get: $_(selector).dom.text();
|
Get: $_(selector).dom.text();
|
||||||
|
|
||||||
*css: Sets css styles on the selected element(s)
|
|
||||||
Use:
|
|
||||||
Set: $_(selector).dom.css(property, value);
|
|
||||||
|
|
||||||
|
*css: Sets css styles on the selected element(s)
|
||||||
|
Use:
|
||||||
|
Set: $_(selector).dom.css(property, value);
|
||||||
|
Get: $_(selector).dom.css(property);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
390
src/DOM.js
390
src/DOM.js
@ -1,165 +1,170 @@
|
|||||||
|
/*
|
||||||
|
* 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\-]+)$/;
|
||||||
* classList.js: Cross-browser full element.classList implementation.
|
id_reg = /#([\w\-]+$)/;
|
||||||
* 2011-06-15
|
class_reg = /\.([\w\-]+)$/;
|
||||||
*
|
|
||||||
* 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 $_
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user