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

Add bar-transparency on slider drag

Browse source
This commit is contained in:
fillotassi 2018-09-17 20:34:36 +02:00
parent d6264266ae
commit 56a671b001
2 changed files with 13 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
components/sequencer.vue
View file

@ -2,7 +2,7 @@
<section class="sequencer" v-on:mouseover="displayControls()" v-on:mouseleave="hideControls()" > <section class="sequencer" v-on:mouseover="displayControls()" v-on:mouseleave="hideControls()" >
<!--<span class="sequence-controls-wrapper">--> <!--<span class="sequence-controls-wrapper">-->
<div class="options-wrapper"> <div class="options-wrapper">
<div class="control-bar"> <span class="control-bar" :class="[{'transparentBar': barIsTransparent}]">
<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,12 +10,12 @@
<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)" ></range-slider> <range-slider class="slider" min="1" step="1" v-model="slotSlider" v-on:input="assignEuclidean(slotSlider, pulseSlider), setTransparency()" ></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)" ></range-slider> <range-slider class="slider" min="1" :max="slotSlider" step="1" v-model="pulseSlider" v-on:input ="assignEuclidean(slotSlider, pulseSlider), setTransparency()" ></range-slider>
<input id="pulseSlider" value="3" /> <input id="pulseSlider" value="3" />
</div> </div>
</div> </span>
</div> </div>
<div class="sequencerLine"> <div class="sequencerLine">
<div class="slot" v-for="(slot, slotid) in euclideanList" :key="slotid"> <div class="slot" v-for="(slot, slotid) in euclideanList" :key="slotid">
@ -61,11 +61,10 @@
}, },
hideControls: function (){ hideControls: function (){
this.controlIsDisplayed = false; this.controlIsDisplayed = false;
} },
/*, setTransparency: function (){
barOpacity: function (){ this.barIsTransparent = true;
this.setOpacity = true; },
}*/,
bjorklund: function (slots, pulses) { bjorklund: function (slots, pulses) {
var pattern = [], var pattern = [],
@ -206,6 +205,10 @@
overflow-x: auto; overflow-x: auto;
} }
.transparentBar{
opacity:0.5;
}
.sequence-bar{ .sequence-bar{
display:none; display:none;
} }

2
pages/index.vue
View file

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