From 82823207960bf0e0a3831c60ff46c9a045859219 Mon Sep 17 00:00:00 2001
From: David Jakowenko <jakowenko@gmail.com>
Date: Sat, 2 Oct 2021 21:15:57 -0400
Subject: [PATCH] feat(ui:menu): speed dial action buttons

---
 frontend/src/components/Header.vue    | 132 ++++++---
 frontend/src/components/SpeedDial.vue | 388 ++++++++++++++++++++++++++
 2 files changed, 480 insertions(+), 40 deletions(-)
 create mode 100644 frontend/src/components/SpeedDial.vue

diff --git a/frontend/src/components/Header.vue b/frontend/src/components/Header.vue
index 33469434..b0415e1b 100644
--- a/frontend/src/components/Header.vue
+++ b/frontend/src/components/Header.vue
@@ -77,41 +77,12 @@
         </div>
       </div>
       <div class="p-d-inline-flex p-ai-center">
-        <div>
-          <Button
-            v-if="type === 'match'"
-            icon="pi pi-trash"
-            class="p-button-danger p-button-sm p-mr-1"
-            @click="$parent.remove().files($event)"
-            :disabled="matches.selected.length === 0"
-          />
-          <Button
-            v-else-if="type === 'train'"
-            icon="pi pi-trash"
-            class="p-button-danger p-button-sm p-mr-1"
-            @click="$parent.remove().files($event)"
-            :disabled="matches.selected.length === 0"
-          />
-
-          <Button
-            :icon="loading.files || loading.status ? 'pi pi-spin pi-spinner' : 'pi pi-refresh'"
-            class="p-button p-button-sm p-mr-1 reload-btn"
-            @click="refresh"
-            :disabled="loading.files || loading.status"
-          />
-          <Button
-            :icon="areAllSelected ? 'fa fa-check-square' : 'far fa-check-square'"
-            class="p-button p-button-sm"
-            @click="$parent.toggleAll(!areAllSelected)"
-            :disabled="!matches.source.length || loading.status"
-          />
-          <Button
-            v-if="type === 'match'"
-            icon="pi pi-cog"
-            class="p-button p-button-sm p-ml-1"
-            @click="showFilter = !showFilter"
-          />
-        </div>
+        <SpeedDial
+          :model="speedDial"
+          direction="left"
+          :hideOnClickOutside="false"
+          :tooltipOptions="{ position: 'top' }"
+        />
       </div>
     </div>
     <div v-if="type === 'match'" class="fixed-sub p-pl-3 p-pr-3" :class="{ show: showFilter }">
@@ -266,6 +237,7 @@ import Button from 'primevue/button';
 import Dropdown from 'primevue/dropdown';
 import InputText from 'primevue/inputtext';
 import MultiSelect from 'primevue/multiselect';
+import SpeedDial from '@/components/SpeedDial.vue';
 
 import Constants from '@/util/constants.util';
 import ApiService from '@/services/api.service';
