mirror of
https://github.com/Lissy93/dashy.git
synced 2024-11-24 05:56:49 +03:00
✨ Adds support for dimensions on Image Widget
This commit is contained in:
parent
71291c1ce9
commit
f00132d4a3
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="image-widget">
|
<div class="image-widget">
|
||||||
<img :src="imagePath" class="embedded-image" />
|
<img :src="imagePath" :style="imageDimensions" class="embedded-image" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -18,6 +18,30 @@ export default {
|
|||||||
if (!this.options.imagePath) this.error('You must specify an imagePath');
|
if (!this.options.imagePath) this.error('You must specify an imagePath');
|
||||||
return `${this.options.imagePath}${this.updatePathParam}`;
|
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 */
|
/* Generate a URL param, to be updated in order to re-fetch image */
|
||||||
updatePathParam() {
|
updatePathParam() {
|
||||||
return this.updateCount ? `#dashy-update-${this.updateCount}` : '';
|
return this.updateCount ? `#dashy-update-${this.updateCount}` : '';
|
||||||
|
Loading…
Reference in New Issue
Block a user