Skip to content
/ m Public

Tiny ES6 module template for progressive enhancement

License

Notifications You must be signed in to change notification settings

hatsumatsu/m

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

        __
       /\  \
      |::\  \
      |:|:\  \
    __|:|\:\  \
   /::::|_\:\__\
   \:\~~\  \/__/
    \:\  \
     \:\  \
      \:\__\
       \/__/

Tiny ES6 module template for progressive enhancement.

Installation

npm install @superstructure.net/m

Note: This library comes as es6 module only. If you use a transpiler like babel or swc make sure to include /node_modules/@superstructure.net/m in your transpiler’s config.

Usage

Create your module...

import M from '@superstructure.net/m';

export default class MyModule extends M {
    constructor(mediaQuery) {
        super(mediaQuery);
    }

    onInit() {}

    onResize(viewport, isUIResize) {}

    onDestroy() {}
}

... and use it like

import MyModule from './myModule.js';

new MyModule('( min-width: 800px )');

Classes extended from M are automatically initiated and destroyed based on the provided media query (defaults to screen).

Lifecycle Functions

onInit()
onResize( viewport, isUIResize )

viewport: { width: 0, height: 0, prevWidth: 0, prevHeight: 0, height100vh: 0 }

isUIResize: Boolean indicating whether the resize was triggered by a visibility change of the Browser UI on mobile devices.

onDestroy()

Methods

this.selector( role )

Returns an attribute selector based on the module’s name and the provided role. this.selector( 'content' ) returns [data-MyModule-role="content"]

destroy()

Manually destroy the instance.

Internal properties

this._initiated: Boolean representing the module’s current init state. If true the <html> element has a class of initiated--MyModule.

this._name: The module’s name e.g. MyModule.

this._mediaQuery: The module’s media query.

About

Tiny ES6 module template for progressive enhancement

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published