From e9dc7ca500fc71d6643c13052eb844680dfab640 Mon Sep 17 00:00:00 2001 From: Coleman Watts Date: Sat, 4 Jan 2020 21:10:11 -0500 Subject: [PATCH] Improve drag-n-drop placeholder & validation --- ext/afform/gui/afform_gui.php | 18 +++++ ext/afform/gui/ang/afGuiEditor.css | 8 +- ext/afform/gui/ang/afGuiEditor.js | 74 ++++++++----------- ext/afform/gui/ang/afGuiEditor/canvas.html | 2 +- ext/afform/gui/ang/afGuiEditor/container.html | 2 +- ext/afform/gui/ang/afGuiEditor/entity.html | 6 +- 6 files changed, 61 insertions(+), 49 deletions(-) diff --git a/ext/afform/gui/afform_gui.php b/ext/afform/gui/afform_gui.php index ff9db85758..8f0effff64 100644 --- a/ext/afform/gui/afform_gui.php +++ b/ext/afform/gui/afform_gui.php @@ -261,6 +261,24 @@ function afform_gui_civicrm_buildAsset($asset, $params, &$mimeType, &$content) { ], ], ], + 'fieldset' => [ + 'title' => ts('Fieldset'), + 'element' => [ + '#tag' => 'fieldset', + 'af-fieldset' => NULL, + '#children' => [ + [ + '#tag' => 'legend', + 'class' => 'af-text', + '#children' => [ + [ + '#text' => ts('Enter title'), + ], + ], + ], + ], + ], + ], ]; // Reformat options diff --git a/ext/afform/gui/ang/afGuiEditor.css b/ext/afform/gui/ang/afGuiEditor.css index 3399f74cd0..7848835d6a 100644 --- a/ext/afform/gui/ang/afGuiEditor.css +++ b/ext/afform/gui/ang/afGuiEditor.css @@ -124,7 +124,7 @@ opacity: 1; transition: opacity .2s; } -#afGuiEditor-canvas .panel-body > div > .af-gui-bar { +#afGuiEditor-canvas-body > div > .af-gui-bar { top: -5px; } @@ -483,3 +483,9 @@ #afGuiEditor [af-gui-edit-options] h5 { margin-left: 20px; } + +#afGuiEditor .af-gui-dropzone { + background-color: #e9eeff; + border: 2px solid #0071bd; + min-height: 30px; +} diff --git a/ext/afform/gui/ang/afGuiEditor.js b/ext/afform/gui/ang/afGuiEditor.js index d8316b713c..37336c2810 100644 --- a/ext/afform/gui/ang/afGuiEditor.js +++ b/ext/afform/gui/ang/afGuiEditor.js @@ -94,21 +94,9 @@ var pos = 1 + _.findLastIndex($scope.layout['#children'], {'#tag': 'af-entity'}); $scope.layout['#children'].splice(pos, 0, $scope.entities[type + num]); // Create a new af-fieldset container for the entity - var fieldset = { - '#tag': 'fieldset', - 'af-fieldset': type + num, - '#children': [ - { - '#tag': 'legend', - 'class': 'af-text', - '#children': [ - { - '#text': meta.label + ' ' + num - } - ] - } - ] - }; + var fieldset = _.cloneDeep(editor.meta.elements.fieldset.element); + fieldset['af-fieldset'] = type + num; + fieldset['#children'][0]['#children'][0]['#text'] = meta.label + ' ' + num; // Add default contact name block if (meta.entity === 'Contact') { fieldset['#children'].push({'#tag': 'afblock-name-' + type.toLowerCase()}); @@ -146,6 +134,28 @@ return $scope.selectedEntityName; }; + // Validates that a drag-n-drop action is allowed + this.onDrop = function(event, ui) { + var sort = ui.item.sortable; + // Check if this is a callback for an item dropped into a different container + // @see https://github.com/angular-ui/ui-sortable notes on canceling + if (!sort.received && sort.source[0] !== sort.droptarget[0]) { + var $source = $(sort.source[0]), + $target = $(sort.droptarget[0]), + $item = $(ui.item[0]); + // Fields cannot be dropped outside their own entity + if ($item.is('[af-gui-field]') || $item.has('[af-gui-field]').length) { + if ($source.closest('[data-entity]').attr('data-entity') !== $target.closest('[data-entity]').attr('data-entity')) { + return sort.cancel(); + } + } + // Entity-fieldsets cannot be dropped into other entity-fieldsets + if ((sort.model['af-fieldset'] || $item.has('.af-gui-fieldset').length) && $target.closest('.af-gui-fieldset').length) { + return sort.cancel(); + } + } + }; + $scope.addEntity = function(entityType) { var entityName = editor.addEntity(entityType); editor.selectEntity(entityName); @@ -334,8 +344,12 @@ $scope.elementTitles.length = 0; _.each($scope.editor.meta.elements, function(element, name) { if (!search || _.contains(name, search) || _.contains(element.title.toLowerCase(), search)) { - $scope.elementList.push(_.cloneDeep(element.element)); - $scope.elementTitles.push(element.title); + var node = _.cloneDeep(element.element); + if (name === 'fieldset') { + node['af-fieldset'] = $scope.entity.name; + } + $scope.elementList.push(node); + $scope.elementTitles.push(name === 'fieldset' ? ts('Fieldset for %1', {1: $scope.entity.label}) : element.title); } }); } @@ -459,32 +473,6 @@ } }; - // Validates that a drag-n-drop action is allowed - $scope.onDrop = function(event, ui) { - var sort = ui.item.sortable; - // Check if this is a callback for an item dropped into a different container - // @see https://github.com/angular-ui/ui-sortable notes on canceling - if (!sort.received && sort.source[0] !== sort.droptarget[0]) { - var $source = $(sort.source[0]), - $target = $(sort.droptarget[0]), - $item = $(ui.item[0]); - // Dropping onto palette is ok; works like a trash can - if ($target.closest('#afGuiEditor-palette-config').length) { - return; - } - // Fields cannot be dropped outside their own entity - if ($item.is('[af-gui-field]') || $item.has('[af-gui-field]').length) { - if ($source.closest('[data-entity]').attr('data-entity') !== $target.closest('[data-entity]').attr('data-entity')) { - return sort.cancel(); - } - } - // Entity-fieldsets cannot be dropped into other entity-fieldsets - if (($item.hasClass('af-gui-fieldset') || $item.has('.af-gui-fieldset').length) && $target.closest('.af-gui-fieldset').length) { - return sort.cancel(); - } - } - }; - $scope.tags = { div: ts('Container'), fieldset: ts('Fieldset') diff --git a/ext/afform/gui/ang/afGuiEditor/canvas.html b/ext/afform/gui/ang/afGuiEditor/canvas.html index 10e3950b05..fc2553fb95 100644 --- a/ext/afform/gui/ang/afGuiEditor/canvas.html +++ b/ext/afform/gui/ang/afGuiEditor/canvas.html @@ -12,7 +12,7 @@
{{ ts('Form Layout') }}
-
+
diff --git a/ext/afform/gui/ang/afGuiEditor/container.html b/ext/afform/gui/ang/afGuiEditor/container.html index 0f71f098d3..31c30b4715 100644 --- a/ext/afform/gui/ang/afGuiEditor/container.html +++ b/ext/afform/gui/ang/afGuiEditor/container.html @@ -22,7 +22,7 @@
-
+
diff --git a/ext/afform/gui/ang/afGuiEditor/entity.html b/ext/afform/gui/ang/afGuiEditor/entity.html index a6c9b26aa8..f709cff6bd 100644 --- a/ext/afform/gui/ang/afGuiEditor/entity.html +++ b/ext/afform/gui/ang/afGuiEditor/entity.html @@ -22,7 +22,7 @@
-
+
{{ blockTitles[$index] }}
@@ -30,7 +30,7 @@
-
+
{{ elementTitles[$index] }}
@@ -39,7 +39,7 @@
-
+
{{ editor.getField(fieldGroup.entityType, field.name).title }}
-- 2.25.1