Merge pull request #39 from soumayatcm/5.2

Add custom loader to EvoluGrid

Author: moufmouf

doc/evolugrid_php.md

@@ -37,6 +37,7 @@ $evoluGrid->setId('myGridId'); // Set the HTML ID of the grid
 $evoluGrid->setClass('table'); // Set the CSS class of the grid
 $evoluGrid->setExportCSV(true); // Whether CSV export is available
 $evoluGrid->setInfiniteScroll(true); // Whether to use infinite scroll or pagination
+$evoluGrid->setCustomLoader(new HtmlString('<div class="my_loader"></div>')); // Set a custom loader
 
 // Outputs the HTML and Javascript to display the grid.
 $evoluGrid->toHtml();

js/evolugrid.js

@@ -216,9 +216,7 @@
 	    	var descriptor = $.extend(true, {}, defaultOptions, options);
 	    	return this.each(function(){
                 $(this).data('descriptor', descriptor);
-                
                 var $this = $(this);
-                
                 if (descriptor.infiniteScroll) {               	
                 	// We initialise the infinite scroll
                 	scrollReady = true;
@@ -355,6 +353,7 @@
             	   }
 			   } else {
 				   $this.next('div.ajaxLoader').hide();
+
 			   }
  	        });
 	    },
@@ -594,7 +593,6 @@
 		    		$(descriptor.filterForm).find("button").attr("disabled", false);
 		    		$(descriptor.filterForm).find("input[type=button]").attr("disabled", false);
 		    	}
-		    	
 		    	//We hide the ajax loader
 		    	$this.next('div.ajaxLoader').hide();
 
@@ -766,7 +764,7 @@
 
                     //set additionnal data
                     additionnalData = data.additionnalData;
-			    	
+
 			    	//We hide the ajax loader
 			    	$this.next('div.ajaxLoader').hide();
 

src/Mouf/Html/Widgets/EvoluGrid/EvoluGrid.php

@@ -141,6 +141,13 @@ class EvoluGrid implements HtmlElementInterface
      */
     private $chevronDownClass;
 
+    /**
+     * If the customLoader is set, this property allows setting a custom loader
+     *
+     * @var HtmlElementInterface
+     */
+    private $customLoader;
+
     /**
      * Message to display if no results are shown.
      *
@@ -385,6 +392,19 @@ public function setRowEventListeners($rowEventListeners)
         return $this;
     }
 
+    /**
+     * An object generating HTML for the loader.
+     *
+     * The generated HTML MUST use
+     *
+     * @param HtmlElementInterface $customLoader
+     * @return $this
+     */
+    public function setCustomLoader($customLoader) {
+        $this->customLoader = $customLoader;
+        return $this;
+    }
+	
     /**
      * @param string $onResultShown
      */
@@ -512,12 +532,20 @@ public function toHtml()
         }
         echo '
 				<div id="'.$id.'"></div>';
-        if ($this->infiniteScroll) {
-            echo '<div class="ajaxLoader" style="text-align: center; margin-top: 20px; margin-bottom: 20px; display: none;"><img src="'.ROOT_URL.'vendor/mouf/html.widgets.evolugrid/img/ajax-loader.gif" alt="ajax-loader"></div>';
+
+        /** if the customLoader is set we use it instead of the default one **/
+        if ($this->customLoader) {
+            echo '<div class="ajaxLoader">';
+            $this->customLoader->toHtml();
+            echo '</div>';
         } else {
-            echo '<div class="ajaxLoader" style="text-align: center; background-color: black; width: 100%; height: 100%; position: absolute; top: 0; opacity: 0.3"><img src="'.ROOT_URL.'vendor/mouf/html.widgets.evolugrid/img/ajax-loader.gif" alt="ajax-loader" style="margin-top: -20px; position: absolute; top: 50%;"></div>';
+            if ($this->infiniteScroll) {
+                echo '<div class="ajaxLoader" style="text-align: center; margin-top: 20px; margin-bottom: 20px; display: none;"><img src="'.ROOT_URL.'vendor/mouf/html.widgets.evolugrid/img/ajax-loader.gif" alt="ajax-loader"></div>';
+            } else {
+                echo '<div class="ajaxLoader" style="text-align: center; background-color: black; width: 100%; height: 100%; position: absolute; top: 0; opacity: 0.3"><img src="'.ROOT_URL.'vendor/mouf/html.widgets.evolugrid/img/ajax-loader.gif" alt="ajax-loader" style="margin-top: -20px; position: absolute; top: 50%;"></div>';
+            }
         }
-        echo '</div>
+		echo '</div>
 			<script type="text/javascript">
                 (function($) {
                     $(document).ready(function() {