work for the #8209 (imagepicker)

surveyjs · May 17, 2024 · c245c94 · c245c94
1 parent 5c042e5
commit c245c94
Show file tree

Hide file tree

Showing 8 changed files with 138 additions and 3 deletions.
diff --git a/packages/survey-angular-ui/src/questions/imagepicker-item.component.html b/packages/survey-angular-ui/src/questions/imagepicker-item.component.html
@@ -2,7 +2,7 @@
   <div [class]="question.getItemClass(model)">
     <label [class]="question.cssClasses.label">
         <input [type]="question.inputType" [attr.name]="question.questionName" [attr.value]="model.value" [id]="question.getItemId(model)" [attr.aria-required]="question.ariaRequired" [attr.aria-label]="question.ariaLabel" [attr.aria-invalid]="question.ariaInvalid" [attr.aria-errormessage]="question.ariaErrormessage"
-        (change)="onChange($event)" [checked]="question.isItemSelected(model)" [disabled]="!question.getItemEnabled(model)" [class]="question.cssClasses.itemControl"
+        (change)="onChange($event)" [checked]="question.isItemSelected(model)" [disabled]="!question.getItemEnabled(model)" [readonly]="question.isReadOnlyAttr" [class]="question.cssClasses.itemControl"
         />
         <div [class]="question.cssClasses.itemDecorator">
             <div [class]="question.cssClasses.imageContainer">

diff --git a/packages/survey-vue3-ui/src/ImagepickerItem.vue b/packages/survey-vue3-ui/src/ImagepickerItem.vue
@@ -9,6 +9,7 @@
         :id="question.getItemId(item)"
         v-model="question.value"
         :disabled="!question.getItemEnabled(item)"
+        :readonly="question.isReadOnlyAttr"
         v-bind:aria-required="question.ariaRequired"
         :aria-label="question.ariaLabel"
         :aria-invalid="question.ariaInvalid"
@@ -23,6 +24,7 @@
         :id="question.getItemId(item)"
         v-model="question.value"
         :disabled="!question.getItemEnabled(item)"
+        :readonly="question.isReadOnlyAttr"
         v-bind:aria-required="question.ariaRequired"
         :aria-label="question.ariaLabel"
         :aria-invalid="question.ariaInvalid"

diff --git a/src/knockout/templates/question-imagepicker.html b/src/knockout/templates/question-imagepicker.html
@@ -22,7 +22,7 @@
 <script type="text/html" id="survey-imagepicker-item">
     <div data-bind="css: question.koGetItemClass(item)">
         <label data-bind="css: question.cssClasses.label">
-            <input data-bind="attr: {type: question.inputType, name: question.questionName, value: item.value, id: question.getItemId(item), 'aria-required': question.ariaRequired, 'aria-label': question.ariaLabel, 'aria-invalid': question.ariaInvalid, 'aria-errormessage': question.ariaErrormessage}, checked: question.koValue, enable: question.getItemEnabled(item), css: question.cssClasses.itemControl"
+            <input data-bind="attr: {type: question.inputType, name: question.questionName, value: item.value, id: question.getItemId(item), 'aria-required': question.ariaRequired, 'aria-label': question.ariaLabel, 'aria-invalid': question.ariaInvalid, 'aria-errormessage': question.ariaErrormessage, readonly: question.isReadOnlyAttr}, checked: question.koValue, enable: question.getItemEnabled(item), css: question.cssClasses.itemControl"
             />
             <div data-bind="css: question.cssClasses.itemDecorator">
                 <div data-bind="css: question.cssClasses.imageContainer">

diff --git a/src/react/imagepicker.tsx b/src/react/imagepicker.tsx
@@ -199,6 +199,7 @@ export class SurveyQuestionImagePickerItem extends ReactSurveyElement {
             checked={isChecked}
             value={item.value}
             disabled={!this.question.getItemEnabled(item)}
+            readOnly={this.question.isReadOnlyAttr}
             onChange={this.handleOnChange}
             aria-required={this.question.ariaRequired}
             aria-label={this.question.ariaLabel}

diff --git a/src/vue/imagepicker-item.vue b/src/vue/imagepicker-item.vue
@@ -9,6 +9,7 @@
           :id="question.getItemId(item)"
           v-model="question.value"
           :disabled="!question.getItemEnabled(item)"
+          :readonly="question.isReadOnlyAttr"
           v-bind:aria-required="question.ariaRequired"
           :aria-label="question.ariaLabel"
           :aria-invalid="question.ariaInvalid"
@@ -23,6 +24,7 @@
           :id="question.getItemId(item)"
           v-model="question.value"
           :disabled="!question.getItemEnabled(item)"
+          :readonly="question.isReadOnlyAttr"
           v-bind:aria-required="question.ariaRequired"
           :aria-label="question.ariaLabel"
           :aria-invalid="question.ariaInvalid"

diff --git a/tests/markup/etalon_imagepicker.ts b/tests/markup/etalon_imagepicker.ts
@@ -1,4 +1,4 @@
-import { StylesManager } from "survey-core";
+import { StylesManager, settings } from "survey-core";
 import { registerMarkupTests } from "./helper";
 
 registerMarkupTests(
@@ -235,5 +235,57 @@ registerMarkupTests(
     before: () => { StylesManager.applyTheme("defaultV2"); },
     after: () => StylesManager.applyTheme("default"),
   },
+  {
+    name: "Test image picker readonly question markup",
+    json: {
+      questions: [
+        {
+          "type": "imagepicker",
+          "name": "question1",
+          "choices": [
+            {
+              "value": "item1",
+              "imageLink": "#item1.jpg"
+            },
+            {
+              "value": "item2",
+              "imageLink": "#item2.jpg"
+            }
+          ],
+          titleLocation: "hidden",
+          showLabel: true
+        }
+      ],
+      mode: "display"
+    },
+    snapshot: "imagepicker-readonly",
+  },
+  {
+    name: "Test image picker disabled question markup",
+    json: {
+      questions: [
+        {
+          "type": "imagepicker",
+          "name": "question1",
+          "choices": [
+            {
+              "value": "item1",
+              "imageLink": "#item1.jpg"
+            },
+            {
+              "value": "item2",
+              "imageLink": "#item2.jpg"
+            }
+          ],
+          titleLocation: "hidden",
+          showLabel: true
+        }
+      ],
+    },
+    initSurvey: (survey) => survey.setDesignMode(true),
+    before: () => { settings.supportCreatorV2 = true; },
+    after: () => { settings.supportCreatorV2 = false; },
+    snapshot: "imagepicker-disabled",
+  },
   ]
 );
