From a5e57a2d6f493bcb179bd46bacb043ff08002083 Mon Sep 17 00:00:00 2001 From: coderaiser Date: Fri, 3 Jan 2014 08:14:58 +0000 Subject: [PATCH] feature(loader) add --- html/index.html | 1 + lib/client/dom.js | 409 +------------------------------------------ lib/client/loader.js | 405 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 412 insertions(+), 403 deletions(-) create mode 100644 lib/client/loader.js diff --git a/html/index.html b/html/index.html index e55efe90..150a73b6 100644 --- a/html/index.html +++ b/html/index.html @@ -40,6 +40,7 @@ client + 'key.js', client + 'listeners.js', lib + 'client.js', + client + 'loader.js', client + 'dom.js', lib + 'cloudfunc.js', lib + 'util.js' diff --git a/lib/client/dom.js b/lib/client/dom.js index a5bb453d..daeaea1c 100644 --- a/lib/client/dom.js +++ b/lib/client/dom.js @@ -212,7 +212,7 @@ var CloudCmd, Util, DOM, CloudFunc, Dialog; lData = p.data; p.url = pConfig && pConfig.apiURL + p.url, - Loader.ajax({ + DOM.ajax({ method : p.method, url : p.url, data : lData, @@ -691,401 +691,6 @@ var CloudCmd, Util, DOM, CloudFunc, Dialog; }; }, - LoaderProto = function() { - var Loader = this; - - /** - * Function gets id by src - * @param pSrc - * - * Example: http://domain.com/1.js -> 1_js - */ - this.getIdBySrc = function(pSrc) { - var lRet = Util.isString(pSrc); - - if (lRet) { - var lNum = pSrc.lastIndexOf('/') + 1, - lSub = pSrc.substr(pSrc, lNum), - lID = Util.removeStrOneTime(pSrc, lSub ); - - /* убираем точки */ - while (lID.indexOf('.') > 0) - lID = lID.replace('.', '_'); - - lRet = lID; - } - - return lRet; - }; - - /** - * load file countent thrue ajax - * - * @param pParams - */ - this.ajax = function(pParams) { - var xhr, p, lType, - lRet = Util.checkObjTrue(pParams, ['url', 'success']); - - if (lRet) { - p = pParams, - lType = p.type || p.method || 'GET'; - xhr = new XMLHttpRequest(); - - xhr.open(lType, pParams.url, true); - - if (p.responseType) - xhr.responseType = p.responseType; - - Events.add('progress', function(event) { - var percent, count, msg; - - if (event.lengthComputable) { - percent = (event.loaded / event.total) * 100, - count = Math.round(percent), - msg = lType + ' ' + p.url + ': ' + count + '%'; - Util.log(msg); - } - - }, xhr.upload); - - Events.add('readystatechange', function(pEvent) { - if (xhr.readyState === 4 /* Complete */) { - var lJqXHR = pEvent.target, - TYPE_JSON = 'application/json', - lType = xhr.getResponseHeader('content-type'); - - if (xhr.status === 200 /* OK */) { - var lData = lJqXHR.response; - - if (p.dataType !== 'text') - /* If it's json - parse it as json */ - if (lType && Util.isContainStr(lType, TYPE_JSON)) - lData = Util.parseJSON(lJqXHR.response) || lJqXHR.response; - - Util.exec(p.success, lData, lJqXHR.statusText, lJqXHR); - } - /* file not found or connection lost */ - else { - /* if html given or something like thet - * getBack just status of result - */ - if (lType && lType.indexOf('text/plain') !== 0) - lJqXHR.responseText = lJqXHR.statusText; - - Util.exec(p.error, lJqXHR); - } - } - }, xhr); - - xhr.send(p.data); - } - - return lRet; - }; - - /** - * create elements and load them to DOM-tree - * one-by-one - * - * @param pParams_a - * @param pFunc - onload function - */ - this.anyLoadOnLoad = function(pParams_a, pFunc) { - if (Util.isArray(pParams_a)) { - var lParam = pParams_a.pop(), - lFunc = function() { - Loader.anyLoadOnLoad(pParams_a, pFunc); - }; - - if (Util.isString(lParam)) - lParam = { src : lParam }; - else if (Util.isArray(lParam)) { - - Loader.anyLoadInParallel(lParam, lFunc); - } - - if (lParam && !lParam.func) { - lParam.func = lFunc; - - Loader.anyload(lParam); - - } else - Util.exec(pFunc); - } - - return Loader; - }; - - /** - * improve callback of funcs so - * we pop number of function and - * if it's last we call pCallBack - * - * @param pParams_a - * @param pFunc - onload function - */ - this.anyLoadInParallel = function(pParams_a, pFunc) { - var lDone = [], - - lDoneFunc = function (pCallBack) { - Util.exec(pCallBack); - - if (!lDone.pop()) - Util.exec(pFunc); - }; - - if (!Util.isArray(pParams_a)) { - pParams_a = [pParams_a]; - } - - for(var i = 0, n = pParams_a.length; i < n; i++) { - var lParam = pParams_a.pop(); - - if (lParam) { - lDone.push(i); - - if (Util.isString(lParam)) - lParam = { src : lParam }; - - var lFunc = lParam.func; - lParam.func = Util.retExec(lDoneFunc, lFunc); - - Loader.anyload(lParam); - } - } - - return Loader; - }; - - /** - * Функция создаёт элемент и загружает файл с src. - * - * @param pParams_o = { - * name, - название тэга - * src', - путь к файлу - * func, - обьект, содержаий одну из функций - * или сразу две onload и onerror - * {onload: function() {}, onerror: function();} - * style, - * id, - * element, - * async, - true by default - * inner: 'id{color:red, }, - * class, - * not_append - false by default - * } - */ - this.anyload = function(pParams_o) { - var i, n, lElements_a; - - if (!pParams_o ) return; - - /* if a couple of params was - * processing every of params - * and quit - */ - if (Util.isArray(pParams_o)) { - lElements_a = []; - for(i = 0, n = pParams_o.length; i < n ; i++) - lElements_a[i] = this.anyload(pParams_o[i]); - - return lElements_a; - } - - var lName = pParams_o.name, - lAttr = pParams_o.attribute, - lID = pParams_o.id, - lClass = pParams_o.className, - lSrc = pParams_o.src, - lFunc = pParams_o.func, - lOnError, - lAsync = pParams_o.async, - lParent = pParams_o.parent || document.body, - lInner = pParams_o.inner, - lStyle = pParams_o.style, - lNotAppend = pParams_o.not_append; - - if (Util.isObject(lFunc)) { - lOnError = lFunc.onerror; - lFunc = lFunc.onload; - } - /* убираем путь к файлу, оставляя только название файла */ - if (!lID && lSrc) - lID = DOM.getIdBySrc(lSrc); - - var lElement = DOMTree.getById(lID); - - /* если скрипт еще не загружен */ - if (!lElement) { - if (!lName && lSrc) { - - var lDot = lSrc.lastIndexOf('.'), - lExt = lSrc.substr(lDot); - switch(lExt) { - case '.js': - lName = 'script'; - break; - case '.css': - lName = 'link'; - lParent = document.head; - break; - default: - return {code: -1, text: 'name can not be empty'}; - } - } - lElement = document.createElement(lName); - - if (lID) - lElement.id = lID; - - if (lClass) - lElement.className = lClass; - - if (lSrc) { - /* if work with css use href */ - if (lName === 'link') { - lElement.href = lSrc; - lElement.rel = 'stylesheet'; - } else - lElement.src = lSrc; - - /* - * if passed arguments function - * then it's onload by default - * - * if object - then onload and onerror - */ - var lLoad = function(pEvent) { - Events.remove('load', lLoad, lElement); - Events.remove('error', lError, lElement); - - Util.exec(lFunc, pEvent); - }, - - lError = function() { - lParent.removeChild(lElement); - - Images.showError({ - responseText: 'file ' + - lSrc + - ' could not be loaded', - status : 404 - }); - - Util.exec(lOnError); - }; - - Events.add('load', lLoad, lElement); - Events.addError(lError, lElement); - } - - if (lAttr) - for(i in lAttr) - lElement.setAttribute(i, lAttr[i]); - - if (lStyle) - lElement.style.cssText = lStyle; - - if (lAsync || lAsync === undefined) - lElement.async = true; - - if (!lNotAppend) - lParent.appendChild(lElement); - - if (lInner) - lElement.innerHTML = lInner; - } - /* если js-файл уже загружен - * запускаем функцию onload - */ - else - Util.exec(lFunc); - - return lElement; - }, - - /** - * Функция загружает js-файл - * - * @param pSrc - * @param pFunc - */ - this.jsload = function(pSrc, pFunc) { - var lRet = Loader.anyload({ - name : 'script', - src : pSrc, - func : pFunc - }); - - return lRet; - }, - - /** - * returns jsload functions - */ - this.retJSLoad = function(pSrc, pFunc) { - var lRet = function() { - return Loader.jsload(pSrc, pFunc); - }; - - return lRet; - }, - - - /** - * Функция создаёт елемент style и записывает туда стили - * @param pParams_o - структура параметров, заполняеться таким - * образом: {src: ' ',func: '', id: '', element: '', inner: ''} - * все параметры опциональны - */ - this.cssSet = function(pParams_o) { - pParams_o.name = 'style'; - pParams_o.parent = pParams_o.parent || document.head; - - return Loader.anyload(pParams_o); - }, - - /** - * Function loads external css files - * @pParams_o - структура параметров, заполняеться таким - * образом: {src: ' ',func: '', id: '', element: '', inner: ''} - * все параметры опциональны - */ - this.cssLoad = function(pParams_o) { - if (Util.isArray(pParams_o)) { - for(var i = 0, n = pParams_o.length; i < n; i++) { - pParams_o[i].name = 'link'; - pParams_o[i].parent = pParams_o.parent || document.head; - } - - return Loader.anyload(pParams_o); - } - - else if (Util.isString(pParams_o)) - pParams_o = { src: pParams_o }; - - pParams_o.name = 'link'; - pParams_o.parent = pParams_o.parent || document.head; - - return Loader.anyload(pParams_o); - }; - - /** - * load jquery from google cdn or local copy - * @param pParams - */ - this.jquery = function(pParams) { - if (!pParams) - pParams = {}; - /* загружаем jquery: */ - Loader.jsload('//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js',{ - onload : pParams.onload, - onerror : pParams.onerror - }); - }; - - }, CmdProto = function() { var Cmd = this, CurrentInfo = {}, @@ -1117,12 +722,12 @@ var CloudCmd, Util, DOM, CloudFunc, Dialog; Util.ifExec(!online, function() { - Loader.jsload('/lib/client/jquery.js', { + DOM.jsload('/lib/client/jquery.js', { onload: pCallBack }); }, function(callback) { - Loader.jquery({ + DOM.jquery({ onload: pCallBack, onerror: callback }); @@ -1135,7 +740,7 @@ var CloudCmd, Util, DOM, CloudFunc, Dialog; * @param pCallBack */ this.socketLoad = function(pCallBack) { - Loader.jsload('/lib/client/socket.js', pCallBack); + DOM.jsload('/lib/client/socket.js', pCallBack); }; /** @@ -1650,7 +1255,7 @@ var CloudCmd, Util, DOM, CloudFunc, Dialog; this.setTitle = function(pName) { if (!Title) Title = DOMTree.getByTag('title')[0] || - Loader.anyload({ + DOM.anyload({ name:'title', parentElement: document.head, innerHTML: pName @@ -2185,7 +1790,6 @@ var CloudCmd, Util, DOM, CloudFunc, Dialog; DOMTree = Util.extendProto(DOMTreeProto), Events = Util.extendProto(EventsProto), Notify = Util.extendProto(NotifyProto), - Loader = Util.extendProto(LoaderProto), Images = Util.extendProto(ImagesProto), RESTful = Util.extendProto(RESTfulProto), Storage = Util.extendProto(StorageProto); @@ -2195,8 +1799,7 @@ var CloudCmd, Util, DOM, CloudFunc, Dialog; Dialog = new DialogProto(); Util.extend(DOMProto, [ - DOMTree, - Loader, { + DOMTree, { Events : Events, RESTful : RESTful, Images : Images, diff --git a/lib/client/loader.js b/lib/client/loader.js new file mode 100644 index 00000000..3e8beab6 --- /dev/null +++ b/lib/client/loader.js @@ -0,0 +1,405 @@ +(function (Util, DOMTree) { + 'use strict'; + + var Events = DOM.Events, + Loader = Util.extendProto(LoaderProto), + DOMProto = Object.getPrototypeOf(DOMTree); + + Util.extend(DOMProto, Loader); + + function LoaderProto() { + var Loader = this; + + /** + * Function gets id by src + * @param pSrc + * + * Example: http://domain.com/1.js -> 1_js + */ + this.getIdBySrc = function(pSrc) { + var lRet = Util.isString(pSrc); + + if (lRet) { + var lNum = pSrc.lastIndexOf('/') + 1, + lSub = pSrc.substr(pSrc, lNum), + lID = Util.removeStrOneTime(pSrc, lSub ); + + /* убираем точки */ + while (lID.indexOf('.') > 0) + lID = lID.replace('.', '_'); + + lRet = lID; + } + + return lRet; + }; + + /** + * load file countent thrue ajax + * + * @param pParams + */ + this.ajax = function(pParams) { + var xhr, p, lType, + lRet = Util.checkObjTrue(pParams, ['url', 'success']); + + if (lRet) { + p = pParams, + lType = p.type || p.method || 'GET'; + xhr = new XMLHttpRequest(); + + xhr.open(lType, pParams.url, true); + + if (p.responseType) + xhr.responseType = p.responseType; + + Events.add('progress', function(event) { + var percent, count, msg; + + if (event.lengthComputable) { + percent = (event.loaded / event.total) * 100, + count = Math.round(percent), + msg = lType + ' ' + p.url + ': ' + count + '%'; + Util.log(msg); + } + + }, xhr.upload); + + Events.add('readystatechange', function(pEvent) { + if (xhr.readyState === 4 /* Complete */) { + var lJqXHR = pEvent.target, + TYPE_JSON = 'application/json', + lType = xhr.getResponseHeader('content-type'); + + if (xhr.status === 200 /* OK */) { + var lData = lJqXHR.response; + + if (p.dataType !== 'text') + /* If it's json - parse it as json */ + if (lType && Util.isContainStr(lType, TYPE_JSON)) + lData = Util.parseJSON(lJqXHR.response) || lJqXHR.response; + + Util.exec(p.success, lData, lJqXHR.statusText, lJqXHR); + } + /* file not found or connection lost */ + else { + /* if html given or something like thet + * getBack just status of result + */ + if (lType && lType.indexOf('text/plain') !== 0) + lJqXHR.responseText = lJqXHR.statusText; + + Util.exec(p.error, lJqXHR); + } + } + }, xhr); + + xhr.send(p.data); + } + + return lRet; + }; + + /** + * create elements and load them to DOM-tree + * one-by-one + * + * @param pParams_a + * @param pFunc - onload function + */ + this.anyLoadOnLoad = function(pParams_a, pFunc) { + if (Util.isArray(pParams_a)) { + var lParam = pParams_a.pop(), + lFunc = function() { + Loader.anyLoadOnLoad(pParams_a, pFunc); + }; + + if (Util.isString(lParam)) + lParam = { src : lParam }; + else if (Util.isArray(lParam)) { + + Loader.anyLoadInParallel(lParam, lFunc); + } + + if (lParam && !lParam.func) { + lParam.func = lFunc; + + Loader.anyload(lParam); + + } else + Util.exec(pFunc); + } + + return Loader; + }; + + /** + * improve callback of funcs so + * we pop number of function and + * if it's last we call pCallBack + * + * @param pParams_a + * @param pFunc - onload function + */ + this.anyLoadInParallel = function(pParams_a, pFunc) { + var lDone = [], + + lDoneFunc = function (pCallBack) { + Util.exec(pCallBack); + + if (!lDone.pop()) + Util.exec(pFunc); + }; + + if (!Util.isArray(pParams_a)) { + pParams_a = [pParams_a]; + } + + for(var i = 0, n = pParams_a.length; i < n; i++) { + var lParam = pParams_a.pop(); + + if (lParam) { + lDone.push(i); + + if (Util.isString(lParam)) + lParam = { src : lParam }; + + var lFunc = lParam.func; + lParam.func = Util.retExec(lDoneFunc, lFunc); + + Loader.anyload(lParam); + } + } + + return Loader; + }; + + /** + * Функция создаёт элемент и загружает файл с src. + * + * @param pParams_o = { + * name, - название тэга + * src', - путь к файлу + * func, - обьект, содержаий одну из функций + * или сразу две onload и onerror + * {onload: function() {}, onerror: function();} + * style, + * id, + * element, + * async, - true by default + * inner: 'id{color:red, }, + * class, + * not_append - false by default + * } + */ + this.anyload = function(pParams_o) { + var i, n, lElements_a; + + if (!pParams_o ) return; + + /* if a couple of params was + * processing every of params + * and quit + */ + if (Util.isArray(pParams_o)) { + lElements_a = []; + for(i = 0, n = pParams_o.length; i < n ; i++) + lElements_a[i] = this.anyload(pParams_o[i]); + + return lElements_a; + } + + var lName = pParams_o.name, + lAttr = pParams_o.attribute, + lID = pParams_o.id, + lClass = pParams_o.className, + lSrc = pParams_o.src, + lFunc = pParams_o.func, + lOnError, + lAsync = pParams_o.async, + lParent = pParams_o.parent || document.body, + lInner = pParams_o.inner, + lStyle = pParams_o.style, + lNotAppend = pParams_o.not_append; + + if (Util.isObject(lFunc)) { + lOnError = lFunc.onerror; + lFunc = lFunc.onload; + } + /* убираем путь к файлу, оставляя только название файла */ + if (!lID && lSrc) + lID = DOM.getIdBySrc(lSrc); + + var lElement = DOMTree.getById(lID); + + /* если скрипт еще не загружен */ + if (!lElement) { + if (!lName && lSrc) { + + var lDot = lSrc.lastIndexOf('.'), + lExt = lSrc.substr(lDot); + switch(lExt) { + case '.js': + lName = 'script'; + break; + case '.css': + lName = 'link'; + lParent = document.head; + break; + default: + return {code: -1, text: 'name can not be empty'}; + } + } + lElement = document.createElement(lName); + + if (lID) + lElement.id = lID; + + if (lClass) + lElement.className = lClass; + + if (lSrc) { + /* if work with css use href */ + if (lName === 'link') { + lElement.href = lSrc; + lElement.rel = 'stylesheet'; + } else + lElement.src = lSrc; + + /* + * if passed arguments function + * then it's onload by default + * + * if object - then onload and onerror + */ + var lLoad = function(pEvent) { + Events.remove('load', lLoad, lElement); + Events.remove('error', lError, lElement); + + Util.exec(lFunc, pEvent); + }, + + lError = function() { + lParent.removeChild(lElement); + + Images.showError({ + responseText: 'file ' + + lSrc + + ' could not be loaded', + status : 404 + }); + + Util.exec(lOnError); + }; + + Events.add('load', lLoad, lElement); + Events.addError(lError, lElement); + } + + if (lAttr) + for(i in lAttr) + lElement.setAttribute(i, lAttr[i]); + + if (lStyle) + lElement.style.cssText = lStyle; + + if (lAsync || lAsync === undefined) + lElement.async = true; + + if (!lNotAppend) + lParent.appendChild(lElement); + + if (lInner) + lElement.innerHTML = lInner; + } + /* если js-файл уже загружен + * запускаем функцию onload + */ + else + Util.exec(lFunc); + + return lElement; + }, + + /** + * Функция загружает js-файл + * + * @param pSrc + * @param pFunc + */ + this.jsload = function(pSrc, pFunc) { + var lRet = Loader.anyload({ + name : 'script', + src : pSrc, + func : pFunc + }); + + return lRet; + }, + + /** + * returns jsload functions + */ + this.retJSLoad = function(pSrc, pFunc) { + var lRet = function() { + return Loader.jsload(pSrc, pFunc); + }; + + return lRet; + }, + + + /** + * Функция создаёт елемент style и записывает туда стили + * @param pParams_o - структура параметров, заполняеться таким + * образом: {src: ' ',func: '', id: '', element: '', inner: ''} + * все параметры опциональны + */ + this.cssSet = function(pParams_o) { + pParams_o.name = 'style'; + pParams_o.parent = pParams_o.parent || document.head; + + return Loader.anyload(pParams_o); + }, + + /** + * Function loads external css files + * @pParams_o - структура параметров, заполняеться таким + * образом: {src: ' ',func: '', id: '', element: '', inner: ''} + * все параметры опциональны + */ + this.cssLoad = function(pParams_o) { + if (Util.isArray(pParams_o)) { + for(var i = 0, n = pParams_o.length; i < n; i++) { + pParams_o[i].name = 'link'; + pParams_o[i].parent = pParams_o.parent || document.head; + } + + return Loader.anyload(pParams_o); + } + + else if (Util.isString(pParams_o)) + pParams_o = { src: pParams_o }; + + pParams_o.name = 'link'; + pParams_o.parent = pParams_o.parent || document.head; + + return Loader.anyload(pParams_o); + }; + + /** + * load jquery from google cdn or local copy + * @param pParams + */ + this.jquery = function(pParams) { + if (!pParams) + pParams = {}; + /* загружаем jquery: */ + Loader.jsload('//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js',{ + onload : pParams.onload, + onerror : pParams.onerror + }); + }; + + }; +})(Util, DOM);