[WIP] drag/drop fixes (#8851)

* Stable: Highlight pet on dragging food / add drag* events * Stable: hatch dialog instead of popover / .btn-flat / update bootstrap-vie * Layout: change sidebar width to fixed 236px - removed .col-2/.col-10 * Stable: Drag&Drop Food Image + Text - refactor directive to use custom event names * Stable: fixes * Stable: click to select food + attached food info box * fix lint issues * Drag&Drop&Click: Potions on Eggs - fix click on item + attached infobox-position in click mode
2017-07-10 10:07:23 +02:00
parent 78fd79931e
commit dd29c60d87
18 changed files with 492 additions and 110 deletions
@@ -2,7 +2,7 @@
 .row
  sidebar(@search="updateSearch", @filter="updateFilters")

-  .col-10.standard-page
+  .standard-page
    .clearfix
        h1.page-header.float-left(v-once) {{ $t('publicGuilds') }}
        .float-right
@@ -2,7 +2,7 @@
 .row
  sidebar(v-on:search="updateSearch", v-on:filter="updateFilters")

-  .col-10.no-guilds.standard-page(v-if='filteredGuilds.length === 0')
+  .no-guilds.standard-page(v-if='filteredGuilds.length === 0')
    .no-guilds-wrapper
      .svg-icon(v-html='icons.greyBadge')
      h2 {{$t('noGuildsTitle')}}
@@ -10,7 +10,7 @@
      p {{$t('noGuildsParagraph2')}}
      span(v-if='loading') {{ $t('loading') }}

-  .col-10.standard-page(v-if='filteredGuilds.length > 0')
+  .standard-page(v-if='filteredGuilds.length > 0')
    .row
      .col-md-12
        h1.page-header.float-left(v-once) {{ $t('myGuilds') }}
@@ -1,5 +1,5 @@
 <template lang="pug">
-.col-2.standard-sidebar
+.standard-sidebar
  .form-group
    input.form-control.search(type="text", :placeholder="$t('search')", v-model='searchTerm')

@@ -1,6 +1,6 @@
 <template lang="pug">
 .row
-  .col-2.standard-sidebar
+  .standard-sidebar
    .form-group
      input.form-control.input-search(type="text", v-model="searchText", :placeholder="$t('search')")

@@ -17,7 +17,7 @@
            span.custom-control-indicator
            span.custom-control-description(v-once) {{ group.label }}

-  .col-10.standard-page
+  .standard-page
    .clearfix
      h1.float-left.mb-0.page-header(v-once) {{ $t('equipment') }}
      .float-right
@@ -8,18 +8,15 @@ b-popover(
  v-else,
  :triggers="['hover']",
  :placement="popoverPosition",
-  @click="click",
 )
  span(slot="content")
    slot(name="popoverContent", :item="item")

-  .item-wrapper
+  .item-wrapper(@click="click")
    .item
      slot(name="itemBadge", :item="item")
      span.item-content(
-        :class="itemContentClass",
-        :draggable="draggable",
-        @dragstart="onDrag"
+        :class="itemContentClass"
      )
    span.item-label(v-if="label") {{ label }}
 </template>
@@ -49,22 +46,11 @@ export default {
      type: String,
      default: 'bottom',
    },
-    draggable: {
-      type: Boolean,
-      default: false,
-    },
  },
  methods: {
    click () {
      this.$emit('click', this.item);
    },
-    onDrag (ev) {
-      if (this.draggable) {
-        this.$emit('onDrag', ev);
-      } else {
-        ev.preventDefault();
-      }
-    },
  },
 };
 </script>
@@ -1,6 +1,6 @@
 <template lang="pug">
-.row
-  .col-2.standard-sidebar
+.row(v-mousePosition="30", @mouseMoved="mouseMoved($event)")
+  .standard-sidebar
    .form-group
      input.form-control.input-search(type="text", v-model="searchText", :placeholder="$t('search')")

@@ -16,7 +16,7 @@
            input.custom-control-input(type="checkbox", v-model="group.selected")
            span.custom-control-indicator
            span.custom-control-description(v-once) {{ $t(group.key) }}
-  .col-10.standard-page
+  .standard-page
    .clearfix
      h1.float-left.mb-0.page-header(v-once) {{ $t('items') }}
      .float-right
@@ -34,16 +34,55 @@
       |
       span.badge.badge-pill.badge-default {{group.quantity}}

