DragPositionManager
These classes manage the drag animations and transitions that are used by the CustomizeMode palette grid. Specifically, this powers the animations that move items from row to row and inserts the placeholder drop targets.
- class AreaPositionManager(aContainer)
An AreaPositionManager is used to power the animated drag-and-drop grid behaviour of each customizable area (toolbars, the palette, the overflow panel) while in customize mode. Each customizable area has its own AreaPositionManager, per browser window.
Constructs an instance of AreaPositionManager for a customizable area.
- Arguments:
aContainer (DOMNode) – The customizable area container node for which drag-and-drop animations are to be calculated for.
- AreaPositionManager.containerInfo
type: DOMRectReadOnly|null
A DOMRectReadOnly for the bounding client rect for the container, collected once during construction.
- AreaPositionManager.heightToWidthFactor
type: number
The ratio of the width of the container and the height of the first visible child node. This is used in the weighted cartesian distance calculation used in the AreaPositionManager.find method.
See also
- AreaPositionManager.horizontalDistance
type: number
The calculated horizontal distance between the first two visible child nodes of the container.
- AreaPositionManager.lastPlaceholderInsertion
type: DOMNode|null
The child node immediately after the most recently placed placeholder. May be null if no placeholder has been inserted yet, or if the placeholder is at the end of the container.
- AreaPositionManager.nodePositionStore
type: WeakMap.<DOMNode, DOMRectReadOnly>
A cache of container child node size and position data.
- AreaPositionManager.rtl
type: boolean
True if the container is oriented from right-to-left.
- AreaPositionManager.clearPlaceholders(aContainer, aNoTransition)
Reset all the transforms in this container, optionally without transitioning them.
- Arguments:
aContainer (DOMNode) – The container in which to reset the transforms.
aNoTransition (boolean) – If truthy, adds a notransition attribute to the node while resetting the transform. It is assumed that a CSS rule will interpret the notransition attribute as a directive to skip transition animations.
- AreaPositionManager.find(aContainer, aX, aY)
Find the closest node in the container given the coordinates. “Closest” is defined in a somewhat strange manner: we prefer nodes which are in the same row over nodes that are in a different row. In order to implement this, we use a weighted cartesian distance where dy is more heavily weighted by a factor corresponding to the ratio between the container’s width and the height of its elements.
- Arguments:
aContainer (DOMNode) – The container element that contains one or more rows of child elements in some kind of grid formation.
aX (number) – The X horizontal coordinate that we’re finding the closest child node for.
aY (number) – The Y vertical coordinate that we’re finding the closest child node for.
- Returns:
DOMNode|null – The closest node to the aX and aY coordinates, preferring child nodes in the same row of the grid. This may also return the container itself, if the coordinates are on the outside edge of the last node in the container.
- AreaPositionManager.insertPlaceholder(aContainer, aBefore, aSize, aIsFromThisArea)
“Insert” a “placeholder” by shifting the subsequent children out of the way. We go through all the children, and shift them based on the position they would have if we had inserted something before aBefore. We use CSS transforms for this, which are CSS transitioned.
- Arguments:
aContainer (DOMNode) – The container of the nodes for which we are inserting the placeholder and shifting the child nodes.
aBefore (DOMNode) – The child node before which we are inserting the placeholder.
aSize (DOMRectReadOnly) – The size of the placeholder to create.
aIsFromThisArea (boolean) – True if the node being dragged happens to be from this container, as opposed to some other container (like a toolbar, for instance).
- AreaPositionManager.update(aContainer)
Iterates the visible children of the container, sampling their bounding client rects and storing them in a local cache. Also collects and stores metrics like the horizontal distance between the first two children, the height of the first item, and a ratio between the width of the container and the height of the first child item.
- Arguments:
aContainer (DOMNode) – The container node to collect the measurements for.
- class DragPositionManager()
DragPositionManager manages the AreaPositionManagers for all of the grid-like customizable areas. These days, that’s just the customization palette.
- static DragPositionManager.getManagerForArea(aArea)
Returns the AreaPositionManager instance for a particular aArea DOMNode, if one has been created.
- Arguments:
aArea (DOMNode)
- Returns:
AreaPositionManager|null –
- static DragPositionManager.start(aWindow)
Starts CustomizeMode drag position management for a window aWindow.
- Arguments:
aWindow (DOMWindow) – The browser window to start drag position management in.
- static DragPositionManager.stop()
Stops CustomizeMode drag position management for all windows.