TPS
/
ORIENT
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add alignment and size options to loader indicator (#3522) 

Add option to horizontally align the loader indicator in the center and option to change the size (only small size available for now) through the JavaScript API. These abilities were already available through CSS, this commit makes them available through JS as well.
This commit is contained in:
Wellyson Freitas 2018-04-21 12:28:18 -03:00 committed by Luke Towers
parent 92e346296e
commit 2ffae8ccbc
2 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
modules/system/assets/ui/js/loader.base.js
View File

@ -12,6 +12,8 @@
* JavaScript API:
*
* $('#buttons').loadIndicator({ text: 'Saving...', opaque: true }) - display the indicator in a solid (opaque) state
* $('#buttons').loadIndicator({ centered: true }) - display the indicator aligned in the center horizontally
* $('#buttons').loadIndicator({ size: small }) - display the indicator in small size
* $('#buttons').loadIndicator({ text: 'Saving...' }) - display the indicator in a transparent state
* $('#buttons').loadIndicator('hide') - display the indicator
*/
@ -47,6 +49,12 @@
if (this.options.opaque !== undefined) {
indicator.addClass('is-opaque')
}
if (this.options.centered !== undefined) {
indicator.addClass('indicator-center')
}
if (this.options.size === 'small') {
indicator.addClass('size-small')
}
this.$el.prepend(indicator)
this.$el.addClass('in-progress')
@ -114,7 +122,9 @@
indicatorContainer = $(this).closest('.loading-indicator-container'),
loadingText = $(this).data('load-indicator'),
options = {
opaque: $(this).data('load-indicator-opaque')
opaque: $(this).data('load-indicator-opaque'),
centered: $(this).data('load-indicator-centered'),
size: $(this).data('load-indicator-size')
}
if (loadingText)

4
modules/system/assets/ui/storm-min.js vendored
View File

@ -3431,6 +3431,8 @@ var indicator=$('<div class="loading-indicator"></div>')
indicator.append($('<div></div>').text(this.options.text))
indicator.append($('<span></span>'))
if(this.options.opaque!==undefined){indicator.addClass('is-opaque')}
if(this.options.centered!==undefined){indicator.addClass('indicator-center')}
if(this.options.size==='small'){indicator.addClass('size-small')}
this.$el.prepend(indicator)
this.$el.addClass('in-progress')
this.tally++}
@ -3450,7 +3452,7 @@ $.fn.loadIndicator.Constructor=LoadIndicator
$.fn.loadIndicator.noConflict=function(){$.fn.loadIndicator=old
return this}
$(document).on('ajaxPromise','[data-load-indicator]',function(){var
indicatorContainer=$(this).closest('.loading-indicator-container'),loadingText=$(this).data('load-indicator'),options={opaque:$(this).data('load-indicator-opaque')}
indicatorContainer=$(this).closest('.loading-indicator-container'),loadingText=$(this).data('load-indicator'),options={opaque:$(this).data('load-indicator-opaque'),centered:$(this).data('load-indicator-centered'),size:$(this).data('load-indicator-size')}
if(loadingText)
options.text=loadingText
indicatorContainer.loadIndicator(options)}).on('ajaxFail ajaxDone','[data-load-indicator]',function(){$(this).closest('.loading-indicator-container').loadIndicator('hide')})}(window.jQuery);+function($){"use strict";if($.oc===undefined)