🔀 Merge pull request #1008 from Lissy93/FEATURE/static-widget-update

[FEATURE] Image widget update functionality
Fixes #992

docs/widgets.md

@@ -254,6 +254,8 @@ Or what about showing a photo of the day? Try `https://source.unsplash.com/rando
 **Field** | **Type** | **Required** | **Description**
 --- | --- | --- | ---
 **`imagePath`** | `string` |  Required | The path (local or remote) of the image to display
+**`imageWidth`** | `string` |  _Optional_ | Specify a fixed width for rendered image. Accepts either integer value in `px`, or any string value with units (e.g. `420`, `100px`, `6.9rem`) (defaults to `auto`)
+**`imageHeight`** | `string` |  _Optional_ | Specify a fixed height for rendered image. Accepts either integer value in `px`, or any string value with units (e.g. `420`, `100px`, `6.9rem`) (defaults to `auto`)
 
 #### Example
 

src/components/Widgets/IframeWidget.vue

@@ -15,6 +15,9 @@ import WidgetMixin from '@/mixins/WidgetMixin';
 
 export default {
   mixins: [WidgetMixin],
+  data: () => ({
+    updateCount: 0,
+  }),
   computed: {
     /* Gets users specified URL to load into the iframe */
     frameUrl() {
@@ -23,7 +26,7 @@ export default {
         this.error('Iframe widget expects a URL');
         return null;
       }
-      return usersChoice;
+      return `${usersChoice}${this.updatePathParam}`;
     },
     frameHeight() {
       return this.options.frameHeight;
@@ -32,11 +35,16 @@ export default {
     frameId() {
       return `iframe-${btoa(this.frameUrl || 'empty').substring(0, 16)}`;
     },
+    /* Generate a URL param, to be updated in order to re-fetch image */
+    updatePathParam() {
+      return this.updateCount ? `#dashy-update-${this.updateCount}` : '';
+    },
   },
   methods: {
     /* Refreshes iframe contents, called by parent */
     update() {
       this.startLoading();
+      this.updateCount += 1;
       (document.getElementById(this.frameId) || {}).src = this.frameUrl;
       this.finishLoading();
     },

src/components/Widgets/ImageWidget.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="image-widget">
-  <img :src="imagePath" class="embedded-image" />
+  <img :src="imagePath" :style="imageDimensions" class="embedded-image" />
 </div>
 </template>
 
@@ -9,10 +9,46 @@ import WidgetMixin from '@/mixins/WidgetMixin';
 
 export default {
   mixins: [WidgetMixin],
+  data: () => ({
+    updateCount: 0,
+  }),
   computed: {
+    /* The path to image to render */
     imagePath() {
       if (!this.options.imagePath) this.error('You must specify an imagePath');
-      return this.options.imagePath;
+      return `${this.options.imagePath}${this.updatePathParam}`;
+    },
+    /* If set, apply users specified image dimensions */
+    imageDimensions() {
+      // Skip if neither set
+      if (!this.options.imageWidth && !this.options.imageHeight) return null;
+      // Apply correct units to input val, if needed
+      const makeDimensionsUnit = (userVal) => {
+        if (!userVal) { // Nothing set, use auto
+          return 'auto';
+        } else if (!Number.isNaN(Number(userVal))) { // Number set, add px
+          return `${userVal}px`;
+        } else { // Value is string, likely already includes units
+          return userVal;
+        }
+      };
+      // Return CSS values for width and height
+      return `
+        width: ${makeDimensionsUnit(this.options.imageWidth)};
+        height: ${makeDimensionsUnit(this.options.imageHeight)};
+      `;
+    },
+    /* Generate a URL param, to be updated in order to re-fetch image */
+    updatePathParam() {
+      return this.updateCount ? `#dashy-update-${this.updateCount}` : '';
+    },
+  },
+  methods: {
+    /* In order to re-fetch the image, we much update the URL with an arbitrary hash */
+    update() {
+      this.startLoading();
+      this.updateCount += 1;
+      this.finishLoading();
     },
   },
 };