diff options
Diffstat (limited to 'app')
| -rw-r--r-- | app/assets/javascripts/vue_shared/components/markdown/field.vue | 23 | ||||
| -rw-r--r-- | app/assets/javascripts/vue_shared/components/markdown/header.vue | 27 |
2 files changed, 26 insertions, 24 deletions
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue index 62c4e014e73..7fa97eb1c46 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/field.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue @@ -45,10 +45,10 @@ }, }, methods: { - toggleMarkdownPreview(isPreview) { - if (isPreview === this.previewMarkdown) return; + showPreviewTab() { + if (this.previewMarkdown) return; - this.previewMarkdown = isPreview; + this.previewMarkdown = true; /* Can't use `$refs` as the component is technically in the parent component @@ -56,20 +56,22 @@ */ const text = this.$slots.textarea[0].elm.value; - if (!this.previewMarkdown) { - this.markdownPreview = ''; - } else if (text) { + if (text) { this.markdownPreviewLoading = true; this.$http.post(this.markdownPreviewPath, { text }) .then(resp => resp.json()) - .then((data) => { - this.renderMarkdown(data); - }) + .then(data => this.renderMarkdown(data)) .catch(() => new Flash('Error loading markdown preview')); } else { this.renderMarkdown(); } }, + + showWriteTab() { + this.markdownPreview = ''; + this.previewMarkdown = false; + }, + renderMarkdown(data = {}) { this.markdownPreviewLoading = false; this.markdownPreview = data.body || 'Nothing to preview.'; @@ -106,7 +108,8 @@ ref="gl-form"> <markdown-header :preview-markdown="previewMarkdown" - @toggle-markdown="toggleMarkdownPreview" /> + @preview-markdown="showPreviewTab" + @write-markdown="showWriteTab" /> <div class="md-write-holder" v-show="!previewMarkdown"> diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue index fc26b7e170d..c2bef8a5c07 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/header.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue @@ -20,28 +20,27 @@ return form && !form.find('.js-vue-markdown-field').length; }, - toggleMarkdownPreview(e, isPreview, form) { - if (e.target.blur) e.target.blur(); + previewMarkdownTab(event, form) { + if (event.target.blur) event.target.blur(); if (this.isMarkdownForm(form)) return; - this.$emit('toggle-markdown', isPreview); + this.$emit('preview-markdown'); }, - toggleMarkdownPreviewShow(event, form) { - return this.toggleMarkdownPreview(event, true, form); - }, + writeMarkdownTab(event, form) { + if (event.target.blur) event.target.blur(); + if (this.isMarkdownForm(form)) return; - toggleMarkdownPreviewHide(event, form) { - return this.toggleMarkdownPreview(event, false, form); + this.$emit('write-markdown'); }, }, mounted() { - $(document).on('markdown-preview:show.vue', this.toggleMarkdownPreviewShow); - $(document).on('markdown-preview:hide.vue', this.toggleMarkdownPreviewHide); + $(document).on('markdown-preview:show.vue', this.previewMarkdownTab); + $(document).on('markdown-preview:hide.vue', this.writeMarkdownTab); }, beforeDestroy() { - $(document).off('markdown-preview:show.vue', this.toggleMarkdownPreviewShow); - $(document).off('markdown-preview:hide.vue', this.toggleMarkdownPreviewHide); + $(document).off('markdown-preview:show.vue', this.previewMarkdownTab); + $(document).off('markdown-preview:hide.vue', this.writeMarkdownTab); }, }; </script> @@ -54,7 +53,7 @@ class="js-write-link" href="#md-write-holder" tabindex="-1" - @click.prevent="toggleMarkdownPreview($event, false)"> + @click.prevent="writeMarkdownTab($event, form)"> Write </a> </li> @@ -63,7 +62,7 @@ class="js-preview-link" href="#md-preview-holder" tabindex="-1" - @click.prevent="toggleMarkdownPreview($event, true)"> + @click.prevent="previewMarkdownTab($event, form)"> Preview </a> </li> |