diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/layoutconfig.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/layoutconfig.controller.js index cf201976adca..fdf70693b2ef 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/layoutconfig.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/layoutconfig.controller.js @@ -4,10 +4,37 @@ angular.module("umbraco") var vm = this; + vm.toggleAllowed = toggleAllowed; + vm.configureSection = configureSection; + vm.deleteSection = deleteSection; + vm.selectRow = selectRow; + vm.percentage = percentage; + vm.scaleUp = scaleUp; + vm.scaleDown = scaleDown; + vm.close = close; + vm.submit = submit; + vm.labels = {}; function init() { + $scope.currentLayout = $scope.model.currentLayout; + $scope.columns = $scope.model.columns; + $scope.rows = $scope.model.rows; + $scope.currentSection = null; + + // Setup copy of rows on sections + if ($scope.currentLayout && $scope.currentLayout.sections) { + $scope.currentLayout.sections.forEach(section => { + section.rows = Utilities.copy($scope.rows); + + // Check if rows are selected + section.rows.forEach(row => { + row.selected = section.allowed && section.allowed.includes(row.name); + }); + }); + } + var labelKeys = [ "grid_addGridLayout", "grid_allowAllRowConfigurations" @@ -28,46 +55,43 @@ angular.module("umbraco") } } - $scope.currentLayout = $scope.model.currentLayout; - $scope.columns = $scope.model.columns; - $scope.rows = $scope.model.rows; - $scope.currentSection = undefined; - - $scope.scaleUp = function(section, max, overflow){ + function scaleUp(section, max, overflow){ var add = 1; - if(overflow !== true){ - add = (max > 1) ? 1 : max; + if (overflow !== true){ + add = (max > 1) ? 1 : max; } //var add = (max > 1) ? 1 : max; section.grid = section.grid+add; - }; + } - $scope.scaleDown = function(section){ + function scaleDown(section){ var remove = (section.grid > 1) ? 1 : 0; section.grid = section.grid-remove; - }; + } - $scope.percentage = function(spans){ + function percentage(spans){ return ((spans / $scope.columns) * 100).toFixed(8); - }; + } /**************** Section *****************/ - $scope.configureSection = function(section, template){ - if(section === undefined){ + function configureSection(section, template) { + if (section === null || section === undefined) { var space = ($scope.availableLayoutSpace > 4) ? 4 : $scope.availableLayoutSpace; section = { - grid: space + grid: space, + rows: Utilities.copy($scope.rows) }; template.sections.push(section); - } - - $scope.currentSection = section; - $scope.currentSection.allowAll = section.allowAll || !section.allowed || !section.allowed.length; - }; + } + + section.allowAll = section.allowAll || !section.allowed || !section.allowed.length; - $scope.toggleAllowed = function (section) { + $scope.currentSection = section; + } + + function toggleAllowed(section) { section.allowAll = !section.allowAll; if (section.allowed) { @@ -76,21 +100,22 @@ angular.module("umbraco") else { section.allowed = []; } - }; + } - $scope.deleteSection = function(section, template) { + function deleteSection(section, template) { if ($scope.currentSection === section) { - $scope.currentSection = undefined; + $scope.currentSection = null; } var index = template.sections.indexOf(section) template.sections.splice(index, 1); - }; + } + + function selectRow(section, row) { - $scope.selectRow = function (section, row) { section.allowed = section.allowed || []; var index = section.allowed.indexOf(row.name); - if (row.allowed === true) { + if (row.selected === true) { if (index === -1) { section.allowed.push(row.name); } @@ -98,22 +123,32 @@ angular.module("umbraco") else { section.allowed.splice(index, 1); } - }; + } - $scope.close = function() { + function close() { if ($scope.model.close) { + cleanUpRows(); $scope.model.close(); } - }; + } - $scope.submit = function () { + function submit() { if ($scope.model.submit) { + cleanUpRows(); $scope.model.submit($scope.currentLayout); } - }; + } + + function cleanUpRows () { + $scope.currentLayout.sections.forEach(section => { + if (section.rows) { + delete section.rows; + } + }); + } $scope.$watch("currentLayout", function(layout){ - if(layout){ + if (layout) { var total = 0; _.forEach(layout.sections, function(section){ total = (total + section.grid); diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/layoutconfig.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/layoutconfig.html index 6ff18e83ad9c..5e05f56b4819 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/layoutconfig.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/layoutconfig.html @@ -34,38 +34,37 @@
-
+
- {{currentSection.grid}} -
@@ -74,7 +73,7 @@ @@ -85,7 +84,7 @@
    -
  • +
  • - + on-change="vm.selectRow(currentSection, row)"> - @@ -153,13 +152,13 @@ button-style="link" label-key="general_close" shortcut="esc" - action="close()"> + action="vm.close()"> + action="vm.submit()"> diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowconfig.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowconfig.controller.js index 83a9fd53941c..b36352a66bfb 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowconfig.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowconfig.controller.js @@ -2,10 +2,26 @@ function RowConfigController($scope, localizationService) { var vm = this; + vm.configureCell = configureCell; + vm.closeArea = closeArea; + vm.deleteArea = deleteArea; + vm.selectEditor = selectEditor; + vm.toggleAllowed = toggleAllowed; + vm.percentage = percentage; + vm.scaleUp = scaleUp; + vm.scaleDown = scaleDown; + vm.close = close; + vm.submit = submit; + vm.labels = {}; function init() { - + + $scope.currentRow = $scope.model.currentRow; + $scope.columns = $scope.model.columns; + $scope.editors = $scope.model.editors; + $scope.nameChanged = false; + var labelKeys = [ "grid_addRowConfiguration", "grid_allowAllEditors" @@ -25,12 +41,8 @@ function RowConfigController($scope, localizationService) { $scope.model.title = value; } } - - $scope.currentRow = $scope.model.currentRow; - $scope.columns = $scope.model.columns; - $scope.editors = $scope.model.editors; - $scope.scaleUp = function(section, max, overflow) { + function scaleUp(section, max, overflow) { var add = 1; if (overflow !== true) { add = (max > 1) ? 1 : max; @@ -39,19 +51,19 @@ function RowConfigController($scope, localizationService) { section.grid = section.grid + add; }; - $scope.scaleDown = function(section) { + function scaleDown(section) { var remove = (section.grid > 1) ? 1 : 0; section.grid = section.grid - remove; - }; + } - $scope.percentage = function(spans) { + function percentage(spans) { return ((spans / $scope.columns) * 100).toFixed(8); - }; + } /**************** area *****************/ - $scope.configureCell = function(cell, row) { + function configureCell(cell, row) { if ($scope.currentCell && $scope.currentCell === cell) { delete $scope.currentCell; } @@ -75,12 +87,13 @@ function RowConfigController($scope, localizationService) { $scope.editors.forEach(function (e) { e.allowed = cell.allowed.indexOf(e.alias) !== -1 }); + cell.allowAll = cell.allowAll || !cell.allowed || !cell.allowed.length; + $scope.currentCell = cell; - $scope.currentCell.allowAll = cell.allowAll || !cell.allowed || !cell.allowed.length; } - }; + } - $scope.toggleAllowed = function (cell) { + function toggleAllowed(cell) { cell.allowAll = !cell.allowAll; if (cell.allowed) { @@ -89,21 +102,22 @@ function RowConfigController($scope, localizationService) { else { cell.allowed = []; } - }; + } - $scope.deleteArea = function (cell, row) { + function deleteArea(cell, row) { if ($scope.currentCell === cell) { $scope.currentCell = null; } var index = row.areas.indexOf(cell) row.areas.splice(index, 1); - }; + } - $scope.closeArea = function() { + // This doesn't seem to be used? + function closeArea() { $scope.currentCell = null; - }; + } - $scope.selectEditor = function (cell, editor) { + function selectEditor(cell, editor) { cell.allowed = cell.allowed || []; var index = cell.allowed.indexOf(editor.alias); @@ -115,22 +129,20 @@ function RowConfigController($scope, localizationService) { else { cell.allowed.splice(index, 1); } - }; + } - $scope.close = function () { + function close () { if ($scope.model.close) { $scope.model.close(); } - }; + } - $scope.submit = function () { + function submit() { if ($scope.model.submit) { $scope.model.submit($scope.currentRow); } - }; + } - $scope.nameChanged = false; - var originalName = $scope.currentRow.name; $scope.$watch("currentRow", function(row) { if (row) { @@ -141,6 +153,7 @@ function RowConfigController($scope, localizationService) { $scope.availableRowSpace = $scope.columns - total; + var originalName = $scope.currentRow.name; if (originalName) { if (originalName != row.name) { $scope.nameChanged = true; diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowconfig.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowconfig.html index 9d105e26295b..5cf0676526c4 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowconfig.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowconfig.html @@ -41,10 +41,10 @@
    {{currentCell.grid}} -
    @@ -84,7 +84,7 @@ - @@ -93,7 +93,7 @@ + on-change="vm.selectEditor(currentCell, editor)"> {{editor.name}} ({{editor.alias}}) @@ -132,13 +132,13 @@ button-style="link" label-key="general_close" shortcut="esc" - action="close()"> + action="vm.close()"> + action="vm.submit()">