modularJS
Dead simple modular JavaScript framework for ES modules.
Installation
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' ) ;
}
}
}