Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/modularorg/modularjs
△ Dead simple modular JavaScript framework for ES modules.
https://github.com/modularorg/modularjs
babel es6 esmodules framework javascript modular
Last synced: 27 days ago
JSON representation
△ Dead simple modular JavaScript framework for ES modules.
- Host: GitHub
- URL: https://github.com/modularorg/modularjs
- Owner: modularorg
- License: mit
- Created: 2018-05-09T23:32:50.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2021-01-18T13:30:04.000Z (almost 4 years ago)
- Last Synced: 2024-10-10T05:17:17.222Z (27 days ago)
- Topics: babel, es6, esmodules, framework, javascript, modular
- Language: JavaScript
- Homepage:
- Size: 25.4 KB
- Stars: 88
- Watchers: 5
- Forks: 9
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
modularJS
Dead simple modular JavaScript framework for ES modules.
## Installation
```sh
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
```js
import modular from 'modujs';
import * as modules from './modules';
const app = new modular({
modules: modules
});
app.init(app);
```
#### Module example
```html
Example
Button
```
```js
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
```js
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
```html
Modal
Ok
Cancel
```
```js
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
```html
One
All
```
```js
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
```html
Title
Content
Title
Content
```
```js
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');
}
}
}
```