fillotassi/Gadgety_Euclidean_Sequencer_Web_Interface
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Restore full opacity after slider is released

Browse source
This commit is contained in:
fillotassi 2018-09-17 23:56:12 +02:00
parent 56a671b001
commit 3f61c05803
2 changed files with 23 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
components/sequencer.vue
View file

@ -1,8 +1,8 @@
<template>
<section class="sequencer" v-on:mouseover="displayControls()" v-on:mouseleave="hideControls()" >
<section class="sequencer" >
<!--<span class="sequence-controls-wrapper">-->
<div class="options-wrapper">
<span class="control-bar" :class="[{'transparentBar': barIsTransparent}]">
<span class="control-bar" :style="{ opacity: barOpacity }">
<div class="sequence-options">
<div class="option-icon" id="icon-slots"></div>
<div class="option-icon" id="icon-euclid"></div>
@ -10,9 +10,9 @@
<div class="option-icon" id="icon-delete"></div>
</div>
<div class="sequence-bar">
<range-slider class="slider" min="1" step="1" v-model="slotSlider" v-on:input="assignEuclidean(slotSlider, pulseSlider), setTransparency()" ></range-slider>
<range-slider class="slider" @change="setFullOpacity()" min="1" step="1" v-model="slotSlider" v-on:input="assignEuclidean(slotSlider, pulseSlider)" ></range-slider>
<input id="pulseSlider"/>
<range-slider class="slider" min="1" :max="slotSlider" step="1" v-model="pulseSlider" v-on:input ="assignEuclidean(slotSlider, pulseSlider), setTransparency()" ></range-slider>
<range-slider class="slider" @change="setFullOpacity()" min="1" :max="slotSlider" step="1" v-model="pulseSlider" v-on:input="assignEuclidean(slotSlider, pulseSlider)" ></range-slider>
<input id="pulseSlider" value="3" />
</div>
</span>
@ -51,6 +51,20 @@
this.line.euclideanList = this.bjorklund(this.line.slotSlider, this.line.pulseSlider);
return this.line;
},
watch: {
'slotSlider': function(){
this.barIsTransparent = true;
},
'pulseSlider': function(){
this.barIsTransparent = true;
},
'slotSlider': function(){
this.barOpacity = 0.5;
},
'pulseSlider': function(){
this.barOpacity = 0.5;
}
},
components: {
RangeSlider,
beat
@ -62,8 +76,9 @@
hideControls: function (){
this.controlIsDisplayed = false;
},
setTransparency: function (){
this.barIsTransparent = true;
setFullOpacity: function (){
this.barOpacity = 1;
console.log("fullOPacity");
},
bjorklund: function (slots, pulses) {
@ -205,10 +220,6 @@
overflow-x: auto;
}
.transparentBar{
opacity:0.5;
}
.sequence-bar{
display:none;
}

3
pages/index.vue
View file

@ -45,7 +45,8 @@ export default {
slotSlider: 16,
pulseSlider: 3,
euclideanList: [],
barIsTransparent: false });
barOpacity:1
});
},
getSequencerData: function(){
var modelEsp = {