skins/EmptySkin. EmptySkin

A minimalist Skin for JClic.js with just the player, without messages, counters nor any button.

Constructor

new EmptySkin(ps, nameopt, optionsopt)

EmptySkin 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>

Optional parameter with additional options

Extends

Members

$cancelDlgBtn :external:jQuery

Cancel dialog button

$closeDlgBtn :external:jQuery

Iconic button used to close the dialog

$copyBtn :external:jQuery

Iconic button used to copy content to clipboard

$div :external:jQuery

The HTML div object used by this Skin

$dlgBottomPanel :external:jQuery

Bottom panel of dialogs, used for action buttons

$dlgMainPanel :external:jQuery

Main panel of dialogs, where relevant information must be placed

$dlgOverlay :external:jQuery

Main panel used to display modal and non-modal dialogs

$okDlgBtn :external:jQuery

OK dialog button

$playerCnt :external:jQuery

The HTML div where JClic Player will be placed

$progress :external:jQuery

Graphic indicator of loading progress

$reportsPanel :external:jQuery

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

$waitPanel :external:jQuery

Waiting panel, displayed while loading resources.

_dlgCancelValue :object

Value to be returned in user-canceled dialogs

Type:
  • object

_dlgOkValue :object

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

Type:
  • object

_isModalDlg :boolean

Flag indicating if the current dialog is modal or not

Type:
  • boolean

JClic logo

Type:
  • string

basicCSS :string

Main styles

Type:
  • string

buttons :object

The basic collection of buttons that most skins implement

Type:
  • object

closeDialogIcon :string

Icon for 'close dialog' button

Type:
  • string

copyIcon :string

Icon for 'copy' button

Type:
  • string

counters :object

The collection of counters

Type:
  • object

currentProgress :number

Current value of the progress bar

Type:
  • number

dim :module:AWT.Dimension

The Dimension of the Rectangle

infoHead :external:jQuery

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

invalidatedRect :module:AWT.Rectangle

The currently "invalidated" area

maxProgress :number

Max value of the progress bar

Type:
  • number

msgArea :object

The collection of message areas

Type:
  • object

name :string

Current name of the skin.

Type:
  • string

okDialogIcon :string

Icon for 'ok' button

Type:
  • string

options :object

Specific options of this skin

Type:
  • object

player :module:JClicPlayer.JClicPlayer

The JClicPlayer object associated to this skin

pos :module:AWT.Point

The current position of the shape

ps :module:JClicPlayer.JClicPlayer

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

reportsCSS :string

Reports screen styles

Type:
  • string

skinCSS :string

Styles used in this skin

Type:
  • string

skinId :string

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

Type:
  • string

type :string

Shape type id

Type:
  • string

waitAnimCSS :string

Waiting screen styles

Type:
  • string

waitCursorCount :number

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

Type:
  • number

waitImgBig :string

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

Type:
  • string

waitImgSmall :string

Animated image displayed while loading resources (small)

Type:
  • string

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

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.

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

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

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

attach(player)

Attaches a JClicPlayer object to this Skin

Parameters:
NameTypeDescription
playermodule:JClicPlayer.JClicPlayer

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

contains(_p) → {boolean}

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

Parameters:
NameTypeDescription
_pmodule:AWT.Point

The point to check

Returns:
Type: 
boolean

detach()

Detaches the player element from this Skin

doLayout()

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

enableCounter(counter, bEnabled)

Enables or disables a specific counter

Parameters:
NameTypeDescription
counterstring

Which counter

bEnabledboolean

When true, the counter will be enabled.

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

equals(skin) → {boolean}

Compares two Skin objects

Parameters:
NameTypeDescription
skinmodule:skins/Skin.Skin

The Skin to compare against this

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.

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

fit() → {module:AWT.Dimension}

adjusts the skin to the dimension of its $div container

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.

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

getBounds() → {module:AWT.Rectangle}

Gets the enclosing Rectangle of this Shape.

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)

Returns:
Type: 
string

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

Gets the ActiveBox used to display the main messages of activities

getOppositeVertex() → {module:AWT.Point}

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

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.

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

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.

intersects(_r) → {boolean}

Checks if the provided Rectangle r intersects with this shape.

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

invalidate(rect)

Adds the provided rectangle to the invalidated area.

Parameters:
NameTypeDescription
rectmodule:AWT.Rectangle

isRect() → {boolean}

Shorthand method for determining if a Shape is an Rectangle

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

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

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

resetAllCounters(bEnabled)

Resets all counters

Parameters:
NameTypeDescription
bEnabledboolean

Leave it enabled/disabled

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

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

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

Sets this Rectangle the position and dimension of another one

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

setEnabled($object, enabled)

Enables or disables an object

Parameters:
NameTypeDescription
$objectexternal:jQuery

A JQuery DOM element

enabledboolean

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.

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.

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

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.

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.

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.

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

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.

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

toString() → {string}

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

Returns:
Type: 
string

update()

Updates the invalidated area