How to traverse GC HTML outputs

[Sean Larson]

I am working on a project that uses some MaterialUI drawers, which have the "click outside to close this accordion" type functionality. 

I typically achieve this by creating a window click event to check when the accordion state is equal to OPEN if the user DID click OUTSIDE the accordion. This fires a toggle function to set the class or style of an element, and state change. 

I ran into some trouble with some of the GC HTML rendering like that of tables and categoryFilters, as they are very deeply embedded but have no IDs.

Below are some helpful jQuery calls I found to be useful when needing to traverse GC HTML:

• $.contains($wrapper[0], $target[0]) where $wrapper is some element you want to check in and target is the thing you are looking for (in my case the element the user clicked on)
  
• $target.parents(".goog-menu").length == 0; goog-menu can be replaced with any of the google classes like goog-inline-block and so on. This is particularly helpful as the filter dropdowns live just under the body; also helps avoid any for each statements due to jquery finding multiple elements

This leads me to make some suggestions for future versions:

• Please make it an option for goog-menu elements (the dropdown list) to generate their HTML on load; currently they generate after the user has clicked the button once. Got around this by rearranging my if statements but was a strange issue to debug
• Some elements appear to use a psuedo-selector for an ID like ":g" or ":5" which will throw a validation error if you attempt to access IDs or elements via javascript/jquery

Hope some others find this helpful!