skins/CustomSkin. CustomSkin

Custom Skin for JClic.js, built assembling specific cuts of a canvas (usually a PNG file) defined in an XML file

Constructor

new CustomSkin(ps, nameopt, optionsopt)

CustomSkin constructor

Parameters:
NameTypeAttributesDefaultDescription
psmodule:JClicPlayer.JClicPlayer

The PlayStation (currently a JClicPlayer) used to load and
realize the media objects needed tot build the Skin.

namestring<optional>
null

The skin class name

optionsobject<optional>
null

Optional parameter with additional options

Source

Extends

Members

$cancelDlgBtn :external:jQuery

Cancel dialog button

Type:
Overrides
Source

$closeDlgBtn :external:jQuery

Iconic button used to close the dialog

Type:
Overrides
Source

$copyBtn :external:jQuery

Iconic button used to copy content to clipboard

Type:
Overrides
Source

$div :external:jQuery

The HTML div object used by this Skin

Type:
Overrides
Source

$dlgBottomPanel :external:jQuery

Bottom panel of dialogs, used for action buttons

Type:
Overrides
Source

$dlgMainPanel :external:jQuery

Main panel of dialogs, where relevant information must be placed

Type:
Overrides
Source

$dlgOverlay :external:jQuery

Main panel used to display modal and non-modal dialogs

Type:
Overrides
Source

$okDlgBtn :external:jQuery

OK dialog button

Type:
Overrides
Source

$playerCnt :external:jQuery

The HTML div where JClic Player will be placed

Type:
Overrides
Source

$progress :external:jQuery

Graphic indicator of loading progress

Type:
Overrides
Source

$reportsPanel :external:jQuery

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

Type:
Overrides
Source

$waitPanel :external:jQuery

Waiting panel, displayed while loading resources.

Type:
Overrides
Source

_dlgCancelValue :object

Value to be returned in user-canceled dialogs

Type:
  • object
Overrides
Source

_dlgOkValue :object

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

Type:
  • object
Overrides
Source

_isModalDlg :boolean

Flag indicating if the current dialog is modal or not

Type:
  • boolean
Overrides
Source

JClic logo

Type:
  • string
Overrides
Source

basicCSS :string

Main styles

Type:
  • string
Overrides
Source

buttons :object

The basic collection of buttons that most skins implement

Type:
  • object
Overrides
Source

closeDialogIcon :string

Icon for 'close dialog' button

Type:
  • string
Overrides
Source

copyIcon :string

Icon for 'copy' button

Type:
  • string
Overrides
Source

counters :object

The collection of counters

Type:
  • object
Overrides
Source

cssVariants :object

Specifc styles (default, half and twoThirds) computed at run-time,
based on the provided XML file

Type:
  • object
Source

currentProgress :number

Current value of the progress bar

Type:
  • number
Overrides
Source

dim :module:AWT.Dimension

The Dimension of the Rectangle

Type:
Overrides
Source

image :string

The name of the image file to be used as a base of this skin.

Type:
  • string
Source

infoHead :external:jQuery

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

Type:
Overrides
Source

invalidatedRect :module:AWT.Rectangle

The currently "invalidated" area

Type:
Overrides
Source

maxProgress :number

Max value of the progress bar

Type:
  • number
Overrides
Source

msgArea :object

The collection of message areas

Type:
  • object
Overrides
Source

msgKeys :object

Key ids of currently supported buttons, associated with its helper literal

Type:
  • object
Source

name :string

Current name of the skin.

Type:
  • string
Overrides
Source

okDialogIcon :string

Icon for 'ok' button

Type:
  • string
Overrides
Source

options :object

Specific options of this skin

Type:
  • object
Overrides
Source

player :module:JClicPlayer.JClicPlayer

The JClicPlayer object associated to this skin

Type:
Overrides
Source

pos :module:AWT.Point

The current position of the shape

Type:
Overrides
Source

