firstandthird
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
npm install domoduleor
yarn add domoduleExample usage
<div data-module="ExampleModule" data-module-title="Example Module">
<div data-name="title"></div>
<button type="button" data-action="click">Show Title</button>
</div>class ExampleModule extends Domodule {
click() {
this.els.title.textContent = this.options.title;
}
}Inherited methods
Each module has access to these helper methods.
find(<selector>)- Returns an array of matched elements inside of the module.findOne(<selector>)- Returns the first matched element inside of the module.findByName(<element name>)- Alternative tothis.els[name].getOption(<option>)- 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 assetupActions()but binds to named elements. Note: Called by default. Calling again wont re-process elements.
Static Methods
Domodule.getInstance(<element>)- Returns an instance of the module.Domodule.discover(<dom node, array of nodes, selector>)- Looks fordata-moduleinside of matched elements. Will skip elements already processed. Calling justDomodule.discover()will search for all modules in the body.
Named elements
Adding data-name=<name> to an element will bind it to this.els.<name>.
Adding the same data-name to multiple elements will change this.els.<name> to an Array<HTMLElement>, sorted in DOM order.
Actions
Adding data-action=<name> to an element binds it to click (or optionally data-action-type=<touch|mouseover|etc>). 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)
Properties
this.el- References the module element.this.els- Object containing alldata-nameelementsthis.options- Object containing anything passed in afterdata-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.
Required options
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