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.loadindicator.js

@@ -101,7 +101,7 @@
 
     // LOADINDICATOR DATA-API
     // ==============
-    
+
     $(document)
         .on('ajaxPromise', '[data-load-indicator]', function() {
             var

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
          */
@@ -50,7 +55,7 @@
                 setTimeout(function() { self.$content.empty() }, 500)
             }
         })
-        
+
         this.$modal.on('show.bs.modal', function(){
             self.isOpen = true
             self.setBackdrop(true)
@@ -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,15 +173,24 @@
         if (!this.$backdrop)
             return;
 
-        var self = this;
+        var self = this
         if (val) {
             setTimeout(function(){ self.$backdrop.addClass('loading'); }, 100)
-        } 
+        }
         else {
             this.$backdrop.removeClass('loading');
         }
     }
 
+    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

@@ -5,8 +5,8 @@
     margin: -20px -20px 20px -20px;
     background-color: @color-breadcrumb-background;
 
-    ul { 
-        padding: 0; 
+    ul {
+        padding: 0;
         margin: 0;
     }
 
@@ -40,7 +40,7 @@
         }
     }
 
-    + .content-tabs {
+    + .content-tabs, + .padded-container {
         margin-top: -20px;
     }
 }
@@ -50,4 +50,4 @@ body.slim-container {
         margin-left: 0;
         margin-right: 0;
     }
-}
+}

modules/backend/assets/less/controls/popup.less

@@ -64,7 +64,7 @@
     background-color: rgba(0,0,0,.2);
     .opacity(1);
 
-    .popup-loading-indicator { 
+    .popup-loading-indicator {
         display: block;
         width: 100px;
         height: 100px;

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

@@ -15,7 +15,12 @@
  * - Use autocomplete plugin instead of typeahead
  * - 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) ?>)