Systems and methods of bypassing suppression of event bubbling for popup controls
View Patent ↗The technology disclosed describes systems and methods for implementing extensible browser executable components, such as popup controls for action, checkbox and radio button dropdown menus, modals, dialogs, date pickers and autocompletes. The disclosed technology systems and methods can also be used for rendering executable components for mobile application interfaces. The technology further discloses systems and methods for providing support for developers whose goal is to render specific implementations of browser executable components. The technology disclosed also describes systems and methods for bypassing suppression of DOM click event bubbling for a popup controls for action, checkbox and radio button dropdown menus, modals, dialogs, date pickers and autocompletes; and discloses systems and methods for implementing modal interaction between an iframe and a popup control.
1. A method of handling events generated by user interaction with a display that includes a first window and a second window, including:
generating a popup control for the first window responsive to a first user event representing user interaction with the first window;
in circumstances when the user relocates a cursor from the first window to the second window and a mousedown or touch start event, collectively referred to as the mousedown event, generated within the second window, is suppressed from propagation to the first window,
receiving a mouseup or touch end event, collectively referred to as the mouseup event, propagated from the second window and a location of the mouseup event,
responsive to the mouseup event in the second window, triggering a dismiss class within the first window, wherein the dismiss class dismisses at least a portion of the popup control of the first window.
2. The method of claim 1 , wherein the first window is not contained within the second window and the second window is not contained within the first window.
3. The method of claim 1 , wherein the dismiss class further dismisses the whole popup control for the first window.
4. The method of claim 1 , further including:
displaying a trigger component within the popup control; and
receiving an event that selects the trigger component and displaying a target component that displays a list of choices responsive to selection of the trigger;
wherein the portion of the popup control that is dismissed by the dismiss class is the target component, leaving the trigger component active after shift of focus to the second window.
5. A tangible non-transitory computer readable storage media including computer program instructions that, when executed, implement the method of claim 1 .
6. A computer implemented system of handling events generated by user interaction with a display that includes a first window and a second window, the computer implemented system including:
a processor, memory coupled to the processor, and program instructions stored in the memory that implement a method comprising:
generating a popup control for the first window responsive to a first user event representing user interaction with the first window;
in circumstances when the user relocates a cursor from the first window to the second window and a mousedown or touch start event collectively referred to as the mousedown event, generated within the second window, is suppressed from propagation to the first window,
receiving a mouseup or touch end event, collectively referred to as the mouseup event, propagated from the second window and a location of the mouse up event,
responsive to the mouseup event in the second window, triggering a dismiss class within the first window, wherein the dismiss class dismisses at least a portion of the popup control of the first window.
7. A method of handling events generated by user interaction with a display that includes a first window and a second iframe that is not contained within the first window, including:
generating a popup control of the first window responsive to a first user event representing user interaction with the first window;
in circumstances when the user relocates a cursor from the first window to the second iframe and a focus event generated from a mouse or touch event within the second iframe is suppressed from propagation to the first window,
receiving a blur event and a location of the blur event propagated from the second iframe, and
responsive to the blur event in the second iframe, triggering a dismiss class within the first window, wherein the dismiss class dismisses at least a target portion of the generated popup control of the first window.
8. The method of claim 7 , wherein the first window is an iframe that is not contained within and does not contain the second iframe.
9. The method of claim 7 , wherein the blur event issues to a container of the second iframe as a corollary to a focus event issuing for the second iframe; and the blur event propagates to the first window from the container.
10. The method of claim 7 , wherein the dismiss class further dismisses the whole popup control for the first window.
11. The method of claim 7 , further including:
displaying a trigger component within the popup control; and
receiving an event that selects the trigger component and displaying a target component that displays a list of choices responsive to selection of the trigger;
wherein the portion of the popup control that is dismissed by the dismiss class is the target component, leaving the trigger component active after shift of focus to the second iframe.
12. The method of claim 7 , further including:
the second iframe being nested within a third iframe, the third iframe being nested within a common container of both the third iframe and the first window; and
setting a curtain attribute of the third iframe to true, thereby causing propagation of a blur event from the third iframe to the common container.
13. A tangible non-transitory computer readable storage media including computer program instructions that, when executed, implement the method of claim 7 .
14. A computer implemented system of handling events generated by user interaction with a display that includes a first window and a second iframe that is not contained within the first window, the computer implemented system including:
a processor, memory coupled to the processor, and program instructions stored in the memory that implement a method comprising:
handling events generated by user interaction with a display that includes a first window and a second iframe that is not contained within the first window, including:
generating a popup control of the first window responsive to a first user event representing user interaction with the first window;
in circumstances when the user relocates a cursor from the first window to the second iframe and a focus event generated from a mouse or touch event within the second iframe is suppressed from propagation to the first window,
receiving a blur event and a location of the blur event propagated from the second iframe, and
responsive to the blur event in the second iframe, triggering a dismiss class within the first window, wherein the dismiss class dismisses at least a target portion of the generated popup control of the first window.
15. The system of claim 14 , wherein the first window is an iframe that is not contained within and does not contain the second iframe.
16. The system of claim 14 , wherein the blur event issues to a container of the second iframe as a corollary to a focus event issuing for the second iframe; and the blur event propagates to the first window from the container.
17. The system of claim 14 , wherein the dismiss class further dismisses the whole popup control for the first window.
18. The system of claim 14 , further including:
displaying a trigger component within the popup control; and
receiving an event that selects the trigger component and displaying a target component that displays a list of choices responsive to selection of the trigger;
wherein the portion of the popup control that is dismissed by the dismiss class is the target component, leaving the trigger component active after shift of focus to the second iframe.
19. The system of claim 14 , further including:
the second iframe being nested within a third iframe, the third iframe being nested within a common container of both the third iframe and the first window; and
setting a curtain attribute of the third iframe to true, thereby causing propagation of a blur event from the third iframe to the common container.