PMX Button:

Intro

Module to add toggling behavior to a button

Getting Started

import EventEmitter from 'eventemitter3';
import button from '../src/pmx-button';
import './main.scss';
 
const emitter = new EventEmitter();
const btn = button();
const btnNode = document.getElementById('button');
const targetEl = document.getElementById('target');
const config = {
  el: btnNode, // Required
  targetEl, // Required
  onClickHandler() { // Technically optional but without this the component is pretty useless
    const isActive = btnNode.classList.contains('is-active');
    if (isActive) {
      btnNode.classList.remove('is-active');
      btnNode.classList.add('is-inactive');
    } else {
      btnNode.classList.remove('is-inactive');
      btnNode.classList.add('is-active');
    }
  },
  onDeactivateHandler() { // Optional. Function that is gonna be executed when the 'deactivate' event
                          // specified bellow is triggered
    btnNode.classList.remove('is-active');
    btnNode.classList.add('is-inactive');
  },
  onActivateHandler() { // Optional. Function that is gonna be executed when the 'activate' event
                        // specified bellow is triggered
    btnNode.classList.add('is-active');
    btnNode.classList.remove('is-inactive');
  },
  events: new Map([ // Optional
    ['activate', 'pmx:activate'], // the button will get activated when this event (along the
                                  // targetEl) gets triggered
    ['deactivate', 'pmx:deactivate'], // the button will get deactivated when this event (along
                                      // the targetEl) gets triggered
  ]),
  css: { // Optional
    classes: new Map([
      ['activated', 'is-active'], // class to be applied to the button when activated
      ['deactivated', 'is-inactive'], // class to be applied to the button when deactivated
    ]),
  },
};
const shared = {
  emitter,
};
btn.init(config, shared);

How to use

Setup

The module is exported as an UMD module so it can be used with AMD, CommonJS, ES Modules and in the browser.

• Install the dependency Using Yarn

yarn add pmx-button

or using NPM

npm install install pmx-button --save

• Include the module

CommonJS

const inert = require('pmx-button').default;

ES2015 modules

import inert from 'pmx-button';

API

.init(config, shared):

Initializes the component.

.stop(config, shared)

Stops the component by removing all added mutations.

Browser Support

• IE 10+
• Chrome
• Firefox
• Safari

Dependencies

• EventEmitter3

This library has been written with some ES2015 features that need to be polyfilled:

• Map
• Object.assign