From 2ffae8ccbc5e40792270a0ce9b7e8850963daf42 Mon Sep 17 00:00:00 2001
From: Wellyson Freitas <wellyfrs@gmail.com>
Date: Sat, 21 Apr 2018 12:28:18 -0300
Subject: [PATCH] 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.
---
 modules/system/assets/ui/js/loader.base.js | 12 +++++++++++-
 modules/system/assets/ui/storm-min.js      |  4 +++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/modules/system/assets/ui/js/loader.base.js b/modules/system/assets/ui/js/loader.base.js
index 637361c0b..439fe9513 100644
--- a/modules/system/assets/ui/js/loader.base.js
+++ b/modules/system/assets/ui/js/loader.base.js
@@ -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)
diff --git a/modules/system/assets/ui/storm-min.js b/modules/system/assets/ui/storm-min.js
index 38525f6a9..3c8d9bef5 100644
--- a/modules/system/assets/ui/storm-min.js
+++ b/modules/system/assets/ui/storm-min.js
@@ -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)