public/MagicoPagebuilder
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix modal in textarea

Browse Source
This commit is contained in:
Szymon Haczyk
2024-01-11 08:56:26 +01:00
parent cf875dc704
commit d1d1eaa55d
2 changed files with 147 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/components/MagicoModal.vue
View File

@@ -1,30 +1,10 @@
<template>
<div
:id="id"
class="modal"
>
<div
class="modal-dialog"
:class="class_other"
>
<div
v-if="modal"
class="modal-content"
>
<div
v-if="title"
class="modal-header"
>
<h4
class="modal-title"
v-html="title"
/>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
/>
<div :id="id" class="modal">
<div class="modal-dialog" :class="class_other">
<div v-if="modal" class="modal-content">
<div v-if="title" class="modal-header">
<h4 class="modal-title" v-html="title" />
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
</div>
<div class="p-3">
<slot />
@@ -35,50 +15,53 @@
</template>
<script>
import { Modal } from "bootstrap";
import { onMounted, onBeforeUnmount, ref, watch } from "vue";
import { Modal } from 'bootstrap'
import { onMounted, onBeforeUnmount, ref, watch } from 'vue'
export default {
props: ["modelValue", "title", "class_other"],
props: ['modelValue', 'title', 'class_other'],
setup(props, { emit }) {
const id = "modal" + Math.round(Math.random() * 100000);
const modal = ref(null);
const id = 'modal' + Math.round(Math.random() * 100000)
const modal = ref(null)
const triggerModal = (value, emitEvent = true) => {
if (value == true) {
modal.value.show();
modal.value.show()
} else {
modal.value.hide();
modal.value.hide()
if (emitEvent) {
emit("hide");
emit('hide')
}
}
emit("update:modelValue", value);
};
emit('update:modelValue', value)
}
onMounted(() => {
document.body.append(document.getElementById(id));
modal.value = new Modal(document.getElementById(id));
document.getElementById(id).addEventListener("hidden.bs.modal", function () {
triggerModal(false);
});
triggerModal(props.modelValue, false);
});
document.body.append(document.getElementById(id))
modal.value = new Modal(document.getElementById(id))
document.getElementById(id).addEventListener('hidden.bs.modal', function () {
triggerModal(false)
})
triggerModal(props.modelValue, false)
})
onBeforeUnmount(() => {
document.getElementById(id).remove();
});
modal.value.hide()
setTimeout(function () {
document.getElementById(id).remove()
}, 500)
})
watch(
() => props.modelValue,
() => {
triggerModal(props.modelValue);
triggerModal(props.modelValue)
}
);
)
return { id, modal };
},
};
return { id, modal }
}
}
</script>
<style>

93
src/components/plugin/SectionTextarea.vue
View File

@@ -1,26 +1,42 @@
<template>
<div class="row m-0 p-0 align-items-center">
<div class="col-sm-12 col-md-6 p-0">
<span class="material-icons-outlined box-move me-2" style="cursor:move;">open_with</span><span
class="font-weight-bold text-primary">{{ langs.label }}</span>
<span class="material-icons-outlined box-move me-2" style="cursor: move">open_with</span
><span class="font-weight-bold text-primary">{{ langs.label }}</span>
</div>
<div class="col-sm-12 col-md-6 p-0 text-end">
<a href="#" @click.prevent="modalBox = !modalBox" title="Edytuj" class="text-primary me-2"><i
class="material-icons-outlined">create</i></a>
<b-modal no-enforce-focus class_other="modal-xl" v-model="modalBox" :title="langs.label"
v-on:hide="onCloseModal">
<a href="#" @click.prevent="modalBox = !modalBox" title="Edytuj" class="text-primary me-2"
><i class="material-icons-outlined">create</i></a
>
<b-modal
no-enforce-focus
class_other="modal-xl"
v-model="modalBox"
:title="langs.label"
v-on:hide="onCloseModal"
>
<div class="mb-4">
<div class="form-group">
<editor api-key="no-api-key" rows="12" class="form-control" v-model="text" :init="vtinymce" />
<editor
api-key="no-api-key"
rows="12"
class="form-control"
v-if="modalBox"
v-model="text"
:init="vtinymce"
/>
</div>
</div>
<div class="d-flex"><button class="btn btn-outline-secondary m-auto" @click.prevent="onCloseModal">{{
langs.saveclose
}}</button></div>
<div class="d-flex">
<button class="btn btn-outline-secondary m-auto" @click.prevent="onCloseModal">
{{ langs.saveclose }}
</button>
</div>
</b-modal>
<a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"><i
class="material-icons-outlined">delete</i></a>
<a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"
><i class="material-icons-outlined">delete</i></a
>
</div>
<div class="ms-4" style="color: #a9a9a9" v-html="ctext"></div>
</div>
@@ -31,29 +47,28 @@ import tinymceConfig from '../tinymce/config.js'
import Editor from '@tinymce/tinymce-vue'
export default {
emits:['update:modelValue'],
emits: ['update:modelValue'],
components: {
'b-modal': MagicoModal,
'editor': Editor // <- To jest TINYMCE
editor: Editor // <- To jest TINYMCE
},
props: {
modelValue: Object
},
mounted: function () {
this.name = (this.modelValue && this.modelValue.name) ? this.modelValue.name : this.name;
this.text = (this.modelValue && this.modelValue.text) ? this.modelValue.text : this.text;
if (this.modelValue.open) this.modalBox = true;
console.log('mounted textarea');
this.$emit('update:modelValue', this.modelValue);
this.name = this.modelValue && this.modelValue.name ? this.modelValue.name : this.name
this.text = this.modelValue && this.modelValue.text ? this.modelValue.text : this.text
if (this.modelValue.open) this.modalBox = true
console.log('mounted textarea')
this.$emit('update:modelValue', this.modelValue)
},
data: function () {
return {
langs: {
saveclose: "Zapisz",
label: "Pole tekstowe",
close: "Zamknij"
saveclose: 'Zapisz',
label: 'Pole tekstowe',
close: 'Zamknij'
},
height: window.innerHeight - window.innerHeight / 4,
modalBox: false,
@@ -65,43 +80,49 @@ export default {
this.$filechooser.open({
chooseCallback: function (ev) {
console.log('filePathChosed', ev)
callback(ev.publicUrl);
callback(ev.publicUrl)
}
})
}
}
}),
})
}
},
watch: {
modalBox: function () {
if (this.modalBox) {
document.addEventListener('focusin', (e) => {
if (e.target.closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root") !== null) {
e.stopImmediatePropagation();
if (
e.target.closest('.tox-tinymce-aux, .moxman-window, .tam-assetmanager-root') !== null
) {
e.stopImmediatePropagation()
}
});
})
}
console.log('focus')
}
console.log('focus');
},
},
computed: {
ctext: function () {
return this.modelValue.text ? this.modelValue.text.replace(/<(?:.|\n)*?>/gm, '') : '';
return this.modelValue.text ? this.modelValue.text.replace(/<(?:.|\n)*?>/gm, '') : ''
}
},
methods: {
removeItem: function () {
this.$emit('itemRemoved', this.modelValue);
this.$emit('itemRemoved', this.modelValue)
},
onCloseModal: function () {
this.modalBox = false;
setTimeout(
function () {
this.modalBox = false
this.$emit('update:modelValue', {
name: this.name,
text: this.text,
text: this.text
})
}.bind(this),
200
)
}
}
},
}
</script>