From 242a3a5cde6f7dbe2c92d8fca9945d6ae21f6bd6 Mon Sep 17 00:00:00 2001 From: Sam Georges Date: Thu, 17 Jul 2014 18:42:12 +1000 Subject: [PATCH] Buttons inside a popup support new `data-popup-load-indicator` attribute. Other minor improvements --- CHANGELOG.md | 5 +++ modules/backend/assets/css/october.css | 3 +- .../assets/js/october.loadindicator.js | 2 +- modules/backend/assets/js/october.popup.js | 33 ++++++++++++++++--- .../assets/less/controls/breadcrumb.less | 8 ++--- .../backend/assets/less/controls/popup.less | 2 +- modules/backend/classes/Controller.php | 5 ++- .../widgets/grid/assets/js/datagrid.js | 9 ++++- .../handsontable/jquery.handsontable.js | 7 +++- .../backend/widgets/grid/partials/_grid.htm | 4 +-- 10 files changed, 62 insertions(+), 16 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 58ba933c8..c16731346 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css index 674351cf2..157923823 100644 --- a/modules/backend/assets/css/october.css +++ b/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 { diff --git a/modules/backend/assets/js/october.loadindicator.js b/modules/backend/assets/js/october.loadindicator.js index a5bcc2667..880c4a9ee 100644 --- a/modules/backend/assets/js/october.loadindicator.js +++ b/modules/backend/assets/js/october.loadindicator.js @@ -101,7 +101,7 @@ // LOADINDICATOR DATA-API // ============== - + $(document) .on('ajaxPromise', '[data-load-indicator]', function() { var diff --git a/modules/backend/assets/js/october.popup.js b/modules/backend/assets/js/october.popup.js index 6e7675dcf..a6749fd0d 100644 --- a/modules/backend/assets/js/october.popup.js +++ b/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($('
')) + this.$backdrop.append($('
')) } 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); diff --git a/modules/backend/assets/less/controls/breadcrumb.less b/modules/backend/assets/less/controls/breadcrumb.less index 48316b278..a19cf8cd5 100644 --- a/modules/backend/assets/less/controls/breadcrumb.less +++ b/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; } -} \ No newline at end of file +} diff --git a/modules/backend/assets/less/controls/popup.less b/modules/backend/assets/less/controls/popup.less index f9969e44c..b5ebd9051 100644 --- a/modules/backend/assets/less/controls/popup.less +++ b/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; diff --git a/modules/backend/classes/Controller.php b/modules/backend/classes/Controller.php index 65faa48cd..c8eb81c6d 100644 --- a/modules/backend/classes/Controller.php +++ b/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, diff --git a/modules/backend/widgets/grid/assets/js/datagrid.js b/modules/backend/widgets/grid/assets/js/datagrid.js index a1609cc3d..7ec49cfc1 100644 --- a/modules/backend/widgets/grid/assets/js/datagrid.js +++ b/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() diff --git a/modules/backend/widgets/grid/assets/vendor/handsontable/jquery.handsontable.js b/modules/backend/widgets/grid/assets/vendor/handsontable/jquery.handsontable.js index 42ba7132d..6903dbcba 100644 --- a/modules/backend/widgets/grid/assets/vendor/handsontable/jquery.handsontable.js +++ b/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 diff --git a/modules/backend/widgets/grid/partials/_grid.htm b/modules/backend/widgets/grid/partials/_grid.htm index 149c01f65..9a4c13b13 100644 --- a/modules/backend/widgets/grid/partials/_grid.htm +++ b/modules/backend/widgets/grid/partials/_grid.htm @@ -4,7 +4,7 @@