feature(load) loader -> load

This commit is contained in:
coderaiser 2014-05-28 03:36:07 -04:00
parent 52e910d981
commit 7c80be01a8
19 changed files with 228 additions and 252 deletions

View file

@ -43,7 +43,7 @@
lib + 'cloudfunc.js',
client + 'dom.js',
client + 'rest.js',
client + 'loader.js',
client + 'load.js',
client + 'notify.js',
client + 'storage.js',
lib + 'client.js',

View file

@ -128,7 +128,7 @@ var Util, DOM, CloudFunc;
Util.exec(doBefore);
return DOM.jsload(pathFull, func ||
return DOM.load.js(pathFull, func ||
function() {
var Proto = CloudCmd[name];
@ -160,8 +160,8 @@ var Util, DOM, CloudFunc;
CloudCmd.OLD_BROWSER = true;
DOM.jqueryLoad(function() {
DOM.jsload(src, callback);
DOM.load.jquery(function() {
DOM.load.js(src, callback);
});
};
@ -294,7 +294,7 @@ var Util, DOM, CloudFunc;
function lGetSysFile(callback) {
Util.exec.if(pGlobal, callback, function() {
DOM.ajax({
DOM.load.ajax({
url : pURL,
success : function(pLocal) {
pGlobal = pLocal;

View file

@ -64,7 +64,7 @@ var CloudCmd, Util, DOM;
obj = Util.copyObj(CONFIG);
changeConfig(obj);
data = Util.render(Template, obj);
div = DOM.anyload({
div = DOM.load({
name : 'div',
className : 'config',
inner : data.toString()

View file

@ -30,7 +30,7 @@ var CloudCmd, Util, DOM, CloudFunc, $;
Loading = true;
Util.exec.series([
DOM.jqueryLoad,
DOM.loadJquery,
CloudCmd.View,
load,
CloudCmd.Socket,
@ -50,7 +50,7 @@ var CloudCmd, Util, DOM, CloudFunc, $;
Images.showLoad({top:true});
if (!Element) {
Element = DOM.anyload({
Element = DOM.load({
name : 'div',
className : 'console'
});
@ -142,7 +142,7 @@ var CloudCmd, Util, DOM, CloudFunc, $;
cssAll
];
DOM.loadParallel(files, function() {
DOM.load.parallel(files, function() {
Util.timeEnd(Name + ' load');
Loading = false;

View file

@ -39,7 +39,7 @@ var CloudCmd, Util, DOM, CloudFunc, Dialog;
init();
element = DOM.anyload({
element = DOM.load({
name : 'span',
id : 'js-status-image',
className : 'icon',
@ -598,18 +598,18 @@ var CloudCmd, Util, DOM, CloudFunc, Dialog;
* load jquery from google cdn or local copy
* @param callback
*/
this.jqueryLoad = function(callback) {
this.loadJquery = function(callback) {
CloudCmd.getConfig(function(config) {
var online = config.online && navigator.onLine;
Util.exec.if(!online,
function() {
DOM.jsload('/lib/client/jquery.js', {
DOM.load.js('/lib/client/jquery.js', {
onload: callback
});
},
function(func) {
DOM.jquery({
DOM.load.jquery({
onload: callback,
onerror: func
});
@ -620,7 +620,7 @@ var CloudCmd, Util, DOM, CloudFunc, Dialog;
/** function loads css and js of Menu
* @param callback
*/
this.menuLoad = function(callback) {
this.loadMenu = function(callback) {
var Images = DOM.Images,
dir = CloudCmd.LIBDIRCLIENT + 'menu/',
files = [
@ -629,7 +629,7 @@ var CloudCmd, Util, DOM, CloudFunc, Dialog;
];
Images.showLoad();
DOM.loadParallel(files, function() {
DOM.load.parallel(files, function() {
Images.hide();
Util.exec(callback);
});
@ -1257,7 +1257,7 @@ var CloudCmd, Util, DOM, CloudFunc, Dialog;
this.setTitle = function(name) {
if (!Title)
Title = DOM.getByTag('title')[0] ||
DOM.anyload({
DOM.load({
name :'title',
innerHTML : name,
parentElement : document.head

View file

@ -49,7 +49,7 @@ var CloudCmd, Util, DOM, CloudFunc, ace, DiffProto, diff_match_patch, Zip, MenuI
Images.showLoad();
if (!Element) {
Element = DOM.anyload({
Element = DOM.load({
name : 'div',
style :
'width : 100%;' +
@ -169,7 +169,7 @@ var CloudCmd, Util, DOM, CloudFunc, ace, DiffProto, diff_match_patch, Zip, MenuI
DIR + 'ext-emmet.js'
]);
DOM.jsload(url, function() {
DOM.load.js(url, function() {
Emmet = ace.require('ace/ext/emmet');
Emmet.setCore(window.emmet);
Util.exec(callback);
@ -300,7 +300,7 @@ var CloudCmd, Util, DOM, CloudFunc, ace, DiffProto, diff_match_patch, Zip, MenuI
],
url = CloudFunc.getJoinURL(libs);
DOM.jsload(url, function() {
DOM.load.js(url, function() {
var patch,
isAllowed = DOM.Storage.isAllowed();
@ -331,7 +331,7 @@ var CloudCmd, Util, DOM, CloudFunc, ace, DiffProto, diff_match_patch, Zip, MenuI
],
url = CloudFunc.getJoinURL(libs);
DOM.jsload(url, function() {
DOM.load.js(url, function() {
Zip.pack(value, callback);
});
}
@ -348,7 +348,7 @@ var CloudCmd, Util, DOM, CloudFunc, ace, DiffProto, diff_match_patch, Zip, MenuI
};
Util.exec.if(JSHintConfig, func, function() {
DOM.ajax({
DOM.load.ajax({
url : JSHINT_PATH,
success : function(data) {
JSHintConfig = Util.parseJSON(data);
@ -365,7 +365,7 @@ var CloudCmd, Util, DOM, CloudFunc, ace, DiffProto, diff_match_patch, Zip, MenuI
Util.exec.if(EditConfig, function() {
func(EditConfig);
}, function() {
DOM.ajax({
DOM.load.ajax({
url : CONFIG_PATH,
success : function(data) {
EditConfig = data;
@ -376,7 +376,7 @@ var CloudCmd, Util, DOM, CloudFunc, ace, DiffProto, diff_match_patch, Zip, MenuI
}
function setMenu(element) {
DOM.menuLoad(function() {
DOM.loadMenu(function() {
var position = CloudCmd.MousePosition,
options = {
beforeShow: function(params) {
@ -420,7 +420,7 @@ var CloudCmd, Util, DOM, CloudFunc, ace, DiffProto, diff_match_patch, Zip, MenuI
Util.time(Name + ' load');
DOM.loadSeries([ace, url], function() {
DOM.load.series([ace, url], function() {
Util.timeEnd(Name + ' load');
Loading = false;
Util.exec(callback);
@ -470,7 +470,7 @@ var CloudCmd, Util, DOM, CloudFunc, ace, DiffProto, diff_match_patch, Zip, MenuI
HIDE_TIME = 2000;
if (!Msg) {
DOM.cssSet({
DOM.load.style({
id : 'msg-css',
inner : '#js-view .msg {' +
'z-index' + ': 1;' +
@ -486,7 +486,7 @@ var CloudCmd, Util, DOM, CloudFunc, ace, DiffProto, diff_match_patch, Zip, MenuI
});
parent = Element;
Msg = DOM.anyload({
Msg = DOM.load({
name : 'div',
className : 'msg',
parent : parent

View file

@ -339,7 +339,7 @@ var Util, DOM, CloudCmd;
}
function online() {
var cssSet = DOM.cssSet.bind(null, {
var cssSet = DOM.load.style.bind(null, {
id :'local-droids-font',
element : document.head,
inner : '@font-face {font-family: "Droid Sans Mono";' +

View file

@ -3,15 +3,132 @@ var Util, DOM;
(function (Util, DOMTree) {
'use strict';
var Loader = Util.extendProto(LoaderProto),
DOMProto = Object.getPrototypeOf(DOMTree);
var DOMProto = Object.getPrototypeOf(DOMTree);
Util.extend(DOMProto, Loader);
DOMProto.load = new LoaderProto();
function LoaderProto() {
var Images = DOM.Images,
Events = DOM.Events,
Loader = this;
Events = DOM.Events;
/**
* Функция создаёт элемент и загружает файл с 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,
* notAppend - false by default
* }
*/
function load (params) {
var element, onError, type,
p = params,
func = p.func,
isObj = Util.isObject(func),
name = p.name,
parent = p.parent || document.body,
/*
* if passed arguments function
* then it's onload by default
*
* if object - then onload and onerror
*/
funcLoad = function(event) {
Events.remove('load', funcLoad, element);
Events.remove('error', funcError, element);
Util.exec(func, event);
},
funcError = function() {
var template = 'file {{ src }} could not be loaded',
msg = Util.render(template, {
src: p.src
});
parent.removeChild(element);
Images.showError(msg);
Util.exec(onError);
};
if (isObj) {
onError = func.onerror;
func = func.onload;
}
/* убираем путь к файлу, оставляя только название файла */
if (!p.id && p.src)
p.id = load.getIdBySrc(p.src);
element = DOM.getById(p.id);
if (element) {
Util.exec(func);
} else {
element = document.createElement(name);
if (name === 'script' || name === 'link') {
Events.add('load', funcLoad, element);
Events.addError(funcError, element);
}
if (p.id)
element.id = p.id;
if (p.className)
element.className = p.className;
if (p.src) {
/* if work with css use href */
if (name === 'link') {
element.href = p.src;
element.rel = 'stylesheet';
} else
element.src = p.src;
}
if (p.attribute) {
type = Util.getType(p.attribute);
switch(type) {
case 'string':
element.setAttribute(p.attribute, '');
break;
case 'object':
Object.keys(p.attribute).forEach(function(name) {
element.setAttribute(name, p.attribute[name]);
});
break;
}
}
if (p.style)
element.style.cssText = p.style;
if (p.async && name === 'script' || p.async === undefined)
element.async = true;
if (!p.notAppend)
parent.appendChild(element);
if (p.inner)
element.innerHTML = p.inner;
}
return element;
}
/**
* Function gets id by src
@ -19,7 +136,7 @@ var Util, DOM;
*
* Example: http://domain.com/1.js -> 1_js
*/
this.getIdBySrc = function(src) {
load.getIdBySrc = function(src) {
var num, sub, id,
isStr = Util.isString(src);
@ -41,7 +158,7 @@ var Util, DOM;
*
* @param pParams
*/
this.ajax = function(params) {
load.ajax = function(params) {
var p = params, countProgress,
type = p.type || p.method || 'GET',
xhr = new XMLHttpRequest();
@ -102,6 +219,29 @@ var Util, DOM;
xhr.send(p.data);
};
load.ext = function(src, func) {
var element,
ext = Util.getExt(src);
switch (ext) {
case '.js':
element = load.js(src, func);
break;
case '.css':
element = load.css(src, func);
break;
default:
element = load({
src : src,
func : func
});
}
return element;
};
/**
* create elements and load them to DOM-tree
* one-by-one
@ -109,25 +249,19 @@ var Util, DOM;
* @param params
* @param callback
*/
this.loadSeries = function(params, callback) {
var funcs = [],
func = function(src, func) {
Loader.anyload({
src : src,
func : func
});
};
if (params) {
load.series = function(params, callback) {
var funcs = [];
if (params) {
funcs = params.map(function(url) {
return Util.exec.with(func, url);
return load.ext.bind(null, url);
})
.concat(callback);
Util.exec.series(funcs);
}
return Loader;
return load;
};
/**
@ -138,183 +272,45 @@ var Util, DOM;
* @param params
* @param callback - onload function
*/
this.loadParallel = function(params, callback) {
var funcs = [],
func = function (param, callback) {
Loader.anyload({
src : param,
func: callback
});
};
load.parallel = function(params, callback) {
var funcs = [];
if (params) {
funcs = params.map(function(param) {
return Util.exec.with(func, param);
funcs = params.map(function(url) {
return load.ext.bind(null, url);
});
Util.exec.parallel(funcs, callback);
}
return Loader;
return load;
};
/**
* Функция создаёт элемент и загружает файл с 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,
* notAppend - false by default
* }
*/
this.anyload = function(params) {
var element, ext, onError, type,
p = params,
name = params.name,
func = params.func,
parent = params.parent || document.body,
isObj = Util.isObject(func),
/*
* if passed arguments function
* then it's onload by default
*
* if object - then onload and onerror
*/
funcLoad = function(event) {
Events.remove('load', funcLoad, element);
Events.remove('error', funcError, element);
Util.exec(func, event);
},
funcError = function() {
var template = 'file {{ src }} could not be loaded',
msg = Util.render(template, {
src: p.src
});
parent.removeChild(element);
Images.showError(msg);
Util.exec(onError);
};
if (isObj) {
onError = func.onerror;
func = func.onload;
}
/* убираем путь к файлу, оставляя только название файла */
if (!p.id && p.src)
p.id = DOM.getIdBySrc(p.src);
element = DOM.getById(p.id);
if (element) {
Util.exec(func);
} else {
if (!name && p.src) {
ext = Util.getExt(p.src);
switch (ext) {
case '.js':
name = 'script';
break;
case '.css':
name = 'link';
parent = document.head;
break;
}
}
element = document.createElement(name);
Events.add('load', funcLoad, element);
Events.addError(funcError, element);
if (p.id)
element.id = p.id;
if (p.className)
element.className = p.className;
if (p.src) {
/* if work with css use href */
if (name === 'link') {
element.href = p.src;
element.rel = 'stylesheet';
} else
element.src = p.src;
}
if (p.attribute) {
type = Util.getType(p.attribute);
switch(type) {
case 'string':
element.setAttribute(p.attribute, '');
break;
case 'object':
Object.keys(p.attribute).forEach(function(name) {
element.setAttribute(name, p.attribute[name]);
});
break;
}
}
if (p.style)
element.style.cssText = p.style;
if (p.async && name === 'script' || p.async === undefined)
element.async = true;
if (!p.notAppend)
parent.appendChild(element);
if (p.inner)
element.innerHTML = p.inner;
}
return element;
},
/**
* Функция загружает js-файл
*
* @param pSrc
* @param pFunc
*/
this.jsload = function(pSrc, pFunc) {
var lRet = Loader.anyload({
load.js = function(src, func) {
var element = load({
name : 'script',
src : pSrc,
func : pFunc
src : src,
func : func
});
return lRet;
return element;
},
/**
* returns jsload functions
*/
this.retJSLoad = function(pSrc, pFunc) {
var lRet = function() {
return Loader.jsload(pSrc, pFunc);
};
load.css = function(src, callback) {
var element = load({
name : 'link',
src : src,
parent : document.head,
func : callback
});
return lRet;
},
return element;
};
/**
* Функция создаёт елемент style и записывает туда стили
@ -322,52 +318,32 @@ var Util, DOM;
* образом: {src: ' ',func: '', id: '', element: '', inner: ''}
* все параметры опциональны
*/
this.cssSet = function(pParams_o) {
pParams_o.name = 'style';
pParams_o.parent = pParams_o.parent || document.head;
load.style = function(params) {
if (!params.name)
params.name = 'style';
return Loader.anyload(pParams_o);
if (!params.parent)
params.parent = document.head;
return load(params);
},
/**
* 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(paramObj) {
load.jquery = function(paramObj) {
var params = paramObj || {},
onload = params.onload,
onerror = params.onerror;
/* загружаем jquery: */
Loader.jsload('//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js', {
load('//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js', {
onload : onload,
onerror : onerror
});
};
return load;
}
})(Util, DOM);

View file

@ -42,7 +42,7 @@ var CloudCmd, Util, DOM;
}
Markdown.read(name, function(result) {
var div = DOM.anyload({
var div = DOM.load({
name : 'div',
className : 'help',
inner : result

View file

@ -23,7 +23,7 @@ var CloudCmd, Util, DOM, CloudFunc, MenuIO;
Loading = true;
Util.exec.series([
DOM.menuLoad,
DOM.loadMenu,
Menu.show
]);
@ -213,7 +213,7 @@ var CloudCmd, Util, DOM, CloudFunc, MenuIO;
path = CloudFunc.FS + path + '?download' + dir;
element = DOM.anyload({
element = DOM.load({
id : id + '-' + date,
name : 'iframe',
async : false,

View file

@ -4,7 +4,7 @@ var Util, DOM, jQuery;
'use strict';
if (!window.XMLHttpRequest || !document.head)
DOM.ajax = $.ajax;
DOM.load.ajax = $.ajax;
/* setting head ie6 - ie8 */
if (!document.head) {

View file

@ -159,7 +159,7 @@ var Util, DOM, CloudFunc;
p.url = apiURL + p.url;
DOM.ajax({
DOM.load.ajax({
method : p.method,
url : p.url,
data : data,

View file

@ -27,7 +27,7 @@ var CloudCmd, Util, DOM, CloudFunc, io;
Socket.DISCONNECTED = DISCONNECTED;
function init(callback) {
DOM.jsload('/socket.io/socket.io.js', {
DOM.load.js('/socket.io/socket.io.js', {
onerror : Util.log.bind(Util, ERROR_MSG),
onload : function() {
Util.exec(callback);

View file

@ -24,7 +24,7 @@ var CloudCmd, DOM, Dropbox;
console.time('dropbox load');
CloudCmd.getConfig(function(pConfig){
var lElement = DOM.anyload({
var lElement = DOM.load({
src : CHOOSER_API,
notAppend : true,
id : 'dropboxjs',

View file

@ -35,7 +35,7 @@ var CloudCmd, Util, DOM, filepicker;
filepicker.pick(function(fpFile) {
Util.log(fpFile);
DOM.ajax({
DOM.load.ajax({
url : fpFile.url,
responseType :'arraybuffer',
success : function(data) {

View file

@ -69,7 +69,7 @@ var CloudCmd, Util, DOM, CloudFunc, Github, cb;
if (!isContain)
DOM.openWindow(URL);
else
DOM.ajax({
DOM.load.ajax({
type : 'put',
url : apiURL + '/auth',
data : Util.rmStr(code, '?code='),

View file

@ -65,7 +65,7 @@ var CloudCmd, Util, DOM, VK;
data = params.data,
name = params.name;
DOM.ajax({
DOM.load.ajax({
type : 'POST',
url : url,
data : {

View file

@ -49,7 +49,7 @@ var CloudCmd, Util, DOM, CloudFunc, Terminal;
Images.showLoad({top:true});
if (!Element) {
Element = DOM.anyload({
Element = DOM.load({
name : 'div',
id : 'terminal',
style : 'height :100%'
@ -60,7 +60,7 @@ var CloudCmd, Util, DOM, CloudFunc, Terminal;
*
* https://github.com/petethepig/devtools-terminal
*/
Cell = DOM.anyload({
Cell = DOM.load({
name : 'div',
inner : '&nbsp',
parent : Element,
@ -172,7 +172,7 @@ var CloudCmd, Util, DOM, CloudFunc, Terminal;
Util.time(Name + ' load');
DOM.jsload(path, function() {
DOM.load.js(path, function() {
Util.timeEnd(Name + ' load');
Loading = false;

View file

@ -53,12 +53,12 @@ var CloudCmd, Util, DOM, CloudFunc, $;
Loading = true;
Util.exec.series([
DOM.jqueryLoad,
DOM.loadJquery,
load,
func
]);
Config.parent = Overlay = DOM.anyload({
Config.parent = Overlay = DOM.load({
id : 'js-view',
name : 'div',
className : 'view-overlay fancybox-overlay fancybox-overlay-fixed'
@ -102,7 +102,7 @@ var CloudCmd, Util, DOM, CloudFunc, $;
} else {
Images.showLoad();
path = CloudFunc.FS + Info.path;
path = Info.path;
type = getType(path);
switch(type) {
@ -266,8 +266,8 @@ var CloudCmd, Util, DOM, CloudFunc, $;
* if join css that do not minified
* all images would not be loaded
*/
DOM.loadParallel(files, func)
.cssSet({
DOM.load.parallel(files, func)
.style({
id:'view-css',
inner : '#fancybox-loading {' +
'display: none' +