-      .items
+      .items(v-if="group.key === 'eggs'")
        item(
          v-for="({data: item, quantity}, index) in items[group.key]",
          v-if="group.open || index < itemsPerLine",
          :item="item",
          :key="item.key",
-          :itemContentClass="`${group.classPrefix}${item.key}`"
-          :selected="true",
+          :itemContentClass="`${group.classPrefix}${item.key}`",
+          v-drag.drop.hatch="item.key",
+
+          @itemDragOver="onDragOver($event, item)",
+          @itemDropped="onDrop($event, item)",
+          @itemDragLeave="onDragLeave()",
+
+          @click="onEggClicked($event, item)"
        )
-          template(slot="popoverContent", scope="ctx") 
+          template(slot="popoverContent", scope="ctx")
+            h4.popover-content-title {{ ctx.item.text() }}
+            .popover-content-text {{ ctx.item.notes() }}
+          template(slot="itemBadge", scope="ctx")
+            span.badge.badge-pill.badge-item.badge-quantity {{ quantity }}
+
+      .items(v-else-if="group.key === 'hatchingPotions'")
+        item(
+          v-for="({data: item, quantity}, index) in items[group.key]",
+          v-if="group.open || index < itemsPerLine",
+          :item="item",
+          :key="item.key",
+          :itemContentClass="`${group.classPrefix}${item.key}`",
+          v-drag.hatch="item.key",
+
+          @itemDragEnd="onDragEnd($event, item)",
+          @itemDragStart="onDragStart($event, item)",
+
+          @click="onPotionClicked($event, item)"
+        )
+          template(slot="popoverContent", scope="ctx")
+            h4.popover-content-title {{ ctx.item.text() }}
+            .popover-content-text {{ ctx.item.notes() }}
+          template(slot="itemBadge", scope="ctx")
+            span.badge.badge-pill.badge-item.badge-quantity {{ quantity }}
+      .items(v-else)
+        item(
+          v-for="({data: item, quantity}, index) in items[group.key]",
+          v-if="group.open || index < itemsPerLine",
+          :item="item",
+          :key="item.key",
+          :itemContentClass="`${group.classPrefix}${item.key}`",
+        )
+          template(slot="popoverContent", scope="ctx")
            h4.popover-content-title {{ ctx.item.text() }}
            .popover-content-text {{ ctx.item.notes() }}
          template(slot="itemBadge", scope="ctx")
@@ -55,9 +94,40 @@
        @click="group.open = !group.open"
      ) {{ group.open ? $t('showLessItems', { type: $t(group.key) }) : $t('showAllItems', { type: $t(group.key), items: items[group.key].length }) }}

+  div.hatchingPotionInfo(ref="draggingPotionInfo")
+    div(v-if="currentDraggingPotion != null")
+      div.potion-icon(:class="'Pet_HatchingPotion_'+currentDraggingPotion.key")
+      div.popover
+        div.popover-content {{ $t('dragThisPotion', {potionName: currentDraggingPotion.text() }) }}
+
+  div.hatchingPotionInfo.mouse(ref="clickPotionInfo", v-if="potionClickMode")
+    div(v-if="currentDraggingPotion != null")
+      div.potion-icon(:class="'Pet_HatchingPotion_'+currentDraggingPotion.key")
+      div.popover
+        div.popover-content {{ $t('clickOnEggToHatch', {potionName: currentDraggingPotion.text() }) }}
+
 </template>

 <style lang="scss" scoped>
+
+  .hatchingPotionInfo {
+    position: absolute;
+    left: -500px;
+
+    &.mouse {
+      position: fixed;
+      pointer-events: none
+    }
+
+    .potion-icon {
+      margin: 0 auto;
+    }
+
+    .popover {
+      position: inherit;
+      width: 100px;
+    }
+  }
 </style>

 <script>
@@ -71,6 +141,9 @@ import Item from 'client/components/inventory/item';

 const allowedSpecialItems = ['snowball', 'spookySparkles', 'shinySeed', 'seafoam'];

