header.vue 3.29 KB
Newer Older
1
<script>
2
  import tooltip from '../../directives/tooltip';
3
  import toolbarButton from './toolbar_button.vue';
Tim Zallmann's avatar
Tim Zallmann committed
4
  import icon from '../icon.vue';
5 6

  export default {
Filipa Lacerda's avatar
Filipa Lacerda committed
7 8 9 10 11 12 13
    directives: {
      tooltip,
    },
    components: {
      toolbarButton,
      icon,
    },
14 15 16 17 18 19
    props: {
      previewMarkdown: {
        type: Boolean,
        required: true,
      },
    },
Filipa Lacerda's avatar
Filipa Lacerda committed
20 21 22
    mounted() {
      $(document).on('markdown-preview:show.vue', this.previewMarkdownTab);
      $(document).on('markdown-preview:hide.vue', this.writeMarkdownTab);
23
    },
Filipa Lacerda's avatar
Filipa Lacerda committed
24 25 26
    beforeDestroy() {
      $(document).off('markdown-preview:show.vue', this.previewMarkdownTab);
      $(document).off('markdown-preview:hide.vue', this.writeMarkdownTab);
27 28
    },
    methods: {
29 30 31 32
      isMarkdownForm(form) {
        return form && !form.find('.js-vue-markdown-field').length;
      },

33 34
      previewMarkdownTab(event, form) {
        if (event.target.blur) event.target.blur();
35
        if (this.isMarkdownForm(form)) return;
36

37
        this.$emit('preview-markdown');
38
      },
39

40 41 42
      writeMarkdownTab(event, form) {
        if (event.target.blur) event.target.blur();
        if (this.isMarkdownForm(form)) return;
43

44
        this.$emit('write-markdown');
45 46 47 48 49 50 51 52
      },
    },
  };
</script>

<template>
  <div class="md-header">
    <ul class="nav-links clearfix">
53 54
      <li
        class="md-header-tab"
Filipa Lacerda's avatar
Filipa Lacerda committed
55 56
        :class="{ active: !previewMarkdown }"
      >
57
        <a
58
          class="js-write-link"
59 60
          href="#md-write-holder"
          tabindex="-1"
Filipa Lacerda's avatar
Filipa Lacerda committed
61 62
          @click.prevent="writeMarkdownTab($event)"
        >
63 64 65
          Write
        </a>
      </li>
66 67
      <li
        class="md-header-tab"
68 69
        :class="{ active: previewMarkdown }"
      >
70
        <a
71
          class="js-preview-link"
72 73
          href="#md-preview-holder"
          tabindex="-1"
Filipa Lacerda's avatar
Filipa Lacerda committed
74 75
          @click.prevent="previewMarkdownTab($event)"
        >
76 77 78
          Preview
        </a>
      </li>
79 80
      <li
        class="md-header-toolbar"
Filipa Lacerda's avatar
Filipa Lacerda committed
81 82
        :class="{ active: !previewMarkdown }"
      >
83 84 85
        <toolbar-button
          tag="**"
          button-title="Add bold text"
Filipa Lacerda's avatar
Filipa Lacerda committed
86 87
          icon="bold"
        />
88 89 90
        <toolbar-button
          tag="*"
          button-title="Add italic text"
Filipa Lacerda's avatar
Filipa Lacerda committed
91 92
          icon="italic"
        />
93 94 95 96
        <toolbar-button
          tag="> "
          :prepend="true"
          button-title="Insert a quote"
Filipa Lacerda's avatar
Filipa Lacerda committed
97 98
          icon="quote"
        />
99 100 101 102
        <toolbar-button
          tag="`"
          tag-block="```"
          button-title="Insert code"
Filipa Lacerda's avatar
Filipa Lacerda committed
103 104
          icon="code"
        />
105 106 107 108
        <toolbar-button
          tag="* "
          :prepend="true"
          button-title="Add a bullet list"
Filipa Lacerda's avatar
Filipa Lacerda committed
109 110
          icon="list-bulleted"
        />
111 112 113 114
        <toolbar-button
          tag="1. "
          :prepend="true"
          button-title="Add a numbered list"
Filipa Lacerda's avatar
Filipa Lacerda committed
115 116
          icon="list-numbered"
        />
117 118 119 120
        <toolbar-button
          tag="* [ ] "
          :prepend="true"
          button-title="Add a task list"
Filipa Lacerda's avatar
Filipa Lacerda committed
121 122
          icon="task-done"
        />
123 124 125 126 127 128 129
        <button
          v-tooltip
          aria-label="Go full screen"
          class="toolbar-btn toolbar-fullscreen-btn js-zen-enter"
          data-container="body"
          tabindex="-1"
          title="Go full screen"
Filipa Lacerda's avatar
Filipa Lacerda committed
130 131
          type="button"
        >
132
          <icon
Filipa Lacerda's avatar
Filipa Lacerda committed
133 134
            name="screen-full"
          />
135
        </button>
136 137 138 139
      </li>
    </ul>
  </div>
</template>