Commit 21d8ec15 authored by Clement Ho's avatar Clement Ho 🔴

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
parents 50e8fe34 b2434666
......@@ -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">
......
......@@ -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>
......
---
title: Fix markdown form tabs toggling preview mode from double clicking write mode
button
merge_request: 15119
author:
type: fixed
import Vue from 'vue';
import fieldComponent from '~/vue_shared/components/markdown/field.vue';
function assertMarkdownTabs(isWrite, writeLink, previewLink, vm) {
expect(writeLink.parentNode.classList.contains('active')).toEqual(isWrite);
expect(previewLink.parentNode.classList.contains('active')).toEqual(!isWrite);
expect(vm.$el.querySelector('.md-preview').style.display).toEqual(isWrite ? 'none' : '');
}
describe('Markdown field component', () => {
let vm;
......@@ -39,6 +45,7 @@ describe('Markdown field component', () => {
describe('markdown preview', () => {
let previewLink;
let writeLink;
beforeEach(() => {
spyOn(Vue.http, 'post').and.callFake(() => new Promise((resolve) => {
......@@ -53,7 +60,8 @@ describe('Markdown field component', () => {
});
}));
previewLink = vm.$el.querySelector('.nav-links li:nth-child(2) a');
previewLink = vm.$el.querySelector('.nav-links .js-preview-link');
writeLink = vm.$el.querySelector('.nav-links .js-write-link');
});
it('sets preview link as active', (done) => {
......@@ -105,6 +113,23 @@ describe('Markdown field component', () => {
done();
}, 0);
});
it('clicking already active write or preview link does nothing', (done) => {
writeLink.click();
Vue.nextTick()
.then(() => assertMarkdownTabs(true, writeLink, previewLink, vm))
.then(() => writeLink.click())
.then(() => Vue.nextTick())
.then(() => assertMarkdownTabs(true, writeLink, previewLink, vm))
.then(() => previewLink.click())
.then(() => Vue.nextTick())
.then(() => assertMarkdownTabs(false, writeLink, previewLink, vm))
.then(() => previewLink.click())
.then(() => Vue.nextTick())
.then(() => assertMarkdownTabs(false, writeLink, previewLink, vm))
.then(done)
.catch(done.fail);
});
});
describe('markdown buttons', () => {
......
......@@ -43,11 +43,13 @@ describe('Markdown field header component', () => {
it('emits toggle markdown event when clicking preview', () => {
spyOn(vm, '$emit');
vm.$el.querySelector('li:nth-child(2) a').click();
vm.$el.querySelector('.js-preview-link').click();
expect(
vm.$emit,
).toHaveBeenCalledWith('toggle-markdown');
expect(vm.$emit).toHaveBeenCalledWith('preview-markdown');
vm.$el.querySelector('.js-write-link').click();
expect(vm.$emit).toHaveBeenCalledWith('write-markdown');
});
it('blurs preview link after click', (done) => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment