Buttons inside a popup support new `data-popup-load-indicator` attribute.

Other minor improvements

CHANGELOG.md

@@ -1,6 +1,11 @@
+* **Build 125** (2014-07-xx)
+  - New shorthand method for `$this->getClassExtension('Backend.Behaviors.FormController')` becomes `$this->asExtension('FormController')`.
+  - Buttons inside a popup support new `data-popup-load-indicator` attribute.
+
 * **Build 124** (2014-07-17)
   - Improvements to Twig functions and filters.
   - URL, HTML and Form helpers are now available in Twig.
+  - The DataGrid form widget has been moved to a standard widget called Grid.
 
 * **Build 122** (2014-07-15)
   - Restyled the CMS tabs

modules/backend/assets/css/october.css

@@ -11518,7 +11518,8 @@ ul.status-list li span.status.info {
 .control-breadcrumb li:last-child:after {
   content: '';
 }
-.control-breadcrumb + .content-tabs {
+.control-breadcrumb + .content-tabs,
+.control-breadcrumb + .padded-container {
   margin-top: -20px;
 }
 body.slim-container .control-breadcrumb {

modules/backend/assets/js/october.popup.js

@@ -38,6 +38,11 @@
         this.$modal = this.$target.modal({ show: false, backdrop: false, keyboard: this.options.keyboard })
         this.isAjax = this.options.handler || this.options.ajax
 
+        /*
+         * Duplicate the popup reference on the .control-popup container
+         */
+        this.$target.data('oc.popup', this)
+
         /*
          * Hook in to BS Modal events
          */
@@ -156,7 +161,7 @@
 
             this.$backdrop.addClass('in')
 
-            this.$backdrop.append($('<div class="popup-loading-indicator modal-content" />'))
+            this.$backdrop.append($('<div class="modal-content popup-loading-indicator" />'))
         }
         else if (!val && this.$backdrop) {
             this.$backdrop.remove()
@@ -168,7 +173,7 @@
         if (!this.$backdrop)
             return;
 
-        var self = this;
+        var self = this
         if (val) {
             setTimeout(function(){ self.$backdrop.addClass('loading'); }, 100)
         }
@@ -177,6 +182,15 @@
         }
     }
 
+    Popup.prototype.hideLoading = function(val) {
+        this.setLoading(false)
+
+        // Wait for animations to complete
+        var self = this
+        setTimeout(function() { self.setBackdrop(false) }, 250)
+        setTimeout(function() { self.hide() }, 500)
+    }
+
     Popup.prototype.triggerEvent = function(eventName, params) {
         if (!params)
             params = [this.$el, this.$modal]
@@ -265,4 +279,15 @@
         return false
     });
 
+    $(document)
+        .on('ajaxPromise', '[data-popup-load-indicator]', function() {
+            $(this).closest('.control-popup').removeClass('in').popup('setLoading', true)
+        })
+        .on('ajaxFail', '[data-popup-load-indicator]', function() {
+            $(this).closest('.control-popup').addClass('in').popup('setLoading', false)
+        })
+        .on('ajaxDone', '[data-popup-load-indicator]', function() {
+            $(this).closest('.control-popup').popup('hideLoading')
+        })
+
 }(window.jQuery);

modules/backend/assets/less/controls/breadcrumb.less

@@ -40,7 +40,7 @@
         }
     }
 
-    + .content-tabs {
+    + .content-tabs, + .padded-container {
         margin-top: -20px;
     }
 }

modules/backend/classes/Controller.php

@@ -494,8 +494,11 @@ class Controller extends Extendable
      * @param  array  $params  Extra parameters
      * @return string
      */
-    public function makeHintPartial($name, $partial, array $params = [])
+    public function makeHintPartial($name, $partial = null, array $params = [])
     {
+        if (!$partial)
+            $partial = $name;
+
         return $this->makeLayoutPartial('hint', [
             'hintName'    => $name,
             'hintPartial' => $partial,

modules/backend/widgets/grid/assets/js/datagrid.js

@@ -22,13 +22,16 @@
         this.options   = options
         this.$el       = $(element)
 
+        this.columnHeaders = this.options.columnHeaders
         this.staticWidths = this.options.columnWidths
         this.gridInstance = null
         this.columns = validateColumns(this.options.columns)
 
         // Init
         var handsontableOptions = {
-            colHeaders: this.options.columnHeaders,
+            colHeaders: function(columnIndex) {
+                return self.columnHeaders[columnIndex]
+            },
             colWidths: function(columnIndex) {
                 return self.staticWidths[columnIndex]
             },
@@ -150,6 +153,10 @@
         confirmMessage: 'Are you sure?'
     }
 
+    DataGrid.prototype.setHeaderValue = function(index, value) {
+        this.columnHeaders[index] = value
+    }
+
     DataGrid.prototype.getDataAtRow = function(row) {
         if (!row && row !== 0)
             row = this.getSelectedRow()

modules/backend/widgets/grid/assets/vendor/handsontable/jquery.handsontable.js

@@ -16,6 +16,11 @@
  * - Custom checkboxes
  * - Removed native scrollbars
  *
+ * @todo
+ *  - Add a Column strategy for even distribution of 0 width columns
+ *  - Replace dragdealer with October scrollbars
+ *  - Explore mobile support, currently non-existent
+ *
  */
 
 var Handsontable = { //class namespace

modules/backend/widgets/grid/partials/_grid.htm

@@ -4,7 +4,7 @@
     <?php endif ?>
 
     <div
-        id="<?= $this->getId('grid') ?>"
+        id="<?= $this->getId() ?>"
         style="width:100%"
         class="control-datagrid"
         data-control="datagrid"
@@ -16,7 +16,7 @@
 
 </div>
 <script>
-    $('#<?= $this->getId('grid') ?>')
+    $('#<?= $this->getId() ?>')
         .data('columns', <?= json_encode($columnDefinitions) ?>)
         .data('columnHeaders', <?= json_encode($columnHeaders) ?>)
         .data('columnWidths', <?= json_encode($columnWidths) ?>)