diff --git a/docs/widgets.md b/docs/widgets.md index 873fe020..783fd26c 100644 --- a/docs/widgets.md +++ b/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 diff --git a/src/components/Widgets/IframeWidget.vue b/src/components/Widgets/IframeWidget.vue index 01d101d4..da04445c 100644 --- a/src/components/Widgets/IframeWidget.vue +++ b/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(); }, diff --git a/src/components/Widgets/ImageWidget.vue b/src/components/Widgets/ImageWidget.vue index a556810f..a80407b7 100644 --- a/src/components/Widgets/ImageWidget.vue +++ b/src/components/Widgets/ImageWidget.vue @@ -1,6 +1,6 @@ @@ -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(); }, }, };