<template>
  <div class="nav">
    <div class="nav__home">
      <span class="nav__home__left" @click="$emit('move-right')">‹</span>
      <span class="nav__home__icon" @click="$emit('back-home')"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26" height="28" viewBox="0 0 26 28">
      <path fill="#aaa" d="M22 15.5v7.5q0 0.406-0.297 0.703t-0.703 0.297h-6v-6h-4v6h-6q-0.406 0-0.703-0.297t-0.297-0.703v-7.5q0-0.016 0.008-0.047t0.008-0.047l8.984-7.406 8.984 7.406q0.016 0.031 0.016 0.094zM25.484 14.422l-0.969 1.156q-0.125 0.141-0.328 0.172h-0.047q-0.203 0-0.328-0.109l-10.813-9.016-10.813 9.016q-0.187 0.125-0.375 0.109-0.203-0.031-0.328-0.172l-0.969-1.156q-0.125-0.156-0.109-0.367t0.172-0.336l11.234-9.359q0.5-0.406 1.188-0.406t1.188 0.406l3.813 3.187v-3.047q0-0.219 0.141-0.359t0.359-0.141h3q0.219 0 0.359 0.141t0.141 0.359v6.375l3.422 2.844q0.156 0.125 0.172 0.336t-0.109 0.367z"></path>
      </svg></span>
      <span class="nav__home__right" @click="$emit('move-left')">›</span>
    </div>
    <div class="scaler" v-show="scalable">
      <span class="scaler__up" @click="scaleTo(scale + 2)">+</span>
      <div class="scaler__slider">
        <div class="scaler__slider__bar"></div>
        <div v-if="showSlider" v-el:sliderThumb class="scaler__slider__thumb" :style="{ bottom: (scale - 1) * 8 + 'px' }"></div>
      </div>
      <span class="scaler__down" @click="scaleTo(scale - 2)">-</span>
    </div>
  </div>
</template>
<style>
  .nav {
    position: absolute;
    top: 50px;
    left: 20px;
    z-index: 10;
    -webkit-user-select: none;
  }
  .nav__home {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #ccc;
    position: relative;
    margin-bottom: 15px;
    box-shadow: 2px 2px rgba(0,0,0,.25);
    font-family: arial,sans-serif;
    font-size: 20px;
    color: #555;
    display: table;
  }
  .nav__home span {
    display: table-cell;
    width: 33.333333%;
    height: 100%;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
  }
  .nav__home__icon {
    font-size: 12px;
    line-height: 1;
  }
  .nav__home__icon svg {
    width: 90%;
  }
  .scaler__up,
  .scaler__down {
    color: #555;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: 2px 2px rgba(0,0,0,.25);
    text-align: center;
    line-height: 16px;
    font-size: 16px;
    width: 20px;
    height: 16px;
    margin: 0 auto;
    background: #fff;
    font-size: 120%;
    display: block;
    cursor: pointer;
    position: relative;
    -webkit-user-select: none;
  }
  .scaler__slider {
    width: 23px;
    margin: 0 auto -1px;
    position: relative;
  }
  .scaler__slider__bar {
    background: #fff;
    margin: 0 auto;
    width: 5px;
    height: 122px;
    border: 1px solid #ccc;
    box-shadow: 1px 1px rgba(0,0,0,.25);
    position: relative;
  }
  .scaler__slider__thumb {
    background: #fff;
    height: 12px;
    left: 1px;
    border: 1px solid #ccc;
    border-width: 1px;
    border-radius: 2px;
    cursor: pointer;
    position: absolute;
    width: 100%;
    box-sizing: border-box;
    left: 0;
    z-index: 2;
  }
</style>
<script>
  export default {
    props: {
      scale: {
        type: Number,
        require: true
      },
      scalable: {
        type: Boolean,
        default: true
      },
      showSlider: Boolean
    },
    methods: {
      scaleTo(value) {
        value = value > 15 ? 15 : value;
        value = value < 1 ? 1 : value;

        this.scale = value;
      }
    },
    ready() {
    }
  };
</script>
