<template>
  <div class="sv-palette-button">
    <button class="sv-palette-button-main" :class="{'expanding': showChild}" @touchstart="toggle">{{text}}</button>
    <div class="sv-palette-button-child" :class="{'expanding': showChild, 'collapsing': !showChild}">
      <slot></slot>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'svPaletteButton',
    data () {
      return {
        showChild: false
      }
    },
    props: {
      text: {
        type: String,
        default: '+'
      }
    },
    methods: {
      toggle () {
        this.showChild = !this.showChild
      },
      expand () {
        this.showChild = true
      },
      collapse () {
        this.showChild = false
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
  @import "../../styles/base";
  .sv-palette-button{
    position: relative;
    .sv-palette-button-main{
      display: flex;
      justify-content: center;
      align-items: center;
      width: pxToRem(120);
      height: pxToRem(120);
      border:none;
      outline: none;
      border-radius: pxToRem(60);
      background: $color-danger;
      color: $color-light;
      font-size: pxToRem(38);
      &.expanding{
        animation: shake .2s ease-in;
        @keyframes shake {
          0%{
            transform: scale(1.1);
          }
          50%{
            transform: scale(.9);
          }
          100%{
            transform: scale(1);
          }
        }
      }
    }
    .sv-palette-button-child{
      position: absolute;
      top: pxToRem(30);
      left: pxToRem(30);
      z-index:-1;
      &.expanding{
        top: pxToRem(-20);
        left: -100%;
        transform: rotate(720deg);
        transition: all .5s ease-in;
      }
      &.collapsing{
        top: pxToRem(30);
        left: pxToRem(30);
        transform: rotate(0);
        transition: all .5s ease-in;
      }
      .sv-button{
        width: pxToRem(60);
        height: pxToRem(60);
        border:none;
        border-radius: pxToRem(30);
        background: $color-danger;
        color:$color-light;
        font-size: pxToRem(26);
        &.sv-button-normal{
          padding:0;
        }
      }
    }
  }
</style>
