skins/Skin. Skin

Cancel dialog button

Iconic button used to close the dialog

Iconic button used to copy content to clipboard

The HTML div object used by this Skin

Bottom panel of dialogs, used for action buttons

Main panel of dialogs, where relevant information must be placed

Main panel used to display modal and non-modal dialogs

OK dialog button

The HTML div where JClic Player will be placed

Graphic indicator of loading progress

Div inside $dlgOverlay where JClicPlayer will place the information to be shown

Waiting panel, displayed while loading resources.

Value to be returned in user-canceled dialogs

Value to be returned by the dialog promise when the presented task is fulfilled

Flag indicating if the current dialog is modal or not

JClic logo

Main styles

The basic collection of buttons that most skins implement

Icon for 'close dialog' button

Icon for 'copy' button

The collection of counters

Current value of the progress bar

The Dimension of the Rectangle

Element usually used as header in dialogs, with JClic logo, name and version

The currently "invalidated" area

Max value of the progress bar

The collection of message areas

Current name of the skin.

Icon for 'ok' button

Specific options of this skin

The JClicPlayer object associated to this skin

The current position of the shape

The PlayStation
used by this Skin. Usually, the same as player

Reports screen styles

Class name of this skin. It will be used as a base selector in the definition of all CSS styles.

Shape type id

Waiting screen styles

Counter to be incremented or decremented as waitCursor is requested or released.

Animated image displayed while loading resources
Based on Ryan Allen's svg-spinner

Animated image displayed while loading resources (small)

List of classes derived from Skin. It should be filled by real skin classes at declaration time.

Counter used to label root nodes with unique IDs

Collection of skin style sheets already registered on the current document

Collection of realized Skin objects.

Formats the current report in a DOM tree, ready to be placed in $reportsPanel

Called when the dialog must be closed, usually only by Skin members.
This method is re-defined on each call to showDlg, so the resolve and reject
functions can be safely called.

Returns the CSS styles used by this skin. This method should be called only from
the Skin constructor, and overridded by subclasses if needed.

Method used to notify this skin that a specific action has changed its enabled/disabled status

Adds the boundaries of another shape to the current one

Attaches a JClicPlayer object to this Skin

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

Clones this Rectangle

Checks if the provided module:AWT.Point is inside this shape.

Detaches the player element from this Skin

Main method used to build the content of the skin. Resizes and places internal objects.

Enables or disables a specific counter

Enables or disables the tabindex attribute of the main buttons. Useful when a modal dialog
overlay is active, to avoid direct access to controls not related with the dialog.

Compares two Skin objects

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

adjusts the skin to the dimension of its $div container

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.

Gets the enclosing Rectangle of this Shape.

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

Gets the ActiveBox used to display the main messages of activities

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

Gets a clone of this shape moved to the pos component of the rectangle and scaled
by its dim value.

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

Increments the progress bar value by the specified amount, only when the progress bar is running.

Checks if the provided Rectangle r intersects with this shape.

Adds the provided rectangle to the invalidated area.

Shorthand method for determining if a Shape is an Rectangle

Shifts the shape a specified amount in horizontal and vertical directions

Moves this shape to a new position

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.

Resets all counters

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

Reads the properties of this Rectangle from a data object

Sets this Rectangle the position and dimension of another one

Enables or disables an object

Sets the current value of the progress bar

Sets or unsets the player in fullscreen mode, when allowed, using the
screenfull.js library.

Sets the 'size' CSS values (max, min and compulsory) to the main div of this skin

Sets/unsets the 'wait' state

Shows a "dialog" panel, useful for displaying information or prompt something to users

Shows a window with clues or help for the current activity

Displays a dialog with a report of the current results achieved by the user.

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

Overwrites the original 'Object.toString' method with a more descriptive text

Updates the invalidated area

Updates the graphic contents of this skin.
This method should be called from module:skins/Skin.Skin#update

Gets the specified Skin from skinStack, or creates a new one if not found.
This function should be used only through Skin.getSkin

Registers a new type of skin

Checks if the provided stylesheet ID is already registered in the root node where the current player is placed