+import DragDropDirective from 'client/directives/dragdrop.directive';
+import MouseMoveDirective from 'client/directives/mouseposition.directive';
+
 const groups = [
  ['eggs', 'Pet_Egg_'],
  ['hatchingPotions', 'Pet_HatchingPotion_'],
@@ -94,6 +167,10 @@ export default {
    bDropdown,
    bDropdownItem,
  },
+  directives: {
+    drag: DragDropDirective,
+    mousePosition: MouseMoveDirective,
+  },
  data () {
    return {
      itemsPerLine: 9,
@@ -101,6 +178,10 @@ export default {
      searchTextThrottled: null,
      groups,
      sortBy: 'quantity', // or 'AZ'
+
+
+      currentDraggingPotion: null,
+      potionClickMode: false,
    };
  },
  watch: {
@@ -150,5 +231,71 @@ export default {
      return itemsByType;
    },
  },
+  methods: {
+    petExists (potionKey, eggKey) {
+      let animalKey = `${eggKey}-${potionKey}`;
+
+      let result =  this.user.items.pets[animalKey] > 0;
+
+      return result;
+    },
+
+    hatchPet (potionKey, eggKey) {
+      this.$store.dispatch('common:hatch', {egg: eggKey, hatchingPotion: potionKey});
+    },
+
+    onDragEnd () {
+      this.currentDraggingPotion = null;
+    },
+    onDragStart ($event, potion) {
+      this.currentDraggingPotion = potion;
+
+      let itemRef = this.$refs.draggingPotionInfo;
+
+      let dragEvent = $event.event;
+
+      dragEvent.dataTransfer.setDragImage(itemRef, -20, -20);
+    },
+
+    onDragOver ($event, egg) {
+      let potionKey = this.currentDraggingPotion.key;
+
+      if (this.petExists(potionKey, egg.key)) {
+        $event.dropable = false;
+      }
+    },
+    onDrop ($event, egg) {
+      this.hatchPet(this.currentDraggingPotion.key, egg.key);
+    },
+    onDragLeave () {
+
+    },
+
+    onEggClicked ($event, egg) {
+      if (!this.petExists(this.currentDraggingPotion.key, egg.key)) {
+        this.hatchPet(this.currentDraggingPotion.key, egg.key);
+      }
+
+      this.currentDraggingPotion = null;
+      this.potionClickMode = false;
+    },
+
+    onPotionClicked ($event, potion) {
+      if (this.currentDraggingPotion === null || this.currentDraggingPotion !== potion) {
+        this.currentDraggingPotion = potion;
+        this.potionClickMode = true;
+      } else {
+        this.currentDraggingPotion = null;
+        this.potionClickMode = false;
+      }
+    },
+
+    mouseMoved ($event) {
+      if (this.potionClickMode) {
+        this.$refs.clickPotionInfo.style.left = `${$event.x + 20}px`;
+        this.$refs.clickPotionInfo.style.top = `${$event.y + 20}px`;
+      }
+    },
+  },
 };
 </script>
@@ -7,15 +7,17 @@ b-popover(
    h4.popover-content-title {{ item.text() }}
    div.popover-content-text(v-html="item.notes()")

-  .item-wrapper
-    .item
+  .item-wrapper(@click="click($event)")
+    .item(:class="{'item-active': active }")
      countBadge(
        :show="true",
        :count="itemCount"
      )
      span.item-content(
        :class="'Pet_Food_'+item.key",
-        v-drag.food="item.key"
+        v-drag.food="item.key",
+        @itemDragEnd="dragend($event)",
+        @itemDragStart="dragstart($event)"
      )
 </template>

@@ -43,6 +45,20 @@ export default {
    itemContentClass: {
      type: String,
    },
+    active: {
+      type: Boolean,
+    },
+  },
+  methods: {
+    dragend ($event) {
+      this.$emit('itemDragEnd', $event);
+    },
+    dragstart ($event) {
+      this.$emit('itemDragStart', $event);
+    },
+    click ($event) {
+      this.$emit('itemClick', $event);
+    },
  },
 };
 </script>
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .row.stable
+  .row.stable(v-mousePosition="30", @mouseMoved="mouseMoved($event)")
    .standard-sidebar
      div
        b-popover(
@@ -85,9 +85,10 @@
            v-for="pet in pets(petGroup, viewOptions[petGroup.key].open, hideMissing, selectedSortBy, searchTextThrottled, availableContentWidth)",
            :key="pet.key",
            v-drag.drop.food="pet.key",
-            @dragover="onDragOver($event, pet)",
-            @dropped="onDrop($event, pet)",
-            :class="pet.isLastInRow ? 'last' : ''"
+            @itemDragOver="onDragOver($event, pet)",
+            @itemDropped="onDrop($event, pet)",
+            @itemDragLeave="onDragLeave()",
+            :class="{'last': pet.isLastInRow}"
          )
            petItem(
              :item="pet",
@@ -95,20 +96,13 @@
              :popoverPosition="'top'",
              :progress="pet.progress",
              :emptyItem="!pet.isOwned()",
-              :showPopover="pet.isOwned() || pet.isHatchable()",
-              @hatchPet="hatchPet",
+              :showPopover="pet.isOwned()",
+              :highlightBorder="highlightPet == pet.key",
+              @click="petClicked(pet)"
            )
              span(slot="popoverContent")
                div(v-if="pet.isOwned()")
                  h4.popover-content-title {{ pet.name }}
-                div.hatchablePopover(v-else-if="pet.isHatchable()")
-                  h4.popover-content-title {{ pet.name }}
-                  div.popover-content-text(v-html="$t('haveHatchablePet', { potion: pet.potionName, egg: pet.eggName })")
-                  div.potionEggGroup
-                    div.potionEggBackground
-                      div(:class="'Pet_HatchingPotion_'+pet.potionKey")
-                    div.potionEggBackground
-                      div(:class="'Pet_Egg_'+pet.eggKey")

              template(slot="itemBadge", scope="ctx")
                starBadge(
@@ -185,7 +179,7 @@

                div.float-right(v-once)
                  | {{ $t('petLikeToEat') + ' ' }}
-                  .svg-icon(v-html="icons.information")
+                  span.svg-icon.inline.icon-16(v-html="icons.information")


        drawer-slider(
@@ -199,6 +193,10 @@
            foodItem(
              :item="ctx.item",
              :itemCount="userItems.food[ctx.item.key]",
+              :active="currentDraggingFood == ctx.item",
+              @itemDragEnd="onDragEnd()",
+              @itemDragStart="onDragStart($event, ctx.item)",
+              @itemClick="onFoodClicked($event, ctx.item)"
            )

    b-modal#welcome-modal(
@@ -212,6 +210,39 @@
        h1.page-header(v-once) {{ $t('welcomeStable') }}
        div.content-text(v-once) {{ $t('welcomeStableText') }}

+    b-modal#hatching-modal(
+      :visible="hatchablePet != null",
+      @change="resetHatchablePet($event)"
+    )
+
+      div.content(v-if="hatchablePet")
+        div.potionEggGroup
+          div.potionEggBackground
+            div(:class="'Pet_HatchingPotion_'+hatchablePet.potionKey")
+          div.potionEggBackground
+            div(:class="'Pet_Egg_'+hatchablePet.eggKey")
+
+        h4.title {{ hatchablePet.name }}
+        div.text(v-html="$t('haveHatchablePet', { potion: hatchablePet.potionName, egg: hatchablePet.eggName })")
+
+      span.svg-icon.icon-10(v-html="icons.close", slot="modal-header", @click="closeHatchPetDialog()")
+
+      div(slot="modal-footer")
+        button.btn.btn-primary(@click="hatchPet(hatchablePet)") {{ $t('hatch') }}
+        button.btn.btn-secondary.btn-flat(@click="closeHatchPetDialog()") {{ $t('cancel') }}
+
+    div.foodInfo(ref="dragginFoodInfo")
+      div(v-if="currentDraggingFood != null")
+        div.food-icon(:class="'Pet_Food_'+currentDraggingFood.key")
+        div.popover
+          div.popover-content {{ $t('dragThisFood', {foodName: currentDraggingFood.text() }) }}
+
+    div.foodInfo.mouse(ref="clickFoodInfo", v-if="foodClickMode")
+      div(v-if="currentDraggingFood != null")
+        div.food-icon(:class="'Pet_Food_'+currentDraggingFood.key")
+        div.popover
+          div.popover-content {{ $t('clickOnPetToFeed', {foodName: currentDraggingFood.text() }) }}
+
 </template>

 <style lang="scss">
@@ -249,10 +280,10 @@
    display: inline-flex;
    align-items: center;

-    width: 64px;
-    height: 64px;
-    border-radius: 2px;
-    background-color: #4e4a57;
+    width: 112px;
+    height: 112px;
+    border-radius: 4px;
+    background-color: #f9f9f9;

    &:first-child {
      margin-right: 24px;
@@ -281,7 +312,6 @@
  .stable {

    .standard-page {
-      flex: 1;
      padding-right:0;
    }

@@ -289,14 +319,17 @@
      // 3% padding + 252px sidebar width
      left: calc(3% + 252px) !important;
    }
+
+    .svg-icon.inline.icon-16 {
+      vertical-align: bottom;
+    }
  }

  .drawer-slider .items {
    height: 114px;
  }

-
-  div#welcome-modal {
+  @mixin habitModal() {
    display: flex;
    justify-content: center;
    flex-direction: column;
@@ -305,6 +338,14 @@
      border: 0;
    }

+    .modal-footer {
+      justify-content: center;
+    }
+  }
+
+  #welcome-modal {
+    @include habitModal();
+
    .npc_matt {
      margin: 0 auto 21px auto;
    }
@@ -326,9 +367,43 @@

      width: 400px;
    }
