1
0
Fork 0
mirror of https://github.com/koalyptus/TableFilter.git synced 2024-05-14 12:27:05 +02:00

Added loader module

This commit is contained in:
Max Guglielmi 2014-10-27 18:01:33 +11:00
parent 56fdc9a360
commit ffe50c8674
5 changed files with 333 additions and 155 deletions

159
dist/core.js vendored
View file

@ -958,7 +958,12 @@ TableFilter.prototype = {
this.refRow = TF.isIE ? (this.refRow+1) : 0; this.refRow = TF.isIE ? (this.refRow+1) : 0;
} }
if(this.loader){ this.SetLoader(); } if(this.loader){
//this.SetLoader();
var Loader = require('modules/loader');
this.loaderComponent = new Loader(this);
console.log(this.loaderComponent);
}
if(this.popUpFilters){ if(this.popUpFilters){
if(!this.isFirstLoad && !this.gridLayout){ if(!this.isFirstLoad && !this.gridLayout){
@ -1259,7 +1264,8 @@ TableFilter.prototype = {
} }
if(this.loader){ if(this.loader){
this.ShowLoader('none'); //this.ShowLoader('none');
this.loaderComponent.show('none');
} }
/* Loads extensions */ /* Loads extensions */
@ -1344,13 +1350,15 @@ TableFilter.prototype = {
o.StatusMsg(''); o.StatusMsg('');
} }
if(o.loader){ if(o.loader){
o.ShowLoader('none'); //o.ShowLoader('none');
o.loaderComponent.show('none');
} }
} }
if(this.loader || this.status || this.statusBar) { if(this.loader || this.status || this.statusBar) {
try{ try{
this.ShowLoader(''); //this.ShowLoader('');
this.loaderComponent.show('');
this.StatusMsg(o['msg'+evt]); this.StatusMsg(o['msg'+evt]);
} catch(e){} } catch(e){}
global.setTimeout(efx,this.execDelay); global.setTimeout(efx,this.execDelay);
@ -1542,7 +1550,8 @@ TableFilter.prototype = {
this.RemoveSort(); this.RemoveSort();
} }
if(this.loader){ if(this.loader){
this.RemoveLoader(); // this.RemoveLoader();
this.loaderComponent.remove();
} }
if(this.popUpFilters){ if(this.popUpFilters){
this.RemovePopupFilters(); this.RemovePopupFilters();
@ -1680,88 +1689,88 @@ TableFilter.prototype = {
/*==================================================== /*====================================================
- generates loader div - generates loader div
=====================================================*/ =====================================================*/
SetLoader: function(){ // SetLoader: function(){
if(this.loaderDiv){ // if(this.loaderDiv){
return; // return;
} // }
var f = this.fObj; // var f = this.fObj;
//id of container element // //id of container element
this.loaderTgtId = f.loader_target_id || null; // this.loaderTgtId = f.loader_target_id || null;
//div containing loader // //div containing loader
this.loaderDiv = null; // this.loaderDiv = null;
//defines loader text // //defines loader text
this.loaderText = f.loader_text || 'Loading...'; // this.loaderText = f.loader_text || 'Loading...';
//defines loader innerHtml // //defines loader innerHtml
this.loaderHtml = f.loader_html || null; // this.loaderHtml = f.loader_html || null;
//defines css class for loader div // //defines css class for loader div
this.loaderCssClass = f.loader_css_class || 'loader'; // this.loaderCssClass = f.loader_css_class || 'loader';
//delay for hiding loader // //delay for hiding loader
this.loaderCloseDelay = 200; // this.loaderCloseDelay = 200;
//callback function before loader is displayed // //callback function before loader is displayed
this.onShowLoader = types.isFn(f.on_show_loader) ? // this.onShowLoader = types.isFn(f.on_show_loader) ?
f.on_show_loader : null; // f.on_show_loader : null;
//callback function after loader is closed // //callback function after loader is closed
this.onHideLoader = types.isFn(f.on_hide_loader) ? // this.onHideLoader = types.isFn(f.on_hide_loader) ?
f.on_hide_loader : null; // f.on_hide_loader : null;
var containerDiv = dom.create('div',['id',this.prfxLoader+this.id]); // var containerDiv = dom.create('div',['id',this.prfxLoader+this.id]);
containerDiv.className = this.loaderCssClass;// for ie<=6 // containerDiv.className = this.loaderCssClass;// for ie<=6
var targetEl = (!this.loaderTgtId) ? // var targetEl = (!this.loaderTgtId) ?
(this.gridLayout ? this.tblCont : this.tbl.parentNode) : // (this.gridLayout ? this.tblCont : this.tbl.parentNode) :
TF.id(this.loaderTgtId); // TF.id(this.loaderTgtId);
if(!this.loaderTgtId){ // if(!this.loaderTgtId){
targetEl.insertBefore(containerDiv, this.tbl); // targetEl.insertBefore(containerDiv, this.tbl);
} else { // } else {
targetEl.appendChild(containerDiv); // targetEl.appendChild(containerDiv);
} // }
this.loaderDiv = TF.id(this.prfxLoader+this.id); // this.loaderDiv = TF.id(this.prfxLoader+this.id);
if(!this.loaderHtml){ // if(!this.loaderHtml){
this.loaderDiv.appendChild(dom.text(this.loaderText)); // this.loaderDiv.appendChild(dom.text(this.loaderText));
} else { // } else {
this.loaderDiv.innerHTML = this.loaderHtml; // this.loaderDiv.innerHTML = this.loaderHtml;
} // }
}, // },
/*==================================================== /*====================================================
- removes loader div - removes loader div
=====================================================*/ =====================================================*/
RemoveLoader: function(){ // RemoveLoader: function(){
if(!this.loaderDiv){ // if(!this.loaderDiv){
return; // return;
} // }
var targetEl = (!this.loaderTgtId) ? // var targetEl = (!this.loaderTgtId) ?
(this.gridLayout ? this.tblCont : this.tbl.parentNode) : // (this.gridLayout ? this.tblCont : this.tbl.parentNode) :
TF.id(this.loaderTgtId); // TF.id(this.loaderTgtId);
targetEl.removeChild(this.loaderDiv); // targetEl.removeChild(this.loaderDiv);
this.loaderDiv = null; // this.loaderDiv = null;
}, // },
/*==================================================== /*====================================================
- displays/hides loader div - displays/hides loader div
=====================================================*/ =====================================================*/
ShowLoader: function(p){ // ShowLoader: function(p){
if(!this.loader || !this.loaderDiv || this.loaderDiv.style.display===p){ // if(!this.loader || !this.loaderDiv || this.loaderDiv.style.display===p){
return; // return;
} // }
var o = this; // var o = this;
function displayLoader(){ // function displayLoader(){
if(!o.loaderDiv){ // if(!o.loaderDiv){
return; // return;
} // }
if(o.onShowLoader && p!=='none'){ // if(o.onShowLoader && p!=='none'){
o.onShowLoader.call(null,o); // o.onShowLoader.call(null,o);
} // }
o.loaderDiv.style.display = p; // o.loaderDiv.style.display = p;
if(o.onHideLoader && p==='none'){ // if(o.onHideLoader && p==='none'){
o.onHideLoader.call(null,o); // o.onHideLoader.call(null,o);
} // }
} // }
var t = p==='none' ? this.loaderCloseDelay : 1; // var t = p==='none' ? this.loaderCloseDelay : 1;
global.setTimeout(displayLoader,t); // global.setTimeout(displayLoader,t);
}, // },
/*==================================================== /*====================================================
- Sets sorting feature by loading - Sets sorting feature by loading

2
dist/filtergrid.css vendored
View file

@ -1,6 +1,6 @@
/*------------------------------------------------------------------------ /*------------------------------------------------------------------------
- TableFilter stylesheet by Max Guglielmi - TableFilter stylesheet by Max Guglielmi
- (build date: Sun Oct 26 2014 21:43:08) - (build date: Mon Oct 27 2014 17:57:13)
- Edit below for your projects' needs - Edit below for your projects' needs
------------------------------------------------------------------------*/ ------------------------------------------------------------------------*/

View file

@ -1,7 +1,87 @@
define(['../core'], function (require) { define(['../dom', '../types'], function (dom, types) {
'use strict'; 'use strict';
console.log(arguments); console.log(arguments);
function Loader(){}
var global = window;
function Loader(tf){
// Original configuration
var f = tf.fObj;
//id of container element
tf.loaderTgtId = f.loader_target_id || null;
//div containing loader
tf.loaderDiv = null;
//defines loader text
tf.loaderText = f.loader_text || 'Loading...';
//defines loader innerHtml
tf.loaderHtml = f.loader_html || null;
//defines css class for loader div
tf.loaderCssClass = f.loader_css_class || 'loader';
//delay for hiding loader
tf.loaderCloseDelay = 200;
//callback function before loader is displayed
tf.onShowLoader = types.isFn(f.on_show_loader) ?
f.on_show_loader : null;
//callback function after loader is closed
tf.onHideLoader = types.isFn(f.on_hide_loader) ?
f.on_hide_loader : null;
this.tf = tf;
var containerDiv = dom.create('div',['id', tf.prfxLoader+tf.id]);
containerDiv.className = tf.loaderCssClass;
var targetEl = (!tf.loaderTgtId) ?
(tf.gridLayout ? tf.tblCont : tf.tbl.parentNode) :
TF.id(tf.loaderTgtId);
if(!tf.loaderTgtId){
targetEl.insertBefore(containerDiv, tf.tbl);
} else {
targetEl.appendChild(containerDiv);
}
tf.loaderDiv = TF.id(tf.prfxLoader+tf.id);
if(!tf.loaderHtml){
tf.loaderDiv.appendChild(dom.text(tf.loaderText));
} else {
tf.loaderDiv.innerHTML = tf.loaderHtml;
}
}
Loader.prototype.show = function(p) {
if(!this.tf.loader || !this.tf.loaderDiv ||
this.tf.loaderDiv.style.display===p){
return;
}
var o = this.tf;
function displayLoader(){
if(!o.loaderDiv){
return;
}
if(o.onShowLoader && p!=='none'){
o.onShowLoader.call(null, o);
}
o.loaderDiv.style.display = p;
if(o.onHideLoader && p==='none'){
o.onHideLoader.call(null, o);
}
}
var t = p==='none' ? this.tf.loaderCloseDelay : 1;
global.setTimeout(displayLoader, t);
};
Loader.prototype.remove = function() {
if(!this.tf.loaderDiv){
return;
}
var targetEl = !this.tf.loaderTgtId ?
(this.tf.gridLayout ? this.tf.tblCont : this.tf.tbl.parentNode) :
TF.id(this.tf.loaderTgtId);
targetEl.removeChild(this.tf.loaderDiv);
this.tf.loaderDiv = null;
};
return Loader; return Loader;
}); });

View file

@ -958,7 +958,12 @@ TableFilter.prototype = {
this.refRow = TF.isIE ? (this.refRow+1) : 0; this.refRow = TF.isIE ? (this.refRow+1) : 0;
} }
if(this.loader){ this.SetLoader(); } if(this.loader){
//this.SetLoader();
var Loader = require('modules/loader');
this.loaderComponent = new Loader(this);
console.log(this.loaderComponent);
}
if(this.popUpFilters){ if(this.popUpFilters){
if(!this.isFirstLoad && !this.gridLayout){ if(!this.isFirstLoad && !this.gridLayout){
@ -1259,7 +1264,8 @@ TableFilter.prototype = {
} }
if(this.loader){ if(this.loader){
this.ShowLoader('none'); //this.ShowLoader('none');
this.loaderComponent.show('none');
} }
/* Loads extensions */ /* Loads extensions */
@ -1344,13 +1350,15 @@ TableFilter.prototype = {
o.StatusMsg(''); o.StatusMsg('');
} }
if(o.loader){ if(o.loader){
o.ShowLoader('none'); //o.ShowLoader('none');
o.loaderComponent.show('none');
} }
} }
if(this.loader || this.status || this.statusBar) { if(this.loader || this.status || this.statusBar) {
try{ try{
this.ShowLoader(''); //this.ShowLoader('');
this.loaderComponent.show('');
this.StatusMsg(o['msg'+evt]); this.StatusMsg(o['msg'+evt]);
} catch(e){} } catch(e){}
global.setTimeout(efx,this.execDelay); global.setTimeout(efx,this.execDelay);
@ -1542,7 +1550,8 @@ TableFilter.prototype = {
this.RemoveSort(); this.RemoveSort();
} }
if(this.loader){ if(this.loader){
this.RemoveLoader(); // this.RemoveLoader();
this.loaderComponent.remove();
} }
if(this.popUpFilters){ if(this.popUpFilters){
this.RemovePopupFilters(); this.RemovePopupFilters();
@ -1680,88 +1689,88 @@ TableFilter.prototype = {
/*==================================================== /*====================================================
- generates loader div - generates loader div
=====================================================*/ =====================================================*/
SetLoader: function(){ // SetLoader: function(){
if(this.loaderDiv){ // if(this.loaderDiv){
return; // return;
} // }
var f = this.fObj; // var f = this.fObj;
//id of container element // //id of container element
this.loaderTgtId = f.loader_target_id || null; // this.loaderTgtId = f.loader_target_id || null;
//div containing loader // //div containing loader
this.loaderDiv = null; // this.loaderDiv = null;
//defines loader text // //defines loader text
this.loaderText = f.loader_text || 'Loading...'; // this.loaderText = f.loader_text || 'Loading...';
//defines loader innerHtml // //defines loader innerHtml
this.loaderHtml = f.loader_html || null; // this.loaderHtml = f.loader_html || null;
//defines css class for loader div // //defines css class for loader div
this.loaderCssClass = f.loader_css_class || 'loader'; // this.loaderCssClass = f.loader_css_class || 'loader';
//delay for hiding loader // //delay for hiding loader
this.loaderCloseDelay = 200; // this.loaderCloseDelay = 200;
//callback function before loader is displayed // //callback function before loader is displayed
this.onShowLoader = types.isFn(f.on_show_loader) ? // this.onShowLoader = types.isFn(f.on_show_loader) ?
f.on_show_loader : null; // f.on_show_loader : null;
//callback function after loader is closed // //callback function after loader is closed
this.onHideLoader = types.isFn(f.on_hide_loader) ? // this.onHideLoader = types.isFn(f.on_hide_loader) ?
f.on_hide_loader : null; // f.on_hide_loader : null;
var containerDiv = dom.create('div',['id',this.prfxLoader+this.id]); // var containerDiv = dom.create('div',['id',this.prfxLoader+this.id]);
containerDiv.className = this.loaderCssClass;// for ie<=6 // containerDiv.className = this.loaderCssClass;// for ie<=6
var targetEl = (!this.loaderTgtId) ? // var targetEl = (!this.loaderTgtId) ?
(this.gridLayout ? this.tblCont : this.tbl.parentNode) : // (this.gridLayout ? this.tblCont : this.tbl.parentNode) :
TF.id(this.loaderTgtId); // TF.id(this.loaderTgtId);
if(!this.loaderTgtId){ // if(!this.loaderTgtId){
targetEl.insertBefore(containerDiv, this.tbl); // targetEl.insertBefore(containerDiv, this.tbl);
} else { // } else {
targetEl.appendChild(containerDiv); // targetEl.appendChild(containerDiv);
} // }
this.loaderDiv = TF.id(this.prfxLoader+this.id); // this.loaderDiv = TF.id(this.prfxLoader+this.id);
if(!this.loaderHtml){ // if(!this.loaderHtml){
this.loaderDiv.appendChild(dom.text(this.loaderText)); // this.loaderDiv.appendChild(dom.text(this.loaderText));
} else { // } else {
this.loaderDiv.innerHTML = this.loaderHtml; // this.loaderDiv.innerHTML = this.loaderHtml;
} // }
}, // },
/*==================================================== /*====================================================
- removes loader div - removes loader div
=====================================================*/ =====================================================*/
RemoveLoader: function(){ // RemoveLoader: function(){
if(!this.loaderDiv){ // if(!this.loaderDiv){
return; // return;
} // }
var targetEl = (!this.loaderTgtId) ? // var targetEl = (!this.loaderTgtId) ?
(this.gridLayout ? this.tblCont : this.tbl.parentNode) : // (this.gridLayout ? this.tblCont : this.tbl.parentNode) :
TF.id(this.loaderTgtId); // TF.id(this.loaderTgtId);
targetEl.removeChild(this.loaderDiv); // targetEl.removeChild(this.loaderDiv);
this.loaderDiv = null; // this.loaderDiv = null;
}, // },
/*==================================================== /*====================================================
- displays/hides loader div - displays/hides loader div
=====================================================*/ =====================================================*/
ShowLoader: function(p){ // ShowLoader: function(p){
if(!this.loader || !this.loaderDiv || this.loaderDiv.style.display===p){ // if(!this.loader || !this.loaderDiv || this.loaderDiv.style.display===p){
return; // return;
} // }
var o = this; // var o = this;
function displayLoader(){ // function displayLoader(){
if(!o.loaderDiv){ // if(!o.loaderDiv){
return; // return;
} // }
if(o.onShowLoader && p!=='none'){ // if(o.onShowLoader && p!=='none'){
o.onShowLoader.call(null,o); // o.onShowLoader.call(null,o);
} // }
o.loaderDiv.style.display = p; // o.loaderDiv.style.display = p;
if(o.onHideLoader && p==='none'){ // if(o.onHideLoader && p==='none'){
o.onHideLoader.call(null,o); // o.onHideLoader.call(null,o);
} // }
} // }
var t = p==='none' ? this.loaderCloseDelay : 1; // var t = p==='none' ? this.loaderCloseDelay : 1;
global.setTimeout(displayLoader,t); // global.setTimeout(displayLoader,t);
}, // },
/*==================================================== /*====================================================
- Sets sorting feature by loading - Sets sorting feature by loading

View file

@ -1,7 +1,87 @@
define(['../core'], function (require) { define(['../dom', '../types'], function (dom, types) {
'use strict'; 'use strict';
console.log(arguments); console.log(arguments);
function Loader(){}
var global = window;
function Loader(tf){
// Original configuration
var f = tf.fObj;
//id of container element
tf.loaderTgtId = f.loader_target_id || null;
//div containing loader
tf.loaderDiv = null;
//defines loader text
tf.loaderText = f.loader_text || 'Loading...';
//defines loader innerHtml
tf.loaderHtml = f.loader_html || null;
//defines css class for loader div
tf.loaderCssClass = f.loader_css_class || 'loader';
//delay for hiding loader
tf.loaderCloseDelay = 200;
//callback function before loader is displayed
tf.onShowLoader = types.isFn(f.on_show_loader) ?
f.on_show_loader : null;
//callback function after loader is closed
tf.onHideLoader = types.isFn(f.on_hide_loader) ?
f.on_hide_loader : null;
this.tf = tf;
var containerDiv = dom.create('div',['id', tf.prfxLoader+tf.id]);
containerDiv.className = tf.loaderCssClass;
var targetEl = (!tf.loaderTgtId) ?
(tf.gridLayout ? tf.tblCont : tf.tbl.parentNode) :
TF.id(tf.loaderTgtId);
if(!tf.loaderTgtId){
targetEl.insertBefore(containerDiv, tf.tbl);
} else {
targetEl.appendChild(containerDiv);
}
tf.loaderDiv = TF.id(tf.prfxLoader+tf.id);
if(!tf.loaderHtml){
tf.loaderDiv.appendChild(dom.text(tf.loaderText));
} else {
tf.loaderDiv.innerHTML = tf.loaderHtml;
}
}
Loader.prototype.show = function(p) {
if(!this.tf.loader || !this.tf.loaderDiv ||
this.tf.loaderDiv.style.display===p){
return;
}
var o = this.tf;
function displayLoader(){
if(!o.loaderDiv){
return;
}
if(o.onShowLoader && p!=='none'){
o.onShowLoader.call(null, o);
}
o.loaderDiv.style.display = p;
if(o.onHideLoader && p==='none'){
o.onHideLoader.call(null, o);
}
}
var t = p==='none' ? this.tf.loaderCloseDelay : 1;
global.setTimeout(displayLoader, t);
};
Loader.prototype.remove = function() {
if(!this.tf.loaderDiv){
return;
}
var targetEl = !this.tf.loaderTgtId ?
(this.tf.gridLayout ? this.tf.tblCont : this.tf.tbl.parentNode) :
TF.id(this.tf.loaderTgtId);
targetEl.removeChild(this.tf.loaderDiv);
this.tf.loaderDiv = null;
};
return Loader; return Loader;
}); });