~jiyu/Jiyu-Web

ref: 2cdab4fa90dffd8506d31de82963c6c78049ed6d Jiyu-Web/resources/js/Backend/Components/PageContent.vue -rw-r--r-- 2.6 KiB
2cdab4fajiyu You can now click on an element to edit it instead of having to close your previous edit. 8 months ago
                                                                                
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
<template>
    <draggable
        v-model="page.content"
        v-bind="dragOptions"
        group="elements"
        @start="startDrag"
        @end="endDrag"
        item-key="page"
    >
        <template
            #item="{element, index}"
        >
            <element-edit
                v-if="editing == index"
                :element="element"
                :dragOptions="dragOptions"
                v-on:updateElement="updateElement($event, index)"
                v-on:deleteElement="deleteElement(index)"
                v-on:closeElement="closeElement(index)"
            >
            </element-edit>
            <component
                v-else
                v-bind:is="element.type + '-element'"
                :page="checkUsePage(element.type)"
                :element="element"
                @click.native="editElement(index)"
            >
            </component>
        </template>
    </draggable>
</template>

<style>
.ghost {
}
</style>

<script>
    import draggable from 'vuedraggable';
    import ElementEdit from './ElementEdit';

    export default {
        name: "page-content",
        props: {
            page: Object
        },
        data() {
            return {
                editing: null,
                canEdit: true,
            }
        },
        computed: {
            dragOptions() {
                return {
                    animation: 400,
                    easing: "cubic-bezier(0.68, -0.6, 0.32, 1.6)",
                    ghostClass: "ghost",
                    setData(dataTransfer) {
                        dataTransfer.setDragImage(document.createElement('div'), 0, 0);
                    }
                }
            }
        },
        methods: {
            startDrag() {
                this.canEdit = false;
            },
            endDrag() {
                this.canEdit = true;
                this.$emit('pageUpdate');
            },
            editElement(key) {
                if (this.canEdit) {
                    this.editing = key;
                }
            },
            updateElement(event, key) {
                this.$emit('pageUpdate');
                this.closeElement();
            },
            deleteElement(key) {
                this.$emit('deleteElement', key);
                this.closeElement();
            },
            closeElement() {
                this.editing = null;
            },
            checkUsePage(type) {
                if (type == 'title') {
                    return this.page;
                }
                return undefined;
            }
        },
        components: {
            draggable,
            ElementEdit
        }
    }
</script>