From 71291c1ce9de694e350f6bde2aabe7e5cc3e90a7 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Fri, 9 Dec 2022 20:55:49 +0000 Subject: [PATCH 1/4] =?UTF-8?q?=E2=9C=A8=20Adds=20update=20support=20to=20?= =?UTF-8?q?image=20widget=20(#992)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Widgets/ImageWidget.vue | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/components/Widgets/ImageWidget.vue b/src/components/Widgets/ImageWidget.vue index a556810f..2634b1d2 100644 --- a/src/components/Widgets/ImageWidget.vue +++ b/src/components/Widgets/ImageWidget.vue @@ -9,10 +9,24 @@ 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}`; + }, + /* 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.updateCount += 1; }, }, }; From f00132d4a3fed7f5bcba4e6814ec7572d9eb0f02 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Sat, 10 Dec 2022 17:36:11 +0000 Subject: [PATCH 2/4] =?UTF-8?q?=E2=9C=A8=20Adds=20support=20for=20dimensio?= =?UTF-8?q?ns=20on=20Image=20Widget?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Widgets/ImageWidget.vue | 26 +++++++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/src/components/Widgets/ImageWidget.vue b/src/components/Widgets/ImageWidget.vue index 2634b1d2..8bbf22c8 100644 --- a/src/components/Widgets/ImageWidget.vue +++ b/src/components/Widgets/ImageWidget.vue @@ -1,6 +1,6 @@ @@ -18,6 +18,30 @@ export default { if (!this.options.imagePath) this.error('You must specify an 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; + } + }; + console.log(` + width: ${makeDimensionsUnit(this.options.imageWidth)}; + height: ${makeDimensionsUnit(this.options.imageHeight)}; + `); + // 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}` : ''; From bb8419f0775a701fa40a7491ab948b810a2af4f3 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Sat, 10 Dec 2022 18:34:10 +0000 Subject: [PATCH 3/4] =?UTF-8?q?=E2=9C=A8=20Improved=20update=20support=20f?= =?UTF-8?q?or=20iframe=20widget,=20plus=20shows=20loader=20(#992)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Widgets/IframeWidget.vue | 10 +++++++++- src/components/Widgets/ImageWidget.vue | 6 ++---- 2 files changed, 11 insertions(+), 5 deletions(-) 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 8bbf22c8..a80407b7 100644 --- a/src/components/Widgets/ImageWidget.vue +++ b/src/components/Widgets/ImageWidget.vue @@ -32,10 +32,6 @@ export default { return userVal; } }; - console.log(` - width: ${makeDimensionsUnit(this.options.imageWidth)}; - height: ${makeDimensionsUnit(this.options.imageHeight)}; - `); // Return CSS values for width and height return ` width: ${makeDimensionsUnit(this.options.imageWidth)}; @@ -50,7 +46,9 @@ export default { 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(); }, }, }; From 94ce53f80bb4fa1c250b2bee4f5a4f199f6117d9 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Sat, 10 Dec 2022 18:37:18 +0000 Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=93=84=20Adds=20docs=20for=20image=20?= =?UTF-8?q?widget=20dimensions?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/widgets.md | 2 ++ 1 file changed, 2 insertions(+) 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