mirror of
https://github.com/Lissy93/dashy.git
synced 2024-11-23 21:23:28 +03:00
✨ Adds support for dimensions on Image Widget
This commit is contained in:
parent
71291c1ce9
commit
f00132d4a3
@ -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>
|
||||
|
||||
@ -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}` : '';
|
||||
|
Loading…
Reference in New Issue
Block a user