npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

coherent-gameface-components

v3.3.0

Published

A UI components library for the Web.

Downloads

157

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. |