coherent-gameface-components
v3.3.0
Published
A UI components library for the Web.
Downloads
167
Keywords
Readme
Component library which supports the creation and usage of custom elements. Provides a way to encapsulate a component specific functionality and reuse it. Similar to the Web Components suite. Exports a Components
class that can be instantiated.
Installation
npm i coherent-gameface-components
Usage
Import and instantiate the library
import { Components } from 'coherent-gameface-components';
const components = new Components();
GamefaceComponents.loadResource(component) => Promise
Create and add a script tag with given url.
The loadResource
method is used to load a component's template file. It receives the component as an argument and returns a Promise that resolves with the prepared template. This is usually done in the connectedCallback
:
connectedCallback() {
components.loadResource(this)
.then(this.init)
.catch(err => console.error(err));
}
Kind: instance method of GamefaceComponents Returns: promise - Resolved with the prepared template.
| Param | Type | Description | | --- | --- | --- | | component | CustomElement Instance | Reference to the custom element. |
GamefaceComponents.renderOnce(component) => boolean
Kind: instance method of GamefaceComponents
Returns: boolean - false
if the element was already rendered, true
if it was not.
| Param | Type | Description | | --- | --- | --- | | component | CustomElement instance | Reference to the custom component. |
GamefaceComponents.defineCustomElement(name, element)
Defines a custom element.
Kind: instance method of GamefaceComponents
| Param | Type | Description | | --- | --- | --- | | name | string | The name of the element. | | element | Object | The object which describes the element. |
Exported Classes
BaseComponent
The base component from which all custom elements inherit. Implements all common functionality such as instanceType
getter and setupTemplate
method.
BaseComponent.instanceType => string
Returns the type of the instance as a string literal.
BaseComponent.setupTemplate(data, callback) => void
Sets the template of the component and invokes a given callback when ready.
Kind: instance method of GamefaceComponents Returns: void
| Param | Type | Description | | --- | --- | --- | | data | string | The result from loadResource. | | callback | function | Called when the template is set up. |
Validator
A static class used to validate UI elements. It it the most basic type of validator exported by the components library. Implements the following methods:
Validator.isFormElement(element) => boolean
Checks if the given element is part of a form.
Validator.tooLong() => boolean
Validator.tooShort() => boolean
Validator.rangeOverflow() => boolean
Validator.rangeUnderflow() => boolean
Validator.customError() => boolean
Validator.isBadURL() => boolean
Validator.isBadEmail() => boolean
Empty implementations, always return false
.
Validator.valueMissing(element) => boolean
Checks if the given elements has a required attribute and if its value is missing.
Validator.nameMissing(element) => boolean
Checks if the element has a name attribute.
Validator.isRequired(element) => boolean
Checks if the element has a required attribute.
Validator.willSerialize(element) => boolean
Checks if the element is going to be serialized, if it is valid.
NativeElementValidator
A class that implements the same methods as the Validator
class but overwrites the ones specific to a native HTML element such as an <input>
.
NativeElementValidator.tooLong() => boolean
NativeElementValidator.tooShort() => boolean
NativeElementValidator.rangeOverflow() => boolean
NativeElementValidator.rangeUnderflow() => boolean
NativeElementValidator.isBadURL() => boolean
NativeElementValidator.isBadEmail() => boolean
Checks if the element is native text field and calls the native element's specific implementation of one of the above listed methods. If the element is not native - uses the same named method from the Validator
class.
NativeElementValidator.isFormElement() => boolean
NativeElementValidator.customError() => boolean
NativeElementValidator.nameMissing() => boolean
NativeElementValidator.valueMissing() => boolean
NativeElementValidator.isRequired() => boolean
NativeElementValidator.willSerialize() => boolean
Uses the implementation from the Validator
class.
CustomElementValidator
All components that need validation extend this class. It inherits the BaseComponent making all that extend the CustomElementValidator CustomElement
instances. Uses all validation methods from the Validator
class.
TextFieldValidator
A static class that implements text field specific validation methods:
TextFieldValidator.tooLong(element) => boolean
TextFieldValidator.tooShort(element) => boolean
Check if the value of the text field contains more or less symbols than the value of its maxLength
and minLength
attribute respectively. Returns false
if the element has no maxLength
or minLength
attribute.
Kind: static method of TextFieldValidator Returns: boolean
| Param | Type | Description | | --- | --- | --- | | element | HTMLElement | The text field instance. |
TextFieldValidator.tooShort(element) => boolean
Checks if the value of the text field contains less symbols than the value of its minLength
attribute. Returns false
if the element has no minLength
attribute.
Kind: static method of TextFieldValidator Returns: boolean
| Param | Type | Description | | --- | --- | --- | | element | HTMLElement | The text field instance. |
TextFieldValidator.rangeOverflow(element) => boolean
TextFieldValidator.rangeUnderflow(element) => boolean
Checks if the value of the element is bigger or smaller than its max
or min
attribute respectively. Useful for sliders. Returns false
if the element has no max
or min
attribute.
Kind: static method of TextFieldValidator Returns: boolean
| Param | Type | Description | | --- | --- | --- | | element | HTMLElement | The text field instance. |
TextFieldValidator.isBadURL(element) => boolean
Checks if the text of an element is a valid URL by testing its value against the element's pattern attribute using regular expression matching. Returns false
if the element's type is not 'url' or if it doesn't have a pattern
attribute.
Kind: static method of TextFieldValidator Returns: boolean
| Param | Type | Description | | --- | --- | --- | | element | HTMLElement | The text field instance. |
TextFieldValidator.isBadEmail(element) => boolean
Validates if the value of a text field is a valid email by checking if it contains a @
symbol. Returns false
if the element's type attribute is not email
.
Kind: static method of TextFieldValidator Returns: boolean
| Param | Type | Description | | --- | --- | --- | | element | HTMLElement | The text field instance. |