ps :module:JClicPlayer.JClicPlayer

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

Type:
Overrides
Source

reportsCSS :string

Reports screen styles

Type:
  • string
Overrides
Source

skinCSS :string

Styles used in this skin

Type:
  • string
Source

skinId :string

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

Type:
  • string
Overrides
Source

type :string

Shape type id

Type:
  • string
Overrides
Source

waitAnimCSS :string

Waiting screen styles

Type:
  • string
Overrides
Source

waitCursorCount :number

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

Type:
  • number
Overrides
Source

waitImgBig :string

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

Type:
  • string
Overrides
Source

waitImgSmall :string

Animated image displayed while loading resources (small)

Type:
  • string
Overrides
Source

Methods

$printReport(reporter) → {Array.<external:jQuery>}

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

Parameters:
NameTypeDescription
reportermodule:report/Reporter.Reporter

The reporter system currently in use

Overrides
Source
Returns:
  • An array of jQuery objects containing the full report
Type: 
Array.<external:jQuery>

_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.

Overrides
Source

_computeStyleSheets() → {string}

Computes the CSS styles used by this skin in thre moodes: main, half ant twoThirds.
The resulting strings will be stored in cssVariants

Source
Returns:
Type: 
string

_getStyleSheets(media) → {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:
NameTypeDefaultDescription
mediastringdefault

A specific media size. Possible values are: 'default', 'half' and 'twoThirds'

Overrides
Source
Returns:
Type: 
string

actionStatusChanged(_action)

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

Parameters:
NameTypeDescription
_actionmodule:AWT.Action

The action originating the change event

Overrides
Source

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

Overrides
Source
Returns:
Type: 
module:AWT.Rectangle

attach(player)

Attaches a JClicPlayer object to this Skin

Parameters:
NameTypeDescription
playermodule:JClicPlayer.JClicPlayer
Overrides
Source

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'

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

clone() → {module:AWT.Rectangle}

Clones this Rectangle

Overrides
Source
Returns:
Type: 
module:AWT.Rectangle

contains(_p) → {boolean}

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

Parameters:
NameTypeDescription
_pmodule:AWT.Point

The point to check

Overrides
Source
Returns:
Type: 
boolean

detach()

Detaches the player element from this Skin

Overrides
Source

doLayout()

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

Overrides
Source

enableCounter(counter, bEnabled)

Enables or disables a specific counter

Parameters:
NameTypeDescription
counterstring

Which counter

bEnabledboolean

When true, the counter will be enabled.

Overrides
Source

enableMainButtons(status)

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:
NameTypeDescription
statusboolean

true to make main controls navigable, false otherwise

Overrides
Source

equals(skin) → {boolean}

Compares two Skin objects

Parameters:
NameTypeDescription
skinmodule:skins/Skin.Skin

The Skin to compare against this

Overrides
Source
Returns:
  • true if both skins are equivalent.
Type: 
boolean

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.

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

fit() → {module:AWT.Dimension}

adjusts the skin to the dimension of its $div container

Overrides
Source
Returns:

the new dimension of the skin

Type: 
module:AWT.Dimension

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.

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

getBounds() → {module:AWT.Rectangle}

Gets the enclosing Rectangle of this Shape.

Overrides
Source
Returns:
Type: 
module:AWT.Rectangle

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)

Overrides
Source
Returns:
Type: 
string

getMsgBox() → {module:boxes/ActiveBox.ActiveBox}

Gets the ActiveBox used to display the main messages of activities

Overrides
Source
Returns:
Type: 
module:boxes/ActiveBox.ActiveBox

getOppositeVertex() → {module:AWT.Point}

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

Overrides
Source
Returns:
Type: 
module:AWT.Point

getShape(rect) → {module:AWT.Shape}

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

Parameters:
NameTypeDescription
rectmodule:AWT.Rectangle

The rectangle to be taken as a base for moving and scaling
this shape.

Overrides
Source
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

