ENG / RUS

Muilessium is a front-end framework for simple websites - landings, blogs, etc.

/src/muilessium-ui/

Muilessium-UI is the default set of components for Muilessium.

<script src="https://unpkg.com/muilessium/dist/muilessium.min.js"></script>
/src/muilessium/muilessium.js

Muilessium has one global entry point - window.Muilessium.

It has a number of useful fields:

  • EVENTS - Events observer
  • STORE - Global store for data
  • FACTORY - The main factory of components
  • KEYBOARD, MOUSE, TOUCHPAD - Utilities for controls
  • UTILS - A number of other useful utilities
  • DATA_TYPES - Data types
  • DEPENDENCIES - Some dependencies for internal usage
  • POLYFILLS - Some polyfills for internal usage

Run "console.log(Muilessium)" on this page to see the full structure of it.

A little example of the ajax request:

const _      = Muilessium.UTILS;
const STORE  = Muilessium.STORE;
const EVENTS = Muilessium.EVENTS;

// This can be in the first module...
EVENTS.addEvent('data-updated');

// This can be in the second one...
EVENTS.addEventListener('data-updated', () => {
    console.log(STORE.get('my-data'));
});

// And this can be in th third module...
_.ajax.get('https://...', (responseText) => {
    STORE.set('my-data', responseText);
    EVENTS.fireEvent('data-updated');
});
/src/muilessium/events.js

Muilessium has a system of internal events.

The main methods are:

  • addEvent(name)
  • addEventListener(name, callback, executeIfAlreadyFired=false)
  • fireEvent(name)

It has default events:

  • resize-window
  • resize-window-height
  • resize-window-width
  • scroll
  • scroll-start
  • scroll-end
  • app-initialized
  • images-loaded
  • store-updated

For example:

const EVENTS = Muilessium.EVENTS;

EVENTS.addEvent('my-event');

EVENTS.addEventListener('my-event', (state) => {
    console.log(state);
    console.log('it works!');
});

EVENTS.addEventListener('scroll-start', () => {
    EVENTS.fireEvent('my-event');
});

All UI components have the similar methods to work with their local events.

/src/muilessium/store.js

Muilessium has a global store. It should be used to store different data and share it between components.

The main methods are:

  • set(path, data)
  • get(path)

For example:

const STORE = Muilessium.STORE;

STORE.set('my-data.a', 'AAA');
STORE.set('my-data.b', 'BBB');

console.log(STORE.get('my-data.a') + STORE.get('my-data.b'));
/src/muilessium/factory.js
/src/muilessium/base-component.js

Muilessium has a factory of components.

The main methods are:

  • registerComponent(type, component)
  • create(type, selector, options)

All components should extend the BaseComponent class.

For example:

const FACTORY = Muilessium.FACTORY;

class MyComponent extends FACTORY.BaseComponent {
    constructor(element, options) {
        super(element, options);
        console.log('ok');
    }
}

FACTORY.registerComponent('MyComponent', MyComponent);
FACTORY.create('MyComponent', 'body'); /* <-- we use body just for example */

console.log(FACTORY.componentsCache.MyComponent);

The default set of components is  Muilessium-UI. Examples listed below will use it.

If the main element of component has an ID, previously created component can be obtained using Muilessium.get(componentName, id):

/* Let we have an accordion with id='my-accordion'. */

const accordion = Muilessium.get('Accordion', 'my-accordion');

accordion.unfoldAllItems();

Components can have local events. Their behavior is similar to the main  events observer:

// Let we have a checkbox.

const checkbox = Muilessium.get('Checkbox', 'my-checkbox');

checkbox.addEventListener('update-state', (state) => {
    console.log(state);
});

The BaseComponent have default methods:

  • initAria()
  • initControls()
  • initEvents()
  • addEvent(name)
  • addEventListener(name, callback, executeIfAlreadyFired=false)
  • fireEvent(name)
  • saveState()
  • restoreState()

...and default fields:

  • domCache
  • state
  • savedStates

Use or replace them and keep the structure of the components.

/src/muilessium/controls/keyboard.js
/src/muilessium/controls/mouse.js
/src/muilessium/controls/touchpad.js

