123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101 |
- <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>
|