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.