diff --git a/tests/markup/snapshots/imagepicker-disabled.snap.html b/tests/markup/snapshots/imagepicker-disabled.snap.html
@@ -0,0 +1,39 @@
+<fieldset class="sv_imgsel">
+	<legend class="sv-hidden">question1</legend>
+	<div class="sv_q_imagepicker_inline sv_q_imgsel">
+		<label class="sv_q_imgsel_label">
+			<input aria-invalid="false" aria-label="question1" aria-required="false" class="sv_q_imgsel_control_item" disabled="" id="testid0i_0" name="question1_testid0" type="radio" value="item1">
+			<div>
+				<div>
+					<div class="sv_q_imgsel__no-image" style="height:150px; object-fit:contain; width:200px;">
+						<svg class="sv_q_imgsel__no-image-svg sv-svg-icon" role="img" style="height:48px; width:48px;">
+							<use xlink:href="#icon-no-image" class="">
+							</use>
+						</svg>
+					</div>
+				</div>
+				<span class="sv_q_imgsel_text">
+					<span class="sv-string-editor" contenteditable="true">item1</span>
+				</span>
+			</div>
+		</label>
+	</div>
+	<div class="sv_q_imagepicker_inline sv_q_imgsel">
+		<label class="sv_q_imgsel_label">
+			<input aria-invalid="false" aria-label="question1" aria-required="false" class="sv_q_imgsel_control_item" disabled="" id="testid0i_1" name="question1_testid0" type="radio" value="item2">
+			<div>
+				<div>
+					<div class="sv_q_imgsel__no-image" style="height:150px; object-fit:contain; width:200px;">
+						<svg class="sv_q_imgsel__no-image-svg sv-svg-icon" role="img" style="height:48px; width:48px;">
+							<use xlink:href="#icon-no-image" class="">
+							</use>
+						</svg>
+					</div>
+				</div>
+				<span class="sv_q_imgsel_text">
+					<span class="sv-string-editor" contenteditable="true">item2</span>
+				</span>
+			</div>
+		</label>
+	</div>
+</fieldset>
diff --git a/tests/markup/snapshots/imagepicker-readonly.snap.html b/tests/markup/snapshots/imagepicker-readonly.snap.html
@@ -0,0 +1,39 @@
+<fieldset class="sv_imgsel">
+	<legend class="sv-hidden">question1</legend>
+	<div class="sv_q_imagepicker_inline sv_q_imgsel">
+		<label class="sv_q_imgsel_label">
+			<input aria-invalid="false" aria-label="question1" aria-required="false" class="sv_q_imgsel_control_item" disabled="" id="testid0i_0" name="question1_testid0" readonly="" type="radio" value="item1">
+			<div>
+				<div>
+					<div class="sv_q_imgsel__no-image" style="height:150px; object-fit:contain; width:200px;">
+						<svg class="sv_q_imgsel__no-image-svg sv-svg-icon" role="img" style="height:48px; width:48px;">
+							<use xlink:href="#icon-no-image" class="">
+							</use>
+						</svg>
+					</div>
+				</div>
+				<span class="sv_q_imgsel_text">
+					<span class="sv-string-viewer">item1</span>
+				</span>
+			</div>
+		</label>
+	</div>
+	<div class="sv_q_imagepicker_inline sv_q_imgsel">
+		<label class="sv_q_imgsel_label">
+			<input aria-invalid="false" aria-label="question1" aria-required="false" class="sv_q_imgsel_control_item" disabled="" id="testid0i_1" name="question1_testid0" readonly="" type="radio" value="item2">
+			<div>
+				<div>
+					<div class="sv_q_imgsel__no-image" style="height:150px; object-fit:contain; width:200px;">
+						<svg class="sv_q_imgsel__no-image-svg sv-svg-icon" role="img" style="height:48px; width:48px;">
+							<use xlink:href="#icon-no-image" class="">
+							</use>
+						</svg>
+					</div>
+				</div>
+				<span class="sv_q_imgsel_text">
+					<span class="sv-string-viewer">item2</span>
+				</span>
+			</div>
+		</label>
+	</div>
+</fieldset>