debian-mirror-gitlab/app/assets/javascripts/vue_shared/components/markdown/header.vue

155 lines
4 KiB
Vue
Raw Normal View History

2017-09-10 17:25:29 +05:30
<script>
2018-12-13 13:39:08 +05:30
import $ from 'jquery';
2019-02-15 15:39:39 +05:30
import { GlTooltipDirective } from '@gitlab/ui';
2018-12-13 13:39:08 +05:30
import ToolbarButton from './toolbar_button.vue';
import Icon from '../icon.vue';
2017-09-10 17:25:29 +05:30
2018-12-13 13:39:08 +05:30
export default {
components: {
ToolbarButton,
Icon,
},
directives: {
GlTooltip: GlTooltipDirective,
},
props: {
previewMarkdown: {
type: Boolean,
required: true,
2017-09-10 17:25:29 +05:30
},
2019-02-15 15:39:39 +05:30
lineContent: {
type: String,
required: false,
default: '',
},
canSuggest: {
type: Boolean,
required: false,
default: true,
},
2018-12-13 13:39:08 +05:30
},
computed: {
mdTable() {
return [
'| header | header |',
'| ------ | ------ |',
'| cell | cell |',
'| cell | cell |',
].join('\n');
2017-09-10 17:25:29 +05:30
},
2019-02-15 15:39:39 +05:30
mdSuggestion() {
2019-05-30 16:15:17 +05:30
return ['```suggestion', `{text}`, '```'].join('\n');
2019-02-15 15:39:39 +05:30
},
2018-12-13 13:39:08 +05:30
},
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])
);
2017-09-10 17:25:29 +05:30
},
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
previewMarkdownTab(event, form) {
if (event.target.blur) event.target.blur();
if (!this.isValid(form)) return;
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
this.$emit('preview-markdown');
},
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
writeMarkdownTab(event, form) {
if (event.target.blur) event.target.blur();
if (!this.isValid(form)) return;
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
this.$emit('write-markdown');
2017-09-10 17:25:29 +05:30
},
2018-12-13 13:39:08 +05:30
},
};
2017-09-10 17:25:29 +05:30
</script>
<template>
<div class="md-header">
<ul class="nav-links clearfix">
2019-02-15 15:39:39 +05:30
<li :class="{ active: !previewMarkdown }" class="md-header-tab">
2019-03-02 22:35:43 +05:30
<button class="js-write-link" tabindex="-1" type="button" @click="writeMarkdownTab($event)">
2019-05-30 16:15:17 +05:30
Write
2018-12-13 13:39:08 +05:30
</button>
2017-09-10 17:25:29 +05:30
</li>
2019-02-15 15:39:39 +05:30
<li :class="{ active: previewMarkdown }" class="md-header-tab">
2018-12-13 13:39:08 +05:30
<button
2018-11-08 19:23:39 +05:30
class="js-preview-link js-md-preview-button"
2017-09-10 17:25:29 +05:30
tabindex="-1"
2018-12-13 13:39:08 +05:30
type="button"
2019-03-02 22:35:43 +05:30
@click="previewMarkdownTab($event)"
2018-03-17 18:26:18 +05:30
>
2019-05-30 16:15:17 +05:30
Preview
2018-12-13 13:39:08 +05:30
</button>
2017-09-10 17:25:29 +05:30
</li>
2019-02-15 15:39:39 +05:30
<li :class="{ active: !previewMarkdown }" class="md-header-toolbar">
2019-05-30 16:15:17 +05:30
<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" />
2018-12-05 23:21:45 +05:30
<toolbar-button
tag="[{text}](url)"
tag-select="url"
2019-05-30 16:15:17 +05:30
button-title="Add a link"
2018-12-05 23:21:45 +05:30
icon="link"
/>
2018-03-17 18:26:18 +05:30
<toolbar-button
:prepend="true"
2018-11-08 19:23:39 +05:30
tag="* "
2019-05-30 16:15:17 +05:30
button-title="Add a bullet list"
2018-03-17 18:26:18 +05:30
icon="list-bulleted"
/>
<toolbar-button
:prepend="true"
2018-11-08 19:23:39 +05:30
tag="1. "
2019-05-30 16:15:17 +05:30
button-title="Add a numbered list"
2018-03-17 18:26:18 +05:30
icon="list-numbered"
/>
<toolbar-button
:prepend="true"
2018-11-08 19:23:39 +05:30
tag="* [ ] "
2019-05-30 16:15:17 +05:30
button-title="Add a task list"
2018-03-17 18:26:18 +05:30
icon="task-done"
/>
2018-12-05 23:21:45 +05:30
<toolbar-button
:tag="mdTable"
:prepend="true"
:button-title="__('Add a table')"
icon="table"
/>
2019-02-15 15:39:39 +05:30
<toolbar-button
v-if="canSuggest"
:tag="mdSuggestion"
:prepend="true"
:button-title="__('Insert suggestion')"
:cursor-offset="4"
:tag-content="lineContent"
icon="doc-code"
class="qa-suggestion-btn"
/>
2018-03-17 18:26:18 +05:30
<button
2018-12-13 13:39:08 +05:30
v-gl-tooltip
2019-05-30 16:15:17 +05:30
aria-label="Go full screen"
2018-03-17 18:26:18 +05:30
class="toolbar-btn toolbar-fullscreen-btn js-zen-enter"
data-container="body"
tabindex="-1"
2019-05-30 16:15:17 +05:30
title="Go full screen"
2018-03-17 18:26:18 +05:30
type="button"
>
2019-02-15 15:39:39 +05:30
<icon name="screen-full" />
2018-03-17 18:26:18 +05:30
</button>
2017-09-10 17:25:29 +05:30
</li>
</ul>
</div>
</template>