1.4.2 • Published 4 years ago
modujs v1.4.2
Installation
npm install modujs
Why
Just 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.
Usage
Main file
import modular from 'modujs';
import * as modules from './modules';
const app = new modular({
modules: modules
});
app.init(app);
Module example
<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');
}
}
Modules file
export {default as example} from './modules/example';
Objects
Object | Description | Example |
---|---|---|
this.el | The module element. | this.el.classList.add('is-open') |
this.events | The module events. | this.events = { click: 'open' } |
Methods
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) |
Custom methods
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. |
App methods
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. |
Examples
Modal example
<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');
}
}
Call example
<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');
}
}
Accordion example
<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.data('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');
}
}
}
1.4.2
4 years ago
1.4.1
4 years ago
1.4.0
4 years ago
1.3.0
5 years ago
1.2.4
5 years ago
1.2.3
5 years ago
1.2.2
5 years ago
1.2.1
5 years ago
1.2.0
5 years ago
1.1.5
5 years ago
1.1.4
5 years ago
1.1.3
5 years ago
1.1.2
5 years ago
1.1.1
5 years ago
1.1.0
5 years ago
1.0.9
5 years ago
1.0.8
5 years ago
1.0.7
5 years ago
1.0.6
5 years ago
1.0.5
5 years ago
1.0.4
5 years ago
1.0.3
5 years ago
1.0.2
5 years ago
1.0.1
5 years ago
1.0.0
5 years ago