diff --git a/README.md b/README.md index 088e1d0..89e8301 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,19 @@ pi('#id') pii('.class') ``` +### Class manipulation +```javascript +pi.classAdd('#try', 'newClass'); +pii.classAdd('.class', 'newClass'); +``` + +### jQuery style .ready +```javascript +pi.ready(function(){ +}); +``` + + ### Listener ```javascript var listener = function(e) { console.log(e); }; @@ -27,56 +40,62 @@ pii('.class').on('click',listener); pii('#try .sub')[0].on('mouseover',listener); ``` -### Class manipulation +#### Event Listeners Manager ```javascript -pi.classAdd('#try', 'newClass'); -pii.classAdd('.class', 'newClass'); -``` +var a = function(){ console.log('a'); }; +var b = function(){ console.log('b'); }; -### jQuery style .ready -```javascript -pi.ready(function(){ -}); +pi.E.on( '#one', 'click', a ); +pi.E.on( '#one', 'click', b ); + +// when click on #one -> print a \n b + +// remove all click listeners + +pi.E.purge( '#one', 'click' ); ``` -### Pub/Sub Notifier + +### Topics Pub/Sub Notifier ```javascript var callback = function(a){ console.log('LOG: '+a); }; -pi.sub('NOTICE', callback); - -pi.pub('NOTICE',['hello']); -pi.unsub({'topic':'NOTICE','callback':callback}); -pi.pub('NOTICE',['hello']); +pi.T.sub('NOTICE', callback); +pi.T.pub('NOTICE',['hello']); +pi.T.unsub({'topic':'NOTICE','callback':callback}); +pi.T.pub('NOTICE',['hello']); ``` + ### LocalStorage ```javascript -pi.storage.set('key','value'); +pi.S.set('key','value'); ``` -### Namespace on LocalStorage +#### Namespace on LocalStorage ```javascript -var hello = pi.storage.namespace('hello'); +var hello = pi.S.namespace('hello'); hello.set('key','value'); // set key hello.get('key'); // get key ``` + ### AjaxCall ```javascript var ok = function (data) { console.log(data); }; -pi.ajax( { +pi.A({ type:'GET', url:'example.json', success:ok -} ); +}); ``` + ### Routes ```javascript var ok = function (action,arg1,arg2) { console.log(arg1); }; -pi.route.add('news', ok); -> hash -> #!/news/arg1/arg2 +pi.R.add('news', ok); -> hash -> #!/news/arg1/arg2 -pi.route.bundle( [ +pi.R.bundle( [ { route:'news', callback:function(){ alert('news'); } @@ -86,37 +105,27 @@ pi.route.bundle( [ callback:function(){ alert('defaultAction'); } } ] ); -pi.route.start('defaultAction'); +pi.R.start('defaultAction'); ``` -### Event Listeners Manager -```javascript -var a = function(){ console.log('a'); }; -var b = function(){ console.log('b'); }; - -pi.event.on( '#one', 'click', a ); -pi.event.on( '#one', 'click', b ); -// when click on #one -> print a \n b - -pi.event.purge( '#one', 'click' ); // remove all click listeners -``` +## Questions -##Why +###Why In the amazing javascript world we'll found many great framework, but this is the _mine_. I hate IE and i have no plans to support it. IE is a ugly program (i call him virus/malware). -##Who +###Who I'm a humble javascript coder -##What +###What Make website smart and amazing -##Where +###Where Github! -##Browser support: +###Browser support: - Firefox 3.5+ - Opera 9+ - Safari 4+ diff --git a/pi.js b/pi.js index 4f3c9ad..a6eb2ba 100644 --- a/pi.js +++ b/pi.js @@ -3,15 +3,9 @@ /*global window,document,Element,NodeList,alert,console,XMLHttpRequest,localStorage,Exception,setTimeout,clearTimeout */ /*jslint plusplus: true */ -var feature = { - "version" : "@@VERSION_NUMBER", - "DEBUG" : true, - "addEventListener" : !!window.addEventListener, // eventListener - "querySelectorAll" : !!document.querySelectorAll, // querySelector - "classList" : !!document.documentElement.classList // classList -}, - pi = document.querySelector.bind(document), +var pi = document.querySelector.bind(document), pii = document.querySelectorAll.bind(document); + /** * @name pi * @example pi('#id') @@ -20,22 +14,11 @@ var feature = { * @name pii * @example pii('.class') */ - -pi.debug = function (action, message) { - "use strict"; - if (feature.DEBUG) { - console.debug('[' + action + '] ' + message); - } -}; - /** - * @name pi.ready - * @example pi.ready( callback ); + * dataset use + * + * @example pii('#try .sub')[0].dataset */ -pi.ready = function (callback) { - "use strict"; - document.addEventListener("DOMContentLoaded", callback(), false); -}; /*! * listener example @@ -66,11 +49,7 @@ NodeList.prototype.on = function (event, fn) { for (i = 0; i < this.length; i++) { this.item(i).addEventListener(event, fn, false); } - /* - while ((a = this[i++]) !== undefined) { - a.addEventListener(event, fn, false); - } - */ + /* while ((a = this[i++]) !== undefined) { a.addEventListener(event, fn, false); } */ }; /** * @example pii('.class').rm('click', callback) @@ -82,14 +61,142 @@ NodeList.prototype.rm = function (event, fn) { for (i = 0; i < this.length; i++) { this.item(i).removeEventListener(event, fn, false); } - /* - while ((a = this[i++]) !== undefined) { - a.removeEventListener(event, fn, false); + /* while ((a = this[i++]) !== undefined) { a.removeEventListener(event, fn, false); } */ +}; + +/** + * @name pi.ready + * @example pi.ready( callback ); + */ +pi.ready = function (callback) { + "use strict"; + document.addEventListener("DOMContentLoaded", callback(), false); +}; + +// -------- Config + +pi.C = {}; + +pi.C.feature = { + "version" : "@@VERSION_NUMBER", + "DEBUG" : true, + "addEventListener" : !!window.addEventListener, // eventListener + "querySelectorAll" : !!document.querySelectorAll, // querySelector + "classList" : !!document.documentElement.classList // classList +}; + +// -------- Debug + +pi.D = {}; + +pi.D.debug = function (action, message) { + "use strict"; + if (pi.C.feature.DEBUG) { + console.debug('[' + action + '] ' + message); } - */ }; -if (feature.classList) { + +// -------- Html + +pi.H = {}; + +/** + * @name pi.append + * @param {String} elm elm to append + * @param {String} target target to append + * @param {String} pos top|down|append + */ +pi.H.append = function (elm, target, pos) { + "use strict"; + elm = pi(elm); + target = pi(target); + switch (pos) { + case 'top': + target.parentNode.insertBefore(elm, target); + break; + case 'down': + target.parentNode.insertBefore(elm, target.nextSibling); + break; + default: + target.appendChild(elm); + break; + } +}; + +// -------- Event + +/** + * @name event + */ +pi.E = (function () { + "use strict"; + return { + eventsArray: {}, + fnArray: {}, + on: function (object, event, callback) { + var elm = pi(object); + + if (typeof (this.eventsArray[object]) === "undefined") { + this.eventsArray[object] = {}; + this.fnArray[object] = {}; + } + if (typeof (this.eventsArray[object][event]) === "undefined") { + this.eventsArray[object][event] = []; + this.fnArray[object][event] = []; + } + this.eventsArray[object][event].push(callback.toString()); + this.fnArray[object][event].push(callback); + elm.on(event, callback); + }, + rm: function (object, event, callback) { + var elm = pi(object), + io = this.eventsArray[object][event].indexOf(callback.toString()); + if (io !== -1) { + this.eventsArray[object][event].splice(io, 1); + this.fnArray[object][event].splice(io, 1); + elm.rm(event, callback); + } + }, + purge: function (object, event) { + var callback, + i, + l = this.eventsArray[object][event].length, + elm = pi(object); + for (i = 0; i < l; i++) { + callback = this.fnArray[object][event][i]; + elm.rm(event, callback); + } + this.eventsArray[object][event] = []; + this.fnArray[object][event] = []; + } + }; +}()); + + +/** + * @name pii.forEach + * @example pii.forEach(elms, 'classAdd', 'class'); + */ +pii.forEach = function (elms, operation) { + "use strict"; + var args = Array.prototype.slice.call(arguments, 2), + i = 0, + a; + if (typeof (elms) === 'string') { + elms = pii(elms); + } + if ((typeof (elms) !== 'Object' && elms.length <= 0) || typeof (operation) !== 'string') { + return false; + } + args = [ elms[0] ].concat(args); + while ((a = elms[i++]) !== undefined) { + args[0] = a; + pi[operation].apply(pi, args); + } +}; + +if (pi.C.feature.classList) { /** * @name pi.classAdd * @example pi.classAdd( pi('#id'), 'class' ) @@ -134,84 +241,37 @@ if (feature.classList) { } elm.classList.toggle(c); }; -} -/** - * @name pii.forEach - * @example pii.forEach(elms, 'classAdd', 'class'); - */ -pii.forEach = function (elms, operation) { - "use strict"; - var args = Array.prototype.slice.call(arguments, 2), - i = 0, - a; - if (typeof (elms) === 'string') { - elms = pii(elms); - } - if ((typeof (elms) !== 'Object' && elms.length <= 0) || typeof (operation) !== 'string') { - return false; - } - args = [ elms[0] ].concat(args); - while ((a = elms[i++]) !== undefined) { - args[0] = a; - pi[operation].apply(pi, args); - } -}; + /** + * @name pii.classAdd + */ + pii.classAdd = function (elms, c) { + "use strict"; + pii.forEach(elms, 'classAdd', c); + }; + /** + * @name pii.classDel + */ + pii.classDel = function (elms, c) { + "use strict"; + pii.forEach(elms, 'classDel', c); + }; + /** + * @name pii.classToggle + */ + pii.classToggle = function (elms, c) { + "use strict"; + pii.forEach(elms, 'classToggle', c); + }; +} -/** - * @name pii.classAdd - */ -pii.classAdd = function (elms, c) { - "use strict"; - pii.forEach(elms, 'classAdd', c); -}; -/** - * @name pii.classDel - */ -pii.classDel = function (elms, c) { - "use strict"; - pii.forEach(elms, 'classDel', c); -}; -/** - * @name pii.classToggle - */ -pii.classToggle = function (elms, c) { - "use strict"; - pii.forEach(elms, 'classToggle', c); -}; -/** - * @name pi.append - * @param {String} elm elm to append - * @param {String} target target to append - * @param {String} pos top|down|append - */ -pi.append = function (elm, target, pos) { - "use strict"; - elm = pi(elm); - target = pi(target); - switch (pos) { - case 'top': - target.parentNode.insertBefore(elm, target); - break; - case 'down': - target.parentNode.insertBefore(elm, target.nextSibling); - break; - default: - target.appendChild(elm); - break; - } -}; -/** - * dataset use - * - * @example pii('#try .sub')[0].dataset - */ +// --------- Storage /** - * @name pi.storage + * @name pi.S */ -pi.storage = (function () { +pi.S = (function () { "use strict"; return { set: function (key, value) { @@ -249,7 +309,7 @@ pi.storage = (function () { } else { // read || del age = (now - (typeof (elm[key]) !== 'undefined' ? elm[key].ttl : 0)); - pi.debug('AGE', age + ' key: ' + key); + pi.D.debug('AGE', age + ' key: ' + key); if (!elm[key] || elm === null || age > 1) { this.del(elm[key]); return false; @@ -262,21 +322,23 @@ pi.storage = (function () { return { namespace: namespace + '_', set: function (key, value) { - pi.storage.set(this.namespace + key, value); + pi.S.set(this.namespace + key, value); }, get: function (key) { - return pi.storage.get(this.namespace + key); + return pi.S.get(this.namespace + key); }, del: function (key) { - pi.storage.del(this.namespace + key); + pi.S.del(this.namespace + key); } }; } }; }()); +// ---------- Ajax + /** - * @name pi.ajax + * @name pi.A * @param {Object} * @param {String} params.type * @param {String} params.url @@ -285,10 +347,10 @@ pi.storage = (function () { * @param {String} [params.params] * @param {Number} [params.ttl] time to live for caching */ -pi.ajax = function (params) { +pi.A = function (params) { "use strict"; var r = new XMLHttpRequest(), - cache = pi.storage.cache(params.type + params.url); + cache = pi.S.cache(params.type + params.url); // hit cache if (cache) { params.success(cache); @@ -303,7 +365,7 @@ pi.ajax = function (params) { return; } // fill cache - pi.storage.cache(params.type + params.url, r.responseText, (params.ttl || 1000 * 60)); + pi.S.cache(params.type + params.url, r.responseText, (params.ttl || 1000 * 60)); params.success(r.responseText); }; r.send(params.params || ""); @@ -328,66 +390,145 @@ pi.ajax = function (params) { * */ -/** - * @name pi.topics - */ -pi.topics = {}; -/** - * @name pi.pub - * @param {String} topic - * @param {Array} args arguments - */ -pi.pub = function (topic, args) { - "use strict"; - if (pi.topics[topic]) { - var thisTopic = pi.topics[topic], - thisArgs = args || [], - k, - j; - for (k = 0, j = thisTopic.length; k < j; k++) { - pi.debug('PUB', topic); - thisTopic[k].apply(pi, thisArgs); +pi.T = (function () { + var topics = {}; + return { + /** + * @name pi.T.pub + * @param {String} topic + * @param {Array} args arguments + */ + pub: function (topic, args) { + "use strict"; + if (topics[topic]) { + var thisTopic = topics[topic], + thisArgs = args || [], + k, + j; + for (k = 0, j = thisTopic.length; k < j; k++) { + pi.D.debug('PUB', topic); + thisTopic[k].apply(pi, thisArgs); + } + } + }, + /** + * @name pi.T.sub + * @param {String} topic + * @param {Object} callback + */ + sub: function (topic, callback) { + "use strict"; + if (!topics[topic]) { + topics[topic] = []; + } + pi.D.debug('SUB', topic); + topics[topic].push(callback); + return { + topic: topic, + callback: callback + }; + }, + /** + * @name pi.T.unsub + * @param {String} handle.topic + * @param {Object} handle.callback + */ + unsub: function (handle) { + "use strict"; + var topic = handle.topic, + thisTopic = [], + y, + w; + if (topics[topic]) { + thisTopic = topics[topic]; + for (y = 0, w = thisTopic.length; y < w; y++) { + if (thisTopic[y] === handle.callback) { + pi.D.debug('DEL', topic); + thisTopic.splice(y, 1); + } + } + } } } -}; -/** - * @name pi.sub - * @param {String} topic - * @param {Object} callback +}()); + +/*! + * + * + * route + * + * */ -pi.sub = function (topic, callback) { - "use strict"; - if (!pi.topics[topic]) { - pi.topics[topic] = []; - } - pi.debug('SUB', topic); - pi.topics[topic].push(callback); - return { - topic: topic, - callback: callback - }; -}; + /** - * @name pi.unsub - * @param {String} handle.topic - * @param {Object} handle.callback + * @name pi.R + * @desc simple route ( #/action/arg1/arg2 + * + * @example pi.R.add('news', theCallback) */ -pi.unsub = function (handle) { +pi.R = (function () { "use strict"; - var topic = handle.topic, - thisTopic = [], - y, - w; - if (pi.topics[topic]) { - thisTopic = pi.topics[topic]; - for (y = 0, w = thisTopic.length; y < w; y++) { - if (thisTopic[y] === handle.callback) { - pi.debug('DEL', topic); - thisTopic.splice(y, 1); + var routes = []; + function process(action) { + var hash = location.hash.substr(3).split('/'), //remove #!/ + i = 0, + r = {}; + if (typeof (action) === 'string' && hash[0] === '') { + hash = action.split('/'); + } + for (i = 0; i < routes.length; i++) { + r = routes[i]; + if (r.r === hash[0]) { + r.c.apply(pi, hash); } } } -}; + window.addEventListener("hashchange", process, false); + // start + return { + /** + * @name add + * @param {String} route + * @param {Function} callback + */ + add: function (route, callback) { + var rotta = { r : route, c : callback }; + routes.push(rotta); + }, + bundle: function (routes) { + var j = 0, + r = {}; + for (j = 0; j < routes.length; j++) { + r = routes[j]; + this.add(r.route, r.callback); + } + }, + start: function (action) { + process(action); + } + }; +}()); + + + + + + + + + + + + + + + + + + + + + /*! @@ -504,115 +645,4 @@ pii.lazyload = (function (global, document) { })(this, document); /*jslint nomen: false */ -/*! - * - * - * route - * - * - */ - -/** - * @name pi.route - * @desc simple route ( #/action/arg1/arg2 - * - * @example pi.route.add('news', theCallback) - */ -pi.route = (function () { - "use strict"; - var routes = []; - function process(action) { - var hash = location.hash.substr(3).split('/'), //remove #!/ - i = 0, - r = {}; - if (typeof (action) === 'string' && hash[0] === '') { - hash = action.split('/'); - } - for (i = 0; i < routes.length; i++) { - r = routes[i]; - if (r.r === hash[0]) { - r.c.apply(pi, hash); - } - } - } - window.addEventListener("hashchange", process, false); - // start - - return { - /** - * @name add - * @param {String} route - * @param {Function} callback - */ - add: function (route, callback) { - var rotta = { r : route, c : callback }; - routes.push(rotta); - }, - bundle: function (routes) { - var j = 0, - r = {}; - for (j = 0; j < routes.length; j++) { - r = routes[j]; - this.add(r.route, r.callback); - } - }, - start: function (action) { - process(action); - } - }; -}()); - - -/*! - * - * - * event listener manager - * - * - */ -pi.event = (function () { - "use strict"; - return { - eventsArray: {}, - fnArray: {}, - on: function (object, event, callback) { - var elm = pi(object); - - if (typeof (this.eventsArray[object]) === "undefined") { - this.eventsArray[object] = {}; - this.fnArray[object] = {}; - } - if (typeof (this.eventsArray[object][event]) === "undefined") { - this.eventsArray[object][event] = []; - this.fnArray[object][event] = []; - } - this.eventsArray[object][event].push(callback.toString()); - this.fnArray[object][event].push(callback); - elm.on(event, callback); - }, - rm: function (object, event, callback) { - var elm = pi(object), - io = this.eventsArray[object][event].indexOf(callback.toString()); - if (io !== -1) { - this.eventsArray[object][event].splice(io, 1); - this.fnArray[object][event].splice(io, 1); - elm.rm(event, callback); - } - }, - purge: function (object, event) { - var callback, - i, - l = this.eventsArray[object][event].length, - elm = pi(object); - for (i = 0; i < l; i++) { - callback = this.fnArray[object][event][i]; - elm.rm(event, callback); - } - this.eventsArray[object][event] = []; - this.fnArray[object][event] = []; - } - }; -}()); - - // -- eof diff --git a/playground/index.html b/playground/index.html index 4594c3f..b148e3c 100644 --- a/playground/index.html +++ b/playground/index.html @@ -17,15 +17,14 @@