Tooltips for effect sliders.

This commit is contained in:
Blaz Kristan 2022-06-26 22:47:16 +02:00
parent dbe90eb3f5
commit 94a79b57e9
4 changed files with 1853 additions and 1790 deletions

View File

@ -376,18 +376,76 @@ button {
#sliders { #sliders {
width: 310px; width: 310px;
margin: 0 auto; margin: 0 auto;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
} }
#sliders .labels { #sliders .labels {
padding-top: 3px; padding-top: 3px;
font-size: small;
} }
#slider0, #slider1, #slider2, #slider3, #slider4 { .slider {
background: var(--c-2); background: var(--c-2);
max-width: 310px; max-width: 310px;
min-width: 280px; min-width: 280px;
margin: 0 auto 5px; margin: 0 auto 5px;
border-radius: 15px; border-radius: 15px;
position: relative;
}
/* Tooltip text */
.slider .tooltiptext {
visibility: hidden;
background-color: var(--c-5);
color: var(--c-f);
text-align: center;
padding: 5px 10px;
border-radius: 6px;
/* Position the tooltip text */
width: 160px;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -92px;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
.slider.top .tooltiptext {
top: 100%;
bottom: unset;
}
/* Tooltip arrow */
.slider .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: var(--c-5) transparent transparent transparent;
}
.slider.top .tooltiptext::after {
bottom: 100%;
left: 50%;
top: unset;
border-color: transparent transparent var(--c-5) transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.slider:hover .tooltiptext {
visibility: visible;
opacity: 1;
} }
#pql, .edit-icon { #pql, .edit-icon {

View File

@ -217,50 +217,50 @@
</div> </div>
</div> </div>
<div id="sliders"> <div id="sliders">
<p class="labels hd" id="sliderLabel0">Effect speed</p> <div id="slider0" class="slider">
<div id="slider0">
<i class="icons slider-icon" style="cursor: pointer;" onclick="tglFreeze()">&#xe325;</i> <i class="icons slider-icon" style="cursor: pointer;" onclick="tglFreeze()">&#xe325;</i>
<div class="sliderwrap il"> <div class="sliderwrap il">
<input id="sliderSpeed" class="noslide" onchange="setSpeed()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" /> <input id="sliderSpeed" class="noslide" onchange="setSpeed()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div> </div>
<output class="sliderbubble"></output> <output class="sliderbubble"></output>
<span id="sliderLabel0" class="tooltiptext">Effect speed</span>
</div> </div>
<p class="labels hd" id="sliderLabel1">Effect intensity</p> <div id="slider1" class="slider">
<div id="slider1">
<i class="icons slider-icon" style="cursor: pointer;" onclick="tglLabels()">&#xe409;</i> <i class="icons slider-icon" style="cursor: pointer;" onclick="tglLabels()">&#xe409;</i>
<div class="sliderwrap il"> <div class="sliderwrap il">
<input id="sliderIntensity" class="noslide" onchange="setIntensity()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" /> <input id="sliderIntensity" class="noslide" onchange="setIntensity()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div> </div>
<output class="sliderbubble"></output> <output class="sliderbubble"></output>
<span class="tooltiptext" id="sliderLabel1">Effect intensity</span>
</div> </div>
<p class="labels hd" id="sliderLabel2">Custom 1</p> <div id="slider2" class="slider hide">
<div id="slider2" class="hide">
<i class="icons slider-icon">&#xe410;</i> <i class="icons slider-icon">&#xe410;</i>
<div class="sliderwrap il"> <div class="sliderwrap il">
<input id="sliderC1" class="noslide" onchange="setCustom(1)" oninput="updateTrail(this)" max="255" min="0" type="range" value="6" /> <input id="sliderC1" class="noslide" onchange="setCustom(1)" oninput="updateTrail(this)" max="255" min="0" type="range" value="6" />
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div> </div>
<output class="sliderbubble"></output> <output class="sliderbubble"></output>
<span class="tooltiptext" id="sliderLabel2">Custom 1</span>
</div> </div>
<p class="labels hd" id="sliderLabel3">Custom 2</p> <div id="slider3" class="slider hide">
<div id="slider3" class="hide">
<i class="icons slider-icon">&#xe0a2;</i> <i class="icons slider-icon">&#xe0a2;</i>
<div class="sliderwrap il"> <div class="sliderwrap il">
<input id="sliderC2" class="noslide" onchange="setCustom(2)" oninput="updateTrail(this)" max="255" min="0" type="range" value="6" /> <input id="sliderC2" class="noslide" onchange="setCustom(2)" oninput="updateTrail(this)" max="255" min="0" type="range" value="6" />
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div> </div>
<output class="sliderbubble"></output> <output class="sliderbubble"></output>
<span class="tooltiptext" id="sliderLabel3">Custom 2</span>
</div> </div>
<p class="labels hd" id="sliderLabel4">Custom 3</p> <div id="slider4" class="slider hide">
<div id="slider4" class="hide">
<i class="icons slider-icon">&#xe0e8;</i> <i class="icons slider-icon">&#xe0e8;</i>
<div class="sliderwrap il"> <div class="sliderwrap il">
<input id="sliderC3" class="noslide" onchange="setCustom(3)" oninput="updateTrail(this)" max="255" min="0" type="range" value="6" /> <input id="sliderC3" class="noslide" onchange="setCustom(3)" oninput="updateTrail(this)" max="255" min="0" type="range" value="6" />
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div> </div>
<output class="sliderbubble"></output> <output class="sliderbubble"></output>
<span class="tooltiptext" id="sliderLabel4">Custom 3</span>
</div> </div>
</div> </div>
</div> </div>

