MD Settings popup menus, need help with <template>

[Demetrios Papadopoulos]

Hi Polymer devs,

I am trying to optimize/centralize the way popup menus are shown in MD Settings. Need some help regarding templating magic. More context below.

Background

We have several popup menus that are displayed on a list item. For example see the popup menu corresponding to a search engine entry in chrome://md-settings/searchEngines.

I am trying to structure the code such that there is only 1 menu instance for N rows. That menu instance is meant to be re-parented on demand (when the user clicks on the dots icon), such that it is always a DOM child of the enclosing list item (which ensures that the menu item is always scrolled along with the enclosing list item).

Currently the dropdown menu is repeated inside each row's DOM, see here.

Centralized approach

My experimental CL is attempting the following:

• Create a singleton element that simply holds menu templates for all popup menus shown in MD Settings, currently named <popup-menu-manager>.
  
• Remove the menus from their previous location.
• Whenever a menu needs to be shown, the popup-menu-manager's showMenu() method is called, which sets up the corresponding template such that it is backed up by a "model" object. The "model" object is used to determine which elements of the menu need to be shown/hidden. It then plugs in the menu to the desired DOM location.
  

Problem

The menu needs to delegate clicks to the list item (for example to <search-engine-entry>, see TODO at line 11 in the experiment CL). I have not found a way to bind the scope of the template such that on-tap="doSomething_" can call the doSomething_ method of the desired Polymer element (related to _rootDataHost maybe?).

I have been looking as a reference the dom-repeat implementation, as well as the documentation of Polymer.Templatizer, but no success so far. Is what I am trying to do possible?

Any help is appreciated.

Thank you,

Demetrios

[Hector Carmona]

Will cr-shared-menu work for your needs? It creates one menu and places it over the button that was clicked. It's used in passwords, autofill, and history. (Maybe other places, but these are the ones I've seen it in)

--
You received this message because you are subscribed to the Google Groups "Chromium-Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-polym...@chromium.org.
To post to this group, send email to chromium...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-polymer/f0f1167c-79ad-4439-bb66-ef3c0f3978cf%40chromium.org.

[Demetrios Papadopoulos]

On Tuesday, September 27, 2016 at 2:18:30 PM UTC-7, Hector Carmona wrote:

Will cr-shared-menu work for your needs? It creates one menu and places it over the button that was clicked. It's used in passwords, autofill, and history. (Maybe other places, but these are the ones I've seen it in)

I looked into cr-shared-menu, and unfortunately it suffers from a scrolling bug, because it is not a DOM child of the element that is being scrolled. See attachment displaying the bug.

 

On Tue, Sep 27, 2016, 2:04 PM Demetrios Papadopoulos <dpa...@chromium.org> wrote:

Hi Polymer devs,

I am trying to optimize/centralize the way popup menus are shown in MD Settings. Need some help regarding templating magic. More context below.

Background

We have several popup menus that are displayed on a list item. For example see the popup menu corresponding to a search engine entry in chrome://md-settings/searchEngines.

I am trying to structure the code such that there is only 1 menu instance for N rows. That menu instance is meant to be re-parented on demand (when the user clicks on the dots icon), such that it is always a DOM child of the enclosing list item (which ensures that the menu item is always scrolled along with the enclosing list item).

Currently the dropdown menu is repeated inside each row's DOM, see here.

Centralized approach

My experimental CL is attempting the following:

• Create a singleton element that simply holds menu templates for all popup menus shown in MD Settings, currently named <popup-menu-manager>.
  
• Remove the menus from their previous location.
• Whenever a menu needs to be shown, the popup-menu-manager's showMenu() method is called, which sets up the corresponding template such that it is backed up by a "model" object. The "model" object is used to determine which elements of the menu need to be shown/hidden. It then plugs in the menu to the desired DOM location.
  

Problem

The menu needs to delegate clicks to the list item (for example to <search-engine-entry>, see TODO at line 11 in the experiment CL). I have not found a way to bind the scope of the template such that on-tap="doSomething_" can call the doSomething_ method of the desired Polymer element (related to _rootDataHost maybe?).

I have been looking as a reference the dom-repeat implementation, as well as the documentation of Polymer.Templatizer, but no success so far. Is what I am trying to do possible?

Any help is appreciated.

Thank you,

Demetrios

--
You received this message because you are subscribed to the Google Groups "Chromium-Polymer" group.

To unsubscribe from this group and stop receiving emails from it, send an email to chromium-polymer+unsubscribe@chromium.org.

[Demetrios Papadopoulos]

Tried Kevin's suggestion at http://jsbin.com/lajuci/edit?html,output and event delegation works (see patch2 at https://codereview.chromium.org/2373793003). I'll follow up with Settings folks on whether we like the centralized popup menus approach.

Thanks for the quick response Kevin!