debian-mirror-gitlab/app/assets/javascripts/vue_shared/components/markdown/header.vue
2019-01-03 12:48:30 +05:30

165 lines
3.8 KiB
Vue

<script>
import $ from 'jquery';
import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
import ToolbarButton from './toolbar_button.vue';
import Icon from '../icon.vue';
export default {
components: {
ToolbarButton,
Icon,
},
directives: {
GlTooltip: GlTooltipDirective,
},
props: {
previewMarkdown: {
type: Boolean,
required: true,
},
},
computed: {
mdTable() {
return [
'| header | header |',
'| ------ | ------ |',
'| cell | cell |',
'| cell | cell |',
].join('\n');
},
},
mounted() {
$(document).on('markdown-preview:show.vue', this.previewMarkdownTab);
$(document).on('markdown-preview:hide.vue', this.writeMarkdownTab);
},
beforeDestroy() {
$(document).off('markdown-preview:show.vue', this.previewMarkdownTab);
$(document).off('markdown-preview:hide.vue', this.writeMarkdownTab);
},
methods: {
isValid(form) {
return (
!form ||
(form.find('.js-vue-markdown-field').length && $(this.$el).closest('form')[0] === form[0])
);
},
previewMarkdownTab(event, form) {
if (event.target.blur) event.target.blur();
if (!this.isValid(form)) return;
this.$emit('preview-markdown');
},
writeMarkdownTab(event, form) {
if (event.target.blur) event.target.blur();
if (!this.isValid(form)) return;
this.$emit('write-markdown');
},
},
};
</script>
<template>
<div class="md-header">
<ul class="nav-links clearfix">
<li
:class="{ active: !previewMarkdown }"
class="md-header-tab"
>
<button
class="js-write-link"
tabindex="-1"
type="button"
@click="writeMarkdownTab($event)"
>
Write
</button>
</li>
<li
:class="{ active: previewMarkdown }"
class="md-header-tab"
>
<button
class="js-preview-link js-md-preview-button"
tabindex="-1"
type="button"
@click="previewMarkdownTab($event)"
>
Preview
</button>
</li>
<li
:class="{ active: !previewMarkdown }"
class="md-header-toolbar"
>
<toolbar-button
tag="**"
button-title="Add bold text"
icon="bold"
/>
<toolbar-button
tag="*"
button-title="Add italic text"
icon="italic"
/>
<toolbar-button
:prepend="true"
tag="> "
button-title="Insert a quote"
icon="quote"
/>
<toolbar-button
tag="`"
tag-block="```"
button-title="Insert code"
icon="code"
/>
<toolbar-button
tag="[{text}](url)"
tag-select="url"
button-title="Add a link"
icon="link"
/>
<toolbar-button
:prepend="true"
tag="* "
button-title="Add a bullet list"
icon="list-bulleted"
/>
<toolbar-button
:prepend="true"
tag="1. "
button-title="Add a numbered list"
icon="list-numbered"
/>
<toolbar-button
:prepend="true"
tag="* [ ] "
button-title="Add a task list"
icon="task-done"
/>
<toolbar-button
:tag="mdTable"
:prepend="true"
:button-title="__('Add a table')"
icon="table"
/>
<button
v-gl-tooltip
aria-label="Go full screen"
class="toolbar-btn toolbar-fullscreen-btn js-zen-enter"
data-container="body"
tabindex="-1"
title="Go full screen"
type="button"
>
<icon
name="screen-full"
/>
</button>
</li>
</ul>
</div>
</template>