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

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

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();
	}
}

Type: Object Default: {}

Config options that will be used when instance is created

Type: String Default: 'Component'

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

Type: DomElement Default: null

The element the instance has to manage.

Type: Object Default: {}

State definitions in case the element should have some.

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)

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.

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.

Type: PluginManager Default: PluginManager instance

Manages plugins for the component if any (wip)

… EventDispatcher properties

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.

Parameters: none Return: undefined

Empty placeholder function

Parameters: none Return: undefined

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

Parameters: name:String Return: String

Creates a camelCase version of name provided.

Parameters: name:String Return: String

Generates a correct ready css class.

Parameters: tpl:String Return: DomElement

Turns tpl-strings into DomElements

… EventDispatcher methods

Parameters: Event

When the element property has changed successfully.

Parameters: Event

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

• Move the undocumented convert object to a utils file