<template>
<div>
    <template v-if="isMobile">
        <div class="bubble disabled" :class="{focus:showToolbar}" @contextmenu.prevent @touchstart="onTouchStartToolBtn" @touchend="onTouchEndToolBtn">
            <slot></slot>
        </div>
    </template>
    <template v-else>
        <div class="bubble" :class="{focus:showToolbar}" @contextmenu.prevent="onToolBtn">
            <slot></slot>
        </div>
    </template>
</div>
</template>

<script>
export default {
  name: 'bubbleWrap',
  props: {
    isMobile: Boolean,
    showToolbar: Boolean
  },
  methods: {
    onToolBtn (event) {
      this.$emit('onToolBtn', event)
    },
    onTouchStartToolBtn (event) {
      this.$emit('onTouchStartToolBtn', event)
    },
    onTouchEndToolBtn (event) {
      this.$emit('onTouchEndToolBtn', event)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
