Newer
Older
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
<script setup lang="ts">
import type { IImage } from '@/interfaces/entities';
import { deleteEntity, editEntity } from '@/helpers';
import EditImageEntityMenu from '@/components/EditImageEntityMenu.vue';
import { useDataStore } from '@/stores/data';
import { useElementSize } from '@vueuse/core';
interface Props {
entityData: IImage;
}
const props = defineProps<Props>();
const entityData = ref(props.entityData);
const dataStore = useDataStore();
const entities = computed(() => dataStore.homeEntities);
const imageContainer = ref();
const { width: imageWidth, height: imageHeight } = useElementSize(imageContainer);
const editTitle = () => {
editEntity({ ...entityData.value, title: entityData.value.title }, entityData.value.uuid);
};
const addTitle = () => {
imageHeight.value = imageHeight.value + 48;
console.log('imageHeight.value', imageHeight.value);
editEntity(
{ ...entityData.value, title: 'Title', height: imageHeight.value },
entityData.value.uuid
);
entityData.value = { ...entityData.value, title: 'Title' };
};
const removeTitle = () => {
const newState = { ...entityData.value };
delete newState.title;
imageHeight.value = imageHeight.value - 48;
editEntity({ ...newState, height: imageHeight.value }, entityData.value.uuid);
entityData.value = newState;
};
const isResizable = defineModel({ default: false });
const toggleIsResizable = () => {
isResizable.value = !isResizable.value;
if (!isResizable.value) {
editEntity(
{ ...entityData.value, height: imageHeight.value, width: imageWidth.value },
entityData.value.uuid
);
console.log(entityData.value);
}
};
const editPosition = (position: 'left' | 'center' | 'right') => {
entityData.value.position = position;
editEntity({ ...entityData.value, position }, entityData.value.uuid);
};
</script>
<template>
<div
:class="[
'entityContainer relative flex',
{
'justify-start': entityData.position === 'left',
'justify-center': entityData.position === 'center',
'justify-end': entityData.position === 'right'
}
]"
>
<div class="flex flex-col">
<input
ref="input"
v-if="entityData.title || entityData.title === ''"
type="text"
v-model="entityData.title"
@change="editTitle"
placeholder="Enter title..."
class="w-full mb-4 font-bold text-2xl pl-2"
:style="`width: ${entityData.width}px`"
/>
<div
ref="imageContainer"
:class="[
'inline-block overflow-hidden leading-none max-h-[700px] min-h-[100px] min-w-[100px]',
{
resize: isResizable,
'min-h-[148px]': entityData.title || entityData.title === ''
}
]"
:style="`height: ${entityData.height}px; width: ${entityData.width}px`"
>
<img
:src="entityData.url"
:alt="`Image ${entityData?.title}` || 'Image'"
class="max-h-[700px] min-h-[100px] object-contain"
/>
</div>
<div class="speedDial absolute top-16 left-2 transition-all select-none">
<EditImageEntityMenu
:entityData="entityData"
:isResizable="isResizable"
@deleteEntity="deleteEntity"
@editPosition="editPosition"
@addTitle="addTitle"
@removeTitle="removeTitle"
@toggleIsResizable="toggleIsResizable"
/>
</div>
</div>
</div>
</template>
<style scoped>
.entityContainer .speedDial {
opacity: 0;
}
.entityContainer:hover .speedDial {
opacity: 100;
}
input::placeholder {
font-weight: 400;
}
</style>