What is Zam?

Zam is a component-based micro (about 3KB) JavaScript Library.

Zam objects can be thought of as components or modules. These components generate a specified structure of elements, which are mounted to the DOM.

By confining/compartmentalizing the DOM elements that make up a structure to a Zam component, we create a cleaner coding environment. Through the process of abstraction, a Zam component hides all but the relevant data — in order to reduce complexity and increase efficiency.

Here’s an example of a Zam Component that creates a UISwitch.

export class UISwitch extends Zam {

   uiSwitchCSS() {
        return {
            'position': 'relative',
            'background-color': '#d0d2d3',
            'margin':'50px',
            'padding':'10px',
            'width': '60px',
            'height':'20px',
            'border':'1px solid clear',
            'border-radius':'50px',
            'text-align':'right',
            'transition':'background-color 0.1s ease-out'
        }
    }

   uiSwitchTextCSS() {
        return {
            'position': 'absolute',
            'top': '11px',
            'left': '45px',
            'transition': 'left 0.1s ease-out'
        }
    }

   uiSwitchCircleCSS() {
        return {
            'position': 'absolute',
            'left': '5px',
            'top': '5px',
            'width': '30px',
            'height': '30px',
            'background-color': 'white',
            'border': '1px solid clear',
            'border-radius': '50px',
            'box-shadow': '0 0 1px 0 rgba(0,0,0,.25), 0 4px 11px 0 rgba(0,0,0,.08), -1px 3px 3px 0 rgba(0,0,0,.14)',
            'transition': 'left 0.1s ease-out'
        }
    }

   constructor() {
        super(`<div class="ui-switch"></div>`);
        this.setCSS(this.uiSwitchCSS());

       this.append(new Zam(`<span class="ui-switch-text">Off</span>`), 'text');
        this['text'].setCSS(this.uiSwitchTextCSS());

       this.append(new Zam(`<div class="ui-switch-circle"></div>`), 'circle');
        this['circle'].setCSS(this.uiSwitchCircleCSS());

       this['circle'].on('click', (function() {
            var textCur =  this['text'].getCSS('left');
            this['text'].setCSS({'left': textCur !== "10px" ? '10px' : "45px"});

           var textCur = this['text'].getInnerHTML();
            textCur === "Off" ? (this['text'].setInnerHTML("On")) : (this['text'].setInnerHTML("Off"));

           var circleCur =  this['circle'].getCSS('left');
            this['circle'].setCSS({'left': circleCur !== "45px" ? '45px' : "5px"});

           var switchCur = this.getCSS('background-color');
            console.log(switchCur);
            this.setCSS({'background-color': switchCur !== "rgb(76, 218, 99)" ? 'rgb(76, 218, 99)' : "#d0d2d3"});
        }.bind(this)));
    }
}

Compartmentalization is occuring in three ways.

1. CSS
2. Events
3. Sub Components.

This code above, when mounted, creates the following component.

The component would be mounted with the following code.

import { UISwitch } from "path-to/ui-switch-component.js";
var uiSwitch = new UISwitch();
uiSwitch.mount('#someID');

zamjs.com

github.com/roecrew/zam