mirror of
https://github.com/galaxyproject/galaxy.git
synced 2026-09-24 16:30:27 +08:00
Client build: modularize loading indicator from ui.js
This commit is contained in:
Carl Eberhard
@@ -0,0 +1,98 @@
|
||||
(function (root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define([], factory);
|
||||
} else {
|
||||
// Browser globals
|
||||
root.LoadingIndicator = factory();
|
||||
}
|
||||
|
||||
//============================================================================
|
||||
}(this, function () {
|
||||
//TODO: too specific to history panel
|
||||
function LoadingIndicator( $where, options ){
|
||||
|
||||
var self = this;
|
||||
// defaults
|
||||
options = jQuery.extend({
|
||||
cover : false
|
||||
}, options || {} );
|
||||
|
||||
function render(){
|
||||
var html = [
|
||||
'<div class="loading-indicator">',
|
||||
'<div class="loading-indicator-text">',
|
||||
'<span class="fa fa-spinner fa-spin fa-lg"></span>',
|
||||
'<span class="loading-indicator-message">loading...</span>',
|
||||
'</div>',
|
||||
'</div>'
|
||||
].join( '\n' );
|
||||
|
||||
var $indicator = $( html ).hide().css( options.css || {
|
||||
position : 'fixed'
|
||||
}),
|
||||
$text = $indicator.children( '.loading-indicator-text' );
|
||||
|
||||
if( options.cover ){
|
||||
$indicator.css({
|
||||
'z-index' : 2,
|
||||
top : $where.css( 'top' ),
|
||||
bottom : $where.css( 'bottom' ),
|
||||
left : $where.css( 'left' ),
|
||||
right : $where.css( 'right' ),
|
||||
opacity : 0.5,
|
||||
'background-color': 'white',
|
||||
'text-align': 'center'
|
||||
});
|
||||
$text = $indicator.children( '.loading-indicator-text' ).css({
|
||||
'margin-top' : '20px'
|
||||
});
|
||||
|
||||
} else {
|
||||
$text = $indicator.children( '.loading-indicator-text' ).css({
|
||||
margin : '12px 0px 0px 10px',
|
||||
opacity : '0.85',
|
||||
color : 'grey'
|
||||
});
|
||||
$text.children( '.loading-indicator-message' ).css({
|
||||
margin : '0px 8px 0px 0px',
|
||||
'font-style' : 'italic'
|
||||
});
|
||||
}
|
||||
return $indicator;
|
||||
}
|
||||
|
||||
self.show = function( msg, speed, callback ){
|
||||
msg = msg || 'loading...';
|
||||
speed = speed || 'fast';
|
||||
// remove previous
|
||||
$where.parent().find( '.loading-indicator' ).remove();
|
||||
// since position is fixed - we insert as sibling
|
||||
self.$indicator = render().insertBefore( $where );
|
||||
self.message( msg );
|
||||
self.$indicator.fadeIn( speed, callback );
|
||||
return self;
|
||||
};
|
||||
|
||||
self.message = function( msg ){
|
||||
self.$indicator.find( 'i' ).text( msg );
|
||||
};
|
||||
|
||||
self.hide = function( speed, callback ){
|
||||
speed = speed || 'fast';
|
||||
if( self.$indicator && self.$indicator.size() ){
|
||||
self.$indicator.fadeOut( speed, function(){
|
||||
self.$indicator.remove();
|
||||
if( callback ){ callback(); }
|
||||
});
|
||||
} else {
|
||||
if( callback ){ callback(); }
|
||||
}
|
||||
return self;
|
||||
};
|
||||
return self;
|
||||
}
|
||||
|
||||
//============================================================================
|
||||
return LoadingIndicator;
|
||||
}));
|
||||
@@ -1,9 +1,10 @@
|
||||
define([
|
||||
"mvc/list/list-item",
|
||||
"jq-plugins/ui/loading-indicator",
|
||||
"mvc/base-mvc",
|
||||
"utils/localization",
|
||||
"jq-plugins/ui/search-input"
|
||||
], function( LIST_ITEM, BASE_MVC, _l ){
|
||||
], function( LIST_ITEM, LoadingIndicator, BASE_MVC, _l ){
|
||||
/* ============================================================================
|
||||
TODO:
|
||||
|
||||
|
||||
@@ -514,90 +514,3 @@ var faIconButton = function( options ){
|
||||
}
|
||||
return $button;
|
||||
};
|
||||
|
||||
|
||||
//==============================================================================
|
||||
function LoadingIndicator( $where, options ){
|
||||
//TODO: move out of global
|
||||
//TODO: too specific to history panel
|
||||
|
||||
var self = this;
|
||||
// defaults
|
||||
options = jQuery.extend({
|
||||
cover : false
|
||||
}, options || {} );
|
||||
|
||||
function render(){
|
||||
var html = [
|
||||
'<div class="loading-indicator">',
|
||||
'<div class="loading-indicator-text">',
|
||||
'<span class="fa fa-spinner fa-spin fa-lg"></span>',
|
||||
'<span class="loading-indicator-message">loading...</span>',
|
||||
'</div>',
|
||||
'</div>'
|
||||
].join( '\n' );
|
||||
|
||||
var $indicator = $( html ).hide().css( options.css || {
|
||||
position : 'fixed'
|
||||
}),
|
||||
$text = $indicator.children( '.loading-indicator-text' );
|
||||
|
||||
if( options.cover ){
|
||||
$indicator.css({
|
||||
'z-index' : 2,
|
||||
top : $where.css( 'top' ),
|
||||
bottom : $where.css( 'bottom' ),
|
||||
left : $where.css( 'left' ),
|
||||
right : $where.css( 'right' ),
|
||||
opacity : 0.5,
|
||||
'background-color': 'white',
|
||||
'text-align': 'center'
|
||||
});
|
||||
$text = $indicator.children( '.loading-indicator-text' ).css({
|
||||
'margin-top' : '20px'
|
||||
});
|
||||
|
||||
} else {
|
||||
$text = $indicator.children( '.loading-indicator-text' ).css({
|
||||
margin : '12px 0px 0px 10px',
|
||||
opacity : '0.85',
|
||||
color : 'grey'
|
||||
});
|
||||
$text.children( '.loading-indicator-message' ).css({
|
||||
margin : '0px 8px 0px 0px',
|
||||
'font-style' : 'italic'
|
||||
});
|
||||
}
|
||||
return $indicator;
|
||||
}
|
||||
|
||||
self.show = function( msg, speed, callback ){
|
||||
msg = msg || 'loading...';
|
||||
speed = speed || 'fast';
|
||||
// remove previous
|
||||
$where.parent().find( '.loading-indicator' ).remove();
|
||||
// since position is fixed - we insert as sibling
|
||||
self.$indicator = render().insertBefore( $where );
|
||||
self.message( msg );
|
||||
self.$indicator.fadeIn( speed, callback );
|
||||
return self;
|
||||
};
|
||||
|
||||
self.message = function( msg ){
|
||||
self.$indicator.find( 'i' ).text( msg );
|
||||
};
|
||||
|
||||
self.hide = function( speed, callback ){
|
||||
speed = speed || 'fast';
|
||||
if( self.$indicator && self.$indicator.size() ){
|
||||
self.$indicator.fadeOut( speed, function(){
|
||||
self.$indicator.remove();
|
||||
if( callback ){ callback(); }
|
||||
});
|
||||
} else {
|
||||
if( callback ){ callback(); }
|
||||
}
|
||||
return self;
|
||||
};
|
||||
return self;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,98 @@
|
||||
(function (root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define([], factory);
|
||||
} else {
|
||||
// Browser globals
|
||||
root.LoadingIndicator = factory();
|
||||
}
|
||||
|
||||
//============================================================================
|
||||
}(this, function () {
|
||||
//TODO: too specific to history panel
|
||||
function LoadingIndicator( $where, options ){
|
||||
|
||||
var self = this;
|
||||
// defaults
|
||||
options = jQuery.extend({
|
||||
cover : false
|
||||
}, options || {} );
|
||||
|
||||
function render(){
|
||||
var html = [
|
||||
'<div class="loading-indicator">',
|
||||
'<div class="loading-indicator-text">',
|
||||
'<span class="fa fa-spinner fa-spin fa-lg"></span>',
|
||||
'<span class="loading-indicator-message">loading...</span>',
|
||||
'</div>',
|
||||
'</div>'
|
||||
].join( '\n' );
|
||||
|
||||
var $indicator = $( html ).hide().css( options.css || {
|
||||
position : 'fixed'
|
||||
}),
|
||||
$text = $indicator.children( '.loading-indicator-text' );
|
||||
|
||||
if( options.cover ){
|
||||
$indicator.css({
|
||||
'z-index' : 2,
|
||||
top : $where.css( 'top' ),
|
||||
bottom : $where.css( 'bottom' ),
|
||||
left : $where.css( 'left' ),
|
||||
right : $where.css( 'right' ),
|
||||
opacity : 0.5,
|
||||
'background-color': 'white',
|
||||
'text-align': 'center'
|
||||
});
|
||||
$text = $indicator.children( '.loading-indicator-text' ).css({
|
||||
'margin-top' : '20px'
|
||||
});
|
||||
|
||||
} else {
|
||||
$text = $indicator.children( '.loading-indicator-text' ).css({
|
||||
margin : '12px 0px 0px 10px',
|
||||
opacity : '0.85',
|
||||
color : 'grey'
|
||||
});
|
||||
$text.children( '.loading-indicator-message' ).css({
|
||||
margin : '0px 8px 0px 0px',
|
||||
'font-style' : 'italic'
|
||||
});
|
||||
}
|
||||
return $indicator;
|
||||
}
|
||||
|
||||
self.show = function( msg, speed, callback ){
|
||||
msg = msg || 'loading...';
|
||||
speed = speed || 'fast';
|
||||
// remove previous
|
||||
$where.parent().find( '.loading-indicator' ).remove();
|
||||
// since position is fixed - we insert as sibling
|
||||
self.$indicator = render().insertBefore( $where );
|
||||
self.message( msg );
|
||||
self.$indicator.fadeIn( speed, callback );
|
||||
return self;
|
||||
};
|
||||
|
||||
self.message = function( msg ){
|
||||
self.$indicator.find( 'i' ).text( msg );
|
||||
};
|
||||
|
||||
self.hide = function( speed, callback ){
|
||||
speed = speed || 'fast';
|
||||
if( self.$indicator && self.$indicator.size() ){
|
||||
self.$indicator.fadeOut( speed, function(){
|
||||
self.$indicator.remove();
|
||||
if( callback ){ callback(); }
|
||||
});
|
||||
} else {
|
||||
if( callback ){ callback(); }
|
||||
}
|
||||
return self;
|
||||
};
|
||||
return self;
|
||||
}
|
||||
|
||||
//============================================================================
|
||||
return LoadingIndicator;
|
||||
}));
|
||||
@@ -1,9 +1,10 @@
|
||||
define([
|
||||
"mvc/list/list-item",
|
||||
"jq-plugins/ui/loading-indicator",
|
||||
"mvc/base-mvc",
|
||||
"utils/localization",
|
||||
"jq-plugins/ui/search-input"
|
||||
], function( LIST_ITEM, BASE_MVC, _l ){
|
||||
], function( LIST_ITEM, LoadingIndicator, BASE_MVC, _l ){
|
||||
/* ============================================================================
|
||||
TODO:
|
||||
|
||||
|
||||
@@ -514,90 +514,3 @@ var faIconButton = function( options ){
|
||||
}
|
||||
return $button;
|
||||
};
|
||||
|
||||
|
||||
//==============================================================================
|
||||
function LoadingIndicator( $where, options ){
|
||||
//TODO: move out of global
|
||||
//TODO: too specific to history panel
|
||||
|
||||
var self = this;
|
||||
// defaults
|
||||
options = jQuery.extend({
|
||||
cover : false
|
||||
}, options || {} );
|
||||
|
||||
function render(){
|
||||
var html = [
|
||||
'<div class="loading-indicator">',
|
||||
'<div class="loading-indicator-text">',
|
||||
'<span class="fa fa-spinner fa-spin fa-lg"></span>',
|
||||
'<span class="loading-indicator-message">loading...</span>',
|
||||
'</div>',
|
||||
'</div>'
|
||||
].join( '\n' );
|
||||
|
||||
var $indicator = $( html ).hide().css( options.css || {
|
||||
position : 'fixed'
|
||||
}),
|
||||
$text = $indicator.children( '.loading-indicator-text' );
|
||||
|
||||
if( options.cover ){
|
||||
$indicator.css({
|
||||
'z-index' : 2,
|
||||
top : $where.css( 'top' ),
|
||||
bottom : $where.css( 'bottom' ),
|
||||
left : $where.css( 'left' ),
|
||||
right : $where.css( 'right' ),
|
||||
opacity : 0.5,
|
||||
'background-color': 'white',
|
||||
'text-align': 'center'
|
||||
});
|
||||
$text = $indicator.children( '.loading-indicator-text' ).css({
|
||||
'margin-top' : '20px'
|
||||
});
|
||||
|
||||
} else {
|
||||
$text = $indicator.children( '.loading-indicator-text' ).css({
|
||||
margin : '12px 0px 0px 10px',
|
||||
opacity : '0.85',
|
||||
color : 'grey'
|
||||
});
|
||||
$text.children( '.loading-indicator-message' ).css({
|
||||
margin : '0px 8px 0px 0px',
|
||||
'font-style' : 'italic'
|
||||
});
|
||||
}
|
||||
return $indicator;
|
||||
}
|
||||
|
||||
self.show = function( msg, speed, callback ){
|
||||
msg = msg || 'loading...';
|
||||
speed = speed || 'fast';
|
||||
// remove previous
|
||||
$where.parent().find( '.loading-indicator' ).remove();
|
||||
// since position is fixed - we insert as sibling
|
||||
self.$indicator = render().insertBefore( $where );
|
||||
self.message( msg );
|
||||
self.$indicator.fadeIn( speed, callback );
|
||||
return self;
|
||||
};
|
||||
|
||||
self.message = function( msg ){
|
||||
self.$indicator.find( 'i' ).text( msg );
|
||||
};
|
||||
|
||||
self.hide = function( speed, callback ){
|
||||
speed = speed || 'fast';
|
||||
if( self.$indicator && self.$indicator.size() ){
|
||||
self.$indicator.fadeOut( speed, function(){
|
||||
self.$indicator.remove();
|
||||
if( callback ){ callback(); }
|
||||
});
|
||||
} else {
|
||||
if( callback ){ callback(); }
|
||||
}
|
||||
return self;
|
||||
};
|
||||
return self;
|
||||
}
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
(function(a,b){if(typeof define==="function"&&define.amd){define([],b)}else{a.LoadingIndicator=b()}}(this,function(){function a(b,d){var c=this;d=jQuery.extend({cover:false},d||{});function e(){var f=['<div class="loading-indicator">','<div class="loading-indicator-text">','<span class="fa fa-spinner fa-spin fa-lg"></span>','<span class="loading-indicator-message">loading...</span>',"</div>","</div>"].join("\n");var h=$(f).hide().css(d.css||{position:"fixed"}),g=h.children(".loading-indicator-text");if(d.cover){h.css({"z-index":2,top:b.css("top"),bottom:b.css("bottom"),left:b.css("left"),right:b.css("right"),opacity:0.5,"background-color":"white","text-align":"center"});g=h.children(".loading-indicator-text").css({"margin-top":"20px"})}else{g=h.children(".loading-indicator-text").css({margin:"12px 0px 0px 10px",opacity:"0.85",color:"grey"});g.children(".loading-indicator-message").css({margin:"0px 8px 0px 0px","font-style":"italic"})}return h}c.show=function(g,f,h){g=g||"loading...";f=f||"fast";b.parent().find(".loading-indicator").remove();c.$indicator=e().insertBefore(b);c.message(g);c.$indicator.fadeIn(f,h);return c};c.message=function(f){c.$indicator.find("i").text(f)};c.hide=function(f,g){f=f||"fast";if(c.$indicator&&c.$indicator.size()){c.$indicator.fadeOut(f,function(){c.$indicator.remove();if(g){g()}})}else{if(g){g()}}return c};return c}return a}));
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user