Overrides
Source
Returns:
Type: 
module:AWT.Rectangle

incProgress(valopt)

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

Parameters:
NameTypeAttributesDescription
valnumber<optional>

The amount to increment. When not defined, it's 1.

Overrides
Source

intersects(_r) → {boolean}

Checks if the provided Rectangle r intersects with this shape.

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

invalidate(rect)

Adds the provided rectangle to the invalidated area.

Parameters:
NameTypeDescription
rectmodule:AWT.Rectangle
Overrides
Source

isRect() → {boolean}

Shorthand method for determining if a Shape is an Rectangle

Overrides
Source
Returns:
Type: 
boolean

moveBy(delta) → {module:AWT.Shape}

Shifts the shape a specified amount in horizontal and vertical directions

Parameters:
NameTypeDescription
deltaPoint | Dimension

The amount to shift the Shape

Overrides
Source
Returns:
Type: 
module:AWT.Shape

moveTo(newPos) → {module:AWT.Shape}

Moves this shape to a new position

Parameters:
NameTypeDescription
newPosmodule:AWT.Point

The new position of the shape

Overrides
Source
Returns:
Type: 
module:AWT.Shape

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
Overrides
Source
Returns:
  • The provided rendering context
Type: 
external:CanvasRenderingContext2D

resetAllCounters(bEnabled)

Resets all counters

Parameters:
NameTypeDescription
bEnabledboolean

Leave it enabled/disabled

Overrides
Source

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.

Overrides
Source
Returns:
Type: 
module:AWT.Rectangle

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

Reads the properties of this Rectangle from a data object

Parameters:
NameTypeDescription
dataobject

The data object to be parsed

Overrides
Source
Returns:
Type: 
module:AWT.Rectangle

setBounds(rect) → {module:AWT.Rectangle}

Sets this Rectangle the position and dimension of another one

Parameters:
NameTypeDescription
rectmodule:AWT.Rectangle
Overrides
Source
Returns:
Type: 
module:AWT.Rectangle

setEnabled($object, enabled)

Enables or disables an object

Parameters:
NameTypeDescription
$objectexternal:jQuery

A JQuery DOM element

enabledboolean
Inherited From
Source

setProgress(val, maxopt)

Sets the current value of the progress bar

Parameters:
NameTypeAttributesDescription
valnumber

The current value. Should be less or equal than max. When -1, the progress bar will be hidden.

maxnumber<optional>

Optional parameter representing the maximum value. When passed, the progress bar will be displayed.

Overrides
Source

setScreenFull(status) → {boolean}

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

Parameters:
NameTypeDescription
statusboolean

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

Overrides
Source
Returns:

true if the request was successful, false otherwise.

Type: 
boolean

setSkinSizes(full)

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

Parameters:
NameTypeDescription
fullboolean

true when the skin is in full screen mode

Overrides
Source

setWaitCursor(status)

Sets/unsets the 'wait' state

Parameters:
NameTypeDescription
statusboolean

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.

Overrides
Source

showDlg(modal, options) → {external:Promise}

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

Parameters:
NameTypeDescription
modalboolean

When true, the dialog should be closed by any click outside the main panel

optionsobject

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.

Overrides
Source
Returns:
  • A Promise that will be fulfilled when the dialog is closed.
Type: 
external:Promise

showHelp(_$hlpComponent)

Shows a window with clues or help for the current activity

Parameters:
NameTypeDescription
_$hlpComponentexternal: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.

Overrides
Source

showReports(reporter) → {external:Promise}

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

Parameters:
NameTypeDescription
reportermodule:report/Reporter.Reporter

The reporter system currently in use

Overrides
Source
Returns:
  • The Promise returned by module:skins/Skin.Skin.showDlg.
Type: 
external:Promise

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.

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

toString() → {string}

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

Overrides
Source
Returns:
Type: 
string

update()

Updates the invalidated area

Overrides
Source