controllerFocusZoom


focusZoom(scale, dz, dz, dy, target_id,
          speed_dampening, speed_acc)

focusZoom.messages = [focus, blur]
focusZoom.events   = [focus, blur]

Description

Attaches event listeners to this element, or another element supplied by target_id (useful to target a container of this element), listening for the focus_capture and blur_capture events of its actions() controller, and popping up (scale + move closer to the camera) the element (or target) upon a focus_capture event, then transition it back to its original state upon a blur_capture event.

Listening in the capture phase for the focus and blur events allows this element (or the one supplied by target_id) to be a container that itself is not focus-able, but contains one or more focus-able elements.

Applies one translate and one scale transform.

Parameters

Visit page Controller # Common Parameters for documentation on the parameters, common to all controllers: id, paused and disabled.

Parameters of focusZoom():

scale: Scaling factor of the focused element. Default value: 1.4
dz: Displacement of the focused element on the Z axis, in pixels. Default value: 30
dx, dy: Optional displacements of the focused element on the X and Y axes, in pixels. Default values: 0, 0
target_id: If another DOM node (ex., a parent) should be zoomed instead of this element, supply its id by this parameter. The event listeners will be also set on it, so effectively there's no difference between setting the controller directly onto the target and setting in on this (or another) elemenet and supplying the target. Default value: ""
speed_dampening: Upon forward or backward transition to/from the popup state, on every frame, the current speed of the movement is multiplied by this parameter, effectively slowing the motion. Values between 0 and 1 are reasonable, where smaller values result in slower movement and faster dying of the spring motion, and a value of 1 means absolute elasticity of the spring. Default value: 0.72
speed_acc: How fast the element accelerates towards its popup position: 0 - indefinitely slowly, 1 - immediately. Default value: 0.1

Accepted Messages

Visit page Controller # Common Messages for documentation on the messages, accepted by all controllers: pause, unpause, enable, disable, params and remove.

Messages specific to focusZoom():

focus: Tells the controller that the element is becoming focused. The controller will start a transistion towards the popup state of the element. Note that this message does not make the controller focus the element or any of its child nodes, only notifies it about such an event. Message params: none
blur: Tells the controller that the element is becoming blurred (i.e. un-focused). The controller will start a transistion towards the initial state of the element. Note that this message does not make the controller blur the element or any of its child nodes, only notifies it about such an event. Message params: none

Generated Events

Visit page Controller # Common Events for documentation on the events, generated by all controllers: frame, remove, paused, unpaused enabled and disabled.

Events fired by focusZoom():

focus: Fired when the controller receives a focus message and is not already in the focused state. Event params: none
blur: Fired when the controller receives a blur message and is not already in the blurred state. Event params: none

Interaction with DOM

Transforms: Applies one translate and one scale transform.
CSS: Works with any styling. Does not modify Does not set any style properties.
Events: Sets behave3d event listeners for the focus_capture and blur_capture events of this element's (or of an element supplied by param target_id) actions() controller.

Changes Log

Controller introduced in v.0.80