From b15070eb6590d650b51f64946cf63184deb13bcc Mon Sep 17 00:00:00 2001 From: Coleman Watts Date: Fri, 8 Jan 2021 18:31:51 -0500 Subject: [PATCH] Afform - Ref directives to components in their own files --- ext/afform/admin/ang/afGuiEditor.css | 21 +-- ext/afform/admin/ang/afGuiEditor.js | 133 ------------------ .../afGuiEditor/afGuiEditOptions.component.js | 45 ++++++ ...editOptions.html => afGuiEditOptions.html} | 0 .../afGuiMenuItemBackground.component.js | 24 ++++ ...ound.html => afGuiMenuItemBackground.html} | 4 +- .../afGuiMenuItemBorder.component.js | 43 ++++++ ...m-border.html => afGuiMenuItemBorder.html} | 0 .../afGuiEditor/afGuiSaveBlock.controller.js | 34 +++++ .../elements/afGuiContainer-menu.html | 4 +- .../ang/afGuiEditor/elements/afGuiField.html | 2 +- .../elements/afGuiMarkup-menu.html | 4 +- 12 files changed, 164 insertions(+), 150 deletions(-) create mode 100644 ext/afform/admin/ang/afGuiEditor/afGuiEditOptions.component.js rename ext/afform/admin/ang/afGuiEditor/{editOptions.html => afGuiEditOptions.html} (100%) create mode 100644 ext/afform/admin/ang/afGuiEditor/afGuiMenuItemBackground.component.js rename ext/afform/admin/ang/afGuiEditor/{menu-item-background.html => afGuiMenuItemBackground.html} (74%) create mode 100644 ext/afform/admin/ang/afGuiEditor/afGuiMenuItemBorder.component.js rename ext/afform/admin/ang/afGuiEditor/{menu-item-border.html => afGuiMenuItemBorder.html} (100%) create mode 100644 ext/afform/admin/ang/afGuiEditor/afGuiSaveBlock.controller.js diff --git a/ext/afform/admin/ang/afGuiEditor.css b/ext/afform/admin/ang/afGuiEditor.css index fd9a9d133c..3cc94c35b1 100644 --- a/ext/afform/admin/ang/afGuiEditor.css +++ b/ext/afform/admin/ang/afGuiEditor.css @@ -144,7 +144,8 @@ } #afGuiEditor af-gui-markup, -#afGuiEditor af-gui-field { +#afGuiEditor af-gui-field, +#afGuiEditor af-gui-edit-options { display: block; } @@ -220,7 +221,7 @@ /* grip handle */ #afGuiEditor [ui-sortable] .af-gui-bar:before, #afGuiEditor .af-gui-entity-palette-select-list [ui-sortable] > div:not(.disabled):hover:before, -#afGuiEditor [af-gui-edit-options] [ui-sortable] li:before { +#afGuiEditor af-gui-edit-options.af-gui-content-editing-area [ui-sortable] li:before { background-size: cover; background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSIjODg4Ij48L3JlY3Q+Cjwvc3ZnPg=="); width: 10px; @@ -434,7 +435,7 @@ position: relative; } -#afGuiEditor [af-gui-edit-options] { +#afGuiEditor af-gui-edit-options.af-gui-content-editing-area { border: 2px solid #0071bd; } @@ -454,30 +455,30 @@ top: 0; right: 0; } -#afGuiEditor [af-gui-edit-options] ul[ui-sortable] { +#afGuiEditor af-gui-edit-options.af-gui-content-editing-area ul[ui-sortable] { padding: 5px 20px 0; } -#afGuiEditor [af-gui-edit-options] ul[ui-sortable] li { +#afGuiEditor af-gui-edit-options.af-gui-content-editing-area ul[ui-sortable] li { list-style: none; padding-left: 15px; position: relative; background-color:#e7ecf1; cursor: move; } -#afGuiEditor [af-gui-edit-options] ul[ui-sortable] li:nth-child(even) { +#afGuiEditor af-gui-edit-options.af-gui-content-editing-area ul[ui-sortable] li:nth-child(even) { background-color:#f2f2f2; } -#afGuiEditor [af-gui-edit-options] ul[ui-sortable] li > div { +#afGuiEditor af-gui-edit-options.af-gui-content-editing-area ul[ui-sortable] li > div { width: calc(100% - 30px); display: inline-block; } -#afGuiEditor [af-gui-edit-options] ul.af-gui-edit-options-deleted li > div { +#afGuiEditor af-gui-edit-options.af-gui-content-editing-area ul.af-gui-edit-options-deleted li > div { text-decoration: line-through; } -#afGuiEditor [af-gui-edit-options] ul[ui-sortable] li .btn-xs { +#afGuiEditor af-gui-edit-options.af-gui-content-editing-area ul[ui-sortable] li .btn-xs { border: 0 none; } -#afGuiEditor [af-gui-edit-options] h5 { +#afGuiEditor af-gui-edit-options.af-gui-content-editing-area h5 { margin-left: 20px; } diff --git a/ext/afform/admin/ang/afGuiEditor.js b/ext/afform/admin/ang/afGuiEditor.js index 30db86b55d..d604e57fb3 100644 --- a/ext/afform/admin/ang/afGuiEditor.js +++ b/ext/afform/admin/ang/afGuiEditor.js @@ -139,78 +139,6 @@ }); }); - angular.module('afGuiEditor').controller('afGuiSaveBlock', function($scope, crmApi4, dialogService) { - var ts = $scope.ts = CRM.ts(), - model = $scope.model, - original = $scope.original = { - title: model.title, - name: model.name - }; - if (model.name) { - $scope.$watch('model.name', function(val, oldVal) { - if (!val && model.title === original.title) { - model.title += ' ' + ts('(copy)'); - } - else if (val === original.name && val !== oldVal) { - model.title = original.title; - } - }); - } - $scope.cancel = function() { - dialogService.cancel('saveBlockDialog'); - }; - $scope.save = function() { - $('.ui-dialog:visible').block(); - crmApi4('Afform', 'save', {formatWhitespace: true, records: [JSON.parse(angular.toJson(model))]}) - .then(function(result) { - dialogService.close('saveBlockDialog', result[0]); - }); - }; - }); - - angular.module('afGuiEditor').directive('afGuiEditOptions', function() { - return { - restrict: 'A', - templateUrl: '~/afGuiEditor/editOptions.html', - scope: true, - require: '^^afGuiField', - link: function ($scope, element, attrs, afGuiField) { - $scope.field = afGuiField; - $scope.options = JSON.parse(angular.toJson(afGuiField.getOptions())); - var optionKeys = _.map($scope.options, 'key'); - $scope.deletedOptions = _.filter(JSON.parse(angular.toJson(afGuiField.getDefn().options || [])), function(item) { - return !_.contains(optionKeys, item.key); - }); - $scope.originalLabels = _.transform(afGuiField.getDefn().options || [], function(originalLabels, item) { - originalLabels[item.key] = item.label; - }, {}); - }, - controller: function ($scope) { - var ts = $scope.ts = CRM.ts(); - - $scope.deleteOption = function(option, $index) { - $scope.options.splice($index, 1); - $scope.deletedOptions.push(option); - }; - - $scope.restoreOption = function(option, $index) { - $scope.deletedOptions.splice($index, 1); - $scope.options.push(option); - }; - - $scope.save = function() { - $scope.field.getSet('options', JSON.parse(angular.toJson($scope.options))); - $scope.close(); - }; - - $scope.close = function() { - $scope.field.setEditingOptions(false); - $('#afGuiEditor').removeClass('af-gui-editing-content'); - }; - } - }; - }); - // Connect bootstrap dropdown.js with angular // Allows menu content to be conditionally rendered only if open // This gives a large performance boost for a page with lots of menus @@ -234,65 +162,4 @@ }; }); - // Menu item to control the border property of a node - angular.module('afGuiEditor').directive('afGuiMenuItemBorder', function(afAdmin) { - return { - restrict: 'A', - templateUrl: '~/afGuiEditor/menu-item-border.html', - scope: { - node: '=afGuiMenuItemBorder' - }, - link: function($scope, element, attrs) { - var ts = $scope.ts = CRM.ts(); - - $scope.getSetBorderWidth = function(width) { - return getSetBorderProp($scope.node, 0, arguments.length ? width : null); - }; - - $scope.getSetBorderStyle = function(style) { - return getSetBorderProp($scope.node, 1, arguments.length ? style : null); - }; - - $scope.getSetBorderColor = function(color) { - return getSetBorderProp($scope.node, 2, arguments.length ? color : null); - }; - - function getSetBorderProp(node, idx, val) { - var border = getBorder(node) || ['1px', '', '#000000']; - if (val === null) { - return border[idx]; - } - border[idx] = val; - afAdmin.setStyle(node, 'border', val ? border.join(' ') : null); - } - - function getBorder(node) { - var border = _.map((afAdmin.getStyles(node).border || '').split(' '), _.trim); - return border.length > 2 ? border : null; - } - } - }; - }); - - // Menu item to control the background property of a node - angular.module('afGuiEditor').directive('afGuiMenuItemBackground', function(afAdmin) { - return { - restrict: 'A', - templateUrl: '~/afGuiEditor/menu-item-background.html', - scope: { - node: '=afGuiMenuItemBackground' - }, - link: function($scope, element, attrs) { - var ts = $scope.ts = CRM.ts(); - - $scope.getSetBackgroundColor = function(color) { - if (!arguments.length) { - return afAdmin.getStyles($scope.node)['background-color'] || '#ffffff'; - } - afAdmin.setStyle($scope.node, 'background-color', color); - }; - } - }; - }); - })(angular, CRM.$, CRM._); diff --git a/ext/afform/admin/ang/afGuiEditor/afGuiEditOptions.component.js b/ext/afform/admin/ang/afGuiEditor/afGuiEditOptions.component.js new file mode 100644 index 0000000000..764b120a1b --- /dev/null +++ b/ext/afform/admin/ang/afGuiEditor/afGuiEditOptions.component.js @@ -0,0 +1,45 @@ +// https://civicrm.org/licensing +(function(angular, $, _) { + "use strict"; + + angular.module('afGuiEditor').component('afGuiEditOptions', { + templateUrl: '~/afGuiEditor/afGuiEditOptions.html', + require: {field: '^^afGuiField'}, + controller: function($scope) { + var ts = $scope.ts = CRM.ts(), + ctrl = this; + + this.$onInit = function() { + $scope.options = JSON.parse(angular.toJson(ctrl.field.getOptions())); + var optionKeys = _.map($scope.options, 'key'); + $scope.deletedOptions = _.filter(JSON.parse(angular.toJson(ctrl.field.getDefn().options || [])), function (item) { + return !_.contains(optionKeys, item.key); + }); + $scope.originalLabels = _.transform(ctrl.field.getDefn().options || [], function (originalLabels, item) { + originalLabels[item.key] = item.label; + }, {}); + }; + + $scope.deleteOption = function(option, $index) { + $scope.options.splice($index, 1); + $scope.deletedOptions.push(option); + }; + + $scope.restoreOption = function(option, $index) { + $scope.deletedOptions.splice($index, 1); + $scope.options.push(option); + }; + + $scope.save = function() { + ctrl.field.getSet('options', JSON.parse(angular.toJson($scope.options))); + $scope.close(); + }; + + $scope.close = function() { + ctrl.field.setEditingOptions(false); + $('#afGuiEditor').removeClass('af-gui-editing-content'); + }; + } + }); + +})(angular, CRM.$, CRM._); diff --git a/ext/afform/admin/ang/afGuiEditor/editOptions.html b/ext/afform/admin/ang/afGuiEditor/afGuiEditOptions.html similarity index 100% rename from ext/afform/admin/ang/afGuiEditor/editOptions.html rename to ext/afform/admin/ang/afGuiEditor/afGuiEditOptions.html diff --git a/ext/afform/admin/ang/afGuiEditor/afGuiMenuItemBackground.component.js b/ext/afform/admin/ang/afGuiEditor/afGuiMenuItemBackground.component.js new file mode 100644 index 0000000000..569acf057f --- /dev/null +++ b/ext/afform/admin/ang/afGuiEditor/afGuiMenuItemBackground.component.js @@ -0,0 +1,24 @@ +// https://civicrm.org/licensing +(function(angular, $, _) { + "use strict"; + + // Menu item to control the background property of a node + angular.module('afGuiEditor').component('afGuiMenuItemBackground', { + templateUrl: '~/afGuiEditor/afGuiMenuItemBackground.html', + bindings: { + node: '=' + }, + controller: function($scope, afAdmin) { + var ts = $scope.ts = CRM.ts(), + ctrl = this; + + $scope.getSetBackgroundColor = function(color) { + if (!arguments.length) { + return afAdmin.getStyles(ctrl.node)['background-color'] || '#ffffff'; + } + afAdmin.setStyle(ctrl.node, 'background-color', color); + }; + } + }); + +})(angular, CRM.$, CRM._); diff --git a/ext/afform/admin/ang/afGuiEditor/menu-item-background.html b/ext/afform/admin/ang/afGuiEditor/afGuiMenuItemBackground.html similarity index 74% rename from ext/afform/admin/ang/afGuiEditor/menu-item-background.html rename to ext/afform/admin/ang/afGuiEditor/afGuiMenuItemBackground.html index 73b6548fb1..1abf61ac99 100644 --- a/ext/afform/admin/ang/afGuiEditor/menu-item-background.html +++ b/ext/afform/admin/ang/afGuiEditor/afGuiMenuItemBackground.html @@ -1,7 +1,7 @@
- - + +
diff --git a/ext/afform/admin/ang/afGuiEditor/afGuiMenuItemBorder.component.js b/ext/afform/admin/ang/afGuiEditor/afGuiMenuItemBorder.component.js new file mode 100644 index 0000000000..c8b84cff6a --- /dev/null +++ b/ext/afform/admin/ang/afGuiEditor/afGuiMenuItemBorder.component.js @@ -0,0 +1,43 @@ +// https://civicrm.org/licensing +(function(angular, $, _) { + "use strict"; + + // Menu item to control the border property of a node + angular.module('afGuiEditor').component('afGuiMenuItemBorder', { + templateUrl: '~/afGuiEditor/afGuiMenuItemBorder.html', + bindings: { + node: '=' + }, + controller: function($scope, afAdmin) { + var ts = $scope.ts = CRM.ts(), + ctrl = this; + + $scope.getSetBorderWidth = function(width) { + return getSetBorderProp(ctrl.node, 0, arguments.length ? width : null); + }; + + $scope.getSetBorderStyle = function(style) { + return getSetBorderProp(ctrl.node, 1, arguments.length ? style : null); + }; + + $scope.getSetBorderColor = function(color) { + return getSetBorderProp(ctrl.node, 2, arguments.length ? color : null); + }; + + function getSetBorderProp(node, idx, val) { + var border = getBorder(node) || ['1px', '', '#000000']; + if (val === null) { + return border[idx]; + } + border[idx] = val; + afAdmin.setStyle(node, 'border', val ? border.join(' ') : null); + } + + function getBorder(node) { + var border = _.map((afAdmin.getStyles(node).border || '').split(' '), _.trim); + return border.length > 2 ? border : null; + } + } + }); + +})(angular, CRM.$, CRM._); diff --git a/ext/afform/admin/ang/afGuiEditor/menu-item-border.html b/ext/afform/admin/ang/afGuiEditor/afGuiMenuItemBorder.html similarity index 100% rename from ext/afform/admin/ang/afGuiEditor/menu-item-border.html rename to ext/afform/admin/ang/afGuiEditor/afGuiMenuItemBorder.html diff --git a/ext/afform/admin/ang/afGuiEditor/afGuiSaveBlock.controller.js b/ext/afform/admin/ang/afGuiEditor/afGuiSaveBlock.controller.js new file mode 100644 index 0000000000..e1546eff40 --- /dev/null +++ b/ext/afform/admin/ang/afGuiEditor/afGuiSaveBlock.controller.js @@ -0,0 +1,34 @@ +// https://civicrm.org/licensing +(function(angular, $, _) { + "use strict"; + + angular.module('afGuiEditor').controller('afGuiSaveBlock', function($scope, crmApi4, dialogService) { + var ts = $scope.ts = CRM.ts(), + model = $scope.model, + original = $scope.original = { + title: model.title, + name: model.name + }; + if (model.name) { + $scope.$watch('model.name', function(val, oldVal) { + if (!val && model.title === original.title) { + model.title += ' ' + ts('(copy)'); + } + else if (val === original.name && val !== oldVal) { + model.title = original.title; + } + }); + } + $scope.cancel = function() { + dialogService.cancel('saveBlockDialog'); + }; + $scope.save = function() { + $('.ui-dialog:visible').block(); + crmApi4('Afform', 'save', {formatWhitespace: true, records: [JSON.parse(angular.toJson(model))]}) + .then(function(result) { + dialogService.close('saveBlockDialog', result[0]); + }); + }; + }); + +})(angular, CRM.$, CRM._); diff --git a/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer-menu.html b/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer-menu.html index dae4157cec..63d2ff6d94 100644 --- a/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer-menu.html +++ b/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer-menu.html @@ -30,7 +30,7 @@ -
  • -
  • +
    • +
  • {{ !block ? ts('Delete this container') : ts('Delete this block') }}
    • diff --git a/ext/afform/admin/ang/afGuiEditor/elements/afGuiField.html b/ext/afform/admin/ang/afGuiEditor/elements/afGuiField.html index 0ad20ad930..813c9f5be4 100644 --- a/ext/afform/admin/ang/afGuiEditor/elements/afGuiField.html +++ b/ext/afform/admin/ang/afGuiEditor/elements/afGuiField.html @@ -1,4 +1,4 @@ -
    +
    diff --git a/ext/afform/admin/ang/afGuiEditor/elements/afGuiMarkup-menu.html b/ext/afform/admin/ang/afGuiEditor/elements/afGuiMarkup-menu.html index 7e1bb89c2d..e4e5c71f06 100644 --- a/ext/afform/admin/ang/afGuiEditor/elements/afGuiMarkup-menu.html +++ b/ext/afform/admin/ang/afGuiEditor/elements/afGuiMarkup-menu.html @@ -2,8 +2,8 @@ {{:: ts('Edit content') }} -
  • -
  • +
    • +
  • {{:: ts('Delete this content') }} -- 2.25.1