domodule

Domodule is a helper that allows you to create JavaScript modules with minimal effort while keeping code size down. It automatically binds to elements using the data-module attribute.

Installation

``sh
npm install domodule
`

_or_

`sh
yarn add domodule
`

Example usage

`html

Show Title

`

`js
class ExampleModule extends Domodule {
click() {
this.els.title.textContent = this.options.title;
}
}
`

$3

Each module has access to these helper methods.

- find() - Returns an array of matched elements inside of the module.
- findOne() - Returns the first matched element inside of the module.
- findByName() - Alternative to this.els[name].
- getOption() - Returns value of an option (data-module-*).
- setupActions() - Used to bind actions. Useful if the module adds elements in after Domodule inits. Note: Called by default. Calling again wont re-process elements.
- setupNamed() - Same as setupActions() but binds to named elements. Note: Called by default. Calling again wont re-process elements.

$3

- Domodule.getInstance() - Returns an instance of the module.
- Domodule.discover() - Looks for data-module inside of matched elements. Will skip elements already processed. Calling just Domodule.discover() will search for all modules in the body.

$3

Adding data-name= to an element will bind it to this.els..
Adding the same data-name to multiple elements will change this.els. to an Array, sorted in DOM order.

$3

Adding data-action= to an element binds it to click (or optionally data-action-type=). Values can be passed through the event by adding data attributes starting with data-action-.

Create a method in the class matching the name given in the data attribute. Method will be passed: (the element, event object, values)

$3

- this.el - References the module element.
- this.els - Object containing all data-name elements
- this.options - Object containing anything passed in after data-module- (similar to action values).

#### constructor

A constructor method can be used but you will need to call super(el). Constructor method gets el as it's only (and required) parameter. super(el) should be called before your code unless you need to modify core behavior. Element binding happens only when super is called.

$3

A module can pass an array of required options to the super() method. Module will fail to init if any number of the required options are not present. Example: super(el, ['someOption', 'anotherOption'])`

---



_A First + Third Project_