From 17f26e695d4dae80a1dafc76c99facc9d690c49b Mon Sep 17 00:00:00 2001 From: "ala'n (Alexey Stsefanovich)" Date: Thu, 16 May 2024 00:58:27 +0200 Subject: [PATCH] [EAK-521] Ability to pass a `path` to `set`/`set-if-blank` actions to access nested fields --- docs/content/dev-tools/depends-on/api.md | 13 ++- .../etoolbox-authoring-kit/depends-on/js.txt | 1 + .../js/actions/dependsOnCoralBasicActions.js | 22 ----- .../js/actions/dependsOnCoralSetActions.js | 88 +++++++++++++++++++ 4 files changed, 100 insertions(+), 24 deletions(-) create mode 100644 ui.apps/src/main/content/jcr_root/apps/etoolbox-authoring-kit/depends-on/js/actions/dependsOnCoralSetActions.js diff --git a/docs/content/dev-tools/depends-on/api.md b/docs/content/dev-tools/depends-on/api.md index 46cc0ff91..53d506f34 100644 --- a/docs/content/dev-tools/depends-on/api.md +++ b/docs/content/dev-tools/depends-on/api.md @@ -10,12 +10,21 @@ order: 3 Built-in plug-in actions are: * `visibility` - hide the element if the Query result is 'falsy'. This is the default action that is applied when no action is specified. + * `tab-visibility` - hide the tab or the element's parent tab if the Query result is 'falsy' -* `set` - set the Query result as the field's value (undefined Query result skipped) -* `set-if-blank` - set the Query result as the field's value only if the current value is blank (undefined Query result skipped) + +* `set` - set the Query result as the field's value (`undefined` Query result skipped). + Supports optional `path` parameter to set the value to the nested property of the field. + +* `set-if-blank` - set the Query result as the field's value only if the current value is blank (`undefined` Query result skipped). + Supports optional `path` parameter to set the value to the nested property of the field. + * `readonly` - set the readonly marker of the field from the Query result. + * `required` - set the required marker of the field from the Query result. + * `validate` - set the validation state of the field from the Query result. + * `disabled` - set the field's disabled state from the Query result. Supports multiple actions effect for the same field. ### Async actions diff --git a/ui.apps/src/main/content/jcr_root/apps/etoolbox-authoring-kit/depends-on/js.txt b/ui.apps/src/main/content/jcr_root/apps/etoolbox-authoring-kit/depends-on/js.txt index be69214c3..49ad4a456 100644 --- a/ui.apps/src/main/content/jcr_root/apps/etoolbox-authoring-kit/depends-on/js.txt +++ b/ui.apps/src/main/content/jcr_root/apps/etoolbox-authoring-kit/depends-on/js.txt @@ -30,6 +30,7 @@ js/accessors/dependsOnCoralFieldsetAccessor.js # Actions js/actions/dependsOnCoralBasicActions.js +js/actions/dependsOnCoralSetActions.js js/actions/dependsOnCoralValidateAction.js js/actions/dependsOnFetchAction.js js/actions/dependsOnCoralTabAction.js diff --git a/ui.apps/src/main/content/jcr_root/apps/etoolbox-authoring-kit/depends-on/js/actions/dependsOnCoralBasicActions.js b/ui.apps/src/main/content/jcr_root/apps/etoolbox-authoring-kit/depends-on/js/actions/dependsOnCoralBasicActions.js index 8fbc766df..5cb9acd2c 100644 --- a/ui.apps/src/main/content/jcr_root/apps/etoolbox-authoring-kit/depends-on/js/actions/dependsOnCoralBasicActions.js +++ b/ui.apps/src/main/content/jcr_root/apps/etoolbox-authoring-kit/depends-on/js/actions/dependsOnCoralBasicActions.js @@ -61,26 +61,4 @@ ns.ActionRegistry.register('disabled', function setDisabled(state) { ns.ElementAccessors.requestDisable(this.$el, state, this); }); - - /** - * Set the field value from the query result, skip undefined query results - * query type: string - * */ - ns.ActionRegistry.register('set', function setValue(value) { - if (value !== undefined) { - ns.ElementAccessors.setValue(this.$el, value); - } - }); - - /** - * Set the field value from the query result only if the field value is blank, - * skip undefined query results - * query type: string - * */ - ns.ActionRegistry.register('set-if-blank', function setValueIfBlank(value) { - const current = ns.ElementAccessors.getValue(this.$el); - if ((current === '' || current === null || current === undefined) && value !== undefined) { - ns.ElementAccessors.setValue(this.$el, value); - } - }); })(Granite.$, Granite.DependsOnPlugin = (Granite.DependsOnPlugin || {})); diff --git a/ui.apps/src/main/content/jcr_root/apps/etoolbox-authoring-kit/depends-on/js/actions/dependsOnCoralSetActions.js b/ui.apps/src/main/content/jcr_root/apps/etoolbox-authoring-kit/depends-on/js/actions/dependsOnCoralSetActions.js new file mode 100644 index 000000000..56a333369 --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/etoolbox-authoring-kit/depends-on/js/actions/dependsOnCoralSetActions.js @@ -0,0 +1,88 @@ +/* + * Licensed under the Apache License, Version 2.0 (the "License"). + * You may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * @author Alexey Stsefanovich (ala'n), Yana Bernatskaya (YanaBr) + * + * DependsOn Coral 3 Basic Actions. + * + * Defined actions: + * - visibility - set the field visibility (and also hide the form field wrapper); + * - required - set the required state of the field; + * - readonly - set the readonly state of the field; + * - disabled - set the disabled state of the field; + * - set - set the field value from the query result; + * - set-if-blank - set the field value from the query result only if the field value is blank + * */ +(function ($, ns) { + 'use strict'; + + const FORM_FIELDS_SELECTOR = 'input, textarea, select'; + const CORAL_FIELD_SELECTOR = '.coral-Form-field'; + + /** + * Creates CSS selector to find by name with support of simple wildcards + * @param path + */ + function createSearchQuery(path) { + if (path.endsWith('*')) return `[name^="${path.slice(0, -1)}"]`; + if (path.startsWith('*')) return `[name$="${path.slice(1)}"]`; + return `[name="${path}"]`; + } + + /** + * Find form field by a path. If the path is not provided, returns $root. + * Supports simple wildcard syntax to find fields by name start / end: + * - *name - find fields with name ending with 'name' + * - name* - find fields with name starting with 'name' + * - name - find fields with name 'name' + * + * @param {jQuery} $root - root element to search in + * @param {string} [path] - path to the target field + * */ + function resolveTarget($root, path) { + if (!path) return $root; + const $fields = $root.find(FORM_FIELDS_SELECTOR).filter(createSearchQuery(path)); + // Resolves input field to coral form field + return $fields.closest(CORAL_FIELD_SELECTOR); + } + + /** + * Set the field value from the query result, skip undefined query results + * query type: string + * optional parameters: + * - path: string - path to the target field (supports wildcards) + * */ + ns.ActionRegistry.register('set', function setValue(value, { path }) { + if (value === undefined) return; + const $target = resolveTarget(this.$el, path); + ns.ElementAccessors.setValue($target, value); + }); + + /** + * Set the field value from the query result only if the field value is blank, + * skip undefined query results + * query type: string + * optional parameters: + * - path: string - path to the target field (supports wildcards) + * */ + ns.ActionRegistry.register('set-if-blank', function setValueIfBlank(value, { path }) { + if (value === undefined) return; + const $target = resolveTarget(this.$el, path); + const current = ns.ElementAccessors.getValue($target); + if (current === '' || current === null || current === undefined) { + ns.ElementAccessors.setValue($target, value); + } + }); +})(Granite.$, Granite.DependsOnPlugin = (Granite.DependsOnPlugin || {}));