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

View file

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

View file

@ -1469,14 +1469,25 @@ function addcrc() {
(function () { (function () {
var tt = bcfg_get('tooltips', true);
function set_tooltip(e) { function set_tooltip(e) {
ev(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'); var btns = document.querySelectorAll('#ops, #ops>a');
for (var a = 0; a < btns.length; a++) { for (var a = 0; a < btns.length; a++) {
btns[a].onmouseenter = set_tooltip; 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') if (o.getAttribute('type') == 'checkbox')
o.checked = val; o.checked = val;
else if (o) else if (o) {
o.setAttribute('class', val ? 'on' : ''); var fun = val ? 'add' : 'remove';
o.classList[fun]('on');
}
} }