diff_note_avatars.js 4.94 KB
Newer Older
1 2
/* global CommentsStore */

3
import $ from 'jquery';
4 5
import Vue from 'vue';
import collapseIcon from '../icons/collapse_icon.svg';
6
import Notes from '../../notes';
7
import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
8
import { n__ } from '~/locale';
9

10
const DiffNoteAvatars = Vue.extend({
11 12 13 14 15 16 17 18 19
  components: {
    userAvatarImage,
  },
  props: {
    discussionId: {
      type: String,
      required: true,
    },
  },
20 21 22 23 24 25 26 27 28 29
  data() {
    return {
      isVisible: false,
      lineType: '',
      storeState: CommentsStore.state,
      shownAvatars: 3,
      collapseIcon,
    };
  },
  computed: {
30 31 32
    discussionClassName() {
      return `js-diff-avatars-${this.discussionId}`;
    },
33 34 35 36 37 38 39 40 41 42 43 44 45 46
    notesSubset() {
      let notes = [];

      if (this.discussion) {
        notes = Object.keys(this.discussion.notes)
          .slice(0, this.shownAvatars)
          .map(noteId => this.discussion.notes[noteId]);
      }

      return notes;
    },
    extraNotesTitle() {
      if (this.discussion) {
        const extra = this.discussion.notesCount() - this.shownAvatars;
47

48
        return n__('%d more comment', '%d more comments', extra);
49
      }
50

51 52 53 54 55 56 57 58 59
      return '';
    },
    discussion() {
      return this.storeState[this.discussionId];
    },
    notesCount() {
      if (this.discussion) {
        return this.discussion.notesCount();
      }
60

61 62 63 64
      return 0;
    },
    moreText() {
      const plusSign = this.notesCount < 100 ? '+' : '';
65

66
      return `${plusSign}${this.notesCount - this.shownAvatars}`;
67
    },
68
  },
69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86
  watch: {
    storeState: {
      handler() {
        this.$nextTick(() => {
          $('.has-tooltip', this.$el).tooltip('_fixTitle');

          // We need to add/remove a class to an element that is outside the Vue instance
          this.addNoCommentClass();
        });
      },
      deep: true,
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.addNoCommentClass();
      this.setDiscussionVisible();

87 88 89 90 91
      this.lineType = $(this.$el)
        .closest('.diff-line-num')
        .hasClass('old_line')
        ? 'old'
        : 'new';
92 93 94 95 96 97 98 99 100 101 102 103
    });

    $(document).on('toggle.comments', () => {
      this.$nextTick(() => {
        this.setDiscussionVisible();
      });
    });
  },
  beforeDestroy() {
    this.addNoCommentClass();
    $(document).off('toggle.comments');
  },
104 105
  methods: {
    clickedAvatar(e) {
106
      Notes.instance.onAddDiffNote(e);
107

108 109
      // Toggle the active state of the toggle all button
      this.toggleDiscussionsToggleState();
110

111 112
      this.$nextTick(() => {
        this.setDiscussionVisible();
113

114
        $('.has-tooltip', this.$el).tooltip('_fixTitle');
115 116 117 118
        $('.has-tooltip', this.$el).tooltip('hide');
      });
    },
    addNoCommentClass() {
119
      const { notesCount } = this;
120

121 122
      $(this.$el)
        .closest('.js-avatar-container')
123
        .toggleClass('no-comment-btn', notesCount > 0)
124
        .nextUntil('.js-avatar-container')
125
        .toggleClass('no-comment-btn', notesCount > 0);
126 127
    },
    toggleDiscussionsToggleState() {
128 129 130
      const $notesHolders = $(this.$el)
        .closest('.code')
        .find('.notes_holder');
131
      const $visibleNotesHolders = $notesHolders.filter(':visible');
132 133 134 135 136 137 138 139
      const $toggleDiffCommentsBtn = $(this.$el)
        .closest('.diff-file')
        .find('.js-toggle-diff-comments');

      $toggleDiffCommentsBtn.toggleClass(
        'active',
        $notesHolders.length === $visibleNotesHolders.length,
      );
140 141
    },
    setDiscussionVisible() {
142 143 144
      this.isVisible = $(`.diffs .notes[data-discussion-id="${this.discussion.id}"]`).is(
        ':visible',
      );
145
    },
146 147 148
    getTooltipText(note) {
      return `${note.authorName}: ${note.noteTruncated}`;
    },
149
  },
150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186
  template: `
    <div class="diff-comment-avatar-holders"
      :class="discussionClassName"
      v-show="notesCount !== 0">
      <div v-if="!isVisible">
        <!-- FIXME: Pass an alt attribute here for accessibility -->
        <user-avatar-image
          v-for="note in notesSubset"
          :key="note.id"
          class="diff-comment-avatar js-diff-comment-avatar"
          @click.native="clickedAvatar($event)"
          :img-src="note.authorAvatar"
          :tooltip-text="getTooltipText(note)"
          :data-line-type="lineType"
          :size="19"
          data-html="true"
        />
        <span v-if="notesCount > shownAvatars"
          class="diff-comments-more-count has-tooltip js-diff-comment-avatar"
          data-container="body"
          data-placement="top"
          ref="extraComments"
          role="button"
          :data-line-type="lineType"
          :title="extraNotesTitle"
          @click="clickedAvatar($event)">{{ moreText }}</span>
      </div>
      <button class="diff-notes-collapse js-diff-comment-avatar"
        type="button"
        aria-label="Show comments"
        :data-line-type="lineType"
        @click="clickedAvatar($event)"
        v-if="isVisible"
        v-html="collapseIcon">
      </button>
    </div>
  `,
187
});
188

189
Vue.component('diff-note-avatars', DiffNoteAvatars);