Muilessium has a number of handy utilities for controls:

  • MOUSE
    • onClick(element, callback)
    • onMove(element, callback)
    • onMouseOver(element, callback)
    • onMouseOut(element, callback)
  • KEYBOARD
    • onEnterPressed(element, callback)
    • onSpacePressed(element, callback)
    • onEscapePressed(element, callback)
    • onTabPressed(element, callback)
    • onShiftTabPressed(element, callback)
    • onArrowUpPressed(element, callback)
    • onArrowRightPressed(element, callback)
    • onArrowDownPressed(element, callback)
    • onArrowLeftPressed(element, callback)
  • TOUCHPAD
    • onSwipeLeft(element, callback)
    • onSwipeRight(element, callback)
    • onSwipeUp(element, callback)
    • onSwipeDown(element, callback)
    • onPinchOut(element, callback)

For example:

const MOUSE    = Muilessium.MOUSE;
const KEYBOARD = Muilessium.KEYBOARD;
const TOUCHPAD = Muilessium.TOUCHPAD;

MOUSE.onMove(document, (event) => {
    console.log(event);
});
/src/muilessium/utils.js

Muilessium has over 60 utilities:

  • AJAX
    • ajax.post(url, data, successCallback, errorCallback)
    • ajax.postProtected(url, data, callback)
    • ajax.get(url, successCallback, errorCallback)
    • ajax.getProtected(url, callback)
  • WAI-ARIA
    • aria.set(element, property, value)
    • aria.setRole(element, role)
    • aria.removeRole(element)
    • aria.setId(element, id)
    • aria.get(element, property)
    • aria.getRole(element)
    • aria.toggleState(element, state)
  • HTML attributes
    • setAttribute(element, attribute, value)
    • getAttribute(element, attribute, defaultValue)
    • removeAttribute(element, attribute)
  • Checking
    • isNode(element)
    • isInPage(element)
    • isNotInPage(element)
    • ifExists(element, callback)
    • ifNodeList(element, callback)
    • isDescendant(parent, child)
  • CSS classes
    • hasClass(element, class)
    • hasNotClass(element, class)
    • addClass(element, class)
    • addClasses(element, classes)
    • removeClass(element, class)
    • removeClasses(element, classes)
    • replaceClass(element, class, newClass)
    • toggleClass(element, class)
  • Focus & click
    • makeElementFocusable(element)
    • makeElementsFocusable(elementsList)
    • makeElementNotFocusable(element)
    • makeElementsNotFocusable(elementsList)
    • getFocusableChilds(element)
    • getAllFocusableElements()
    • getNextFocusableElement(element)
    • getPreviousFocusableElement(element)
    • goToNextFocusableElement(element)
    • goToPreviousFocusableElement(element)
    • makeElementClickable(element, callback, { mouse, keyboard }
    • makeElementsClickable(element, childs, callback, { mouse, keyboard }
    • onFocus(element, callback)
    • onBlur(element, callback)
    • clearFocus()
  • Scroll
    • scrollTo(element, callback)
    • scrollToTop(callback)
    • scrollFire(element, callback)
  • Viewport
    • isInViewport(element)
    • isAboveViewport(element)
  • Uncategorized
    • normalizeTabIndexes()
    • layLoadImages(callback)
    • initAnchorLinks()
    • generateRandomString(length)
    • stringify(object)
    • extend(target, sources)
    • debounce(func, delay)
    • callOnce(callback)
    • firstOfList(list)
    • lastOfList(list)
    • forEach(list, callback, delay)
    • deepGet(obj, path)
    • deepSet(obj, path, data)
    • toLispCase(str)
    • upperLimit(value, max)
    • lowerLimit(value, min)

For example:

const _ = Muilessium.UTILS;

_.scrollToTop();
/src/muilessium/utils/uncategorized.js

Don't forget to add "noscript" tag for search engines.

<img class="mui-image -js-lazy-load"
    data-src="...."
    data-srcset="...."
    data-sizes="...."
    alt="Lazy loaded image"
    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
<noscript>
    <img class="mui-image" src="..." alt="Same image for better SEO">
</noscript>