Constructor
new GreenSkin(ps, nameopt, optionsopt)
GreenSkin constructor
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
ps | module:JClicPlayer. | The PlayStation (currently a | ||
name | string | <optional> | null | The skin class name |
options | object | <optional> | Optional parameter with additional options |
- Source
Extends
Members
$cancelDlgBtn :external:jQuery
Cancel dialog button
- Source
$closeDlgBtn :external:jQuery
Iconic button used to close the dialog
- Source
$copyBtn :external:jQuery
Iconic button used to copy content to clipboard
- Source
$ctrlCnt :external:jQuery
The HTML div where buttons, counters and message box are placed
- Source
$div :external:jQuery
The HTML div object used by this Skin
- Source
$dlgBottomPanel :external:jQuery
Bottom panel of dialogs, used for action buttons
- Source
$dlgMainPanel :external:jQuery
Main panel of dialogs, where relevant information must be placed
- Source
$dlgOverlay :external:jQuery
Main panel used to display modal and non-modal dialogs
- Source
$okDlgBtn :external:jQuery
OK dialog button
- Source
$playerCnt :external:jQuery
The HTML div where JClic Player will be placed
- Source
$progress :external:jQuery
Graphic indicator of loading progress
- Source
$reportsPanel :external:jQuery
Div inside $dlgOverlay
where JClicPlayer will place the information to be shown
- Source
$waitPanel :external:jQuery
Waiting panel, displayed while loading resources.
- Source
_dlgCancelValue :object
Value to be returned in user-canceled dialogs
- object
- Source
_dlgOkValue :object
Value to be returned by the dialog promise when the presented task is fulfilled
- object
- Source
_isModalDlg :boolean
Flag indicating if the current dialog is modal or not
- boolean
- Source
actionsIcon :string
Actions icon
- string
- Source
appLogo :string
JClic logo
- string
- Source
basicCSS :string
Main styles
- string
- Source
buttons :object
The basic collection of buttons that most skins implement
- object
- Source
closeDialogIcon :string
Icon for 'close dialog' button
- string
- Source
closeIcon :string
Close button
- string
- Source
copyIcon :string
Icon for 'copy' button
- string
- Source
counterIconFill :string
Fill-in color for counters
- string
- Source
counterIconHeight :number
Counter icon height
- number
- Source
counterIconWidth :number
Counter icon width
- number
- Source
counters :object
The collection of counters
- object
- Source
countersHeight :number
Height of counters, in pixels
- number
- Source
countersWidth :number
Width of counters, in pixels
- number
- Source
cssFonts :Array.<string>
Fonts used in this skin
- Array.<string>
- Source
currentProgress :number
Current value of the progress bar
- number
- Source
dim :module:AWT.Dimension
The Dimension
of the Rectangle
fullScreenExitIcon :string
Full screen off icon
- string
- Source
fullScreenIcon :string
Full screen on icon
- string
- Source
iconFill :string
Fill color for icons
- string
- Source
iconHeight :number
Icon height
- number
- Source
iconWidth :number
Icon width
- number
- Source
infoHead :external:jQuery
Element usually used as header in dialogs, with JClic logo, name and version
- Source
infoIcon :string
Info button
- string
- Source
invalidatedRect :module:AWT.Rectangle
The currently "invalidated" area
mainCSS :string
Styles used in this skin
- string
- Source
mainCSSHalf :string
Styles used in this skin, sized to half its regular size
- string
- Source
mainCSSTwoThirds :string
Styles used in this skin, sized to two thirds of its regular size
- string
- Source
margin :number
Space (pixels) between the components of this Skin
- number
- Source
maxProgress :number
Max value of the progress bar
- number
- Source
msgArea :object
The collection of message areas
- object
- Source
msgBoxHeight :number
Height of msgBox
- number
- Source
name :string
Current name of the skin.
- string
- Source
nextIcon :string
Icon for 'next activity' button
- string
- Source
okDialogIcon :string
Icon for 'ok' button
- string
- Source
options :object
Specific options of this skin
- object
- Source
player :module:JClicPlayer.JClicPlayer
The JClicPlayer
object associated to this skin
- Source
pos :module:AWT.Point
The current position of the shape
prevIcon :string
Icon for 'previous activity' button
- string
- Source
ps :module:JClicPlayer.JClicPlayer
The PlayStation
used by this Skin. Usually, the same as player
- Source
reportsCSS :string
Reports screen styles
- string
- Source
reportsIcon :string
Reports button
- string
- Source
scoreIcon :string
Score icon
- string
- Source
skinCSS :string
Styles used in this skin
- string
- Source
timeIcon :string
Time icon
- string
- Source
type :string
Shape type id
- string
waitAnimCSS :string
Waiting screen styles
- string
- Source
waitCursorCount :number
Counter to be incremented or decremented as waitCursor
is requested or released.
- number
- Source
waitImgBig :string
Animated image displayed while loading resources
Based on Ryan Allen's svg-spinner
- string
- Source
waitImgSmall :string
Animated image displayed while loading resources (small)
- string
- Source
Methods
$printReport(reporter) → {Array.<external:jQuery>}
Formats the current report in a DOM tree, ready to be placed in $reportsPanel
Name | Type | Description |
---|---|---|
reporter | module:report/Reporter. | The reporter system currently in use |
- Source
- 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.
- Source
_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.
Name | Type | Default | Description |
---|---|---|---|
media | string | default | A specific media size. Possible values are: 'default', 'half' and 'twoThirds' |
- Source
- Type:
- string
actionStatusChanged(_action)
Method used to notify this skin that a specific action has changed its enabled/disabled status
Name | Type | Description |
---|---|---|
_action | module:AWT. | The action originating the change event |
- Source
add(shape) → {module:AWT.Rectangle}
Adds the boundaries of another shape to the current one
Name | Type | Description |
---|---|---|
shape | module:AWT. | The |
- Type:
- module:AWT.
Rectangle
attach(player)
Attaches a JClicPlayer
object to this Skin
Name | Type | Description |
---|---|---|
player | module:JClicPlayer. |
- Source
clip(ctx, fillRuleopt) → {external:CanvasRenderingContext2D}
Creates a clipping region on the specified HTML canvas 2D rendering context
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
ctx | external:CanvasRenderingContext2D | The rendering context | ||
fillRule | string | <optional> | 'nonzero' | Can be 'nonzero' (default when not set) or 'evenodd' |
- The provided rendering context
clone() → {module:AWT.Rectangle}
Clones this Rectangle
- Type:
- module:AWT.
Rectangle
contains(_p) → {boolean}
Checks if the provided module:AWT.Point
is inside this shape.
Name | Type | Description |
---|---|---|
_p | module:AWT. | The point to check |
- Type:
- boolean
detach()
Detaches the player
element from this Skin
- Source
enableCounter(counter, bEnabled)
Enables or disables a specific counter
Name | Type | Description |
---|---|---|
counter | string | Which counter |
bEnabled | boolean | When |
- 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.
Name | Type | Description |
---|---|---|
status | boolean |
|
- Source
equals(skin) → {boolean}
Compares two Skin objects
Name | Type | Description |
---|---|---|
skin | module:skins/Skin. | The Skin to compare against this |
- Source
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
Name | Type | Attributes | Description |
---|---|---|---|
ctx | external:CanvasRenderingContext2D | The canvas 2D rendering context where to fill this shape. | |
dirtyRegion | module:AWT. | <optional> | The context region to be updated. Used as clipping |
- The provided rendering context
fit() → {module:AWT.Dimension}
adjusts the skin to the dimension of its $div
container
- Source
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.
- The resulting object, with minimal attrributes
- Type:
- object
getBounds() → {module:AWT.Rectangle}
Gets the enclosing Rectangle
of this Shape.
- 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)
- Type:
- string
getMsgBox() → {module:boxes/ActiveBox.ActiveBox}
Gets the ActiveBox
used to display the main messages of activities
- Source
getOppositeVertex() → {module:AWT.Point}
Gets the module:AWT.Point
corresponding to the lower-right vertex of the Rectangle.
- 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.
Name | Type | Description |
---|---|---|
rect | module:AWT. | The rectangle to be taken as a base for moving and scaling |
- Type:
- module:AWT.
Shape
grow(dx, dy) → {module:AWT.Rectangle}
Expands the boundaries of this shape. This affects the current position and dimension.
Name | Type | Description |
---|---|---|
dx | number | The amount to grow (or decrease) in horizontal direction |
dy | number | The amount to grow (or decrease) in vertical direction |
- Type:
- module:AWT.
Rectangle
incProgress(valopt)
Increments the progress bar value by the specified amount, only when the progress bar is running.
Name | Type | Attributes | Description |
---|---|---|---|
val | number | <optional> | The amount to increment. When not defined, it's 1. |
- Source
intersects(_r) → {boolean}
Checks if the provided Rectangle
r
intersects with this shape.
Name | Type | Description |
---|---|---|
_r | module:AWT. |
- Type:
- boolean
invalidate(rect)
Adds the provided rectangle to the invalidated area.
Name | Type | Description |
---|---|---|
rect | module:AWT. |
isRect() → {boolean}
Shorthand method for determining if a Shape is an Rectangle
- Type:
- boolean
moveBy(delta) → {module:AWT.Shape}
Shifts the shape a specified amount in horizontal and vertical directions
Name | Type | Description |
---|---|---|
delta | Point | | The amount to shift the Shape |
- Type:
- module:AWT.
Shape
moveTo(newPos) → {module:AWT.Shape}
Moves this shape to a new position
Name | Type | Description |
---|---|---|
newPos | module:AWT. | The new position of the shape |
- 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.
Name | Type | Description |
---|---|---|
ctx | external:CanvasRenderingContext2D |
- The provided rendering context
resetAllCounters(bEnabled)
Resets all counters
Name | Type | Description |
---|---|---|
bEnabled | boolean | Leave it enabled/disabled |
- Source
scaleBy(delta) → {module:AWT.Rectangle}
Multiplies the dimension of the Shape by the specified delta
amount.
Name | Type | Description |
---|---|---|
delta | Point | | Object containing the X and Y ratio to be scaled. |
- Type:
- module:AWT.
Rectangle
setAttributes(data) → {module:AWT.Rectangle}
Reads the properties of this Rectangle from a data object
Name | Type | Description |
---|---|---|
data | object | The data object to be parsed |
- Type:
- module:AWT.
Rectangle
setBounds(rect) → {module:AWT.Rectangle}
Sets this Rectangle the position and dimension of another one
Name | Type | Description |
---|---|---|
rect | module:AWT. |
- Type:
- module:AWT.
Rectangle
setProgress(val, maxopt)
Sets the current value of the progress bar
Name | Type | Attributes | Description |
---|---|---|---|
val | number | The current value. Should be less or equal than | |
max | number | <optional> | Optional parameter representing the maximum value. When passed, the progress bar will be displayed. |
- Source
setScreenFull(status) → {boolean}
Sets or unsets the player in fullscreen mode, when allowed, using the
screenfull.js library.
Name | Type | Description |
---|---|---|
status | boolean | Whether to set or unset the player in fullscreen mode. When |
- Source
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
Name | Type | Description |
---|---|---|
full | boolean |
|
- Source
setWaitCursor(status)
Sets/unsets the 'wait' state
Name | Type | Description |
---|---|---|
status | boolean | Whether to set or unset the wait status. When |
- Source
showDlg(modal, options) → {external:Promise}
Shows a "dialog" panel, useful for displaying information or prompt something to users
Name | Type | Description |
---|---|---|
modal | boolean | When |
options | object | This object should have two components: |
- Source
- 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
Name | Type | Description |
---|---|---|
_$hlpComponent | external:jQuery | A JQuery DOM element with the information to be shown. |
- Source
showReports(reporter) → {external:Promise}
Displays a dialog with a report of the current results achieved by the user.
Name | Type | Description |
---|---|---|
reporter | module:report/Reporter. | The reporter system currently in use |
- Source
- 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.
Name | Type | Description |
---|---|---|
ctx | external:CanvasRenderingContext2D | The canvas 2D rendering context where to draw the shape. |
- The provided rendering context
toString() → {string}
Overwrites the original 'Object.toString' method with a more descriptive text
- Type:
- string
update()
Updates the invalidated area