added forceLoad option for image (#8260)

* added forceLoad option for image

* updated json

* refactored changes & added reset method

Author: jwoo-msft

samples/v1.6/Elements/Image.ForceLoad.json

@@ -0,0 +1,20 @@
+{
+    "type": "AdaptiveCard",
+    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
+    "version": "1.6",
+    "body": [
+        {
+            "type": "Image",
+            "size": "Medium",
+            "url": "https://media.giphy.com/media/83eQIMgNvkiY/giphy.gif",
+            "horizontalAlignment": "Center"
+        },
+        {
+            "type": "Image",
+            "size": "Medium",
+            "url": "https://media.giphy.com/media/83eQIMgNvkiY/giphy.gif",
+            "forceLoad": true,
+            "horizontalAlignment": "Center"
+        }
+    ]
+}

source/nodejs/adaptivecards/src/card-elements.ts

@@ -1948,6 +1948,7 @@ export class Image extends CardElement {
     static readonly selectActionProperty = new ActionProperty(Versions.v1_1, "selectAction", [
         "Action.ShowCard"
     ]);
+    static readonly shouldForceLoadProperty = new BoolProperty(Versions.v1_6, "forceLoad", false);
 
     protected populateSchema(schema: SerializableObjectSchema) {
         super.populateSchema(schema);
@@ -1981,6 +1982,9 @@ export class Image extends CardElement {
     @property(Image.selectActionProperty)
     selectAction?: Action;
 
+    @property(Image.shouldForceLoadProperty)
+    forceLoad: boolean;
+
     //#endregion
 
     private applySize(element: HTMLElement) {
@@ -2140,7 +2144,7 @@ export class Image extends CardElement {
                 imageElement.style.backgroundColor = backgroundColor;
             }
 
-            imageElement.src = <string>this.preProcessPropertyValue(Image.urlProperty);
+            this.setImageSource(imageElement);    
 
             const altTextProperty = this.preProcessPropertyValue(Image.altTextProperty);
             if (altTextProperty) {
@@ -2188,6 +2192,45 @@ export class Image extends CardElement {
     getResourceInformation(): IResourceInformation[] {
         return this.url ? [{ url: this.url, mimeType: "image" }] : [];
     }
+
+    private setImageSource(imageElement: HTMLImageElement): void {
+        const imageForceLoader: ImageForceLoader = new ImageForceLoader(this.forceLoad, this.url);
+        imageForceLoader.configureImage(this);
+        imageElement.src = <string>this.preProcessPropertyValue(Image.urlProperty);
+        imageForceLoader.resetImage(this);
+    } 
+}
+
+// configures Image element to fetch a new image data from url source instead of relying on cache
+// currently rudimentary refreshing scheme is used
+// by attaching unique query string to url, we bypass the cache usage
+class ImageForceLoader{
+    private uniqueHash : string;
+    public readonly urlWithForceLoadOption : string;
+    constructor(
+        readonly doForceLoad: boolean,
+        readonly url : string | undefined,
+    )
+    {
+        if (url && url.length && doForceLoad) {
+            // we can do better by appending unique key such as uuid instead of epoch
+            // however the current usage is for front-end ui and networking,  
+            // since ui is running in single main thread, this is sufficient mechanism
+            // without needing to depend on external library for our small use cases.
+            this.uniqueHash = '?' + Date.now();
+            this.urlWithForceLoadOption = url + this.uniqueHash;
+        }
+    }
+
+    public configureImage(image: Image): void {
+        if (this.urlWithForceLoadOption && this.urlWithForceLoadOption.length) {
+            image.url = this.urlWithForceLoadOption;
+        }
+    }
+
+    public resetImage(image: Image): void {
+        image.url = this.url;
+    }
 }
 
 export abstract class CardElementContainer extends CardElement {