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!
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/2c46389b-14db-4ff8-b6cf-98cca110036f%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
