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

3
pages/index.vue
View file

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