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

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

@@ -1,29 +1,45 @@
<template> <template>
<div class="row m-0 p-0 align-items-center"> <div class="row m-0 p-0 align-items-center">
<div class="col-sm-12 col-md-6 p-0"> <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 <span class="material-icons-outlined box-move me-2" style="cursor: move">open_with</span
class="font-weight-bold text-primary">{{ langs.label }}</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">
<div class="mb-4">
<div class="form-group">
<editor api-key="no-api-key" rows="12" class="form-control" 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>
</b-modal>
<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> </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"
>
<div class="mb-4">
<div class="form-group">
<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>
</b-modal>
<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>
</template> </template>
<script> <script>
import MagicoModal from './../MagicoModal.vue' import MagicoModal from './../MagicoModal.vue'
@@ -31,77 +47,82 @@ import tinymceConfig from '../tinymce/config.js'
import Editor from '@tinymce/tinymce-vue' import Editor from '@tinymce/tinymce-vue'
export default { export default {
emits:['update:modelValue'], emits: ['update:modelValue'],
components: { components: {
'b-modal': MagicoModal, 'b-modal': MagicoModal,
'editor': Editor // <- To jest TINYMCE editor: Editor // <- To jest TINYMCE
}, },
props: { props: {
modelValue: Object modelValue: Object
}, },
mounted: function () { mounted: function () {
this.name = (this.modelValue && this.modelValue.name) ? this.modelValue.name : this.name; this.name = this.modelValue && this.modelValue.name ? this.modelValue.name : this.name
this.text = (this.modelValue && this.modelValue.text) ? this.modelValue.text : this.text; this.text = this.modelValue && this.modelValue.text ? this.modelValue.text : this.text
if (this.modelValue.open) this.modalBox = true; if (this.modelValue.open) this.modalBox = true
console.log('mounted textarea'); console.log('mounted textarea')
this.$emit('update:modelValue', this.modelValue); this.$emit('update:modelValue', this.modelValue)
},
}, data: function () {
data: function () { return {
return { langs: {
langs: { saveclose: 'Zapisz',
saveclose: "Zapisz", label: 'Pole tekstowe',
label: "Pole tekstowe", close: 'Zamknij'
close: "Zamknij" },
}, height: window.innerHeight - window.innerHeight / 4,
height: window.innerHeight - window.innerHeight / 4, modalBox: false,
modalBox: false, text: '',
text: '', name: 'core_section_textarea',
name: 'core_section_textarea', vtinymce: Object.assign(tinymceConfig, {
vtinymce: Object.assign(tinymceConfig, { file_picker_callback: (callback) => {
file_picker_callback: (callback) => { if (this.$filechooser) {
if (this.$filechooser) { this.$filechooser.open({
this.$filechooser.open({ chooseCallback: function (ev) {
chooseCallback: function (ev) { console.log('filePathChosed', 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();
}
});
}
console.log('focus');
},
},
computed: {
ctext: function () {
return this.modelValue.text ? this.modelValue.text.replace(/<(?:.|\n)*?>/gm, '') : '';
}
},
methods: {
removeItem: function () {
this.$emit('itemRemoved', this.modelValue);
},
onCloseModal: function () {
this.modalBox = false;
this.$emit('update:modelValue', {
name: this.name,
text: this.text,
}) })
}
} }
})
}
},
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()
}
})
}
console.log('focus')
}
},
computed: {
ctext: function () {
return this.modelValue.text ? this.modelValue.text.replace(/<(?:.|\n)*?>/gm, '') : ''
}
},
methods: {
removeItem: function () {
this.$emit('itemRemoved', this.modelValue)
}, },
onCloseModal: function () {
setTimeout(
function () {
this.modalBox = false
this.$emit('update:modelValue', {
name: this.name,
text: this.text
})
}.bind(this),
200
)
}
}
} }
</script> </script>