designer

designer.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../core-menu/core-submenu.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="nb-menu" >
	<template>
    <core-menu selected="{{selectedIndex}}" selectedItem="{{selectedItem}}" on-core-select="{{onSelect}}">
      <template repeat="{{items}}" id="test">
          <template if="{{children}}">          
            <template if="{{children.length > 0}}">
              <core-submenu label="{{ label }} submenu" icon="{{icon}}" data-action="{{action}}" >
                <template ref="test" repeat="{{children}}"></template>
              </core-submenu> 
            </template>
          </template>
          <template if="{{!children}}">
            <core-item label="{{ label }} item" icon="{{icon}}" data-action="{{action}}"  >
            </core-item>
          </template>
      </template>  
    </core-menu>
  </template>
  
  <script>
    //Register the nb-menu element
    Polymer('nb-menu',{
      //Set up the published properties of the element. 
      //Instead of taking the more correct and "declarative" approach we use the "publish" property so that
      //we can set "reflect" to true. This means that any of these "published" attributes will be updated
      //on the elements attributes, whenever they are changed inside of the element
      publish:{
        //Declare a pulbished attribute named "selectedItem" with the default value of "null" 
        //and it will reflect back to the elements attributes
        selectedItem: {
            value: null,
            reflect: true
        },
        selectedIndex: {
            value: null,
            reflect: true
        },     
        items: {
          value: [
                {
                  "id": 1,
                  "label": "item 1",
                  "action": "alert('hello from item 1')",
                  "icon": "arrow-back",
                  "children": [
                    {
                      "id": 11,
                      "label": "item 1-1",
                      "action": "console.log('youclicked item 1-1')",
                      "icon": "assignment-ind",
                      "children": [
                        {
                          "id": 111,
                          "label": "item 1-1-1",
                          "action": "console.log('youclicked item 1-1-1')",
                          "icon": "grade",
                          "children": [
                            {
                              "id": 1111,
                              "label": "item 1-1-1-1",
                              "action": "console.log('youclicked item 1-1-1-1')",
                              "icon": "filter-list"
                            }
                          ]
                        }
                      ]
                    },
                    {
                      "id": 12,
                      "label": "item 1-2",
                      "action": "console.log('youclicked item 1-2')",
                      "icon": "done-all",
                      "children": [
                        {
                          "id": 121,
                          "label": "item 1-2-1",
                          "action": "console.log('youclicked item 1-2-1')",
                          "icon": "folder"
                        }
                      ]
                    }
                  ]
                },
                {
                  "id": 2,
                  "label": "item 2",
                  "action": "console.log('youclicked item 2')",
                  "icon": "group-work",
                  "children": [
                    {
                      "id": 21,
                      "label": "item 2-1",
                      "action": "this.selected = 2",
                      "icon": "send-money"
                    }
                  ]
                },
                {
                  "id": 3,
                  "label": "item 3",
                  "action": "console.log('youclicked item 3')",
                  "icon": "settings-backup-restore"
                },
                {
                  "id": 4,
                  "label": "item 4",
                  "action": "this.selected = 1",
                  "icon": "shopping-cart"
                }
          ],
          reflect: true
        }               
      },
            
      //Declare the "onSelect" Event handler
      onSelect:function onSelect(event, details, menu){
        //if details.isSelected is true the element is being selected
        if (details.isSelected){
          //Set the menu's selectedItem as the element
          menu.selectedItem = details.item; 
          
          //Do the action that is on the element
          var action = details.item.dataset.action;
          eval(action);
          
          //console.log(" action is " + action);
          console.log("Selected " + details.item.label);          
        }
        //The element is being deselected
        else{
          //Do anything that needs to be done when the element is deselected
          console.log("DeSelected " + details.item.label);
        }        
      },
            
      //Declare the cunstructor for the element
      created: function() {  
        this.selectedItem = null;
        this.selectedIndex = -1;
      },
            
      //Declare the callback for when the element is finished initiating
      ready: function(){
            var that = this;
            setTimeout(function(){that.selectedIndex = 0},1000);
      }
            
     //For More events that can be bound to visit https://www.polymer-project.org/docs/polymer/polymer.html#lifecyclemethods
    });
    
  </script>
 
</polymer-element>