+  }

-    .modal-footer {
-      justify-content: center;
+  #hatching-modal {
+    @include habitModal();
+
+    .content {
+      text-align: center;
+
+      margin: 9px;
+      width: 300px;
+    }
+
+    .title {
+      height: 24px;
+      margin-top: 24px;
+      font-family: Roboto;
+      font-size: 20px;
+      font-weight: bold;
+      font-stretch: condensed;
+      line-height: 1.2;
+      text-align: center;
+      color: #4e4a57;
+    }
+
+    .text {
+      height: 60px;
+      font-family: Roboto;
+      font-size: 14px;
+      line-height: 1.43;
+      text-align: center;
+      color: #686274;
+    }
+
+    span.svg-icon.icon-10 {
+      position: absolute;
+      right: 10px;
+      top: 10px;
    }
  }

@@ -349,6 +424,25 @@
  .popover-content-text {
    margin-bottom: 0;
  }
+
+  .foodInfo {
+    position: absolute;
+    left: -500px;
+
+    &.mouse {
+      position: fixed;
+      pointer-events: none
+    }
+
+    .food-icon {
+      margin: 0 auto;
+    }
+
+    .popover {
+      position: inherit;
+      width: 100px;
+    }
+  }
 </style>

 <script>
@@ -380,8 +474,10 @@

  import ResizeDirective from 'client/directives/resize.directive';
  import DragDropDirective from 'client/directives/dragdrop.directive';
