togglebutton for tooltips to save iphone users

This commit is contained in:
ed 2021-03-21 02:33:53 +01:00
parent afbfa04514
commit 5e760e35dc
4 changed files with 28 additions and 5 deletions

View file

@ -493,6 +493,7 @@ input[type="checkbox"]:checked+label {
left: -1.7em;
width: calc(100% + 1.3em);
}
.tglbtn,
#tree>a+a {
padding: .2em .4em;
font-size: 1.2em;
@ -503,9 +504,11 @@ input[type="checkbox"]:checked+label {
position: relative;
top: -.2em;
}
.tglbtn:hover,
#tree>a+a:hover {
background: #805;
}
.tglbtn.on,
#tree>a+a.on {
background: #fc4;
color: #400;
@ -612,7 +615,7 @@ input[type="checkbox"]:checked+label {
max-width: none;
margin-right: 1.5em;
}
#key_notation>span {
#op_cfg>div>span {
display: inline-block;
padding: .2em .4em;
}
@ -635,6 +638,9 @@ input[type="checkbox"]:checked+label {
top: 6em;
right: 1.5em;
}
#ops:hover #opdesc.off {
display: none;
}
#opdesc code {
background: #3c3c3c;
padding: .2em .3em;

View file

@ -41,6 +41,10 @@
<div id="op_cfg" class="opview opbox">
<h3>key notation</h3>
<div id="key_notation"></div>
<h3>tooltips</h3>
<div>
<a id="tooltips" class="tglbtn" href="#">enable</a>
</div>
</div>
<h1 id="path">
@ -54,7 +58,7 @@
<a href="#" id="detree">🍞...</a>
<a href="#" step="2" id="twobytwo">+</a>
<a href="#" step="-2" id="twig">&ndash;</a>
<a href="#" id="dyntree">a</a>
<a href="#" class="tglbtn" id="dyntree">a</a>
<ul id="treeul"></ul>
<div id="thx_ff">&nbsp;</div>
</div>

View file

@ -1469,14 +1469,25 @@ function addcrc() {
(function () {
var tt = bcfg_get('tooltips', true);
function set_tooltip(e) {
ev(e);
ebi('opdesc').innerHTML = this.getAttribute('data-desc');
var o = ebi('opdesc');
o.innerHTML = this.getAttribute('data-desc');
o.setAttribute('class', tt ? '' : 'off');
}
var btns = document.querySelectorAll('#ops, #ops>a');
for (var a = 0; a < btns.length; a++) {
btns[a].onmouseenter = set_tooltip;
}
ebi('tooltips').onclick = function (e) {
ev(e);
tt = !tt;
bcfg_set('tooltips', tt);
};
})();

View file

@ -403,8 +403,10 @@ function bcfg_upd_ui(name, val) {
if (o.getAttribute('type') == 'checkbox')
o.checked = val;
else if (o)
o.setAttribute('class', val ? 'on' : '');
else if (o) {
var fun = val ? 'add' : 'remove';
o.classList[fun]('on');
}
}