transferred PR 1055 of upstream
This commit is contained in:
parent
4cdbf78037
commit
c71eb853c5
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<div class="flex justify-center max-h-80">
|
||||
<lazy-image-wrapper :picture="picture" />
|
||||
<blurhash-img-wrapper :picture="picture" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { IMedia } from "@/types/media.model";
|
||||
import LazyImageWrapper from "../Image/LazyImageWrapper.vue";
|
||||
import BlurhashImgWrapper from "../Image/BlurhashImgWrapper.vue";
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
|
|
|
@ -154,6 +154,98 @@
|
|||
>
|
||||
<span v-else>{{ extra.value }}</span>
|
||||
</event-metadata-block>
|
||||
<div v-if="event.picture">
|
||||
<h2>{{ $t("Headline picture") }}</h2>
|
||||
<div style="position: relative" @click="showImage = true">
|
||||
<img :src="event.picture.url" style="width: 100%" />
|
||||
</div>
|
||||
</div>
|
||||
<b-modal v-if="event.picture" :active.sync="showImage" has-modal-card>
|
||||
<div>
|
||||
<header class="modal-card-head">{{ $t("Headline picture") }}</header>
|
||||
<section
|
||||
class="modal-card"
|
||||
style="width: auto; -webkit-overflow-scrolling: touch; overflow: auto"
|
||||
>
|
||||
<img :src="event.picture.url" />
|
||||
</section>
|
||||
<footer class="modal-card-foot"></footer>
|
||||
</div>
|
||||
</b-modal>
|
||||
<b-modal
|
||||
class="map-modal"
|
||||
v-if="physicalAddress && physicalAddress.geom"
|
||||
:active.sync="showMap"
|
||||
has-modal-card
|
||||
full-screen
|
||||
>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<button type="button" class="delete" @click="showMap = false" />
|
||||
</header>
|
||||
<div class="modal-card-body">
|
||||
<section class="map">
|
||||
<map-leaflet
|
||||
:coords="physicalAddress.geom"
|
||||
:marker="{
|
||||
text: physicalAddress.fullName,
|
||||
icon: physicalAddress.poiInfos.poiIcon.icon,
|
||||
}"
|
||||
/>
|
||||
</section>
|
||||
<section class="columns is-centered map-footer">
|
||||
<div class="column is-half has-text-centered">
|
||||
<p class="address">
|
||||
<i class="mdi mdi-map-marker"></i>
|
||||
{{ physicalAddress.fullName }}
|
||||
</p>
|
||||
<p class="getting-there">{{ $t("Getting there") }}</p>
|
||||
<div
|
||||
class="buttons"
|
||||
v-if="
|
||||
addressLinkToRouteByCar ||
|
||||
addressLinkToRouteByBike ||
|
||||
addressLinkToRouteByFeet
|
||||
"
|
||||
>
|
||||
<a
|
||||
class="button"
|
||||
target="_blank"
|
||||
v-if="addressLinkToRouteByFeet"
|
||||
:href="addressLinkToRouteByFeet"
|
||||
>
|
||||
<i class="mdi mdi-walk"></i
|
||||
></a>
|
||||
<a
|
||||
class="button"
|
||||
target="_blank"
|
||||
v-if="addressLinkToRouteByBike"
|
||||
:href="addressLinkToRouteByBike"
|
||||
>
|
||||
<i class="mdi mdi-bike"></i
|
||||
></a>
|
||||
<a
|
||||
class="button"
|
||||
target="_blank"
|
||||
v-if="addressLinkToRouteByTransit"
|
||||
:href="addressLinkToRouteByTransit"
|
||||
>
|
||||
<i class="mdi mdi-bus"></i
|
||||
></a>
|
||||
<a
|
||||
class="button"
|
||||
target="_blank"
|
||||
v-if="addressLinkToRouteByCar"
|
||||
:href="addressLinkToRouteByCar"
|
||||
>
|
||||
<i class="mdi mdi-car"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</b-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<canvas ref="canvas" width="32" height="32" />
|
||||
<canvas ref="canvas" width="128" height="32" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
@ -20,13 +20,21 @@ const canvas = ref<HTMLCanvasElement | undefined>(undefined);
|
|||
onMounted(() => {
|
||||
try {
|
||||
if (canvas.value) {
|
||||
const pixels = decode(props.hash, 32, 32);
|
||||
const imageData = new ImageData(pixels, 32, 32);
|
||||
const pixels = decode(props.hash, 128, 32);
|
||||
const imageData = new ImageData(pixels, 128, 32);
|
||||
const context = canvas.value.getContext("2d");
|
||||
if (context) {
|
||||
context.putImageData(imageData, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@Watch("hash")
|
||||
updateHashChange(): void {
|
||||
try {
|
||||
const pixels = decode(this.hash, 128, 32);
|
||||
const imageData = new ImageData(pixels, 128, 32);
|
||||
const context = this.canvas.getContext("2d");
|
||||
context.putImageData(imageData, 0, 0);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
|
|
80
src/components/Image/BlurhashImgWrapper.vue
Normal file
80
src/components/Image/BlurhashImgWrapper.vue
Normal file
|
@ -0,0 +1,80 @@
|
|||
<template>
|
||||
<div class="wrapper" v-bind="$attrs">
|
||||
<div class="relative container">
|
||||
<blurhash-img
|
||||
v-if="pictureOrDefault.metadata.blurhash"
|
||||
:hash="pictureOrDefault.metadata.blurhash"
|
||||
class="top-0 left-0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { IMedia } from "@/types/media.model";
|
||||
import { Prop, Component, Vue } from "vue-property-decorator";
|
||||
import { PropType } from "vue";
|
||||
import BlurhashImg from "./BlurhashImg.vue";
|
||||
|
||||
const DEFAULT_CARD_URL = "/img/mobilizon_default_card.png";
|
||||
const DEFAULT_BLURHASH = "MCHKI4El-P-U}+={R-WWoes,Iu-P=?R,xD";
|
||||
const DEFAULT_WIDTH = 630;
|
||||
const DEFAULT_HEIGHT = 350;
|
||||
const DEFAULT_PICTURE = {
|
||||
url: DEFAULT_CARD_URL,
|
||||
metadata: {
|
||||
width: DEFAULT_WIDTH,
|
||||
height: DEFAULT_HEIGHT,
|
||||
blurhash: DEFAULT_BLURHASH,
|
||||
},
|
||||
};
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
BlurhashImg,
|
||||
},
|
||||
})
|
||||
export default class BlurhashImgWrapper extends Vue {
|
||||
@Prop({ required: false, type: Object as PropType<IMedia | null> })
|
||||
picture!: IMedia | null;
|
||||
|
||||
get pictureOrDefault(): Partial<IMedia> {
|
||||
if (this.picture === null) {
|
||||
return DEFAULT_PICTURE;
|
||||
}
|
||||
return {
|
||||
url: this?.picture?.url,
|
||||
metadata: {
|
||||
width: this?.picture?.metadata?.width,
|
||||
height: this?.picture?.metadata?.height,
|
||||
blurhash: this?.picture?.metadata?.blurhash,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
.top-0 {
|
||||
top: 0;
|
||||
}
|
||||
.left-0 {
|
||||
left: 0;
|
||||
}
|
||||
.wrapper,
|
||||
.container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: 50% 50%;
|
||||
}
|
||||
</style>
|
Loading…
Reference in a new issue