@asd20/ui 3.2.968 → 3.2.970
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -19,14 +19,14 @@
|
|
|
19
19
|
class="background-video"
|
|
20
20
|
role="presentation"
|
|
21
21
|
aria-hidden="true"
|
|
22
|
+
tabindex="-1"
|
|
22
23
|
autoplay
|
|
23
24
|
loop
|
|
24
|
-
autobuffer
|
|
25
25
|
muted
|
|
26
26
|
playsinline
|
|
27
27
|
:poster="imageUrl"
|
|
28
28
|
>
|
|
29
|
-
<source :src="loadVideo" type="video/mp4" />
|
|
29
|
+
<source aria-hidden="true" :src="loadVideo" type="video/mp4" />
|
|
30
30
|
</video>
|
|
31
31
|
<img
|
|
32
32
|
v-else
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
:alt="imageCaption"
|
|
36
36
|
/>
|
|
37
37
|
<button
|
|
38
|
-
v-if="videoUrl"
|
|
38
|
+
v-if="videoUrl && !isMobile"
|
|
39
39
|
class="video-toggle-btn"
|
|
40
40
|
@click="toggleVideo"
|
|
41
41
|
:aria-label="isPaused ? 'Play video' : 'Pause video'"
|
|
@@ -112,7 +112,11 @@ export default {
|
|
|
112
112
|
}
|
|
113
113
|
},
|
|
114
114
|
mounted() {
|
|
115
|
-
this.
|
|
115
|
+
this.checkIsMobile()
|
|
116
|
+
window.addEventListener('resize', this.checkIsMobile)
|
|
117
|
+
},
|
|
118
|
+
beforeDestroy() {
|
|
119
|
+
window.removeEventListener('resize', this.checkIsMobile)
|
|
116
120
|
},
|
|
117
121
|
computed: {
|
|
118
122
|
mq() {
|
|
@@ -141,6 +145,9 @@ export default {
|
|
|
141
145
|
},
|
|
142
146
|
},
|
|
143
147
|
methods: {
|
|
148
|
+
checkIsMobile() {
|
|
149
|
+
this.isMobile = window.innerWidth <= 1024
|
|
150
|
+
},
|
|
144
151
|
toggleVideo() {
|
|
145
152
|
const video = this.$refs.backgroundVideo
|
|
146
153
|
if (video) {
|
|
@@ -10,36 +10,34 @@
|
|
|
10
10
|
</div>
|
|
11
11
|
|
|
12
12
|
<video
|
|
13
|
+
v-if="loadVideo"
|
|
13
14
|
ref="backgroundVideo"
|
|
14
15
|
class="background-video"
|
|
15
16
|
role="presentation"
|
|
16
17
|
aria-hidden="true"
|
|
18
|
+
tabindex="-1"
|
|
17
19
|
autoplay
|
|
18
20
|
loop
|
|
19
|
-
autobuffer
|
|
20
21
|
muted
|
|
21
22
|
playsinline
|
|
22
23
|
:poster="imageUrl"
|
|
23
24
|
>
|
|
24
|
-
<source :src="loadVideo" type="video/mp4" />
|
|
25
|
+
<source aria-hidden="true" :src="loadVideo" type="video/mp4" />
|
|
25
26
|
</video>
|
|
27
|
+
<img v-else class="background-image" :src="imageUrl" :alt="imageCaption" />
|
|
26
28
|
<button
|
|
27
|
-
v-if="videoUrl"
|
|
29
|
+
v-if="videoUrl && !isMobile"
|
|
28
30
|
class="video-toggle-btn"
|
|
29
31
|
@click="toggleVideo"
|
|
30
|
-
:aria-label="
|
|
32
|
+
:aria-label="
|
|
33
|
+
isPaused ? 'Play background video' : 'Pause background video'
|
|
34
|
+
"
|
|
31
35
|
>
|
|
32
36
|
<!-- Play icon (▶) -->
|
|
33
37
|
<span v-if="isPaused">►</span>
|
|
34
38
|
<!-- Pause icon (⏸) -->
|
|
35
39
|
<span v-else>❙❙</span>
|
|
36
40
|
</button>
|
|
37
|
-
|
|
38
|
-
<img
|
|
39
|
-
:class="videoUrl ? 'hide-background-image' : 'background-image'"
|
|
40
|
-
:src="imageUrl"
|
|
41
|
-
:alt="imageCaption"
|
|
42
|
-
/>
|
|
43
41
|
<!-- <div class="scroll-down-indicator"></div> -->
|
|
44
42
|
<slot />
|
|
45
43
|
</header>
|
|
@@ -73,7 +71,11 @@ export default {
|
|
|
73
71
|
}
|
|
74
72
|
},
|
|
75
73
|
mounted() {
|
|
76
|
-
this.
|
|
74
|
+
this.checkIsMobile()
|
|
75
|
+
window.addEventListener('resize', this.checkIsMobile)
|
|
76
|
+
},
|
|
77
|
+
beforeDestroy() {
|
|
78
|
+
window.removeEventListener('resize', this.checkIsMobile)
|
|
77
79
|
},
|
|
78
80
|
computed: {
|
|
79
81
|
mq() {
|
|
@@ -100,6 +102,9 @@ export default {
|
|
|
100
102
|
},
|
|
101
103
|
},
|
|
102
104
|
methods: {
|
|
105
|
+
checkIsMobile() {
|
|
106
|
+
this.isMobile = window.innerWidth <= 1024
|
|
107
|
+
},
|
|
103
108
|
toggleVideo() {
|
|
104
109
|
const video = this.$refs.backgroundVideo
|
|
105
110
|
if (video) {
|
|
@@ -130,11 +135,6 @@ export default {
|
|
|
130
135
|
.background-video {
|
|
131
136
|
display: none;
|
|
132
137
|
}
|
|
133
|
-
.hide-background-image {
|
|
134
|
-
display: block;
|
|
135
|
-
width: 100%;
|
|
136
|
-
order: 2;
|
|
137
|
-
}
|
|
138
138
|
.background-image {
|
|
139
139
|
display: block;
|
|
140
140
|
// position: absolute;
|
|
@@ -241,14 +241,6 @@ export default {
|
|
|
241
241
|
}
|
|
242
242
|
}
|
|
243
243
|
|
|
244
|
-
@media (min-width: 600px) {
|
|
245
|
-
.asd20-video-header {
|
|
246
|
-
.hide-background-image {
|
|
247
|
-
order: 2;
|
|
248
|
-
}
|
|
249
|
-
}
|
|
250
|
-
}
|
|
251
|
-
|
|
252
244
|
@media (min-width: 768px) {
|
|
253
245
|
.asd20-video-header {
|
|
254
246
|
&__top {
|
|
@@ -258,9 +250,6 @@ export default {
|
|
|
258
250
|
.background-image {
|
|
259
251
|
order: 0;
|
|
260
252
|
}
|
|
261
|
-
.hide-background-image {
|
|
262
|
-
order: 0;
|
|
263
|
-
}
|
|
264
253
|
}
|
|
265
254
|
}
|
|
266
255
|
|
|
@@ -295,9 +284,6 @@ export default {
|
|
|
295
284
|
height: 100vh;
|
|
296
285
|
object-fit: cover;
|
|
297
286
|
}
|
|
298
|
-
.hide-background-image {
|
|
299
|
-
display: none;
|
|
300
|
-
}
|
|
301
287
|
|
|
302
288
|
video {
|
|
303
289
|
z-index: -1;
|