Select Git revision
monster.mjs
191.html 5.41 KiB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>optimize tree-menu #191</title>
<script src="./191.mjs" type="module"></script>
</head>
<body>
<h1>optimize tree-menu #191</h1>
<p></p>
<ul>
<li class="monster-theme-primary-1"><a
href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/191">Issue #191</a></li>
<li><a href="/">Back to overview</a></li>
</ul>
<main>
<monster-datasource-rest id="menu-rest"
data-monster-option-read-path="dataset"
data-monster-option-features-autoinit="true"
data-monster-option-read-url="/issue-191.json"
>
</monster-datasource-rest>
<monster-datasource-dom id="menu-dom">
<script type="application/json">
{
"1": {
"id": "1",
"title": "Test 1",
"address": "Here 1",
"parent": "2"
},
"2": {
"id": "2",
"title": "Test 2",
"address": "Here 2",
"parent": "0"
},
"3": {
"id": "3",
"title": "Test 3",
"address": "Here 3",
"parent": "2"
},
"4": {
"id": "4",
"title": "Test 4",
"address": "Here 4",
"parent": "0"
},
"5": {
"id": "5",
"title": "Test 5",
"address": "Here 5",
"parent": "0"
},
"6": {
"id": "6",
"title": "Test 6",
"address": "Here 6",
"parent": "4"
},
"7": {
"id": "7",
"title": "Test 7",
"address": "Here 7",
"parent": "1"
} }
</script>
</monster-datasource-dom>
<monster-panel>
<monster-split-panel>
<monster-panel id="inner2" data-monster-option-heightadjustment="5"
slot="start">
<monster-tree-menu
data-monster-option-mapping-idtemplate="id"
data-monster-option-mapping-parentkey="parent_id"
data-monster-option-mapping-labeltemplate="${title}"
data-monster-option-mapping-valuetemplate="${path:url | tostring}"
data-monster-option-mapping-icontemplate="${path:icon | default:default}"
data-monster-option-datasource-selector="#menu-rest"
value=""
>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="box" viewBox="0 0 16 16">
<path d="M6 9a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3A.5.5 0 0 1 6 9M3.854 4.146a.5.5 0 1 0-.708.708L4.793 6.5 3.146 8.146a.5.5 0 1 0 .708.708l2-2a.5.5 0 0 0 0-.708z"/>
<path d="M2 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm12 1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z"/>
</symbol>
<symbol id="default" viewBox="0 0 16 16">
<path d="M11 2a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3zM5 1a4 4 0 0 0-4 4v6a4 4 0 0 0 4 4h6a4 4 0 0 0 4-4V5a4 4 0 0 0-4-4z"/>
</symbol>
<symbol id="balloon" viewBox="0 0 16 16">
<path d="M8 9.984C10.403 9.506 12 7.48 12 5a4 4 0 0 0-8 0c0 2.48 1.597 4.506 4 4.984M13 5c0 2.837-1.789 5.227-4.52 5.901l.244.487a.25.25 0 1 1-.448.224l-.008-.017c.008.11.02.202.037.29.054.27.161.488.419 1.003.288.578.235 1.15.076 1.629-.157.469-.422.867-.588 1.115l-.004.007a.25.25 0 1 1-.416-.278c.168-.252.4-.6.533-1.003.133-.396.163-.824-.049-1.246l-.013-.028c-.24-.48-.38-.758-.448-1.102a3 3 0 0 1-.052-.45l-.04.08a.25.25 0 1 1-.447-.224l.244-.487C4.789 10.227 3 7.837 3 5a5 5 0 0 1 10 0m-6.938-.495a2 2 0 0 1 1.443-1.443C7.773 2.994 8 2.776 8 2.5s-.226-.504-.498-.459a3 3 0 0 0-2.46 2.461c-.046.272.182.498.458.498s.494-.227.562-.495"/>
</symbol>
<symbol id="cart" viewBox="0 0 16 16">
<path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z"/>
</symbol>
<symbol id="box2" viewBox="0 0 16 16">
<path d="M8 7.982C9.664 6.309 13.825 9.236 8 13 2.175 9.236 6.336 6.31 8 7.982"/>
<path d="M3.75 0a1 1 0 0 0-.8.4L.1 4.2a.5.5 0 0 0-.1.3V15a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V4.5a.5.5 0 0 0-.1-.3L13.05.4a1 1 0 0 0-.8-.4zm0 1H7.5v3h-6zM8.5 4V1h3.75l2.25 3zM15 5v10H1V5z"/>
</symbol>
</svg>
</monster-tree-menu>
</monster-panel>
</monster-split-panel>
</monster-panel>
</main>
</body>
</html>