Gadgety_Euclidean_Sequencer_Web_Interface/components/beatInfiniteLoop.vue

<template>
  <div class="beat-wrapper">
      <input v-model="divisioni" type="number" min="1" oninput="validity.valid||(value='');">
      <!--- trovare modo per prevenire scrittura di input-->
      <div class="division-wrapper">
        <div class="beat" v-for="j in nDivisioni" :key='j' >
          <!--<div>{{randomColori()}}</div>-->
          <div class="suddivisione" :style="{'background-color': colore }" style="max-width:1em" :id="nome">{{titolo(j)}}</div>
        </div>
    </div>
  </div>
</template>
<script>
    export default {
      name: 'beat',
      data() {
        return {
          nome:'',
          colore: 'red',
          divisioni: 1,
          timing: 0
        }
      },
      computed: {
        nDivisioni() {
          var n = parseInt(this.divisioni);
          return isNaN(n) ? 0 : n;
        }
      },
      methods: {
        randomColori: function (){
            var letters = '0123456789ABCDEF';
            var color = '#';
            for (var i = 0; i < 6; i++) {
              color += letters[Math.floor(Math.random() * 16)];
            }
            // console.log(color);
            this.colore = color;
        },
        getTime: function(){
          // https://stackoverflow.com/questions/288699/get-the-position-of-a-div-span-tag#288731
          var el = document.getElementById(this.nome);
          for (var lx=0, ly=0;
               el != null;
               lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
          console.log("x :"+ lx+", y :"+ly);
        },
        titolo(progressivo){
          this.nome = "nomeBeat" + progressivo;
        }
    }
    }
</script>

<style>
  .beat{
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
}

.active{
  background-color:black;
}

input {
  background:transparent;
  width:2em;
}

.division-wrapper {
  flex:1 1 auto;
  display: flex;
}

.beat {
  height:1em;
  display:flex;
  flex:1 1 auto;
}

.suddivisione{
  flex:1 1 auto;
  border:none;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
    padding-left:0.2em;
    color:lightgray;
    border:none;
}
</style>