Skin

Extends: module:AWT.Container

Source: Skin.js:55

Modifiers: abstract

This abstract class manages the layout, position ans size of the visual components of JClic:
player window, message box, counters, buttons, status... and also the appearance of the main
container.
The basic implementation of Skin is DefaultSkin.

Constructor

Skin constructor

Parameters

• ps (module:JClicPlayer.JClicPlayer) — The PlayStation (currently a JClicPlayer) used to load and
  realize the media objects needed tot build the Skin.
• name (string, optional, default: null) — The skin name
• options (object, optional) — Optional parameter with additional options

Instance Methods

_getStyleSheets(media: string): string

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

Parameters

• media (string, default: "default") — A specific media size. Possible values are: 'default', 'half' and 'twoThirds'

Returns

• string

attach(player: module:JClicPlayer.JClicPlayer)

Attaches a JClicPlayer object to this Skin

Parameters

• player (module:JClicPlayer.JClicPlayer)

setSkinSizes(full: boolean)

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

Parameters

• full (boolean) — true when the skin is in full screen mode

detach()

Detaches the player element from this Skin

updateContent(dirtyRegion: module:AWT.Rectangle)

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

Parameters

• dirtyRegion (module:AWT.Rectangle) — Specifies the area to be updated. When null, it's the
  whole panel.

resetAllCounters(bEnabled: boolean)

Resets all counters

Parameters

• bEnabled (boolean) — Leave it enabled/disabled

setWaitCursor(status: boolean)

Sets/unsets the 'wait' state

Parameters

• status (boolean) — Whether to set or unset the wait status. When undefined, the
  waitCursorCount member is evaluated to decide if the wait state should be activated or deactivated.

setProgress(val: number, max?: number)

Sets the current value of the progress bar

Parameters

• val (number) — The current value. Should be less or equal than max. When -1, the progress bar will be hidden.
• max (number, optional) — Optional parameter representing the maximum value. When passed, the progress bar will be displayed.

incProgress(val?: number)

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

Parameters

• val (number, optional) — The amount to increment. When not defined, it's 1.

showHelp(_$hlpComponent: external:jQuery)

Shows a window with clues or help for the current activity

Parameters

• _$hlpComponent (external:jQuery) — A JQuery DOM element with the information to be shown.
  It can be a string or number. When null, the help window (if any) must be closed.

showDlg(modal: boolean, options: object): external:Promise

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

Parameters

• modal (boolean) — When true, the dialog should be closed by any click outside the main panel
• options (object) — This object should have two components: main and bottom, both
  containing a jQuery HTML element (or array of elements) to be placed on the main and bottom panels
  of the dialog.

Returns

• external:Promise

enableMainButtons(status: boolean)

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.

Parameters

• status (boolean) — true to make main controls navigable, false otherwise

_closeDlg()

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.

showReports( reporter: module:report/Reporter.Reporter, ): external:Promise

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

Parameters

• reporter (module:report/Reporter.Reporter) — The reporter system currently in use

Returns

• external:Promise

$printReport( reporter: module:report/Reporter.Reporter, ): Array.<external:jQuery>

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

Parameters

• reporter (module:report/Reporter.Reporter) — The reporter system currently in use

Returns

• Array.<external:jQuery>

enableCounter(counter: string, bEnabled: boolean)

Enables or disables a specific counter

Parameters

• counter (string) — Which counter
• bEnabled (boolean) — When true, the counter will be enabled.

doLayout()

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

fit(): module:AWT.Dimension

adjusts the skin to the dimension of its $div container

Returns

• module:AWT.Dimension — the new dimension of the skin

setScreenFull(status: boolean): boolean

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

Parameters

• status (boolean) — Whether to set or unset the player in fullscreen mode. When null
  or undefined, the status toggles between fullscreen and windowed modes.

Returns

• boolean — true if the request was successful, false otherwise.

actionStatusChanged(_action: module:AWT.Action)

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

Parameters

