From a43833d511ec1700ce4ed2a13e573fcbf87c7bee Mon Sep 17 00:00:00 2001 From: Ben Thomson Date: Wed, 27 May 2020 09:36:21 +0800 Subject: [PATCH] Trigger dependency check for remote values for inspector dropdown properties (#5071) --- .../ui/js/inspector.editor.autocomplete.js | 6 +-- .../assets/ui/js/inspector.editor.dropdown.js | 25 ++++++++--- .../system/assets/ui/js/inspector.surface.js | 44 +++++++++++++------ 3 files changed, 53 insertions(+), 22 deletions(-) diff --git a/modules/system/assets/ui/js/inspector.editor.autocomplete.js b/modules/system/assets/ui/js/inspector.editor.autocomplete.js index 6e6215c09..64c835f3e 100644 --- a/modules/system/assets/ui/js/inspector.editor.autocomplete.js +++ b/modules/system/assets/ui/js/inspector.editor.autocomplete.js @@ -142,7 +142,7 @@ return result } - AutocompleteEditor.prototype.onInspectorPropertyChanged = function(property, value) { + AutocompleteEditor.prototype.onInspectorPropertyChanged = function(property) { if (!this.propertyDefinition.depends || this.propertyDefinition.depends.indexOf(property) === -1) { return } @@ -219,7 +219,7 @@ var itemsEvent = $.Event('autocompleteitems.oc.inspector') $inspectable.trigger(itemsEvent, [{ - values: values, + values: values, callback: this.proxy(this.itemsRequestDone), property: this.inspector.getPropertyPath(this.propertyDefinition.property), propertyDefinition: this.propertyDefinition @@ -253,4 +253,4 @@ } $.oc.inspector.propertyEditors.autocomplete = AutocompleteEditor -}(window.jQuery); \ No newline at end of file +}(window.jQuery); diff --git a/modules/system/assets/ui/js/inspector.editor.dropdown.js b/modules/system/assets/ui/js/inspector.editor.dropdown.js index 124c402e5..b5d2e25fe 100644 --- a/modules/system/assets/ui/js/inspector.editor.dropdown.js +++ b/modules/system/assets/ui/js/inspector.editor.dropdown.js @@ -112,6 +112,9 @@ dropdownCssClass: 'ocInspectorDropdown' } + if (this.propertyDefinition.emptyOption !== undefined) { + options.placeholder = this.propertyDefinition.emptyOption + } if (this.propertyDefinition.placeholder !== undefined) { options.placeholder = this.propertyDefinition.placeholder } @@ -131,7 +134,7 @@ } DropdownEditor.prototype.createPlaceholder = function(select) { - var placeholder = this.propertyDefinition.placeholder + var placeholder = this.propertyDefinition.placeholder || this.propertyDefinition.emptyOption if (placeholder !== undefined && !Modernizr.touchevents) { this.createOption(select, null, null) @@ -202,7 +205,7 @@ this.inspector.setPropertyValue(this.propertyDefinition.property, this.normalizeValue(select.value), this.initialization) } - DropdownEditor.prototype.onInspectorPropertyChanged = function(property, value) { + DropdownEditor.prototype.onInspectorPropertyChanged = function(property) { if (!this.propertyDefinition.depends || this.propertyDefinition.depends.indexOf(property) === -1) { return } @@ -260,7 +263,7 @@ return false } - return BaseProto.isEmptyValue.call(this, value) + return BaseProto.isEmptyValue.call(this, value) } // @@ -307,7 +310,8 @@ var currentValue = this.inspector.getPropertyValue(this.propertyDefinition.property), data = this.getRootSurface().getValues(), self = this, - $form = $(this.getSelect()).closest('form') + $form = $(this.getSelect()).closest('form'), + dependents = this.inspector.findDependentProperties(this.propertyDefinition.property) if (currentValue === undefined) { currentValue = this.propertyDefinition.default @@ -316,6 +320,15 @@ var callback = function dropdownOptionsRequestDoneClosure(data) { self.hideLoadingIndicator() self.optionsRequestDone(data, currentValue, true) + + if (dependents.length > 0) { + for (var i in dependents) { + var editor = self.inspector.findPropertyEditor(dependents[i]) + if (editor && typeof editor.onInspectorPropertyChanged === 'function') { + editor.onInspectorPropertyChanged(self.propertyDefinition.property) + } + } + } } if (this.propertyDefinition.depends) { @@ -347,7 +360,7 @@ var optionsEvent = $.Event('dropdownoptions.oc.inspector') $inspectable.trigger(optionsEvent, [{ - values: values, + values: values, callback: callback, property: this.inspector.getPropertyPath(this.propertyDefinition.property), propertyDefinition: this.propertyDefinition @@ -434,4 +447,4 @@ } $.oc.inspector.propertyEditors.dropdown = DropdownEditor -}(window.jQuery); \ No newline at end of file +}(window.jQuery); diff --git a/modules/system/assets/ui/js/inspector.surface.js b/modules/system/assets/ui/js/inspector.surface.js index e536d1cde..a9b3e1375 100644 --- a/modules/system/assets/ui/js/inspector.surface.js +++ b/modules/system/assets/ui/js/inspector.surface.js @@ -28,9 +28,9 @@ * - containerElement container DOM element * - properties array (array of objects) * - values - property values, an object - * - inspectorUniqueId - a string containing the unique inspector identifier. - * The identifier should be a constant for an inspectable element. Use - * $.oc.inspector.helpers.generateElementUniqueId(element) to generate a persistent ID + * - inspectorUniqueId - a string containing the unique inspector identifier. + * The identifier should be a constant for an inspectable element. Use + * $.oc.inspector.helpers.generateElementUniqueId(element) to generate a persistent ID * for an element. Use $.oc.inspector.helpers.generateUniqueId() to generate an ID * not associated with an element. Inspector uses the ID for storing configuration * related to an element in the document DOM. @@ -138,7 +138,7 @@ // /** - * Builds the Inspector table. The markup generated by this method looks + * Builds the Inspector table. The markup generated by this method looks * like this: * *
@@ -391,7 +391,7 @@ } } } - + Surface.prototype.applyGroupLevelToRow = function(row, group) { if (row.hasAttribute('data-group-level')) { return @@ -507,7 +507,7 @@ row.removeChild(cell) } } - + this.editors.push(editor) } @@ -538,7 +538,7 @@ if (!supressChangeEvents) { if (this.originalValues[property] === undefined || !this.comparePropertyValues(this.originalValues[property], value)) { this.markPropertyChanged(property, true) - } + } else { this.markPropertyChanged(property, false) } @@ -563,10 +563,10 @@ Surface.prototype.notifyEditorsPropertyChanged = function(propertyPath, value) { // Editors use this event to watch changes in properties - // they depend on. All editors should be notified, including + // they depend on. All editors should be notified, including // editors in nested surfaces. The property name is passed as a - // path object.property (if the property is nested), so that - // property depenencies could be defined as + // path object.property (if the property is nested), so that + // property depenencies could be defined as // ['property', 'object.property'] for (var i = 0, len = this.editors.length; i < len; i++) { @@ -638,7 +638,7 @@ } if ($.oc.inspector.propertyEditors[type] === undefined) { - throw new Error('The Inspector editor class "' + type + + throw new Error('The Inspector editor class "' + type + '" is not defined in the $.oc.inspector.propertyEditors namespace.') } } @@ -688,6 +688,24 @@ return result.join('.') } + Surface.prototype.findDependentProperties = function(propertyName) { + var dependents = [] + + for (var i in this.rawProperties) { + var property = this.rawProperties[i] + + if (!property.depends) { + continue + } + + if (property.depends.indexOf(propertyName) !== -1) { + dependents.push(property.property) + } + } + + return dependents + } + // // Nested surfaces support // @@ -847,7 +865,7 @@ continue } } - } + } else { value = externalParameterEditor.getValue() value = '{{ ' + value + ' }}' @@ -952,4 +970,4 @@ $.oc.inspector.surface = Surface $.oc.inspector.removedProperty = {removed: true} $.oc.inspector.invalidProperty = {invalid: true} -}(window.jQuery); \ No newline at end of file +}(window.jQuery);