CODEWITHSUNDEEP
javascriptjquerypolymer
Dade
Dade

Reputation: 513

Add event to Submenu-title in Polymer

I had the following submenu code: 

<core-submenu icon="editor:insert-drive-file" label="Docs" class="sub_menu_item" id="docs"> 
        <core-item id="num_docs" class="menu_item" icon="description" label="Num docs" horizontal="" center="" layout=""></core-item>
        <core-item id="num_forms" class="menu_item" icon="receipt" label="Num forms" horizontal="" center="" layout=""></core-item>
        <core-item id="num_presentations" class="menu_item" icon="flip-to-front" label="Num presentations" horizontal="" center="" layout=""></core-item>
    </core-submenu>

That after the Polymer is loaded generates the following:

<core-submenu id="docs" class="sub_menu_item core-selected" label="Docs" icon="editor:insert-drive-file" active="">     
    <core-item id="submenuItem" class="core-selected" on-tap="{{ activate }}" icon="{{icon}}" label="{{label}}" src="{{src}}" layout="" center="" horizontal="">
    <core-menu id="submenu" class="core-collapse-closed" valueattr="{{valueattr}}" selectedattribute="{{selectedAttribute}}" selecteditem="{{selectedItem}}" selected="{{selected}}" style="overflow: hidden; height: 0px;">
    <core-a11y-keys on-keys-pressed="{{ selectPrevious }}" keys="up" target="{{}}"></core-a11y-keys>
    <core-a11y-keys on-keys-pressed="{{ selectNext }}" keys="down" target="{{}}"></core-a11y-keys>
    <core-a11y-keys on-keys-pressed="{{ validateSelected }}" keys="enter" target="{{}}"></core-a11y-keys>
    <core-selection id="selection" hidden="" on-core-select="{{ selectionSelect }}" multi="{{multi}}"></core-selection>
    <core-item id="num_docs" class="menu_item" layout="" center="" horizontal="" label="Num docs" icon="description">
    <core-item id="num_forms" class="menu_item" layout="" center="" horizontal="" label="Num forms" icon="receipt">
    <core-item id="num_presentations" class="menu_item" layout="" center="" horizontal="" label="Num presentations" icon="flip-to-front">

Now, the key is that I want to add a click event to the first generated element (which is the title of the submenu). But I'm not able to do that because the element is not still loaded in the DOM.

I've tried to call it inside the 'polymer-ready' event, but it is not working.

window.addEventListener('polymer-ready', function(e) {

        $("#submenuItem").on("click",function(){
            var scope = $(this).parent().id;
            callDispatcher(scope);
        });
});

Does anybody knows how to resolve this?

Upvotes: 0

Views: 182

Answers (2)

Westbrook
Westbrook

Reputation: 608

Instead of overwriting the functionality of the component, try using the Shadow DOM selector based templating rather than the label attribute to show that element in the UI.

You can use something like:

<core-submenu>
    <div class="item-content">
        <a href="*for routing functionality*" on-tap="*for JS funcationality*">Docs</a>
    </div>
    <core-item id="num_docs" class="menu_item" icon="description" label="Num docs" horizontal="" center="" layout=""></core-item>
    ...
</core-submenu>

And have access to binding whatever events you'd like without having to cut overwrite anything. Though, if you really prefer that route, you might also go the path of extending with the extends="core-submenu" attribute, much like does to .

Upvotes: 1

Dade
Dade

Reputation: 513

I finally made it work by overwriting the core-submenu element.

Polymer('core-submenu', {
    activeChanged: function() {
         if (!this.opened){
          var scope = this.id;
          if (scope!="")
              callDispatcher(scope);
         }  

      if (this.hasItems()) {
        this.opened = this.active;
      }
      if (!this.active) {
        this.unselectAllItems();
      }
    }
});

Upvotes: 0

Related Questions