This is a large cleanup of our infobox code. Originally, we only had
infoboxes for users, and they didn't need to do anything other than
display some HTML. Over time, this became more complex. The user infobox
had more interaction requirements with its date/time display, and we
added new types of infoboxes, all sharing the same logic.
Infobox display management was left up to each infobox instance (of
which there was one per type of infobox). While you'd never see more
than one instance of a type of infobox on the screen at the same time,
it was possible to get two infoboxes of two different types to appear at
the same time.
This change separates out infobox display management/target registration
from the infoboxes themselves. There's now a RB.InfoboxManagerView
that manages each type of infobox on the page. It keeps track of the
active infobox, shows/hides based on the mouseenter
and mouseleave
events (along with the smarts for allowing the user to move the mouse
from the target element to the infobox without causing anything to
hide), and handles creating/populating the instances of the infoboxes.
It also has a utility function for creating the $.fn.*
methods we use
to register infoboxes on elements, like those with the .user
class.
This allows us to maintain that compatibility and ease of use in a more
straight-forward way.
The infobox views themselves handle the actual rendering and interaction
for the infobox content. There's a subclass of RB.BaseInfoboxView
for
each type of infobox we use, along with a jQuery $.fn.*
registration
for each (which allows us to remove some more code from common.e6.js
).
This is the first part of a larger cleanup that will lead to more
reusable infoboxes, and even allow for extensions to more easily provide
their own infoboxes.