all files / src/ Snotify.vue

0% Statements 0/26
0% Branches 0/8
0% Functions 0/5
0% Lines 0/25
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                                                                                                                                                 
<template>
  <div>
    <div class="snotify-backdrop" v-if="backdrop >= 0" :style="{opacity: backdrop}"></div>
    <div v-for="(position, index) in notifications" class="snotify" :class="'snotify-' + index">
      <toast v-for="toast in position.slice(blockSize_a, blockSize_b)" :toastData="toast" :key="toast.id">
      </toast>
    </div>
  </div>
</template>
 
<script>
  import Toast from './components/Toast'
  import {SnotifyService} from './SnotifyService'
  import SnotifyPosition from './enums/SnotifyPosition'
  import {sortNotificationsByPositions} from './util'
 
  export default {
    data () {
      return {
        backdrop: -1,
        positions: SnotifyPosition,
        notifications: {}
      }
    },
    methods: {
      setOptions(options) {
        if (options.newOnTop) {
          this.dockSize_a = -options.maxOnScreen;
          this.dockSize_b = undefined;
          this.blockSize_a = -options.maxAtPosition;
          this.blockSize_b = undefined
        } else {
          this.dockSize_a = 0;
          this.dockSize_b = options.maxOnScreen;
          this.blockSize_a = 0;
          this.blockSize_b = options.maxAtPosition
        }
      }
    },
    components: {
      Toast
    },
    created () {
      this.setOptions(SnotifyService.options);
 
      SnotifyService.$on('optionsChanged', (options) => {
        this.setOptions(options);
      });
 
      SnotifyService.$on('notificationsChanged', (notifications) => {
        this.notifications = sortNotificationsByPositions(notifications.slice(this.dockSize_a, this.dockSize_b));
        const list = notifications.filter(toast => toast.config.backdrop >= 0);
 
        if (list.length) {
          if (this.backdrop < 0) {
            this.backdrop = 0
            setTimeout(() => {
              this.backdrop = list[list.length - 1].config.backdrop
            }, 10)
          }
        } else {
          if (this.backdrop > 0) {
            this.backdrop = 0
            setTimeout(() => {
              this.backdrop = -1
            }, 200)
          }
        }
      })
    }
  }
</script>