Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/firstandthird/domodule
Declarative DOM module
https://github.com/firstandthird/domodule
Last synced: 3 days ago
JSON representation
Declarative DOM module
- Host: GitHub
- URL: https://github.com/firstandthird/domodule
- Owner: firstandthird
- License: mit
- Created: 2016-03-25T17:17:43.000Z (almost 9 years ago)
- Default Branch: main
- Last Pushed: 2024-07-23T02:13:07.000Z (6 months ago)
- Last Synced: 2025-01-13T05:10:11.762Z (9 days ago)
- Language: TypeScript
- Homepage:
- Size: 1.7 MB
- Stars: 6
- Watchers: 7
- Forks: 4
- Open Issues: 13
-
Metadata Files:
- Readme: readme.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
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;
}
}
```
### Inherited methods
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.
### Static Methods
- `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.
### Named elements
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.
### Actions
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)
### Properties
- `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.
### 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](https://firstandthird.com) Project_