+  import MouseMoveDirective from 'client/directives/mouseposition.directive';

-  import information from 'assets/svg/information.svg';
+  import svgInformation from 'assets/svg/information.svg';
+  import svgClose from 'assets/svg/close.svg';

  // TODO Normalize special pets and mounts
  // import Store from 'client/store';
@@ -407,6 +503,7 @@
    directives: {
      resize: ResizeDirective,
      drag: DragDropDirective,
+      mousePosition: MouseMoveDirective,
    },
    data () {
      return {
@@ -426,9 +523,16 @@
        ],

        icons: Object.freeze({
-          information,
+          information: svgInformation,
+          close: svgClose,
        }),

+        highlightPet: '',
+
+        hatchablePet: null,
+        foodClickMode: false,
+        currentDraggingFood: null,
+
        selectedDrawerTab: 0,
        availableContentWidth: 0,
      };
@@ -591,7 +695,7 @@
                  return userItems.mounts[this.key] > 0;
                },
                isAllowedToFeed () {
-                  return type === 'pet' && !this.mountOwned();
+                  return type === 'pet' && this.isOwned() && !this.mountOwned();
                },
                isHatchable () {
                  return false;
@@ -620,7 +724,7 @@
                    return userItems.mounts[this.key] > 0;
                  },
                  isAllowedToFeed () {
-                    return type === 'pet' && !this.mountOwned();
+                    return type === 'pet' && this.isOwned() && !this.mountOwned();
                  },
                  isHatchable () {
                    return userItems.eggs[egg.key] > 0 && userItems.hatchingPotions[potion.key] > 0;
@@ -764,14 +868,80 @@
        this.$store.dispatch('common:hatch', {egg: pet.eggKey, hatchingPotion: pet.potionKey});
      },

