The widget is most basic of all it is mostly used for layout purpose but it is also the parent class of all others widgets that use almost the same functions.

How to Initialize any Widgets?


To add a widget call AddWidget function from GUIs members that own this function.


Class Details

Functions:


       Initialization & Main Functions

Name

Arguments

Return

Description

Init
  • String: BaseID - HMTL ID defining the position in the DOM of the tab. (Automatically set by AddWidgets).
  • String: RegistryName - Name that define this overlay, all children IDs will start by this.
  • Boolean: DoNotBuildDOM - Used by other widgets when creating the parent (if the children is creating it's own div).

VOID

This function Initialized every part of the viewer (if DoNotBuildDOM is not false): HMTL, CSS, Data, Events, etc...

It will be generated in the defined ID and all HTML IDs used for this  will start by the RegistryName defined in arguments.

Launch
  • None

VOID

Launch all systems required by the this and will call all children launch.



Setters Functions


Name

Arguments

Return

Description

AddLayout
  • LayoutType: Type - Define which layout you want.

Layout

Add add a Layout to this widgets.


Note: By using layout avoid to resize widgets children.

AddWidget
  • WidgetType: Type - Define which widget you want.
  • String: Name - Name of this widgets.

Widgets

Will add a selected children widgets in itself and return it.


Note: The children will always they're IDs starting by the parent name, so time it's not in the same family you can add an identical name.

Destroy
  • None

None

Remove the widget from the DOM.

Clear
  • None

None

Clear all widget data.




Design functions

               Positions and general design:


Name

Arguments

Return

Description

Visible
  • Boolean: IsVisible - Set you want it to appear or disappear.
  • Integer: Fade - Fading time in MS
  • Function: VisCallback - Callback function called when fade is over.

This

Will fade this widget, if no fade speed is set it will be instant.

SetSizePosition
  • Integer - @CSS String: Width - of this widget (based  on parent).
  • Integer - @CSS String: Height - of this widget (based  on parent).
  • Integer - @CSS String: X - (horizontal) of this widget (based  on parent).
  • Integer - @CSS String: Y - (vertical) of this widget (based  on parent).
  • Boolean: FromRight - Set if x has to start from right
  • Boolean: FromBottom - Set if x has to start from bottom

This

Set the size and the position of this widget based on the parent widget.

GetPosition
  • @CSS String: Where - position in CSS

@CSS String

Get the position at specific location (top, left, ...).

GetSize
  • None

Class:

  • w: width
  • h: height

Return the actual size of the widget.

SetPadding
  • String: At - Where to add the padding (Top, Left, Bottom, Right or All).
  • Integer - @CSS String: Value - Size of the padding

This

Add a padding to the widget.

SetMargin
  • String: At - Where to add the padding (Top, Left, Bottom, Right or All).
  • Integer - @CSS String: Value - Size of the margin

This

Add a margin to the widget.

AddVerticalOverflow
  • @CSS String: State - CSS overflow state

This

Set the Vertical overflow of the widget.

AddHorizontalOverflow
  • @CSS String: State - CSS overflow state

This

Set the Horizontal overflow of the widget.

SetRotation
  • Integer: Deg - Degrees of rotation

This

Use the CSS "transform" property to rotate the widget.



               Style:


Name

Arguments

Return

Description

SetBackgroundColor
  • Color: BG - Background Color

This

Change the background color.

SetBackgroundImage
  • String: URL - Image link
  • Function: SBICallback - Callback when the image has been loaded.
  • Boolean: Debug - Set if you need a debug when the image has been loaded.

VOID

Set a background image.

SetBGImageRepeat
  • @Nullable @CSS String: Vertical - repeat CSS property for vertical.
  • @Nullable @CSS String: Vertical - repeat CSS property for Horizontal.

This

Set the background repeat properties, "no-repeat" is set when if null 

SetBGImageSizeAndPosition
  • Integer - @CSS String: Size - CSS background size.
  • Integer - @CSS String: X - CSS position
  • Integer - @CSS String: Y - CSS position 

This

Change setting for the background image.

SetOpacity
  • Float: Opacity - Opacity value [0,1]

None

Change widget opacity.



               Contour:


Name

Arguments

Return

Description

SetBorder
  • String: At - Define which border you want or enter "All" (Can can add more than one - it always start by a capital).
  • @CSS String: Type - CSS border type.
  • Integer - @CSS String: Thickness - CSS border size.
  • Color: Color - Border Color
  • Integer - @CSS String - Class: Thickness - Set the border radius (integer will be same "px" for all). To use the class just send member like: class.top_left.

This

Set a border and also set the border radius.

RemoveOutline
  • None

This

Remove the default outline used by browsers.


Font:


Name

Arguments

Return

Description

SetFontSize
  • Integer - @CSS String : Value - Set the font size based on CSS values.

This

Change the font size.


Interaction:


Name

Arguments

Return

Description

ForceInteraction
  • None

This

When you defined the overlay as not filling the viewport it will no more obstruct the mouse events and widget will not be interactive. But if you want a specific widget have it you can use this function.

AddHoveredEvent
  • Function: funcIn - Function called when mouse enter
  • Function: funcOut  - Function called when mouse leave

VOID

This function will set the events "mouseenter" and "mouseleave".

AddPressedEvent
  • Function: funcIn - Function called when mouse is pressed
  • Function: funcOut  - Function called when mouse is released

VOID

This function will set the events "mousedown" and "mouseup".

Movable
  • Boolean: LockHorizontal
  • Boolean: LockVertical

VOID

If you've set the overlay as movable and you don't want a widget moving either one direction or all, use this function.

trigger
  • String : Trigger - JQuery event name.

VOID

Force trigger a specific event.



Private Details


All private details are usable but its recommended to not use any of those. It might modify the proper functioning of the class.


Variables (Members):


       Main Members

Name

Type

Default Value

Description

id

String

undefined

Global HMTL Id of the viewer (# + name).

registryName

String

undefined

Name of this widget.

basedId

String

undefined

Where it is located is the existing DOM (its parent).

widgetType

WidgetType

WIDGET@

Hold the type of this widget.

layout

Layout

null

Hold this widget layout (if created).


Information

Name

Type

Default Value

Description

position

Class

x: 0 and y: 0 and fromRight: false and fromBottom: false

Hold the actual position of the widget.

horizontalLock

Boolean

true

Used to check if movement is locked horizontally.

verticalLock

Boolean

true

Used to check if movement is locked vertically.

shiftX

Integer

0

Hold the actual shift X

shiftY

Integer

0

Hold the actual shift Y

backgroundImageSize

Integer - @CSS String

100%

Hold the background image size.

AllWidget

Widgets[]

[]

Hold all children Widgets.

lastZIndex

Integer

100

To make sure the Widgets are properly layered we decrement this variable each widgets.

intervals

Integer[]

[]

Hold all animation IDs.


Functions:        

Interaction Functions

Name

Arguments

Return

Description

Shift
  • Integer - @CSS String: ShiftX
  • Integer - @CSS String: ShiftY

None

Used by parent widget or overlay for moving based on a general shift.



Compatibility


LANGUAGE CLASS: Not compatible.

Created with the Personal Edition of HelpNDoc: Produce electronic books easily