-
Notifications
You must be signed in to change notification settings - Fork 16
/
index.ts
148 lines (134 loc) · 4.17 KB
/
index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
import { defineComponent, h, PropType, ref, watchEffect } from 'vue';
import { ResponsiveImageType } from '../Image';
import { buildRegularSource, buildWebpSource } from './utils';
export const NakedImage = defineComponent({
name: 'DatocmsNakedImage',
inheritAttrs: false,
props: {
/** The actual response you get from a DatoCMS `responsiveImage` GraphQL query */
data: {
type: Object as PropType<ResponsiveImageType>,
required: true,
},
/** Whether the component should use a blurred image placeholder */
usePlaceholder: {
type: Boolean,
default: true,
},
/**
* The HTML5 `sizes` attribute for the image
*
* Learn more about srcset and sizes:
* -> https://web.dev/learn/design/responsive-images/#sizes
* -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes
**/
sizes: {
type: String,
},
/**
* When true, the image will be considered high priority. Lazy loading is automatically disabled, and fetchpriority="high" is added to the image.
* You should use the priority property on any image detected as the Largest Contentful Paint (LCP) element. It may be appropriate to have multiple priority images, as different images may be the LCP element for different viewport sizes.
* Should only be used when the image is visible above the fold.
**/
priority: {
type: Boolean,
default: false,
},
/**
* If `data` does not contain `srcSet`, the candidates for the `srcset` of the image will be auto-generated based on these width multipliers
*
* Default candidate multipliers are [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
**/
srcSetCandidates: {
type: Array,
validator: (values: any[]): values is number[] =>
values.every((value): value is number => {
return typeof value === 'number';
}),
default: () => [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4],
},
},
setup(_props, { emit, expose }) {
const loaded = ref(false);
function handleLoad() {
emit('load');
loaded.value = true;
}
const imageRef = ref<HTMLImageElement>();
// See: https://stackoverflow.com/q/39777833/266535
watchEffect(() => {
if (!imageRef.value) {
return;
}
if (imageRef.value.complete && imageRef.value.naturalWidth) {
handleLoad();
}
});
expose({
imageRef,
});
return {
loaded,
handleLoad,
imageRef,
};
},
render() {
const webpSource = buildWebpSource(this.data, this.sizes);
const regularSource = buildRegularSource(
this.data,
this.sizes,
this.srcSetCandidates,
);
const { width } = this.data;
const height =
this.data.height ??
Math.round(this.data.aspectRatio ? width / this.data.aspectRatio : 0);
const sizingStyle = {
aspectRatio: `${width} / ${height}`,
width: '100%',
maxWidth: `${width}px`,
height: 'auto',
};
const placeholderStyle =
this.usePlaceholder && !this.loaded && this.data.base64
? {
backgroundImage: `url("${this.data.base64}")`,
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition: '50% 50%',
color: 'transparent',
}
: this.usePlaceholder && !this.loaded && this.data.bgColor
? {
backgroundColor: this.data.bgColor,
color: 'transparent',
}
: undefined;
return h('picture', null, [
webpSource,
regularSource,
this.data.src &&
h('img', {
ref: 'imageRef',
src: this.data.src,
alt: this.data.alt,
onLoad: this.handleLoad,
title: this.data.title,
fetchpriority: this.priority ? 'high' : undefined,
loading: this.priority ? undefined : 'lazy',
style: {
...placeholderStyle,
...sizingStyle,
...(this.$attrs.style || {}),
},
class: this.$attrs.class,
}),
]);
},
});
export const DatocmsNakedImagePlugin = {
install: (Vue: any) => {
Vue.component('DatocmsNakedImage', Image);
},
};