kaicarver · February 15, 2020 12:11
diff --git a/menux.html b/menux.html
 <html>
 <head>
    <title>Menu Experiment en un fichier</title>
    <style>
        hr {
            margin-block-start: 0px;
            margin-block-end: 0px;
        }

        .menu_container {
            position: relative;
        }

        #the-menu {
            display: none;
        }

        .menu {
            position: absolute;
            display: none;
            border: 1px solid black;
            background-color: antiquewhite;
        }

        .menu_entry {
            padding: 0, 1em
        }

        .menu_entry:hover {
            background-color: rgb(204, 186, 164);
        }

        .widget {
            display: flex;
            flex-direction: column;
            border: solid 1px black
        }

        .component {
            min-height: 1em;
        }

        #the-menu {
            visibility: visible;
        }

        checked {
            visibility: visible
        }

        checked[invisible] {
            visibility: invisible
        }

        .icon {
            position: relative;
            overflow: hidden;
            vertical-align: middle;
            -o-object-fit: contain;
            object-fit: contain;
            -webkit-transform-origin: center center;
            transform-origin: center center;
            stroke: currentColor;
            stroke-width: 4;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
    </style>
 </head>

 <body>
    <h1>Widget with collapsable components experiment</h1>

    <div style="display: none">
        <svg>
            <!-- wrapper div allows use of innerHTML -->
            <symbol id='menu' class='icon' viewBox='0 0 24 24'>
                <line x1='3' y1='12' x2='21' y2='12' />
                <line x1='3' y1='6' x2='21' y2='6' />
                <line x1='3' y1='18' x2='21' y2='18' />
            </symbol>
            <symbol id='check' class='icon' viewBox='0 0 24 24'>
                <polyline points='20 6 9 17 4 12' />
            </symbol>

        </svg>
    </div>


    <svg id='menu-button' class="icon" width=1em height=1em>
        <use xlink:href='#menu' />
    </svg>



    <div id='the-menu' class="menu_container">
        <div class="menu">
            <div>toggle component visibility</div>
            <hr />
            <div class="menu_entry" visible='1' pos="0">
                <svg id='menu-button' class="icon" width=1em height=1em>
                    <use xlink:href='#menu' />
                </svg>
                menu entry 1
            </div>
            <div class="menu_entry" visible='1' pos="2">menu entry 2</div>
            <div class="menu_entry" visible='1' pos="3">menu entry 3</div>
        </div>
    </div>

    <div class="widget">
        <div class="component">component 0</div>
        <div class="component">component 1</div>
        <div class="component">component 2</div>
    </div>
 </body>
 <script>
    function getParent(elt, sel) {
        let dad
        let putativeParents = document.querySelectorAll(sel)
        dad = elt
        while (1) {
            dad = dad.parentNode
            for (e of putativeParents) {
                if (e == dad) { return dad }
            }
            if (dad.tagName == 'HTML') { break }
        }
        alert('fail')
    }


    function menu_display(s) {
        let elt = document.querySelector('#the-menu')
        console.log(elt)
        if (s == undefined) {
            elt.style.display = elt.style.display == 'none' ? 'block' : 'none'
        } else {
            elt.style.display = s
        }
    }

    function menu_entry_clicked(e) {
        console.log(e.target)
        console.log(e.relatedTarget)
        menu_display('none')
        e.stopImmediatePropagation()
    }

    function toggle_menu() { menu_display() }
    function remove_menu() { menu_display('none') }


    function listen(where, what, listener, opts) {
        document.querySelectorAll(where).forEach(_ => _.addEventListener(what, listener, opts))
    }

    listen('#menu-button', `click`, toggle_menu)
    listen('.menu_entry', 'click', menu_entry_clicked)
    listen('body', 'click', remove_menu)
 </script>

 </html>
	<html>
	<head>
	<title>Menu Experiment en un fichier</title>
	<style>
	hr {
	margin-block-start: 0px;
	margin-block-end: 0px;
	}

	.menu_container {
	position: relative;
	}

	#the-menu {
	display: none;
	}

	.menu {
	position: absolute;
	display: none;
	border: 1px solid black;
	background-color: antiquewhite;
	}

	.menu_entry {
	padding: 0, 1em
	}

	.menu_entry:hover {
	background-color: rgb(204, 186, 164);
	}

	.widget {
	display: flex;
	flex-direction: column;
	border: solid 1px black
	}

	.component {
	min-height: 1em;
	}

	#the-menu {
	visibility: visible;
	}

	checked {
	visibility: visible
	}

	checked[invisible] {
	visibility: invisible
	}

	.icon {
	position: relative;
	overflow: hidden;
	vertical-align: middle;
	-o-object-fit: contain;
	object-fit: contain;
	-webkit-transform-origin: center center;
	transform-origin: center center;
	stroke: currentColor;
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
	}
	</style>
	</head>

	<body>
	<h1>Widget with collapsable components experiment</h1>

	<div style="display: none">
	<svg>
	<!-- wrapper div allows use of innerHTML -->
	<symbol id='menu' class='icon' viewBox='0 0 24 24'>
	<line x1='3' y1='12' x2='21' y2='12' />
	<line x1='3' y1='6' x2='21' y2='6' />
	<line x1='3' y1='18' x2='21' y2='18' />
	</symbol>
	<symbol id='check' class='icon' viewBox='0 0 24 24'>
	<polyline points='20 6 9 17 4 12' />
	</symbol>

	</svg>
	</div>


	<svg id='menu-button' class="icon" width=1em height=1em>
	<use xlink:href='#menu' />
	</svg>



	<div id='the-menu' class="menu_container">
	<div class="menu">
	<div>toggle component visibility</div>
	<hr />
	<div class="menu_entry" visible='1' pos="0">
	<svg id='menu-button' class="icon" width=1em height=1em>
	<use xlink:href='#menu' />
	</svg>
	menu entry 1
	</div>
	<div class="menu_entry" visible='1' pos="2">menu entry 2</div>
	<div class="menu_entry" visible='1' pos="3">menu entry 3</div>
	</div>
	</div>

	<div class="widget">
	<div class="component">component 0</div>
	<div class="component">component 1</div>
	<div class="component">component 2</div>
	</div>
	</body>
	<script>
	function getParent(elt, sel) {
	let dad
	let putativeParents = document.querySelectorAll(sel)
	dad = elt
	while (1) {
	dad = dad.parentNode
	for (e of putativeParents) {
	if (e == dad) { return dad }
	}
	if (dad.tagName == 'HTML') { break }
	}
	alert('fail')
	}


	function menu_display(s) {
	let elt = document.querySelector('#the-menu')
	console.log(elt)
	if (s == undefined) {
	elt.style.display = elt.style.display == 'none' ? 'block' : 'none'
	} else {
	elt.style.display = s
	}
	}

	function menu_entry_clicked(e) {
	console.log(e.target)
	console.log(e.relatedTarget)
	menu_display('none')
	e.stopImmediatePropagation()
	}

	function toggle_menu() { menu_display() }
	function remove_menu() { menu_display('none') }


	function listen(where, what, listener, opts) {
	document.querySelectorAll(where).forEach(_ => _.addEventListener(what, listener, opts))
	}

	listen('#menu-button', `click`, toggle_menu)
	listen('.menu_entry', 'click', menu_entry_clicked)
	listen('body', 'click', remove_menu)
	</script>

	</html>