@@ -277,9 +249,10 @@ export default {
     InputText,
     MultiSelect,
     FileUpload,
+    SpeedDial,
   },
   data: () => ({
-    headerHeight: 0,
+    speedDial: [],
     pagination: {
       page: 1,
       total: 0,
@@ -318,6 +291,46 @@ export default {
   mounted() {
     this.get().folders();
 
+    this.speedDial = [
+      {
+        label: 'Filters',
+        icon: 'pi pi-cog',
+        command: () => {
+          this.showFilter = !this.showFilter;
+        },
+      },
+      {
+        label: 'Refresh',
+        icon: 'pi pi-refresh',
+        command: () => {
+          if (this.loading.files || this.loading.status) return;
+          if (this.type === 'match') this.$parent.get().matches({ delay: 500 });
+          if (this.type === 'train') this.$parent.init();
+        },
+      },
+      {
+        label: 'Toggle All',
+        icon: 'far fa-check-square',
+        command: () => {
+          if (!this.matches.source.length || this.loading.status) return;
+          this.$parent.toggleAll(!this.areAllSelected);
+        },
+      },
+      {
+        label: 'Trash',
+        icon: 'pi pi-trash',
+        command: () => {
+          if (!this.matches.selected.length) return;
+          this.$parent.remove().files();
+        },
+      },
+    ];
+
+    if (this.type === 'train') {
+      const index = this.speedDial.findIndex(({ label }) => label.toLowerCase() === 'filters');
+      if (index > -1) this.speedDial.splice(index, 1);
+    }
+
     if (this.socket) {
       this.socket.on('connect', () => {
         this.socketClass = 'p-badge-success';
@@ -398,10 +411,6 @@ export default {
         },
       };
     },
-    refresh() {
-      if (this.type === 'match') this.$parent.get().matches({ delay: 500 });
-      if (this.type === 'train') this.$parent.init();
-    },
     addComma(length, index) {
       return length - 1 === index ? ' ' : ',';
     },
@@ -410,6 +419,14 @@ export default {
     },
   },
   watch: {
+    'loading.files': function (value) {
+      const target = this.speedDial.find(({ label }) => label.toLowerCase() === 'refresh');
+      target.icon = value ? 'pi pi-spin pi-spinner' : 'pi pi-refresh';
+    },
+    areAllSelected(value) {
+      const target = this.speedDial.find(({ label }) => label.toLowerCase() === 'toggle all');
+      target.icon = value ? 'fa fa-check-square' : 'far fa-check-square';
+    },
     dropdowns: {
       handler(value) {
         ['names', 'detectors', 'matches', 'cameras', 'types'].forEach((key) => {
@@ -452,6 +469,41 @@ export default {
 <style scoped lang="scss">
 @import '@/assets/scss/_variables.scss';
 
+::v-deep(.p-speeddial) {
+  position: relative;
+  display: inline-flex;
+  align-self: center;
+
+  .p-button {
+    width: 2rem;
+    height: 2rem;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
+  .p-button-icon {
+    font-size: 0.8rem !important;
+  }
+
+  ul.p-speeddial-list {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.9rem;
+    right: 2rem;
+    .p-speeddial-action {
+      width: 1.8rem;
+      height: 1.8rem;
+      text-decoration: none;
+    }
+    .p-speeddial-action-icon {
+      font-size: 0.8rem !important;
+    }
+  }
+}
+
 .header-wrapper {
   background: var(--surface-a);
   position: fixed;
diff --git a/frontend/src/components/SpeedDial.vue b/frontend/src/components/SpeedDial.vue
new file mode 100644
index 00000000..29743b43
--- /dev/null
+++ b/frontend/src/components/SpeedDial.vue
@@ -0,0 +1,388 @@
+<template>
+  <div :ref="containerRef" :class="containerClass" :style="style">
+    <slot name="button" :toggle="onClick">
+      <SDButton
+        type="button"
+        :class="buttonClassName"
+        :icon="iconClassName"
+        @mouseenter="!isMobile() && onHover($event)"
+        @click="onClick($event)"
+        :disabled="disabled"
+      />
+    </slot>
+    <ul :ref="listRef" class="p-speeddial-list" role="menu">
+      <li v-for="(item, index) of model" :key="index" class="p-speeddial-item" :style="getItemStyle(index)" role="none">
+        <template v-if="!$slots.item">
+          <a
+            :href="item.url || '#'"
+            role="menuitem"
+            :class="['p-speeddial-action', { 'p-disabled': item.disabled }]"
+            :target="item.target"
+            v-tooltip:[tooltipOptions]="{ value: item.label, disabled: !tooltipOptions }"
+            @click="onItemClick($event, item)"
+            v-ripple
+          >
+            <span v-if="item.icon" :class="['p-speeddial-action-icon', item.icon]"></span>
+          </a>
+        </template>
+        <component v-else :is="$slots.item" :item="item"></component>
+      </li>
+    </ul>
+  </div>
+  <template v-if="mask">
+    <div :class="maskClassName" :style="maskStyle"></div>
+  </template>
+</template>
+
+<script>
+/* eslint-disable vue/no-boolean-default */
+/* eslint-disable no-unused-expressions */
+import Button from 'primevue/button';
+import Ripple from 'primevue/ripple';
+import { DomHandler } from 'primevue/utils';
+
+export default {
+  name: 'SpeedDial',
+  emits: ['click', 'show', 'hide'],
+  props: {
+    model: null,
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    direction: {
+      type: String,
+      default: 'up',
+    },
+    transitionDelay: {
+      type: Number,
+      default: 30,
+    },
+    type: {
+      type: String,
+      default: 'linear',
+    },
+    radius: {
+      type: Number,
+      default: 0,
+    },
+    mask: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    hideOnClickOutside: {
+      type: Boolean,
+      default: true,
+    },
+    buttonClass: null,
+    maskStyle: null,
+    maskClass: null,
+    showIcon: {
+      type: String,
+      default: 'pi pi-plus',
+    },
+    hideIcon: null,
+    rotateAnimation: {
+      type: Boolean,
+      default: true,
+    },
+    tooltipOptions: null,
+    style: null,
+    class: null,
+  },
+  documentClickListener: null,
+  container: null,
+  list: null,
+  data() {
+    return {
+      d_visible: this.visible,
+      isItemClicked: false,
+    };
+  },
+  watch: {
+    visible(newValue) {
+      this.d_visible = newValue;
+    },
+  },
+  mounted() {
+    if (this.type !== 'linear') {
+      const button = DomHandler.findSingle(this.container, '.p-speeddial-button');
+      const firstItem = DomHandler.findSingle(this.list, '.p-speeddial-item');
+      if (button && firstItem) {
+        const wDiff = Math.abs(button.offsetWidth - firstItem.offsetWidth);
+        const hDiff = Math.abs(button.offsetHeight - firstItem.offsetHeight);
+        this.list.style.setProperty('--item-diff-x', `${wDiff / 2}px`);
+        this.list.style.setProperty('--item-diff-y', `${hDiff / 2}px`);
+      }
+    }
+    if (this.hideOnClickOutside) {
+      this.bindDocumentClickListener();
+    }
+  },
+  beforeMount() {
+    if (this.hideOnClickOutside) {
+      this.bindDocumentClickListener();
+    }
+  },
+  methods: {
+    isMobile() {
+      return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+    },
+    onItemClick(e, item) {
+      if (item.command) {
+        item.command({ originalEvent: e, item });
+      }
+      // this.hide();
+      this.isItemClicked = true;
+      e.preventDefault();
+    },
+    onHover(event) {
+      if (this.d_visible) return;
+      this.onClick(event);
+    },
+    onClick(event) {
+      this.d_visible ? this.hide() : this.show();
+      this.isItemClicked = true;
+      this.$emit('click', event);
+    },
+    show() {
+      this.d_visible = true;
+      this.$emit('show');
+    },
+    hide() {
+      this.d_visible = false;
+      this.$emit('hide');
+    },
+    calculateTransitionDelay(index) {
+      const { length } = this.model;
+      const visible = this.d_visible;
+      return (visible ? index : length - index - 1) * this.transitionDelay;
+    },
+    calculatePointStyle(index) {
+      const { type } = this;
+      if (type !== 'linear') {
+        const { length } = this.model;
+        const radius = this.radius || length * 20;
+        if (type === 'circle') {
+          const step = (2 * Math.PI) / length;
+          return {
+            left: `calc(${radius * Math.cos(step * index)}px + var(--item-diff-x, 0px))`,
+            top: `calc(${radius * Math.sin(step * index)}px + var(--item-diff-y, 0px))`,
+          };
+        }
+        if (type === 'semi-circle') {
+          const { direction } = this;
+          const step = Math.PI / (length - 1);
+          const x = `calc(${radius * Math.cos(step * index)}px + var(--item-diff-x, 0px))`;
+          const y = `calc(${radius * Math.sin(step * index)}px + var(--item-diff-y, 0px))`;
+          if (direction === 'up') {
+            return { left: x, bottom: y };
+          }
+          if (direction === 'down') {
+            return { left: x, top: y };
+          }
+          if (direction === 'left') {
+            return { right: y, top: x };
+          }
+          if (direction === 'right') {
+            return { left: y, top: x };
+          }
+        } else if (type === 'quarter-circle') {
+          const { direction } = this;
+          const step = Math.PI / (2 * (length - 1));
+          const x = `calc(${radius * Math.cos(step * index)}px + var(--item-diff-x, 0px))`;
+          const y = `calc(${radius * Math.sin(step * index)}px + var(--item-diff-y, 0px))`;
+          if (direction === 'up-left') {
+            return { right: x, bottom: y };
+          }
+          if (direction === 'up-right') {
+            return { left: x, bottom: y };
+          }
+          if (direction === 'down-left') {
+            return { right: y, top: x };
+          }
+          if (direction === 'down-right') {
+            return { left: y, top: x };
+          }
+        }
+      }
+      return {};
+    },
+    getItemStyle(index) {
+      const transitionDelay = this.calculateTransitionDelay(index);
+      const pointStyle = this.calculatePointStyle(index);
+      return {
+        transitionDelay: `${transitionDelay}ms`,
+        ...pointStyle,
+      };
+    },
+    bindDocumentClickListener() {
+      if (!this.documentClickListener) {
+        this.documentClickListener = (event) => {
+          if (this.d_visible && this.isOutsideClicked(event)) {
+            this.hide();
+          }
+          this.isItemClicked = false;
+        };
+        document.addEventListener('click', this.documentClickListener);
+      }
+    },
+    unbindDocumentClickListener() {
+      if (this.documentClickListener) {
+        document.removeEventListener('click', this.documentClickListener);
+        this.documentClickListener = null;
+      }
+    },
+    isOutsideClicked(event) {
+      return (
+        this.container &&
+        !(this.container.isSameNode(event.target) || this.container.contains(event.target) || this.isItemClicked)
+      );
+    },
+    containerRef(el) {
+      this.container = el;
+    },
+    listRef(el) {
+      this.list = el;
+    },
+  },
+  computed: {
+    containerClass() {
+      return [
+        `p-speeddial p-component p-speeddial-${this.type}`,
+        {
+          [`p-speeddial-direction-${this.direction}`]: this.type !== 'circle',
+          'p-speeddial-opened': this.d_visible,
+          'p-disabled': this.disabled,
+        },
+        this.class,
+      ];
+    },
+    buttonClassName() {
+      return [
+        'p-speeddial-button p-button-rounded',
+        {
+          'p-speeddial-rotate': this.rotateAnimation && !this.hideIcon,
+        },
+        this.buttonClass,
+      ];
+    },
+    iconClassName() {
+      return this.d_visible && !!this.hideIcon ? this.hideIcon : this.showIcon;
+    },
+    maskClassName() {
+      return [
+        'p-speeddial-mask',
+        {
+          'p-speeddial-mask-visible': this.d_visible,
+        },
+        this.maskClass,
+      ];
+    },
+  },
+  components: {
+    SDButton: Button,
+  },
+  directives: {
+    ripple: Ripple,
+  },
+};
+</script>
+
+<style>
+.p-speeddial {
+  position: absolute;
+  display: flex;
+  z-index: 1;
+}
+.p-speeddial-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: top 0s linear 0.2s;
+  pointer-events: none;
+}
+.p-speeddial-item {
+  transform: scale(0);
+  opacity: 0;
+  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s;
+  will-change: transform;
+}
+.p-speeddial-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  position: relative;
+  overflow: hidden;
+}
+.p-speeddial-circle .p-speeddial-item,
+.p-speeddial-semi-circle .p-speeddial-item,
+.p-speeddial-quarter-circle .p-speeddial-item {
+  position: absolute;
+}
+.p-speeddial-rotate {
+  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  will-change: transform;
+}
+.p-speeddial-mask {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+.p-speeddial-mask-visible {
+  pointer-events: none;
+  opacity: 1;
+  transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+.p-speeddial-opened .p-speeddial-list {
+  pointer-events: auto;
+}
+.p-speeddial-opened .p-speeddial-item {
+  transform: scale(1);
+  opacity: 1;
+}
+.p-speeddial-opened .p-speeddial-rotate {
+  transform: rotate(45deg);
+}
+/* Direction */
+.p-speeddial-direction-up {
+  align-items: center;
+  flex-direction: column-reverse;
+}
+.p-speeddial-direction-up .p-speeddial-list {
+  flex-direction: column-reverse;
+}
+.p-speeddial-direction-down {
+  align-items: center;
+  flex-direction: column;
+}
+.p-speeddial-direction-down .p-speeddial-list {
+  flex-direction: column;
+}
+.p-speeddial-direction-left {
+  justify-content: center;
+  flex-direction: row-reverse;
+}
+.p-speeddial-direction-left .p-speeddial-list {
+  flex-direction: row-reverse;
+}
+.p-speeddial-direction-right {
+  justify-content: center;
+  flex-direction: row;
+}
+.p-speeddial-direction-right .p-speeddial-list {
+  flex-direction: row;
+}
+</style>