boxes/ActiveBox. ActiveBox

Objects of this class are widely used in JClic activities: cells in puzzles and associations,
messages and other objects are active boxes.

The specific content, size and location of ActiveBox objects is determined by its
ActiveBoxContent member. Most ActiveBoxes have only one content, but some of them can
have a secondary or "alternative" content stored in the altContent field. This content is
used only when the alternative flag of the ActiveBox is on.

Active boxes can host video and interactive media content (specified in the mediaContent
member of the ActiveBoxContent through its hostedMediaPlayer member.

Constructor

new ActiveBox(parentopt, containeropt, boxBaseopt, setIdLocopt, rectopt)

ActiveBox constructor

Parameters:
NameTypeAttributesDescription
parentmodule:boxes/AbstractBox.AbstractBox<optional>

The AbstractBox to which this ActiveBox belongs

containermodule:AWT.Container<optional>

The container where this box is placed.

boxBasemodule:boxes/BoxBase.BoxBase<optional>

The object where colors, fonts, border and other graphic properties
of this box are defined.

setIdLocnumber<optional>

A numeric identifier, used to locate this box in a set of sibling objects.

rectmodule:AWT.Rectangle<optional>

The initial bounds of the box.

Extends

Members

$accessibleElement :external:jQuery

DOM element used to display this cell content in wai-aria contexts

$hostedComponent :external:jQuery

An external JQuery DOM element hosted by this box

accessibleAlwaysActive :boolean

Flag indicating that $accessibleElement should be always active

Type:
  • boolean

accessibleText :string

Text to be used in accessible contexts

Type:
  • string

altContent :module:boxes/ActiveBoxContent.ActiveBoxContent

Alternative content of this box

alternative :boolean

Whether this box must be displayed with alternative or regular color and font settings

Type:
  • boolean

border :boolean

Whether this box has a border or not

Type:
  • boolean

boxBase :module:boxes/BoxBase.BoxBase

The BoxBase related to this AbstractBox. When null, the parent can provide an
alternative one.

container :module:AWT.Container

The Container to which this AbstractBox belongs

content :module:boxes/ActiveBoxContent.ActiveBoxContent

Main content of this box

dim :module:AWT.Dimension

The Dimension of the Rectangle

focused :boolean

Whether this box holds the input focus

Type:
  • boolean

hostedComponent :boolean

Flag to check if this box has a 'hosted component'

Type:
  • boolean

hostedMediaPlayer :module:media/ActiveMediaPlayer.ActiveMediaPlayer

The media player associated to this box

idAss :number

Identifier used to establish relationships between cells of different sets (in associations)

Type:
  • number

idLoc :number

Identifier used to set a relative position in the space.

Type:
  • number

idOrder :number

Identifier used to set the relative position of this box in a set.

Type:
  • number

inactive :boolean

Whether this box is active or inactive

Type:
  • boolean

inverted :boolean

Whether this box must be displayed with inverted or regular colors

Type:
  • boolean

isBackground :boolean

Indicates that this box is used as a background. When drawing, the clipping region must be respected.

Type:
  • boolean

marked :boolean

Whether this box is marked (selected) or not

Type:
  • boolean

parent :module:boxes/AbstractBox.AbstractBox

The parent AbstractBox (can be null)

pos :module:AWT.Point

The current position of the shape

pos0 :module:AWT.Point

Backup of the original position of the cell, useful when the real position must be restored after a temporary change.

role :string

Describes the main role of this box on the activity. Useful in wai-aria descriptions.

Type:
  • string

shape :module:AWT.Shape

The shape of this box (the box Rectangle or a special Shape, if set)

specialShape :boolean

Whether this box has a shape that is not a rectangle

Type:
  • boolean

temporaryHidden :boolean

Used to temporary hide a box while other drawing operations are done

Type:
  • boolean

tmpTrans :boolean

Cells with this attribute will be transparent but with painted border

Type:
  • boolean

type :string

Shape type id

Type:
  • string

visible :boolean

Whether this box is visible or not

Type:
  • boolean

Methods

_focusAccessibleElement(ctx)

Draw focus on accessible element if needed

Parameters:
NameTypeDescription
ctxexternal:CanvasRenderingContext2D

The canvas rendering context used to draw the
box content.

add(shape) → {module:AWT.Rectangle}

Adds the boundaries of another shape to the current one

Parameters:
NameTypeDescription
shapemodule:AWT.Shape

The module:AWT.Shape to be added

Returns:
Type: 
module:AWT.Rectangle

buildAccessibleElement($canvas, $clickReceiver, $canvasGroupopt, eventTypeopt) → {external:jQuery}

Builds a hidden buton that will act as a accessible element associated to the canvas area
of this ActiveBox.
The button will be created only when CanvasRenderingContext2D has a method named addHitRegion.
See https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility
for more information and supported browsers.

Parameters:
NameTypeAttributesDescription
$canvasexternal:jQuery

The canvas where this ActiveBox will deploy, wrapped up in a jQuery object

$clickReceiverexternal:jQuery

The DOM element that will be notified when $accessibleElement is activated.

$canvasGroupexternal:jQuery<optional>

Optional DOM element containing the accessible element. Useful to group cells in associations. When null, the element belongs to $canvas.

eventTypestring<optional>

Type of event sent to $clickReceiver. Default is click.

Returns:
  • The accessible element associated to this ActiveBox.
Type: 
external:jQuery

checkAutoStartMedia()

Checks if the call has a module:media/MediaContent.MediaContent set to autostart, and launches it when found.

checkHostedComponent()

Checks the presence of content susceptible to be treated as HTML DOM embedded in this ActiveBox.

clear()

Clears the current content

clip(ctx, fillRuleopt) → {external:CanvasRenderingContext2D}

Creates a clipping region on the specified HTML canvas 2D rendering context

Parameters:
NameTypeAttributesDefaultDescription
ctxexternal:CanvasRenderingContext2D

The rendering context

fillRulestring<optional>
'nonzero'

Can be 'nonzero' (default when not set) or 'evenodd'

Returns:
  • The provided rendering context
Type: 
external:CanvasRenderingContext2D

clone() → {module:AWT.Rectangle}

Clones this Rectangle

Returns:
Type: 
module:AWT.Rectangle

copyContent(bx)

Copy the content of another ActiveBox into this one

Parameters:
NameTypeDescription
bxmodule:boxes/ActiveBox.ActiveBox

The ActiveBox from which to take the content

drawBorder(ctx)

Draws the box border

Parameters:
NameTypeDescription
ctxexternal:CanvasRenderingContext2D

The canvas rendering context where the border
will be drawn.

end()

Finisher method

equals(r) → {boolean}

Checks if two shapes are equivalent.

Parameters:
NameTypeDescription
rmodule:AWT.Shape

The Shape to compare against

Returns:
Type: 
boolean

exchangeContent(bx)

Exhanges the content of this ActiveBox with another one

Parameters:
NameTypeDescription
bxmodule:boxes/ActiveBox.ActiveBox

The ActiveBox with which to exchange the content.

exchangeLocation(bx)

Swaps the location of two active boxes

Parameters:
NameTypeDescription
bxmodule:boxes/ActiveBox.ActiveBox

The ActiveBox to swap with this one.

fill(ctx, dirtyRegionopt) → {external:CanvasRenderingContext2D}

Fills the Shape with the current style in the provided HTML canvas context

Parameters:
NameTypeAttributesDescription
ctxexternal:CanvasRenderingContext2D

The canvas 2D rendering context where to fill this shape.

dirtyRegionmodule:AWT.Rectangle<optional>

The context region to be updated. Used as clipping
region when drawing.

Returns:
  • The provided rendering context
Type: 
external:CanvasRenderingContext2D

getAttributes() → {object}

Gets a object with the basic attributes needed to rebuild this instance excluding functions,
parent references, constants and also attributes retaining the default value.
The resulting object is commonly usued to serialize elements in JSON format.

Returns:
  • The resulting object, with minimal attrributes
Type: 
object

getBorderBounds() → {module:AWT.Rectangle}

Returns the enclosing Rectangle of this box including its border (if any)

Returns:
Type: 
module:AWT.Rectangle

getBounds() → {module:AWT.Rectangle}

Gets the enclosing Rectangle of this Shape.

Returns:
Type: 
module:AWT.Rectangle

getBoxBaseResolve() → {module:boxes/BoxBase.BoxBase}

Gets the real BoxBase associated to this box, scanning down parent relationships.

getContainerResolve() → {module:AWT.Container}

Gets the container associated to this box, asking its parents when null.

Returns:
Type: 
module:AWT.Container

getContainerX() → {module:AWT.Container}

Gets the container attribute of this box, without checking its parent

Returns:
Type: 
module:AWT.Container

getContent() → {module:boxes/ActiveBoxContent.ActiveBoxContent}

Returns the current content, creating an empty one if needed.

getCoords() → {string}

Gets a string with the co-ordinates of the upper-left and lower-right vertexs of this rectangle,
(with values rounded to int)

Returns:
Type: 
string

getCurrentContent() → {module:boxes/ActiveBoxContent.ActiveBoxContent}

Returns the current content used by the box

getDescription() → {string}

Gets the description field of the current ActiveBoxContent

Returns:
Type: 
string

getHostedComponent() → {external:jQuery}

Gets the current $hostedComponent member

Returns:
Type: 
external:jQuery

getOppositeVertex() → {module:AWT.Point}

Gets the module:AWT.Point corresponding to the lower-right vertex of the Rectangle.

Returns:
Type: 
module:AWT.Point

getParent() → {module:boxes/AbstractBox.AbstractBox}

Gets the current parent of this box

getShape() → {module:AWT.Shape}

Gets the current shape used in this box

Returns:
Type: 
module:AWT.Shape

grow(dx, dy) → {module:AWT.Rectangle}

Expands the boundaries of this shape. This affects the current position and dimension.

Parameters:
NameTypeDescription
dxnumber

The amount to grow (or decrease) in horizontal direction

dynumber

The amount to grow (or decrease) in vertical direction

Returns:
Type: 
module:AWT.Rectangle

hasBorder() → {boolean}

Checks if this box has border

Returns:
Type: 
boolean

intersects(_r) → {boolean}

Checks if the provided Rectangle r intersects with this shape.

Parameters:
NameTypeDescription
_rmodule:AWT.Rectangle
Returns:
Type: 
boolean

invalidate(rect)

Invalidates the zone corresponding to this box in the associated module:AWT.Container, if any.

Parameters:
NameTypeDescription
rectmodule:AWT.Rectangle

The rectangle to be invalidated. When null, it's the full
container area.

isAlternative() → {boolean}

Checks if this box is in alternative state.

Returns:
Type: 
boolean

isAtPlace() → {boolean}

Checks if this ActiveBox is at its original place.

Returns:
Type: 
boolean

isCurrentContentEquivalent(bx, checkCaseopt) → {boolean}

Same functionality as isEquivalent, but comparing the current content.

Parameters:
NameTypeAttributesDescription
bxmodule:boxes/ActiveBox.ActiveBox

The ActiveBox to check against this.

checkCaseboolean<optional>

When true, the comparing will be case-sensitive.

Returns:
Type: 
boolean

isEquivalent(bx, checkCaseopt) → {boolean}

Checks if two ActiveBox objects have equivalent content

Parameters:
NameTypeAttributesDescription
bxmodule:boxes/ActiveBox.ActiveBox

The ActiveBox to check against this.

checkCaseboolean<optional>

When true, the comparing will be case-sensitive.

Returns:
  • true if both cells are equivalent.
Type: 
boolean

isFocused() → {boolean}

Checks if this box has the input focus

Returns:
Type: 
boolean

isInactive() → {boolean}

Checks if this box is currently inactive.

Returns:
Type: 
boolean

isInverted() → {boolean}

Checks if this box is in inverted state.

Returns:
Type: 
boolean

isMarked() → {boolean}

Checks if this box is marked

Returns:
Type: 
boolean

isRect() → {boolean}

Shorthand method for determining if a Shape is an Rectangle

Returns:
Type: 
boolean

isTemporaryHidden() → {boolean}

Checks if this box is temporary hidden

Returns:
Type: 
boolean

isVisible() → {boolean}

Checks if this box is fully visible

Returns:
Type: 
boolean

moveBy(dx, dy)

Sets a new location to this box. In JClic this method was named translate.

Parameters:
NameTypeDescription
dxnumber

The displacement on the X axis

dynumber

The displacement on the Y axis

moveTo(newPos, yopt)

Sets a new location for this box. In JClic this method was named setLocation

Parameters:
NameTypeAttributesDescription
newPosAWT.Point | number

A point or the x coordinate of a new point.

ynumber<optional>

The y coordinate of a new point.

playMedia(ps, delayedActions)

Plays the action or media associated with this ActiveBox

Parameters:
NameTypeDefaultDescription
psmodule:JClicPlayer.JClicPlayer

Usually, a JClicPlayer

delayedActionsArray.<function()>null

If set, store the the action in this array for future execution

preparePath(ctx) → {external:CanvasRenderingContext2D}

Prepares an HTML canvas 2D rendering context with a path that can be used to stroke a line,
to fill a surface or to define a clipping region.

Parameters:
NameTypeDescription
ctxexternal:CanvasRenderingContext2D
Returns:
  • The provided rendering context
Type: 
external:CanvasRenderingContext2D

scaleBy(delta) → {module:AWT.Rectangle}

Multiplies the dimension of the Shape by the specified delta amount.

Parameters:
NameTypeDescription
deltaPoint | Dimension

Object containing the X and Y ratio to be scaled.

Returns:
Type: 
module:AWT.Rectangle

setAltContent(abc, i)

Sets the ActiveBoxContent that will act as an alternative content (altContent field)
of this ActiveBox,

Parameters:
NameTypeDescription
abcActiveBoxContent | ActiveBagContent

Object containing the content to set.

inumber

When abc is an ActiveBagContent, this field indicates an
index in the content array.

setAlternative(newVal)

Sets this box in alternative mode, or restores its original state.

Parameters:
NameTypeDescription
newValboolean

setAttributes(data) → {module:AWT.Rectangle}

Reads the properties of this Rectangle from a data object

Parameters:
NameTypeDescription
dataobject

The data object to be parsed

Returns:
Type: 
module:AWT.Rectangle

setBorder(newVal)

Sets/unsets a border to this box

Parameters:
NameTypeDescription
newValboolean

true to set a border.

setBoxBase(boxBase)

Sets the BoxBase of this box

Parameters:
NameTypeDescription
boxBasemodule:boxes/BoxBase.BoxBase

The new BoxBase

setContainer(newContainer)

Setter method for container

Parameters:
NameTypeDescription
newContainermodule:AWT.Container

The new Container assigned to this box

setContent(abc, i)

Sets the ActiveBoxContent of this ActiveBox

Parameters:
NameTypeDescription
abcActiveBoxContent | ActiveBagContent

Object containing the content to set.

inumber

When abc is an ActiveBagContent, this field indicates an
index in the content array.

setCurrentContent(abc)

Sets the current content of this ActiveBox

Parameters:
NameTypeDescription
abcmodule:boxes/ActiveBoxContent.ActiveBoxContent

The content to set.

setDefaultIdAss()

Sets the default value to idAss

setFocused(newVal)

Sets or unsets the input focus to this box.

Parameters:
NameTypeDescription
newValboolean

setHostedComponent($hc)

Sets the $hostedComponent member.

Parameters:
NameTypeDescription
$hcexternal:jQuery

The jQuery DOM component hosted by this box.

setHostedComponentBorder()

Sets the $hostedComponent border, based on the current
BoxBase of this box.

setHostedComponentBounds(sizeChanged)

Places and resizes $hostedComponent, based on the size
and position of this box.

Parameters:
NameTypeDescription
sizeChangedboolean

true when this ActiveBox has changed its size

setHostedComponentColors()

Sets $hostedComponent colors and other css properties
based on the current BoxBase of this box.

setHostedComponentVisible()

Makes module:boxes/AbstractBox.AbstractBox#$hostedComponent visible or invisible, based on the value of
the AbstractBox visible flag.

setHostedMediaPlayer(amp)

Sets the hosted media player of this ActiveBox

Parameters:
NameTypeDescription
ampmodule:media/ActiveMediaPlayer.ActiveMediaPlayer

The media player.

setInactive(newVal)

Makes this box active (false) or inactive (true)

Parameters:
NameTypeDescription
newValboolean

setInverted(newVal)

Puts this box in inverted mode or restores its original state.

Parameters:
NameTypeDescription
newValboolean

setMarked(newVal)

Sets this box in marked mode, or restores its original state.

Parameters:
NameTypeDescription
newValboolean

setParent(parent)

Setter method for parent

Parameters:
NameTypeDescription
parentmodule:boxes/AbstractBox.AbstractBox

The new parent of this box

setShape(sh)

Sets the shape used to draw the content of this box

Parameters:
NameTypeDescription
shmodule:AWT.Shape

The shape to be set

setSize(width, height)

Changes the size of this box

Parameters:
NameTypeDescription
widthnumber
heightnumber

setTemporaryHidden(newVal)

Makes this box temporary hidden (newVal true) or resets its original state (newVal false)

Parameters:
NameTypeDescription
newValboolean

setTextContent(tx)

Sets the text content of this ActiveBox.

Parameters:
NameTypeDescription
txstring

The text to set.

setVisible(newVal)

Sets this box visible or invisible

Parameters:
NameTypeDescription
newValboolean

true for visible

stroke(ctx) → {external:CanvasRenderingContext2D}

Draws this shape in the provided HTML canvas 2D rendering context.

Parameters:
NameTypeDescription
ctxexternal:CanvasRenderingContext2D

The canvas 2D rendering context where to draw the shape.

Returns:
  • The provided rendering context
Type: 
external:CanvasRenderingContext2D

switchToAlt()

Puts this ActiveBox in "alternative" mode, meaning that altContent will be used instead of content

toString() → {string}

Gets a descriptive text for this ActiveBox

Returns:
Type: 
string

update(ctx, dirtyRegionopt)

Draws the content of this box on an HTML canvas element. At this level, only background
and border are painted/stroked. Derived classes should implement specific drawing tasks in
module:boxes/AbstractBox.AbstractBox#updateContent.

Parameters:
NameTypeAttributesDefaultDescription
ctxexternal:CanvasRenderingContext2D

The canvas rendering context used to draw the
box content.

dirtyRegionmodule:AWT.Rectangle<optional>
null

The area that must be repainted. null refers to the whole box.

updateContent(ctx, dirtyRegionopt)

Draws the content of this Activebox on the specified canvas context.

Parameters:
NameTypeAttributesDescription
ctxexternal:CanvasRenderingContext2D

The canvas rendering context used to draw the
box content.

dirtyRegionmodule:AWT.Rectangle<optional>

The area that must be repainted. null refers to the whole box.

(static) createCell($dom, abc) → {module:boxes/ActiveBox.ActiveBox}

Factory constructor that creates a new cell inside a JQuery DOM element.

Parameters:
NameTypeDescription
$domexternal:jQuery

The DOM element that will act as a container

abcmodule:boxes/ActiveBoxContent.ActiveBoxContent

The cell's content. Must not be null and have the dimension
member initialized.