transferred PR 1055 of upstream
This commit is contained in:
parent
4cdbf78037
commit
c71eb853c5
|
@ -1,11 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="flex justify-center max-h-80">
|
<div class="flex justify-center max-h-80">
|
||||||
<lazy-image-wrapper :picture="picture" />
|
<blurhash-img-wrapper :picture="picture" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { IMedia } from "@/types/media.model";
|
import { IMedia } from "@/types/media.model";
|
||||||
import LazyImageWrapper from "../Image/LazyImageWrapper.vue";
|
import BlurhashImgWrapper from "../Image/BlurhashImgWrapper.vue";
|
||||||
|
|
||||||
withDefaults(
|
withDefaults(
|
||||||
defineProps<{
|
defineProps<{
|
||||||
|
|
|
@ -154,6 +154,98 @@
|
||||||
>
|
>
|
||||||
<span v-else>{{ extra.value }}</span>
|
<span v-else>{{ extra.value }}</span>
|
||||||
</event-metadata-block>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<canvas ref="canvas" width="32" height="32" />
|
<canvas ref="canvas" width="128" height="32" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
@ -20,13 +20,21 @@ const canvas = ref<HTMLCanvasElement | undefined>(undefined);
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
try {
|
try {
|
||||||
if (canvas.value) {
|
if (canvas.value) {
|
||||||
const pixels = decode(props.hash, 32, 32);
|
const pixels = decode(props.hash, 128, 32);
|
||||||
const imageData = new ImageData(pixels, 32, 32);
|
const imageData = new ImageData(pixels, 128, 32);
|
||||||
const context = canvas.value.getContext("2d");
|
const context = canvas.value.getContext("2d");
|
||||||
if (context) {
|
if (context) {
|
||||||
context.putImageData(imageData, 0, 0);
|
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) {
|
} catch (e) {
|
||||||
console.error(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