Add F9 shortcut key for toggling campaign and template previews.

This commit is contained in:
Kailash Nadh 2024-01-06 19:17:27 +05:30
parent 234fd11f13
commit bd2990fb02
2 changed files with 37 additions and 8 deletions

View file

@ -29,7 +29,7 @@
</div> </div>
<div class="column is-6 has-text-right"> <div class="column is-6 has-text-right">
<b-button @click="onTogglePreview" type="is-primary" icon-left="file-find-outline" data-cy="btn-preview"> <b-button @click="onTogglePreview" type="is-primary" icon-left="file-find-outline" data-cy="btn-preview">
{{ $t('campaigns.preview') }} {{ $t('campaigns.preview') }} (F9)
</b-button> </b-button>
</div> </div>
</div> </div>
@ -231,6 +231,13 @@ export default {
editor.on('CloseWindow', () => { editor.on('CloseWindow', () => {
editor.selection.getNode().scrollIntoView(false); editor.selection.getNode().scrollIntoView(false);
}); });
editor.on('keydown', (e) => {
if (e.key === 'F9') {
this.onTogglePreview();
e.preventDefault();
}
});
}, },
browser_spellcheck: true, browser_spellcheck: true,
@ -400,6 +407,13 @@ export default {
this.runTinyMceImageCallback(media.url); this.runTinyMceImageCallback(media.url);
}, },
onPreviewShortcut(e) {
if (e.key === 'F9') {
this.onTogglePreview();
e.preventDefault();
}
},
beautifyHTML(str) { beautifyHTML(str) {
// Pad all tags with linebreaks. // Pad all tags with linebreaks.
let s = this.trimLines(str.replace(/(<(?!(\/)?a|span)([^>]+)>)/ig, '\n$1\n'), true); let s = this.trimLines(str.replace(/(<(?!(\/)?a|span)([^>]+)>)/ig, '\n$1\n'), true);
@ -427,6 +441,12 @@ export default {
mounted() { mounted() {
this.initRichtextEditor(); this.initRichtextEditor();
window.addEventListener('keydown', this.onPreviewShortcut);
},
beforeDestroy() {
window.removeEventListener('keydown', this.onPreviewShortcut);
}, },
computed: { computed: {

View file

@ -3,8 +3,8 @@
<form @submit.prevent="onSubmit"> <form @submit.prevent="onSubmit">
<div class="modal-card content template-modal-content" style="width: auto"> <div class="modal-card content template-modal-content" style="width: auto">
<header class="modal-card-head"> <header class="modal-card-head">
<b-button @click="previewTemplate" class="is-pulled-right" type="is-primary" icon-left="file-find-outline"> <b-button @click="onTogglePreview" class="is-pulled-right" type="is-primary" icon-left="file-find-outline">
{{ $t('templates.preview') }} {{ $t('templates.preview') }} (F9)
</b-button> </b-button>
<template v-if="isEditing"> <template v-if="isEditing">
@ -71,7 +71,7 @@
</div> </div>
</form> </form>
<campaign-preview v-if="previewItem" type="template" :title="previewItem.name" :template-type="previewItem.type" <campaign-preview v-if="previewItem" type="template" :title="previewItem.name" :template-type="previewItem.type"
:body="form.body" @close="closePreview" /> :body="form.body" @close="onTogglePreview" />
</section> </section>
</template> </template>
@ -110,12 +110,15 @@ export default Vue.extend({
}, },
methods: { methods: {
previewTemplate() { onTogglePreview() {
this.previewItem = this.form; this.previewItem = !this.previewItem ? this.form : null;
}, },
closePreview() { onPreviewShortcut(e) {
this.previewItem = null; if (e.key === 'F9') {
this.onTogglePreview();
e.preventDefault();
}
}, },
onSubmit() { onSubmit() {
@ -170,6 +173,12 @@ export default Vue.extend({
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.focus.focus(); this.$refs.focus.focus();
}); });
window.addEventListener('keydown', this.onPreviewShortcut);
},
beforeDestroy() {
window.removeEventListener('keydown', this.onPreviewShortcut);
}, },
}); });
</script> </script>