This repository was archived by the owner on Mar 13, 2018. It is now read-only.
This repository was archived by the owner on Mar 13, 2018. It is now read-only.
custom element with menu and submenu #93
Description
This must be a useful and widely applied design to stack menus dynamically and from a custom element. I spent hours debugging this and come so far as some events (iron-select) are not being propagated [correctly].
In short
<paper-menu>
<mycustommenu data="menuJsonDefinition"></mycustommenu>
<paper-menu>
where mycustommenu renders paper-item or paper-submenu recursively,
so in the end it looks like
<PAPER-MENU>
<mycustommenu>
<PAPER-SUBMENU>
<PAPER-ITEM class="menu-trigger">submenutrigger</PAPER-ITEM>
<PAPER-MENU class="menu-content">
<PAPER-ITEM>xx</PAPER-ITEM>
</PAPER-MENU>
</PAPER-SUBMENU>
</mycustommenu>
</PAPER-MENU>
It WORKS so far. But as soon as we add recursion and replace inner
<PAPER-ITEM>xx</PAPER-ITEM>
with mycustommenu, which renders to
<mycustommenu><PAPER-ITEM>xx</PAPER-ITEM></mycustommenu>
it doesn't click/select anymore
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-styles/paper-styles.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
<link rel="import" href="bower_components/paper-menu/paper-submenu.html">
<link rel="import" href="bower_components/paper-menu/paper-menu.html">
</head>
<body>
<dom-module id="paper-treeitem">
<template>
<template is="dom-if" if="{{data.folder}}">
<paper-submenu>
<paper-item class="menu-trigger">{{data.name}}</paper-item>
<paper-menu class="menu-content" multi>
<template is="dom-repeat" items="{{data.children}}">
<!-- WORKING -->
<!-- COMMENT THIS LINE -->
<paper-item>{{item.name}}</paper-item>
<!-- NOT WORKING -->
<!-- UNCOMMENT THIS LINE -->
<!-- <paper-treeitem data="{{item}}"></paper-treeitem> -->
</template>
</paper-menu>
</paper-submenu>
</template>
<template is="dom-if" if="{{!data.folder}}">
<paper-item>{{data.name}}</paper-item>
</template>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'paper-treeitem',
properties: {
data: {
type: Object,
value: function() {
return {};
}
}
},
ready: function(){
console.log(this, this.data)
}
});
});
</script>
</dom-module>
<paper-menu>
<paper-treeitem id="tRootTreeItem"></paper-treeitem>
</paper-menu>
<script>
(function() {
window.z = document.querySelector("#tRootTreeItem");
z.data = {
name: "Root",
folder: true,
children: [{
name: "File 1"
}]
};
})()
</script>
</body>
</html>
bower dep
"dependencies": {
"paper-menu": "PolymerElements/paper-menu#^1.2.2",
"paper-item": "PolymerElements/paper-item#^1.1.4",
"paper-styles": "PolymerElements/paper-styles#^1.1.4"
}
