<div class="switchers js-switchers">
<div class="switchers__title">Airflow range</div>
<div class="switchers__list">
<label for="radio-1" class="switchers__label">
<input id="radio-1" value="radio-1" type="radio" name="radio" class="switchers__input" checked data-type="radio" data-max-beyond="110" data-step-increments="[10,20,50,100,200,500,1000]" data-steps="[0,70,250,500,2000,5000,15000,50000]">
<span>m/h</span>
</label>
<label for="radio-2" class="switchers__label">
<input id="radio-2" value="radio-2" type="radio" name="radio" class="switchers__input" data-type="radio" data-step-increments="[0.002,0.005,0.015,0.03,0.05,0.1,0.25]" data-steps="[0,0.02,0.07,0.14,0.56,1.39,4.17,13.89]">
<span>m/s</span>
</label>
<label for="radio-3" class="switchers__label">
<input id="radio-3" value="radio-3" type="radio" name="radio" class="switchers__input" data-type="radio" data-max-beyond="140" data-step-increments="[5,10,10,50,50,100,200]" data-steps="[0,20,70,150,550,1400,4100,13900]">
<span>l/s</span>
</label>
</div>
</div>
<div class="switchers js-switchers">
<div class="switchers__title">Airflow range</div>
<div class="switchers__list">
{{#each radios}}
<label for="{{value}}" class="switchers__label">
<input id="{{value}}" value="{{value}}" type="{{type}}" name="{{name}}" class="switchers__input"{{#if disabled}} disabled{{/if}}{{#if checked}} checked{{/if}} {{{ getattributes attr }}}>
<span>{{label}}</span>
</label>
{{/each}}
</div>
</div>
{
"radios": [
{
"name": "radio",
"disabled": false,
"checked": true,
"label": "m/h",
"value": "radio-1",
"type": "radio",
"attr": {
"data-type": "radio",
"data-max-beyond": "110",
"data-step-increments": "[10,20,50,100,200,500,1000]",
"data-steps": "[0,70,250,500,2000,5000,15000,50000]"
}
},
{
"name": "radio",
"disabled": false,
"checked": false,
"label": "m/s",
"value": "radio-2",
"type": "radio",
"attr": {
"data-type": "radio",
"data-step-increments": "[0.002,0.005,0.015,0.03,0.05,0.1,0.25]",
"data-steps": "[0,0.02,0.07,0.14,0.56,1.39,4.17,13.89]"
}
},
{
"name": "radio",
"disabled": false,
"checked": false,
"label": "l/s",
"value": "radio-3",
"type": "radio",
"attr": {
"data-type": "radio",
"data-max-beyond": "140",
"data-step-increments": "[5,10,10,50,50,100,200]",
"data-steps": "[0,20,70,150,550,1400,4100,13900]"
}
}
]
}
class Switchers {
constructor(el) {
this.handleSwitcherChange = this.handleSwitcherChange.bind(this);
this.wrapper = el;
this.rangeElement = el.closest('.js-range-slider');
const switcherInputs = el.querySelectorAll('.switchers__input');
switcherInputs.forEach(input => {
input.addEventListener('click', (event) => this.handleSwitcherChange(event.target));
});
switcherInputs[0] && this.handleSwitcherChange(switcherInputs[0]);
};
handleSwitcherChange(input) {
const steps = input.dataset.steps;
const stepIncrements = input.dataset.stepIncrements;
this.rangeElement.dataset.steps = steps;
this.rangeElement.dataset.stepIncrements = stepIncrements;
this.rangeElement.dispatchEvent(new Event('reset'));
}
}
export default Switchers;
import Switchers from './Switchers';
const els = document.querySelectorAll('.js-switchers');
for (let el of els) {
new Switchers(el);
}
.switchers__list {
text-align: center;
margin: 0 0 20px;
}
.switchers__title {
font-size: 14px;
line-height: 20px;
color: $color-gray-5;
margin: 0 0 12px;
}
.switchers__label {
display: inline-block;
vertical-align: top;
position: relative;
color: #191919;
margin: 0 4px;
line-height: 20px;
> span {
border: 1px solid $color-gray-4;
padding: 8px 2px;
text-align: center;
color: $color-gray-4;
display: inline-block;
vertical-align: top;
min-width: 48px;
&:hover {
cursor: pointer;
background: $color-green-pale;
}
}
}
.switchers__input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
&:focus-visible ~ span {
background: #E9F2E5;
border: 1px solid $color-gray-4;
color: $color-gray-4;
outline: 1px solid #000;
}
&:checked ~ span {
background: #E9F2E5;
border: 1px solid $color-green-dark;
color: $color-green-dark;
}
}
No notes defined.