designer

designer.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../core-menu/core-menu.html">
<link rel="import" href="../core-menu/core-submenu.html">
<link rel="import" href="../core-selector/core-selector.html">
<link rel="import" href="../core-item/core-item.html">
<link rel="import" href="../core-icons/core-icons.html">
<script>
  PolymerExpressions.prototype.json = function(object) {
    return JSON.stringify(object);
  }
</script>
 
<polymer-element name="recursive-menu" extends="core-menu" attributes="items" selected="{{selected}}" selectedItem="{{item}}" on-core-select="{{onSelect}}">
    <template>
      <shadow></shadow>
        <template repeat="{{items}}" id="test">
            <template if="{{children}}">          
              <template if="{{children.length > 0}}">
                <core-submenu label="{{ label }} submenu" icon="{{icon}}" >
                  <template ref="test" repeat="{{children}}"></template>
                </core-submenu>

              </template>
            </template>
            <template if="{{!children}}">
              <core-item label="{{ label }} item" icon="{{icon}}"  >
              </core-item>
            </template>
        </template>  
    </template>
	<script>
    //{{ function(){ if (item.children.length > 0){console.log("RETURNING TRUE!!!"); return true;}else{console.log("RETRURNING FALSE"); return false;} } }}
    Polymer('recursive-menu',{
      onSelect:function(){
        debugger;
        		console.log(JSON.stringify(arguments[0]) + "        " + JSON.stringify(arguments[1]) + "     " + JSON.stringify(arguments[2]) );
        },
      created: function() {    
        this.valueattr = "label" //For some reason the following code in core-selector.html was causing an "undefined is not a function"
                                    //valueForNode: function(node) {
                                    //return node[this.valueattr] || node.getAttribute(this.valueattr);
        												//Setting the valueattr to "label"
      }, 
        this.selected = 0;
        this.items = [
          {"id":1, "label": "item 1", "action": "", "icon":"arrow-back", "children": [
              {"id":1, "label": "item 1-1", "action": "", "icon":"assignment-ind", "children":[
                  {"id":1, "label": "item 1-1-1", "action": "", "icon":"grade", "children":[
                    {"id":1, "label": "item 1-1-1", "action": "", "icon":"filter-list" }
                    ]
                  }
                ]
              },
                {"id":1, "label": "item 1-2", "action": "", "icon":"done-all", "children":[
                    {"id":1, "label": "item 1-2-1", "action": "", "icon":"folder" }
                  ]
                }
              ]
            },
            {"id":2, "label": "item 2", "action": "", "icon":"group-work", "children":[
                {"id":2, "label": "item 2-1", "action": "", "icon":"send-money" }
              ]
            },
            {"id":3, "label": "item 3", "action": "", "icon":"settings-backup-restore"},
            {"id":4, "label": "item 4","action": "", "icon":"shopping-cart"},
            {"id":5, "label": "item 5","action": "", "icon":"settings"}
          ]
      }
    });
    
  </script>
 
</polymer-element>