custom-belt-lib / Modules / Belt
Module: Belt
Table of contents
Enumerations
Interfaces
Variables
- DefaultBeltBorderColor
- DefaultBeltColor
- MaximumStripeCount
- MinimumStripeCount
- StripePositionDefault
- UniqueIDPrefix
Functions
- combineBeltProps
- generateUniqueId
- getBelt
- getBeltAttributes
- getBeltColorCount
- getBeltProps
- getBeltPropsCheckered
- getBeltPropsCoral
- getBeltPropsCrazy
- getBeltPropsFromBelt
- getBeltPropsRandom
- getBeltPropsSolid
- getBeltPropsSplit
- getBeltPropsStriped
- isValidHexCode
- mapBeltColor
- mapBeltColors
Variables
DefaultBeltBorderColor
• Const DefaultBeltBorderColor: "#434244"
Default border color when no color provided
Defined in
DefaultBeltColor
• Const DefaultBeltColor: "#FF0000"
Default color when no color provided
Defined in
MaximumStripeCount
• Const MaximumStripeCount: 10
Maximum number of stripes a belt may have
Defined in
MinimumStripeCount
• Const MinimumStripeCount: 0
Minimum number of stripes
Defined in
StripePositionDefault
• Const StripePositionDefault: Right = StripePosition.Right
Default stripe position
Defined in
UniqueIDPrefix
• Const UniqueIDPrefix: "custom-belt-"
Default prefix for unique element id
Defined in
Functions
combineBeltProps
▸ combineBeltProps(beltProps): BeltProps[]
Combine multiple BeltProps[] arrays into a single BeltProps[] array
Parameters
| Name | Type | Description |
|---|---|---|
beltProps | BeltProps[][] | array of BeltProp[] arrays to combine |
Returns
combined array of BeltProps[] arrays
Defined in
generateUniqueId
▸ generateUniqueId(): string
Generate unique element id for belt
Returns
string
unique element id
Defined in
getBelt
▸ getBelt(id?, name?, type?, sortOrder?, color1?, color2?, color3?, borderColor?, hasPatch?, patchColor?, patchBorderColor?, hasProfessorPatch?, professorPatchColor?, professorBorderColor?, stripeColor?, stripeCount?, stripePosition?, minStripes?, maxStripes?): Belt
Create new Belt object
Parameters
| Name | Type | Default value | Description |
|---|---|---|---|
id | number | 0 | unique identifier for belt |
name | string | '' | unique name of belt |
type | BeltType | BeltType.Solid | type of belt |
sortOrder | number | 0 | used for sorting belts for display |
color1 | string | '' | hex value for belt color 1 |
color2 | string | '' | hex value for belt color 2 |
color3 | string | '' | hex value for belt color 3 |
borderColor | string | '' | hex value for belt border color |
hasPatch | boolean | false | whether belt has patch or not |
patchColor | string | '' | hex value for patch color |
patchBorderColor | string | '' | hex value for patch border color |
hasProfessorPatch | boolean | false | whether belt has professor patch or not |
professorPatchColor | string | '' | hex value for professor patch color |
professorBorderColor | string | '' | hex value for professor patch border color |
stripeColor | string | '' | hex value for stripe color |
stripeCount | number | 0 | number of stripes for belt [0-10] |
stripePosition | StripePosition | StripePositionDefault | starting position of stripes on belt |
minStripes | number | MinimumStripeCount | minimum number of stripes for belt |
maxStripes | number | MaximumStripeCount | maximum number of stripes for belt |
Returns
Belt object
Defined in
getBeltAttributes
▸ getBeltAttributes(id?, width?, styles?, classes?): BeltAttributes
Create new BeltAttributes object
Parameters
| Name | Type | Default value | Description |
|---|---|---|---|
id | null | string | null | element id for belt SVG |
width | null | string | null | width of belt SVG |
styles | null | string | null | additional style elements for belt SVG |
classes | null | string | null | classes for belt SVG |
Returns
Belt object
Defined in
getBeltColorCount
▸ getBeltColorCount(beltType): number
Get number of colors in BeltType [1-3]
Parameters
| Name | Type | Description |
|---|---|---|
beltType | BeltType | BeltType to lookup color count |
Returns
number
number of colors in beltType
Defined in
getBeltProps
▸ getBeltProps(name, beltType, color1, color2, color3, id?, borderColor?, hasPatch?, patchColor?, patchBorderColor?, hasProfessorPatch?, professorPatchColor?, professorBorderColor?, stripeColor?, stripeCount?, stripePosition?, minStripes?, maxStripes?, transitionCSS?, refreshInterval?, callback?): BeltProps[]
Create new BeltProps[] array
Parameters
| Name | Type | Default value | Description |
|---|---|---|---|
name | string | undefined | unique name of belt |
beltType | BeltType | undefined | type of belt |
color1 | string | undefined | hex value for belt color 1 |
color2 | string | undefined | hex value for belt color 2 |
color3 | string | undefined | hex value for belt color 3 |
id | number | 0 | unique identifier for belt |
borderColor | string | DefaultBeltBorderColor | hex value for belt border color |
hasPatch | boolean | true | whether belt has patch or not |
patchColor | string | '#000000' | hex value for patch color |
patchBorderColor | string | '' | hex value for patch border color |
hasProfessorPatch | boolean | false | whether belt has professor patch or not |
professorPatchColor | string | '' | hex value for professor patch color |
professorBorderColor | string | '' | hex value for professor patch border color |
stripeColor | string | '' | hex value for stripe color |
stripeCount | number | 0 | number of stripes for belt [0-10] |
stripePosition | StripePosition | StripePosition.Right | starting position of stripes on belt |
minStripes | number | 0 | minimum number of stripes for belt |
maxStripes | number | 10 | maximum number of stripes for belt |
transitionCSS | string | '' | CSS for transition animation |
refreshInterval | number | 0 | interval for refreshing belt in milliseconds |
callback? | (callbackType: BeltCallbackType, belt: BeltProps, event: null | Event) => void | undefined | callback function to call after belt actions |
Returns
BeltProps[] array
Defined in
getBeltPropsCheckered
▸ getBeltPropsCheckered(name, color1, color2, id?, borderColor?, hasPatch?, patchColor?, patchBorderColor?, hasProfessorPatch?, professorPatchColor?, professorBorderColor?, stripeColor?, stripeCount?, stripePosition?, minStripes?, maxStripes?, transitionCSS?, refreshInterval?, callback?): BeltProps[]
Create new Checkered BeltProps[] array
Parameters
| Name | Type | Default value | Description |
|---|---|---|---|
name | string | undefined | unique name of belt |
color1 | string | undefined | hex value for belt color 1 |
color2 | string | undefined | hex value for belt color 2 |
id | number | 0 | unique identifier for belt |
borderColor | string | DefaultBeltBorderColor | hex value for belt border color |
hasPatch | boolean | true | whether belt has patch or not |
patchColor | string | '#000000' | hex value for patch color |
patchBorderColor | string | '' | hex value for patch border color |
hasProfessorPatch | boolean | false | whether belt has professor patch or not |
professorPatchColor | string | '' | hex value for professor patch color |
professorBorderColor | string | '' | hex value for professor patch border color |
stripeColor | string | '' | hex value for stripe color |
stripeCount | number | 0 | number of stripes for belt [0-10] |
stripePosition | StripePosition | StripePosition.Right | starting position of stripes on belt |
minStripes | number | 0 | minimum number of stripes for belt |
maxStripes | number | 10 | maximum number of stripes for belt |
transitionCSS | string | '' | CSS for transition animation |
refreshInterval | number | 0 | interval for refreshing belt in milliseconds |
callback? | (callbackType: BeltCallbackType, belt: BeltProps, event: null | Event) => void | undefined | callback function to call after belt actions |
Returns
BeltProps[] array
Defined in
getBeltPropsCoral
▸ getBeltPropsCoral(name, color1, color2, id?, borderColor?, hasPatch?, patchColor?, patchBorderColor?, hasProfessorPatch?, professorPatchColor?, professorBorderColor?, stripeColor?, stripeCount?, stripePosition?, minStripes?, maxStripes?, transitionCSS?, refreshInterval?, callback?): BeltProps[]
Create new Coral BeltProps[] array
Parameters
| Name | Type | Default value | Description |
|---|---|---|---|
name | string | undefined | unique name of belt |
color1 | string | undefined | hex value for belt color 1 |
color2 | string | undefined | hex value for belt color 2 |
id | number | 0 | unique identifier for belt |
borderColor | string | DefaultBeltBorderColor | hex value for belt border color |
hasPatch | boolean | true | whether belt has patch or not |
patchColor | string | '#000000' | hex value for patch color |
patchBorderColor | string | '' | hex value for patch border color |
hasProfessorPatch | boolean | false | whether belt has professor patch or not |
professorPatchColor | string | '' | hex value for professor patch color |
professorBorderColor | string | '' | hex value for professor patch border color |
stripeColor | string | '' | hex value for stripe color |
stripeCount | number | 0 | number of stripes for belt [0-10] |
stripePosition | StripePosition | StripePosition.Right | starting position of stripes on belt |
minStripes | number | 0 | minimum number of stripes for belt |
maxStripes | number | 10 | maximum number of stripes for belt |
transitionCSS | string | '' | CSS for transition animation |
refreshInterval | number | 0 | interval for refreshing belt in milliseconds |
callback? | (callbackType: BeltCallbackType, belt: BeltProps, event: null | Event) => void | undefined | callback function to call after belt actions |
Returns
BeltProps[] array
Defined in
getBeltPropsCrazy
▸ getBeltPropsCrazy(borderColor?, hasPatch?, patchColor?, patchBorderColor?, hasProfessorPatch?, professorPatchColor?, professorBorderColor?, stripeCount?, stripePosition?, transitionCSS?, refreshInterval?, callback?): BeltProps[]
Create new Crazy BeltProps[] array
Parameters
| Name | Type | Default value | Description |
|---|---|---|---|
borderColor | string | DefaultBeltBorderColor | hex value for belt border color |
hasPatch | boolean | true | whether belt has patch or not |
patchColor | string | '#000000' | hex value for patch color |
patchBorderColor | string | '' | hex value for patch border color |
hasProfessorPatch | boolean | false | whether belt has professor patch or not |
professorPatchColor | string | '' | hex value for professor patch color |
professorBorderColor | string | '' | hex value for professor patch border color |
stripeCount | number | 0 | number of stripes for belt [0-10] |
stripePosition | StripePosition | StripePosition.Right | starting position of stripes on belt |
transitionCSS | string | '' | CSS for transition animation |
refreshInterval | number | 0 | interval for refreshing belt in milliseconds |
callback? | (callbackType: BeltCallbackType, belt: BeltProps, event: null | Event) => void | undefined | callback function to call after belt actions |
Returns
BeltProps[] array
Defined in
getBeltPropsFromBelt
▸ getBeltPropsFromBelt(belt, stripeCount?, stripePosition?, transitionCSS?, refreshInterval?, callback?): BeltProps
Create new BeltProps[] array from Belt object
Parameters
| Name | Type | Default value | Description |
|---|---|---|---|
belt | Belt | undefined | Belt object to create BeltProps[] array from |
stripeCount | number | 0 | number of stripes for belt [0-10] |
stripePosition? | StripePosition | StripePositionDefault | starting position of stripes on belt patch |
transitionCSS | string | '' | CSS for transition animation |
refreshInterval | number | 0 | interval in milliseconds before displaying next belt |
callback? | (callbackType: BeltCallbackType, belt: BeltProps, event: null | Event) => void | undefined | callback function to call after belt actions |
Returns
BeltProps[] array
Defined in
getBeltPropsRandom
▸ getBeltPropsRandom(hasPatch?, hasProfessorPatch?, stripeCount?, stripePosition?, transitionCSS?, includeBelts?, refreshInterval?, callback?): BeltProps[]
Create new random BeltProps[] array
Parameters
| Name | Type | Description |
|---|---|---|
hasPatch? | boolean | whether belt has a patch |
hasProfessorPatch? | boolean | whether belt has a professor patch |
stripeCount? | number | number of stripes for belt [0-10] |
stripePosition? | StripePosition | starting position of streips on belt patch |
transitionCSS? | string | CSS for transition animation |
includeBelts? | BeltType[] | array of BeltTyps to include in random selection |
refreshInterval? | number | interval in milliseconds before displaying next belt |
callback? | (callbackType: BeltCallbackType, belt: BeltProps, event: null | Event) => void | callback function to call after belt actions |
Returns
Belt object
Defined in
getBeltPropsSolid
▸ getBeltPropsSolid(name, color, id?, borderColor?, hasPatch?, patchColor?, patchBorderColor?, hasProfessorPatch?, professorPatchColor?, professorBorderColor?, stripeColor?, stripeCount?, stripePosition?, minStripes?, maxStripes?, transitionCSS?, refreshInterval?, callback?): BeltProps[]
Create new Solid BeltProps[] array
Parameters
| Name | Type | Default value | Description |
|---|---|---|---|
name | string | undefined | unique name of belt |
color | string | undefined | hex value for belt color 1 |
id | number | 0 | unique identifier for belt |
borderColor | string | DefaultBeltBorderColor | hex value for belt border color |
hasPatch | boolean | true | whether belt has patch or not |
patchColor | string | '#000000' | hex value for patch color |
patchBorderColor | string | '' | hex value for patch border color |
hasProfessorPatch | boolean | false | whether belt has professor patch or not |
professorPatchColor | string | '' | hex value for professor patch color |
professorBorderColor | string | '' | hex value for professor patch border color |
stripeColor | string | '' | hex value for stripe color |
stripeCount | number | 0 | number of stripes for belt [0-10] |
stripePosition | StripePosition | StripePosition.Right | starting position of stripes on belt |
minStripes | number | 0 | minimum number of stripes for belt |
maxStripes | number | 10 | maximum number of stripes for belt |
transitionCSS | string | '' | CSS for transition animation |
refreshInterval | number | 0 | interval for refreshing belt in milliseconds |
callback? | (callbackType: BeltCallbackType, belt: BeltProps, event: null | Event) => void | undefined | callback function to call after belt actions |
Returns
BeltProps[] array
Defined in
getBeltPropsSplit
▸ getBeltPropsSplit(name, color1, color2, id?, borderColor?, hasPatch?, patchColor?, patchBorderColor?, hasProfessorPatch?, professorPatchColor?, professorBorderColor?, stripeColor?, stripeCount?, stripePosition?, minStripes?, maxStripes?, transitionCSS?, refreshInterval?, callback?): BeltProps[]
Create new Split BeltProps[] array
Parameters
| Name | Type | Default value | Description |
|---|---|---|---|
name | string | undefined | unique name of belt |
color1 | string | undefined | hex value for belt color 1 |
color2 | string | undefined | hex value for belt color 2 |
id | number | 0 | unique identifier for belt |
borderColor | string | DefaultBeltBorderColor | hex value for belt border color |
hasPatch | boolean | true | whether belt has patch or not |
patchColor | string | '#000000' | hex value for patch color |
patchBorderColor | string | '' | hex value for patch border color |
hasProfessorPatch | boolean | false | whether belt has professor patch or not |
professorPatchColor | string | '' | hex value for professor patch color |
professorBorderColor | string | '' | hex value for professor patch border color |
stripeColor | string | '' | hex value for stripe color |
stripeCount | number | 0 | number of stripes for belt [0-10] |
stripePosition | StripePosition | StripePosition.Right | starting position of stripes on belt |
minStripes | number | 0 | minimum number of stripes for belt |
maxStripes | number | 10 | maximum number of stripes for belt |
transitionCSS | string | '' | CSS for transition animation |
refreshInterval | number | 0 | interval for refreshing belt in milliseconds |
callback? | (callbackType: BeltCallbackType, belt: BeltProps, event: null | Event) => void | undefined | callback function to call after belt actions |
Returns
BeltProps[] array
Defined in
getBeltPropsStriped
▸ getBeltPropsStriped(name, color1, color2, color3, id?, borderColor?, hasPatch?, patchColor?, patchBorderColor?, hasProfessorPatch?, professorPatchColor?, professorBorderColor?, stripeColor?, stripeCount?, stripePosition?, minStripes?, maxStripes?, transitionCSS?, refreshInterval?, callback?): BeltProps[]
Create new Striped BeltProps[] array
Parameters
| Name | Type | Default value | Description |
|---|---|---|---|
name | string | undefined | unique name of belt |
color1 | string | undefined | hex value for belt color 1 |
color2 | string | undefined | hex value for belt color 2 |
color3 | string | undefined | hex value for belt color 3 |
id | number | 0 | unique identifier for belt |
borderColor | string | DefaultBeltBorderColor | hex value for belt border color |
hasPatch | boolean | true | whether belt has patch or not |
patchColor | string | '#000000' | hex value for patch color |
patchBorderColor | string | '' | hex value for patch border color |
hasProfessorPatch | boolean | false | whether belt has professor patch or not |
professorPatchColor | string | '' | hex value for professor patch color |
professorBorderColor | string | '' | hex value for professor patch border color |
stripeColor | string | '' | hex value for stripe color |
stripeCount | number | 0 | number of stripes for belt [0-10] |
stripePosition | StripePosition | StripePosition.Right | starting position of stripes on belt |
minStripes | number | 0 | minimum number of stripes for belt |
maxStripes | number | 10 | maximum number of stripes for belt |
transitionCSS | string | '' | CSS for transition animation |
refreshInterval | number | 0 | interval for refreshing belt in milliseconds |
callback? | (callbackType: BeltCallbackType, belt: BeltProps, event: null | Event) => void | undefined | callback function to call after belt actions |
Returns
BeltProps[] array
Defined in
isValidHexCode
▸ isValidHexCode(input): boolean
Check for valid color hex code (must begin with # and then 3 or 6 valid hex characters)
RegEx: /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/
Example JavaScript Usage:
isValidHexCode("#1AFFa1"); // returns true
isValidHexCode("#F00"); // returns true
isValidHexCode("123456"); // returns false (does not begin with #)
isValidHexCode("#123abce"); // returns false (too long)
isValidHexCode("#afafah"); // returns false (contains invalid character)Parameters
| Name | Type | Description |
|---|---|---|
input | string | string to validate |
Returns
boolean
true if valid color hex code, false otherwise
Defined in
mapBeltColor
▸ mapBeltColor(color, colors): string
Return hex code from BeltColor[] for color name
Parameters
| Name | Type | Description |
|---|---|---|
color | string | color name to lookup |
colors | BeltColor[] | BeltColor[] lookup array |
Returns
string
found hex code or original color name
Defined in
mapBeltColors
▸ mapBeltColors(belts, colors): void
Map all belt color names in all Belt array object to hex codes
Parameters
| Name | Type | Description |
|---|---|---|
belts | Belt[] | belt object |
colors | BeltColor[] | BeltColor[] lookup array |
Returns
void