Support textarea widget for multifield (array) properties

wcm-io · Sep 24, 2024 · 17008e6 · 17008e6
1 parent 739c053
commit 17008e6
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 4 deletions.
diff --git a/bundle/src/main/resources/angularjs-partials/multifield.html b/bundle/src/main/resources/angularjs-partials/multifield.html
@@ -34,8 +34,14 @@
              ng-model="effectiveValue.value" />
       <span class="coral-Checkbox-checkmark"></span>
     </label>
+    <textarea is="coral-textarea"
+           bo-if="type==='textarea'"
+           disabled
+           readonly
+           ng-attr-rows="{{textareaRows}}"
+           ng-model="effectiveValue.value"></textarea>
     <input is="coral-textfield" type="type"
-           bo-if="type!=='checkbox'"
+           bo-if="type!=='checkbox' && type!=='textarea'"
            disabled
            readonly
            ng-model="effectiveValue.value" />
@@ -57,8 +63,14 @@
              ng-model="value.value" />
       <span class="coral-Checkbox-checkmark"></span>
     </label>
+    <textarea is="coral-textarea"
+           bo-if="type==='textarea'"
+           disabled
+           readonly
+           ng-attr-rows="{{textareaRows}}"
+           ng-model="value.value"></textarea>
     <input is="coral-textfield" type="type"
-           bo-if="type!=='checkbox'"
+           bo-if="type!=='checkbox' && type!=='textarea'"
            disabled
            readonly
            ng-model="value.value" />
@@ -81,8 +93,15 @@
       <span class="coral-Checkbox-checkmark"></span>
     </label>
     <div class="caconfig-textfield-wrapper">
-      <input is="coral-textfield" type="type"
-             bo-if="type!=='checkbox'"
+       <textarea is="coral-textarea"
+             bo-if="type==='textarea'"
+             ng-model="value.value" ng-trim="false"
+             ng-required="{{property.metadata.properties.required && !property.overridden && !property.inherited && !property.readOnly}}"
+             caconfig-validation="{{validation}}"
+             ng-attr-rows="{{textareaRows}}"
+             name="inputField"></textarea>
+       <input is="coral-textfield" type="type"
+             bo-if="type!=='checkbox' && type!=='textarea'"
              ng-model="value.value"
              ng-trim="false"
              ng-pattern="pattern"

diff --git a/bundle/src/main/resources/angularjs-partials/propertyInputTextarea.html b/bundle/src/main/resources/angularjs-partials/propertyInputTextarea.html
@@ -11,8 +11,10 @@
   </div>
   <textarea is="coral-textarea" class="caconfig-if-property-not-overridden-and-not-inherited-and-not-readonly caconfig-if-config-inherited"
             ng-model="property.value"
+            ng-attr-rows="{{textareaRows}}"
             disabled readonly></textarea>
   <textarea is="coral-textarea" class="caconfig-if-property-overridden-or-inherited-or-readonly"
             ng-model="property.effectiveValue"
+            ng-attr-rows="{{textareaRows}}"
             disabled readonly></textarea>
 </div>
diff --git a/...main/webapp/app-root/clientlibs/io.wcm.caconfig.editor/js/widgets/multifield.directive.js b/...main/webapp/app-root/clientlibs/io.wcm.caconfig.editor/js/widgets/multifield.directive.js
@@ -55,6 +55,12 @@
       scope.validation = props.validation;
       scope.validationMessage = props.validationMessage ? Granite.I18n.get(props.validationMessage) : undefined;
 
+      // special handling for textarea
+      if (props.widgetType === "textarea") {
+        scope.type = "textarea";
+        scope.textareaRows = props.textareaRows;
+      }
+
       setValueArray(scope.property.effectiveValue, scope.effectiveValues);
       setValueArray(scope.property.value, scope.values);