• _action (module:AWT.Action) — The action originating the change event

setEnabled($object: external:jQuery, enabled: boolean)

Enables or disables an object

Parameters

• $object (external:jQuery) — A JQuery DOM element
• enabled (boolean)

equals(skin: module:skins/Skin.Skin): boolean

Overrides: module:AWT.Container#equals

Compares two Skin objects

Parameters

• skin (module:skins/Skin.Skin) — The Skin to compare against this

Returns

• boolean

getMsgBox(): module:boxes/ActiveBox.ActiveBox

Gets the ActiveBox used to display the main messages of activities

Returns

• module:boxes/ActiveBox.ActiveBox

invalidate(rect: module:AWT.Rectangle)

Inherited from module:AWT.Container#invalidate

Overrides: module:AWT.Container#invalidate

Adds the provided rectangle to the invalidated area.

Parameters

• rect (module:AWT.Rectangle)

update()

Inherited from module:AWT.Container#update

Overrides: module:AWT.Container#update

Updates the invalidated area

updateContent(dirtyRegion: module:AWT.Rectangle)

Inherited from module:skins/Skin.Skin#updateContent

Overrides: module:AWT.Container#updateContent

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

Parameters

• dirtyRegion (module:AWT.Rectangle) — Specifies the area to be updated. When null, it's the
  whole panel.

getBounds(): module:AWT.Rectangle

Inherited from module:AWT.Rectangle#getBounds

Overrides: module:AWT.Container#getBounds

Gets the enclosing Rectangle of this Shape.

Returns

• module:AWT.Rectangle

setBounds(rect: module:AWT.Rectangle): module:AWT.Rectangle

Inherited from module:AWT.Rectangle#setBounds

Overrides: module:AWT.Container#setBounds

Sets this Rectangle the position and dimension of another one

Parameters

• rect (module:AWT.Rectangle)

Returns

• module:AWT.Rectangle

clone(): module:AWT.Rectangle

Inherited from module:AWT.Rectangle#clone

Overrides: module:AWT.Container#clone

Clones this Rectangle

Returns

• module:AWT.Rectangle

scaleBy(delta: Point | Dimension): module:AWT.Rectangle

Inherited from module:AWT.Rectangle#scaleBy

Overrides: module:AWT.Container#scaleBy

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

Parameters

• delta (Point | Dimension) — Object containing the X and Y ratio to be scaled.

Returns

• module:AWT.Rectangle

grow(dx: number, dy: number): module:AWT.Rectangle

Inherited from module:AWT.Rectangle#grow

Overrides: module:AWT.Container#grow

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

Parameters

• dx (number) — The amount to grow (or decrease) in horizontal direction
• dy (number) — The amount to grow (or decrease) in vertical direction

Returns

• module:AWT.Rectangle

getOppositeVertex(): module:AWT.Point

Inherited from module:AWT.Rectangle#getOppositeVertex

Overrides: module:AWT.Container#getOppositeVertex

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

Returns

• module:AWT.Point

add(shape: module:AWT.Shape): module:AWT.Rectangle

Inherited from module:AWT.Rectangle#add

Overrides: module:AWT.Container#add

Adds the boundaries of another shape to the current one

Parameters

• shape (module:AWT.Shape) — The module:AWT.Shape to be added

Returns

• module:AWT.Rectangle

getCoords(): string

Inherited from module:AWT.Rectangle#getCoords

Overrides: module:AWT.Container#getCoords

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

Returns

• string

getAttributes(): object

Inherited from module:AWT.Rectangle#getAttributes

Overrides: module:AWT.Container#getAttributes

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

• object

setAttributes(data: object): module:AWT.Rectangle

Inherited from module:AWT.Rectangle#setAttributes

Overrides: module:AWT.Container#setAttributes

Reads the properties of this Rectangle from a data object

Parameters

• data (object) — The data object to be parsed

Returns

• module:AWT.Rectangle

moveBy(delta: Point | Dimension): module:AWT.Shape

