Separate preview and write tabs into seperate events

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>