diff options
author | Clement Ho <clemmakesapps@gmail.com> | 2017-11-06 23:20:28 +0300 |
---|---|---|
committer | Clement Ho <clemmakesapps@gmail.com> | 2017-11-06 23:20:28 +0300 |
commit | 21d8ec1537c0a6d756ea86d001f30f2d62a52247 (patch) | |
tree | efd68391eb8cdecf2f902c0e1813555a9679ab82 /app/assets/javascripts/vue_shared | |
parent | 50e8fe348c638812b8316fb9494aa29b37dcf50f (diff) | |
parent | b243466655c121350f9f5b3ae59e89be928e6d68 (diff) |
Merge branch 'fix-md-form-tabs-double-click-toggle' into 'master'
Fix md form tab double click toggle
Closes #39624
See merge request gitlab-org/gitlab-ce!15119
Diffstat (limited to 'app/assets/javascripts/vue_shared')
-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 | 36 |
2 files changed, 37 insertions, 22 deletions
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue index 6511828e982..a873e00d0f3 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/field.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue @@ -47,8 +47,10 @@ }, }, methods: { - toggleMarkdownPreview() { - this.previewMarkdown = !this.previewMarkdown; + showPreviewTab() { + if (this.previewMarkdown) return; + + this.previewMarkdown = true; /* Can't use `$refs` as the component is technically in the parent component @@ -56,20 +58,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 +110,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 7541731083b..70f5fc1d664 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/header.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue @@ -18,23 +18,31 @@ icon, }, methods: { - toggleMarkdownPreview(e, form) { - if (form && !form.find('.js-vue-markdown-field').length) { - return; - } else if (e.target.blur) { - e.target.blur(); - } + isMarkdownForm(form) { + return form && !form.find('.js-vue-markdown-field').length; + }, + + previewMarkdownTab(event, form) { + if (event.target.blur) event.target.blur(); + if (this.isMarkdownForm(form)) return; + + this.$emit('preview-markdown'); + }, + + writeMarkdownTab(event, form) { + if (event.target.blur) event.target.blur(); + if (this.isMarkdownForm(form)) return; - this.$emit('toggle-markdown'); + this.$emit('write-markdown'); }, }, mounted() { - $(document).on('markdown-preview:show.vue', this.toggleMarkdownPreview); - $(document).on('markdown-preview:hide.vue', this.toggleMarkdownPreview); + $(document).on('markdown-preview:show.vue', this.previewMarkdownTab); + $(document).on('markdown-preview:hide.vue', this.writeMarkdownTab); }, beforeDestroy() { - $(document).on('markdown-preview:show.vue', this.toggleMarkdownPreview); - $(document).off('markdown-preview:hide.vue', this.toggleMarkdownPreview); + $(document).off('markdown-preview:show.vue', this.previewMarkdownTab); + $(document).off('markdown-preview:hide.vue', this.writeMarkdownTab); }, }; </script> @@ -44,17 +52,19 @@ <ul class="nav-links clearfix"> <li :class="{ active: !previewMarkdown }"> <a + class="js-write-link" href="#md-write-holder" tabindex="-1" - @click.prevent="toggleMarkdownPreview($event)"> + @click.prevent="writeMarkdownTab($event)"> Write </a> </li> <li :class="{ active: previewMarkdown }"> <a + class="js-preview-link" href="#md-preview-holder" tabindex="-1" - @click.prevent="toggleMarkdownPreview($event)"> + @click.prevent="previewMarkdownTab($event)"> Preview </a> </li> |