Component

Dom element wrapper to improve and normalise element management throughout the projects

A class that follows provides a consistent way of creating components inside the MINSKY framework all while instantly providing access to a state manager and a listener manager. Manager instances will only be created the first time they are requested through their getters. Elements can be swapped at runtime using the setter, the class will automatically remove and re-add the css classes so the new component would match the current state of the instance. States and listeners should automatically be removed on destruction leaving no trace of its existence on the element it managed.

Class type: Component

Dependencies

• Event Dispatcher 1.0.0
• DomState manager 1.0.0
• Plugin Manager 1.0.0
• String Utils

Getting started

Component will mostly be extended, as intended to ensure clarity inside the codebase.

export default class CustomComponent extends Component {

	// constructor
	constructor (args, objectName = 'Custom Component') {

		// run super constructor
		super(args, objectName);
	}

	// methods
	destroy() {
		// super destroy
		super.destroy();
	}
}

Constructor Parameters

Args

Type: Object Default: {}

Config options that will be used when instance is created

ObjectName

Type: String Default: 'Component'

Object name that will be used as recognisable identifier and as prefix in logs

Interface

Options

el

Type: DomElement Default: null

The element the instance has to manage.

states

Type: Object Default: {}

State definitions in case the element should have some.

Properties

el

Type: DomElement Default: null

The element the instance has to manage. Is a setter that will add/remove classes when the element changes at runtime (should be avoided as every instance should be bound to its element)

states

Type: DomStateManager Default: DomStateManager

Manager instance that handles the states. Is a getter that will create the instance on first call, so no manager will be created if a component doesn’t have any states.

ready

Type: Boolean Default: false

Sets the ready state of the component. It will add/remove a ready class to the dom element using a camelCase version of the Object Name.

plugins

Type: PluginManager Default: PluginManager instance

Manages plugins for the component if any (wip)

… EventDispatcher properties

Methods

Constructor

Parameters: Args:object, objectName:String Return: Self

Creates the class, sets the element and applies the given state definitions if any. Sets ready to true if construction was successful.

refresh

Parameters: none Return: undefined

Empty placeholder function

Destroy

Parameters: none Return: undefined

Destroys the instance and tries to remove all traces of the element it managed.

getCssClass (exported)

Parameters: name:String Return: String

Creates a camelCase version of name provided.

getReadyClass (exported)

Parameters: name:String Return: String

Generates a correct ready css class.

forceDomEl (exported)

Parameters: tpl:String Return: DomElement

Turns tpl-strings into DomElements

… EventDispatcher methods

Events

elementChange

Parameters: Event

When the element property has changed successfully.

readyStateChange

Parameters: Event

When the component’s ready state is set to true.

To Do

• Move the undocumented convert object to a utils file