Dead simple modular JavaScript framework for ES modules.
npm install modujsJust what's missing from JavaScript to seamlessly work in a modular way with the DOM and ES modules.
- Automatically init visible modules.
- Easily call other modules methods.
- Quickly set scoped events with delegation.
- Simply select DOM elements scoped in their module.
import modular from 'modujs';
import * as modules from './modules';
const app = new modular({
modules: modules
});
app.init(app);<div data-module-example>
<h2>Example</h2>
<button data-example="button">Button</button>
</div>import { module } from 'modujs';
export default class extends module {
constructor(m) {
super(m);
this.events = {
click: {
button: 'doSomething'
}
}
}
doSomething() {
console.log('Hello world');
}
}export {default as example} from './modules/example';| Object | Description | Example |
|---|---|---|
this.el |
The module element. | this.el.classList.add('is-open') |
this.events |
The module events. | this.events = { click: 'open' } |
| Method | Description | Example |
|---|---|---|
this.$('query'[, 'context']) |
Module scoped query selector. | this.$('dropdown', e.currentTarget) |
this.parent('name', 'context') |
Module scoped parent selector. | this.parent('item', e.currentTarget) |
this.call('function', arg, 'module'[, 'id']) |
Call another module method. | this.call('scrollTo', section, 'scroll', 'main') |
this.on('event', 'module', function[, 'id']) |
Listen to another module event. | this.on('select', 'Select', this.changeSomething, 'first') |
this.getData('name'[, 'context']) |
Get module or target data attribute. | this.getData('name', e.currentTarget) |
this.setData('name', 'value'[, 'context']) |
Set module or target data attribute. | this.setData('name', 'value', e.currentTarget) |
| Method | Description |
|---|---|
init() { [...] } |
Automatically called on app init. Use this instead of the constructor, if you want to use the methods above. |
destroy() { [...] } |
Automatically called on app destroy. Use this if you need to destroy anything specific. The events are already destroyed. |
| Method | Description |
|---|---|
this.call('init', 'app') |
Init all modules. |
this.call('update', scope, 'app') |
Update scoped modules. |
this.call('destroy'[, scope], 'app') |
Destroy all or scoped modules. |
<div data-module-modal="one">
<h2 data-modal="text">Modal</h2>
<button data-modal="accept">Ok</button>
<button data-modal="cancel">Cancel</button>
</div>import { module } from 'modujs';
export default class extends module {
constructor(m) {
super(m);
this.events = {
click: {
accept: 'accept',
cancel: 'close'
}
}
}
init() { // Init is called automatically
this.open();
}
open() {
this.el.classlist.add('is-open');
}
accept() {
this.$('text').textContent = 'Thank you!';
this.$('accept').style.display = 'none';
this.$('cancel').textContent = 'Close';
}
close() {
this.el.classlist.remove('is-open');
}
}<div data-module-example>
<button data-example="one">One</button>
<button data-example="all">All</button>
</div>import { module } from 'modujs';
export default class extends module {
constructor(m) {
super(m);
this.events = {
click: {
one: 'openSpecificModal',
all: 'openAllModals'
}
}
}
openSpecificModal() {
this.call('open', false, 'modal', 'one');
}
openAllModals() {
this.call('open', 'modal');
}
}<div data-module-accordion data-accordion-open="true">
<section data-accordion="section">
<header data-accordion="header">
<h2>Title</h2>
</header>
<div data-accordion="main">
<p>Content</p>
</div>
</section>
<section data-accordion="section">
<header data-accordion="header">
<h2>Title</h2>
</header>
<div data-accordion="main">
<p>Content</p>
</div>
</section>
</div>import { module } from 'modujs';
export default class extends module {
constructor(m) {
super(m);
this.events = {
click: {
header: 'toggleSection'
}
}
}
init() {
if (this.getData('open')) {
this.$('section')[0].classList.add('is-open');
}
}
toggleSection(e) {
const target = e.currentTarget;
const section = this.parent('section', target);
const main = this.$('main', target);
if (section.classList.contains('is-open')) {
section.classList.remove('is-open');
} else {
this.$('section.is-open').classList.remove('is-open');
section.classList.add('is-open');
this.call('scrollto', section, 'scroll', 'main');
}
}
}