modujs

Dead simple modular JavaScript framework for ES modules.

Usage no npm install needed!

<script type="module">
  import modujs from 'https://cdn.skypack.dev/modujs';
</script>

README

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