+      onDragStart (ev, food) {
+        this.currentDraggingFood = food;
+
+        let itemRef = this.$refs.dragginFoodInfo;
+
+        let dragEvent = ev.event;
+
+        dragEvent.dataTransfer.setDragImage(itemRef, -20, -20);
+      },
+
      onDragOver (ev, pet) {
        if (!pet.isAllowedToFeed()) {
          ev.dropable = false;
+        } else {
+          this.highlightPet = pet.key;
        }
      },

      onDrop (ev, pet) {
        this.$store.dispatch('common:feed', {pet: pet.key, food: ev.draggingKey});
+
+        this.highlightPet = '';
+      },
+
+      onDragEnd () {
+        this.currentDraggingFood = null;
+        this.highlightPet = '';
+      },
+
+      onDragLeave () {
+        this.highlightPet = '';
+      },
+
+      petClicked (pet) {
+        if (this.currentDraggingFood !== null && pet.isAllowedToFeed()) {
+          // food process
+          this.$store.dispatch('common:feed', {pet: pet.key, food: this.currentDraggingFood.key});
+          this.currentDraggingFood = null;
+          this.foodClickMode = false;
+        } else {
+          if (pet.isOwned() || !pet.isHatchable()) {
+            return;
+          }
+
+          // opens the hatch dialog
+          this.hatchablePet = pet;
+        }
+      },
+
+      closeHatchPetDialog () {
+        this.$root.$emit('hide::modal', 'hatching-modal');
+      },
+
+      resetHatchablePet ($event) {
+        if (!$event) {
+          this.hatchablePet = null;
+        }
+      },
+
+      onFoodClicked ($event, food) {
+        if (this.currentDraggingFood === null || this.currentDraggingFood !== food) {
+          this.currentDraggingFood = food;
+          this.foodClickMode = true;
+        } else {
+          this.currentDraggingFood = null;
+          this.foodClickMode = false;
+        }
+      },
+
+      mouseMoved ($event) {
+        if (this.foodClickMode) {
+          this.$refs.clickFoodInfo.style.left = `${$event.x + 20}px`;
+          this.$refs.clickFoodInfo.style.top = `${$event.y + 20}px`;
+        }
      },
    },
  };
@@ -6,19 +6,14 @@ b-popover(
  span(slot="content")
    slot(name="popoverContent", :item="item")

-  .item-wrapper
+  .item-wrapper(@click="click()")
    .item(
-      :class="{'item-empty': emptyItem}",
-      @mouseup="holdStop",
-      @mouseleave="holdStop",
-      @mousedown.left="holdStart"
+      :class="{'item-empty': emptyItem, 'highlight': highlightBorder}",
    )
      slot(name="itemBadge", :item="item")
      span.item-content(:class="itemContentClass")
      span.pet-progress-background(v-if="item.isAllowedToFeed() && progress > 0")
        div.pet-progress-bar(v-bind:style="{width: 100 * progress/50 + '%' }")
-      span.pet-progress-background(v-if="holdProgress > 0")
-        div.pet-progress-bar.hold(v-bind:style="{width: 100 * holdProgress/5 + '%' }")
    span.item-label(v-if="label") {{ label }}
 </template>

@@ -36,10 +31,6 @@ b-popover(
    height: 4px;
    background-color: #24cc8f;
  }
-
-  .pet-progress-bar.hold {
-    background-color: #54c3cc;
-  }
 </style>

 <script>
@@ -67,6 +58,10 @@ b-popover(
        type: Boolean,
        default: false,
      },
+      highlightBorder: {
+        type: Boolean,
+        default: false,
+      },
      popoverPosition: {
        type: String,
        default: 'bottom',
@@ -76,35 +71,9 @@ b-popover(
        default: true,
      },
    },
-    data () {
-      return {
-        holdProgress: -1,
-      };
-    },
    methods: {
-      holdStart () {
-        let pet = this.item;
-        if (pet.isOwned() || !pet.isHatchable()) {
-          return;
-        }
-
-        this.holdProgress = 1;
-
-        this.currentHoldingTimer = setInterval(() => {
-          if (this.holdProgress === 5) {
-            this.holdStop();
-            this.$emit('hatchPet', pet);
-          }
-
-          this.holdProgress += 1;
-        }, 1000);
-      },
-
-      holdStop () {
-        if (this.currentHoldingTimer) {
-          clearInterval(this.currentHoldingTimer);
-          this.holdProgress = -1;
-        }
+      click () {
+        this.$emit('click', {});
      },
    },
  };