Fixed surveyjs/survey-creator#4830 - Image Picker - Non-existing item…

…s appear on a design surface
surveyjs · Oct 31, 2023 · baa9389 · baa9389
1 parent 4c97513
commit baa9389
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/src/knockout/templates/question-imagepicker.html b/src/knockout/templates/question-imagepicker.html
@@ -40,7 +40,7 @@
                   <!-- ko if: ($data.locImageLink.koRenderedHtml() && !$data.contentNotLoaded && question.contentMode === "video") -->
                   <video controls data-bind="css: question.cssClasses.image, attr: { src: $data.locImageLink.koRenderedHtml, width: question.renderedImageWidth, height: question.renderedImageHeight }, style: { objectFit: question.imageFit }, event: { loadedmetadata: question.onContentLoaded, error: $data.onErrorHandler }"></video>
                   <!-- /ko -->
-                  <!-- ko if: !$data.imageLink || $data.contentNotLoaded -->
+                  <!-- ko if: (!$data.locImageLink.koRenderedHtml() || $data.contentNotLoaded) -->
                   <div data-bind="css: question.cssClasses.itemNoImage, style: { width: question.renderedImageWidth, height: question.renderedImageHeight, objectFit: question.imageFit}">
                     <!-- ko component: { name: 'sv-svg-icon', params: { css: question.cssClasses.itemNoImageSvgIcon, iconName: question.cssClasses.itemNoImageSvgIconId, size: 48 } } --><!-- /ko -->
                   </div>

diff --git a/src/question_imagepicker.ts b/src/question_imagepicker.ts
@@ -32,6 +32,8 @@ export class ImageItemValue extends ItemValue implements ILocalizableOwner {
   }
   public set imageLink(val: string) {
     this.setLocalizableStringText("imageLink", val);
+    this.imageNotLoaded = false;
+    this.videoNotLoaded = false;
   }
   private aspectRatio: number;
 
@@ -59,7 +61,7 @@ export class ImageItemValue extends ItemValue implements ILocalizableOwner {
   }
 
   public set contentNotLoaded(val: boolean) {
-    if(this.locOwner instanceof QuestionImagePickerModel && this.locOwner.contentMode == "video") {
+    if (this.locOwner instanceof QuestionImagePickerModel && this.locOwner.contentMode == "video") {
       this.videoNotLoaded = val;
     } else {
       this.imageNotLoaded = val;
@@ -401,7 +403,7 @@ export class QuestionImagePickerModel extends QuestionCheckboxBase {
   }
 
   public triggerResponsiveness(hard: boolean = true): void {
-    if(hard && this.reCalcGapBetweenItemsCallback) {
+    if (hard && this.reCalcGapBetweenItemsCallback) {
       this.reCalcGapBetweenItemsCallback();
     }
     super.triggerResponsiveness(hard);
@@ -412,8 +414,8 @@ export class QuestionImagePickerModel extends QuestionCheckboxBase {
   public afterRender(el: HTMLElement): void {
     super.afterRender(el);
     const selector = this.getObservedElementSelector();
-    const observedElement = el && selector ? el.querySelector(selector): undefined;
-    if(!!observedElement) {
+    const observedElement = el && selector ? el.querySelector(selector) : undefined;
+    if (!!observedElement) {
       this.reCalcGapBetweenItemsCallback = () => {
         this.gapBetweenItems = Math.ceil(Number.parseFloat(window.getComputedStyle(observedElement).gap)) || 16;
       };