Skip to content
This repository has been archived by the owner on Mar 13, 2018. It is now read-only.

custom element with menu and submenu #93

Open
maxwowpow opened this issue Feb 29, 2016 · 3 comments
Open

custom element with menu and submenu #93

maxwowpow opened this issue Feb 29, 2016 · 3 comments

Comments

@maxwowpow
Copy link

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"
  }

2016-02-29 14_08_41-developer tools - http___localhost_8083_components_paper-treeview2_paper-treeite
@woutertenbosch
Copy link

I'm facing the same problem 😒, did you find a solution yet?

@mitjarobic
Copy link

same problem

@boozelclark
Copy link

I have the same problem. A work around may be something similar to what is done in https://github.com/NickBolles/nb-menu but its in version 0.5 so will need some migration.

@boozelclark boozelclark mentioned this issue Nov 21, 2016
Closed
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@maxwowpow @boozelclark @mitjarobic @woutertenbosch