Locked with css and FA spinner

mlt · Nov 28, 2019 · 15634b9 · 15634b9
1 parent f8b080a
commit 15634b9
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 11 deletions.
diff --git a/app/assets/images/pacman-loader.gif b/app/assets/images/pacman-loader.gif
diff --git a/app/assets/images/standard-loader.gif b/app/assets/images/standard-loader.gif
diff --git a/app/assets/javascripts/tabulatr/_tabulatr.js b/app/assets/javascripts/tabulatr/_tabulatr.js
@@ -3,7 +3,6 @@ function Tabulatr(id){
   this.name = '';
   this.moreResults = true;
   this.currentData = null;
-  this.locked = false;
   this.isAPersistedTable = false;
   this.initialRequest = true;
   this.hasInfiniteScrolling = false;
@@ -15,8 +14,8 @@ Tabulatr.prototype = {
   updateTable: function(hash, forceReload) {
     var $table = $('#'+ this.id);
     this.storePage = this.pageShouldBeStored(hash.page, forceReload);
-    if((this.storePage && this.retrievePage($table, hash)) || this.locked){ return; }
-    this.locked = true;
+    if((this.storePage && this.retrievePage($table, hash)) ||
+      $table.parents('.tabulatr-outer-wrapper').hasClass('locked')){ return; }
     this.showLoadingSpinner();
     this.loadDataFromServer(hash);
   },
@@ -130,8 +129,7 @@ Tabulatr.prototype = {
 
   handleError: function(){
     if(this.isAPersistedTable && this.initialRequest){
-      this.initialRequest = false;
-      this.locked = false;
+      this.hideLoadingSpinner();
       this.resetTable();
     }
   },
@@ -226,13 +224,12 @@ Tabulatr.prototype = {
   },
 
   showLoadingSpinner: function(){
-    $('.tabulatr-spinner-box[data-table="'+ this.id +'"]').show();
+    $('.tabulatr-outer-wrapper[data-table-id="' + this.id + '"]').addClass('locked');
   },
 
   hideLoadingSpinner: function(){
     this.initialRequest = false;
-    this.locked = false;
-    $('.tabulatr-spinner-box[data-table="'+ this.id +'"]').hide();
+    $('.tabulatr-outer-wrapper[data-table-id="' + this.id + '"]').removeClass('locked');
   },
 
   updateInfoString: function(tableId, response){

diff --git a/app/assets/stylesheets/tabulatr.scss b/app/assets/stylesheets/tabulatr.scss
@@ -182,13 +182,34 @@
   }
 
   .tabulatr-spinner-box{
+    //position: absolute;
+    // margin: 0 -ceil(($grid-gutter-width / 2)) 0 -floor(($grid-gutter-width / 2));
     width: 100%;
-    height: 50px;
+    width: -moz-available;          /* WebKit-based browsers will ignore this. */
+    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
+    width: fill-available;
+    height: 5em;
+    margin-bottom: -5em;
+    padding-top: 3em;
     display: none;
     position: relative;
     text-align: center;
   }
 
+  &.locked {
+    pointer-events: none;
+    .tabulatr-spinner-box {
+      display: block;
+      z-index: 999;
+    }
+    .table-responsive {
+      min-height: 9em;
+    }
+    table.tabulatr_table {
+      opacity: 0.5;
+    }
+  }
+
   .tabulatr-filter-row{
     label{
       display: block;

diff --git a/app/views/tabulatr/_tabulatr_actual_table.html.slim b/app/views/tabulatr/_tabulatr_actual_table.html.slim
@@ -21,6 +21,8 @@
 
 
 .table-responsive
+  .tabulatr-spinner-box data-table=table_id
+    i.fa.fa-spinner.fa-spin.fa-5x aria-hidden="false" aria-label="Loading"
   table class=table_options[:html_class] id=table_id data-path=table_options[:path] data-pagesize=table_options[:pagesize] data-pagesizes=table_options[:pagesizes] data-persistent=table_options[:persistent].to_s data-sort_by=table_options[:order_by]
     thead
       tr
@@ -36,6 +38,4 @@
           - classes = column.col_options.sortable ? ['tabulatr-sortable'] : []
           - classes = [classes, "tabulatr-column-#{column.coltype}", column.col_options.classes].flatten.compact.join(' ')
           = content_tag('td', column.col_options.data_html.merge(:'data-tabulatr-column-name' => column.full_name, :'data-tabulatr-type' => column.coltype, class: classes)){}
-  .tabulatr-spinner-box data-table=table_id
-    = image_tag "#{Tabulatr.spinner}-loader.gif"
 span.pagination_trigger data-table="#{table_id}"