Inherited from module:AWT.Shape#moveBy

Overrides: module:AWT.Container#moveBy

Shifts the shape a specified amount in horizontal and vertical directions

Parameters

• delta (Point | Dimension) — The amount to shift the Shape

Returns

• module:AWT.Shape

moveTo(newPos: module:AWT.Point): module:AWT.Shape

Inherited from module:AWT.Shape#moveTo

Overrides: module:AWT.Container#moveTo

Moves this shape to a new position

Parameters

• newPos (module:AWT.Point) — The new position of the shape

Returns

• module:AWT.Shape

getShape(rect: module:AWT.Rectangle): module:AWT.Shape

Inherited from module:AWT.Shape#getShape

Overrides: module:AWT.Container#getShape

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

Parameters

• rect (module:AWT.Rectangle) — The rectangle to be taken as a base for moving and scaling
  this shape.

Returns

• module:AWT.Shape

contains(_p: module:AWT.Point): boolean

Inherited from module:AWT.Shape#contains

Overrides: module:AWT.Container#contains

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

Parameters

• _p (module:AWT.Point) — The point to check

Returns

• boolean

intersects(_r: module:AWT.Rectangle): boolean

Inherited from module:AWT.Shape#intersects

Overrides: module:AWT.Container#intersects

Checks if the provided Rectangle r intersects with this shape.

Parameters

• _r (module:AWT.Rectangle)

Returns

• boolean

fill( ctx: external:CanvasRenderingContext2D, dirtyRegion?: module:AWT.Rectangle, ): external:CanvasRenderingContext2D

Inherited from module:AWT.Shape#fill

Overrides: module:AWT.Container#fill

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

Parameters

• ctx (external:CanvasRenderingContext2D) — The canvas 2D rendering context where to fill this shape.
• dirtyRegion (module:AWT.Rectangle, optional) — The context region to be updated. Used as clipping
  region when drawing.

Returns

• external:CanvasRenderingContext2D

stroke( ctx: external:CanvasRenderingContext2D, ): external:CanvasRenderingContext2D

Inherited from module:AWT.Shape#stroke

Overrides: module:AWT.Container#stroke

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

Parameters

• ctx (external:CanvasRenderingContext2D) — The canvas 2D rendering context where to draw the shape.

Returns

• external:CanvasRenderingContext2D

preparePath( ctx: external:CanvasRenderingContext2D, ): external:CanvasRenderingContext2D

Inherited from module:AWT.Shape#preparePath

Overrides: module:AWT.Container#preparePath

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

• ctx (external:CanvasRenderingContext2D)

Returns

• external:CanvasRenderingContext2D

clip( ctx: external:CanvasRenderingContext2D, fillRule?: string, ): external:CanvasRenderingContext2D

Inherited from module:AWT.Shape#clip

Overrides: module:AWT.Container#clip

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

Parameters

• ctx (external:CanvasRenderingContext2D) — The rendering context
• fillRule (string, optional, default: "'nonzero'") — Can be 'nonzero' (default when not set) or 'evenodd'

Returns

• external:CanvasRenderingContext2D

isRect(): boolean

Inherited from module:AWT.Shape#isRect

Overrides: module:AWT.Container#isRect

Shorthand method for determining if a Shape is an Rectangle

Returns

• boolean

toString(): string

Inherited from module:AWT.Shape#toString

Overrides: module:AWT.Container#toString

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

Returns

• string

updateContent(dirtyRegion: module:AWT.Rectangle)

Inherited from module:skins/Skin.Skin#updateContent

Overrides: module:AWT.Container#updateContent

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

Parameters

• dirtyRegion (module:AWT.Rectangle) — Specifies the area to be updated. When null, it's the
  whole panel.

Static Methods

registerClass( skinName: string, skinClass: function, ): module:skins/Skin.Skin

Registers a new type of skin

Parameters

• skinName (string) — The name used to identify this skin
• skinClass (function) — The skin class, usually extending Skin

Returns

• module:skins/Skin.Skin

