When the mouse is moved over supported (flash, video, canvas, iframes, silverlight) target elements on a web page, the border that lights up around the element with the toolbox at the bottom is the element selector. These element selectors are not one single div (with a border and the height and width of the target element), but four [divs] around the corners of the element (very similar to the Aardvark bookmarklet). Though a single element would do the job just as well, placing it below or above would interfere with mouse events of the target element. Additional jquery "mouseenter" events are directly added to these target elements to show up the selector. The selector element is redrawn around the target element every time the mouse enters a different target element.
The structure explained above seems to work for all elements except embedded flash, as some browsers draw flash above all elements to prevent clickjacking. Object and Embed tags also cannot hold data. Just for the case of Flash, a proxy <div> is placed on top of the flash. To allow the Flash element to capture its mouse events as usual, the proxy div is "sent to back" as soon as the mouse enters it, bringing the Flash Element to the top.
Moving and Resizing Elements
When an element is resized or moved from its position, three things happen .
- A new proxy element <img> with the dimensions of the original target element is inserted in its place to ensure that the parent of the target element does not collapse when the target element is moved out of its child hierarchy.
- The element is given an absolute position to allow the drag.
- The element is also re-attached directly under the body to ensure that overflow:hidden in the parent element does not prevent the target element from being moved around.
Some actions like full screen or switch off lights hide all other elements. To restore the page to the state prior to the action, the bookmarklet link has to be clicked again. A button on the page could have done this job, but placing one may look ugly, especially when a video is full screen. Hence, some commands like full screen or switch-off-lights define a "next-action" that is executed when the bookmarklet is clicked again.
Support for tags
This newer version has a better support for tags, and the actions that can be performed on tags. Every tag is defined by a separate object that in turn declares the commands or actions (like move, full-screen, download) that can be performed on the object. Common actions are added using a mixin like pattern.
To look at how MediaPlus works under the cover, you can check out the source code here.