modularJS

Dead simple modular JavaScript framework for ES modules.

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.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');
        }
    }
}