View File

@ -1279,7 +1279,6 @@ function readState(s,command=false)
function setSliderAndColorControl(idx, applyDef=false) function setSliderAndColorControl(idx, applyDef=false)
{ {
if (!(Array.isArray(fxdata) && fxdata.length>idx)) return; if (!(Array.isArray(fxdata) && fxdata.length>idx)) return;
var topPosition = 0;
var controlDefined = (fxdata[idx].substr(0,1) == "@"); var controlDefined = (fxdata[idx].substr(0,1) == "@");
var extra = fxdata[idx].substr(1); var extra = fxdata[idx].substr(1);
var extras = (extra == '')?[]:extra.split(";"); var extras = (extra == '')?[]:extra.split(";");
@ -1289,7 +1288,8 @@ function setSliderAndColorControl(idx, applyDef=false)
var obj = {"seg":{}}; var obj = {"seg":{}};
// set html slider items on/off // set html slider items on/off
var nSliders = Math.min(5,Math.floor(gId("sliders").children.length / 2)); // p (label) & div for each slider var nSliders = Math.min(5,Math.floor(gId("sliders").children.length)); // div for each slider
var sldCnt = 0;
for (let i=0; i<nSliders; i++) { for (let i=0; i<nSliders; i++) {
var slider = gId("slider" + i); var slider = gId("slider" + i);
var label = gId("sliderLabel" + i); var label = gId("sliderLabel" + i);
@ -1308,21 +1308,17 @@ function setSliderAndColorControl(idx, applyDef=false)
else if (i==0) label.innerHTML = "Effect speed"; else if (i==0) label.innerHTML = "Effect speed";
else if (i==1) label.innerHTML = "Effect intensity"; else if (i==1) label.innerHTML = "Effect intensity";
else label.innerHTML = "Custom" + (i-1); else label.innerHTML = "Custom" + (i-1);
label.classList.remove("hide"); if (sldCnt++===0) slider.classList.add("top");
slider.classList.remove("hide"); slider.classList.remove("hide");
if (getComputedStyle(label).display === "block") topPosition += 58; // increase top position for the next control //slider.setAttribute('title',label.innerHTML);
else topPosition += 35;
slider.setAttribute('title',label.innerHTML);
} else { } else {
// disable label and slider
slider.classList.add("hide"); slider.classList.add("hide");
label.classList.add("hide"); slider.classList.remove("top");
} }
} }
if (topPosition>0) { topPosition += 5; gId("sliders").style.paddingTop = "5px"; }
else gId("sliders").style.padding = 0;
// set size of fx list // set size of fx list
let topPosition = 5 + parseInt(getComputedStyle(gId("sliders")).height);
gId("fx").style.height = `calc(100% - ${topPosition}px)`; gId("fx").style.height = `calc(100% - ${topPosition}px)`;
// set html color items on/off // set html color items on/off

File diff suppressed because it is too large Load Diff