summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/vue_shared/components/project_avatar/image.vue
blob: 279cc1de5bbee797f9e61a4b6e8fc87e538853d6 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<script>

  /* This is a re-usable vue component for rendering a project avatar that
    does not need to link to the project's profile. The image and an optional
    tooltip can be configured by props passed to this component.

    Sample configuration:

    <project-avatar-image
      :lazy="true"
      :img-src="projectAvatarSrc"
      :img-alt="tooltipText"
      :tooltip-text="tooltipText"
      tooltip-placement="top"
    />

  */

  import defaultAvatarUrl from 'images/no_avatar.png';
  import { placeholderImage } from '../../../lazy_loader';
  import tooltip from '../../directives/tooltip';

  export default {
    name: 'ProjectAvatarImage',
    directives: {
      tooltip,
    },
    props: {
      lazy: {
        type: Boolean,
        required: false,
        default: false,
      },
      imgSrc: {
        type: String,
        required: false,
        default: defaultAvatarUrl,
      },
      cssClasses: {
        type: String,
        required: false,
        default: '',
      },
      imgAlt: {
        type: String,
        required: false,
        default: 'project avatar',
      },
      size: {
        type: Number,
        required: false,
        default: 20,
      },
      tooltipText: {
        type: String,
        required: false,
        default: '',
      },
      tooltipPlacement: {
        type: String,
        required: false,
        default: 'top',
      },
    },
    computed: {
      // API response sends null when gravatar is disabled and
      // we provide an empty string when we use it inside project avatar link.
      // In both cases we should render the defaultAvatarUrl
      sanitizedSource() {
        return this.imgSrc === '' || this.imgSrc === null ? defaultAvatarUrl : this.imgSrc;
      },
      resultantSrcAttribute() {
        return this.lazy ? placeholderImage : this.sanitizedSource;
      },
      tooltipContainer() {
        return this.tooltipText ? 'body' : null;
      },
      avatarSizeClass() {
        return `s${this.size}`;
      },
    },
  };
</script>

<template>
  <img
    v-tooltip
    class="avatar"
    :class="{
      lazy: lazy,
      [avatarSizeClass]: true,
      [cssClasses]: true
    }"
    :src="resultantSrcAttribute"
    :width="size"
    :height="size"
    :alt="imgAlt"
    :data-src="sanitizedSource"
    :data-container="tooltipContainer"
    :data-placement="tooltipPlacement"
    :title="tooltipText"
  />
</template>