registerStyleSheet( skinId: string, ps?: module:JClicPlayer.JClicPlayer, ): boolean

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

Parameters

• skinId (string) — The unique identifier of the skin to check
• ps (module:JClicPlayer.JClicPlayer, optional) — An optional PlayStation (currently a JClicPlayer) used as a base to find the root node

Returns

• boolean

getSkin( skinName: string, ps: module:JClicPlayer.JClicPlayer, options?: object, ): module:skins/Skin.Skin

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

Parameters

• skinName (string, default: "default") — The name of the searched skin
• ps (module:JClicPlayer.JClicPlayer) — The PlayStation (usually a JClicPlayer) used to build the new skin.
• options (object, optional) — Optional parameter with additional options

Returns

• module:skins/Skin.Skin

buildShape(data: object): module:AWT.Shape

Inherited from module:AWT.Shape

Builds a shape based on the provided data object.
Data should contain a 'type' member, specifying the type of shape requested ('rect', 'ellipse', 'rectangle' or 'path')

Parameters

• data (object) — Specific data for this shape

Returns

• module:AWT.Shape

Instance Fields

skinId: string

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

$div: external:jQuery

The HTML div object used by this Skin

$playerCnt: external:jQuery

The HTML div where JClic Player will be placed

name: string

Current name of the skin.

options: object

Specific options of this skin

$waitPanel: external:jQuery

Waiting panel, displayed while loading resources.

$progress: external:jQuery

Graphic indicator of loading progress

currentProgress: number

Current value of the progress bar

maxProgress: number

Max value of the progress bar

$dlgOverlay: external:jQuery

Main panel used to display modal and non-modal dialogs

$dlgMainPanel: external:jQuery

Main panel of dialogs, where relevant information must be placed

$dlgBottomPanel: external:jQuery

Bottom panel of dialogs, used for action buttons

infoHead: external:jQuery

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

$copyBtn: external:jQuery

Iconic button used to copy content to clipboard

$closeDlgBtn: external:jQuery

Iconic button used to close the dialog

$okDlgBtn: external:jQuery

OK dialog button

$cancelDlgBtn: external:jQuery

Cancel dialog button

_dlgOkValue: object

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

_dlgCancelValue: object

Value to be returned in user-canceled dialogs

_isModalDlg: boolean

Flag indicating if the current dialog is modal or not

$reportsPanel: external:jQuery

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

buttons: object

The basic collection of buttons that most skins implement

counters: object

The collection of counters

msgArea: object

The collection of message areas

player: module:JClicPlayer.JClicPlayer

The JClicPlayer object associated to this skin

ps: module:JClicPlayer.JClicPlayer

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

waitCursorCount: number

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

basicCSS: string

Main styles

waitAnimCSS: string

Waiting screen styles

waitImgBig: string

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

waitImgSmall: string

Animated image displayed while loading resources (small)

reportsCSS: string

Reports screen styles

closeDialogIcon: string

Icon for 'close dialog' button

okDialogIcon: string

Icon for 'ok' button

copyIcon: string

Icon for 'copy' button

appLogo: string

JClic logo

invalidatedRect: module:AWT.Rectangle

Inherited from module:AWT.Container#invalidatedRect

Overrides: module:AWT.Container#invalidatedRect

The currently "invalidated" area

type: string

Inherited from module:AWT.Rectangle#type

Overrides: module:AWT.Container#type

Shape type id

dim: module:AWT.Dimension

Inherited from module:AWT.Rectangle#dim

Overrides: module:AWT.Container#dim

The Dimension of the Rectangle

pos: module:AWT.Point

Inherited from module:AWT.Shape#pos

Overrides: module:AWT.Container#pos

The current position of the shape

Static Fields

skinStack: Array.<module:skins/Skin.Skin>

Collection of realized Skin objects.

rootStyles: object

Collection of skin style sheets already registered on the current document

lastId: number

Counter used to label root nodes with unique IDs

CLASSES: object

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