file browser

js/j07hide.php

<html>
 <head>
  <title> <?php echo basename(__file__, '.php'); ?> </title>
    <style type="text/css">
         #layer {position:absolute; top:12em; left: 12em; width: 340; height:246; border: 1em solid red; padding-left: 2em; 
            background-image: url("pn.jpg"); background-repeat:  no-repeat; background-color: yellow; }
    </style>
    <script type="text/javascript">
        function hide(id, hi) {
            document.getElementById(id).hidden = hi;
            console.log('hide(' + id + ', ' + hi + ')');
            }  
        function showChildren(nd) {
            for (var i=0; i < nd.children.length; i++) {
                if (nd.children[i] == null) {
                } else if (nd.children[i].hidden) {
                    nd.children[i].hidden = false;
                } else {
                    showChildren(nd.children[i]);
                }
                }
            }
        function hideSisters(nd, hi) {
            var t = '', iH, iS;
            if (nd.constructor.name == 'HTMLInputElement') {
                if (hi) {
                    iH = nd;            
                    for (var iS=nd.nextSibling; iS != null && iS.constructor.name == 'Text' ; iS=iS.nextSibling)
                         t = t + ', ' + iS;
                } else {
                    iS = nd;
                    for (iH=nd.previousSibling; iH != null && iH.constructor.name == 'Text' ; iH=iH.previousSibling) 
                        t = t + ', prev' + iH;
                }
                if (iH != null && iH.constructor.name == 'HTMLInputElement') {
                    iH.hidden = hi;
                } else {
                    t = t + ' >>>bad hideInput ' + iH;
                    }
                if (iS != null && iS.constructor.name == 'HTMLInputElement') {
                    iS.hidden = ! hi;
                } else {
                    t = t + ' >>>bad hideInput ' + iS;
                    iS = nd;
                    }
            } else if (nd.constructor.name == 'HTMLImageElement') {
                iS = nd;
            } else {
                console.log('implement hide show for ' + nd.constructor.name);
            }
                
            for (var si=iS.nextSibling; si != null && si.constructor.name == 'Text' ; si=si.nextSibling) {
                t = t + ', ' + si + (' con=' + si.constructor.name);
                }
            t = t + ' >>>hide>>> ';
            for ( ; si != null ; si=si.nextSibling) {
                t = t + ', ' + si.constructor.name;
                si.hidden = hi;
                }
            console.log('hi=' + hi + ' !hi=' + (! hi) + ' sisterchain' + t.substr(1));
            }
        function hiEv(ev, hi) {
            console.log('hiEv(target=' + ev.target + ' src=' + ev.target.src + ' par=' + ev.target.parentNode + ', ' + hi + ')');
            var nd = ev.target;
            if (nd.constructor.name != 'HTMLImageElement') {
                hideSisters(nd, hi);
            } else if (nd.src.endsWith('/plus.jpg')) { 
                    nd.src = nd.src.substr(0, nd.src.length-9) + '/minus.jpg';
                    hideSisters(nd, false);
            } else if (nd.src.endsWith('/minus.jpg')) { 
                    nd.src = nd.src.substr(0, nd.src.length-10) + '/plus.jpg';
                    hideSisters(nd, true);
            } else {
                console.log('implement hide/show for target=' + ev.target + ' src=' + ev.target.src + ' par=' + ev.target.parentNode + ', ' + hi + ')');
            }
            }

        function sizeC(id, ns) {
            for (const c of document.getElementById(id).children) {
                c.style.width = ns;
                /* c style.height = ns; */
                c.style.overflow = 'hidden';
            }
            console.log('sizeC(' + id + ', ' + ns + ')');
            }  
        function scrollEv(ev, top=true) {
            var nd = ev.target;
            console.log('scrollEv(target=' + nd + ' par=' + nd.parentNode + ', ' + top + ')');
            nd.scrollIntoView(top);
        }

</script>
 </head>
<body>
<h1 >hide or show element</h1>
<input type="button" value="hide eins" onclick="hide('l1', true);" />
<input type="button" value="show eins" onclick="hide('l1', false);" />
<input type="button" value="show list" onclick="showChildren(document.getElementById('o1'));" />
<input type="button" value="hide eins" onclick="hide('l1', true);" />
<input type="button" value="size eins 1px" onclick="sizeC('l1', '5px');" />
<input type="button" value="size eins auto" onclick="sizeC('l1', 'auto');" />
<input type="button" value="scroll to #src" onclick="document.getElementById('src').scrollIntoView();" />
<ol id=o1>
<li id=l1 stye="display: block;">eins
<ol><li>elf</li><li>zwoelf</li><li>13</li></ol></li>
<li><input type="button" value="hide" onclick="hiEv(event, true);" />
    <input type="button" value="show" onclick="hiEv(event, false);" />
    zwei <div>
    <ol><li><input type="button" value="hide" onclick="hiEv(event, true);" />
    <input type="button" value="show" onclick="hiEv(event, false);" /> einUndZwanzig<ol><li>211</li><li>212</li></ol></ol>mid21
    <ol><li><img src="minus.jpg" onclick="hiEv(event);" /> einUndZwanzigAfter<ol><li>21A</li><li>21B</li>
        <li><img src="minus.jpg" onclick="hiEv(event);" /> einUndZwanzigCCCC<ol><li>21C1</li><li>21C2</li></ol></ol></ol>
end21</div></li>
<li value=345>
<img src="minus.jpg" onclick="hiEv(event);" /> zweiUndZwanzig</li>
<li>dreiUndZwanzig</li></ol>
zweiEnd
</li>
<li>drei</li>
<li>vier</li>
<li>fuenf <input type="button" value="scroll this to top" onclick="scrollEv(event);" /></li>
</ol>
<h1 id="src">Source <?php echo __file__; ?> </h1>
<?php highlight_file(__file__) ?>
 </body>
</html>