Zam - JavaScripting

⚡️ A component based library that encourages single-page applications.
Filed under dom › frameworks

About
Repository

Fast - Minimal - Easy

https://codepen.io/roecrew/project/editor/AOVjne#0

https://codepen.io/roecrew/project/editor/ZGkKbq

Overview

Zam is a component-based micro-library (around 1.1KB).

Zam objects can be thought of as components. 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.

Basically Zam can build this.

By essentially doing this.

let uiswitch = new UISwitch();

Under the hood, the UISwitch component has a structure similar to the following.


'use strict';

import Zam from './zam.js';

export default class UISwitch extends Zam {
  constructor() {
    super(
        `component-name`, // The name of the custom component
        `html`,           // The HTML for the component
        elem => {},       // The render function where 'elem' is the component itself. Render is auto called on .append() and .prepend()
        `css`             // The CSS for the component
    );
  }
}

Import

Current Stable Build is 12.1.0

import Zam from "https://cdn.jsdelivr.net/npm/zamjs@12.1.0/zam.min.js"

npm install zamjs@12.1.0

Example

example.js

<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <style>
        body {
            font-family: sans-serif;
        }
    </style>
</head>

<body>
    <script type="module">
        import Zam from "./zam.js";
        import UISwitch from "./uiswitch.js";
        let root = new Zam(`root`);
        let uiswitch = new UISwitch('yellow');
        root.append(uiswitch); // or .prepend()
        document.querySelector('body').appendChild(root);
    </script>
</body>

</html>

uiswitch.js

'use strict';

import Zam from './zam.js';

export default class UISwitch extends Zam {
  constructor(color) {
    super(
      `uiswitch`, `
        <div class="ui-switch">
          <span class="ui-switch-text">
            Off
          </span>
          <div class="ui-switch-circle">
          </div>
        </div>
      `,
      elem => {
        elem.querySelector('.ui-switch-circle').style.backgroundColor = color
        elem
          .querySelector('.ui-switch-circle')
          .addEventListener('click', function() {
            let circleStyle = this.style;
            circleStyle.left === ''
              ? (circleStyle.left = '45px')
              : (circleStyle.left = '');
            let switchStyle = this.parentNode.style;
            switchStyle.backgroundColor === ''
              ? (switchStyle.backgroundColor = 'rgb(76, 218, 99)')
              : (switchStyle.backgroundColor = '');
            let textStyle = this.parentNode.querySelector('.ui-switch-text')
              .style;
            textStyle.left === ''
              ? (textStyle.left = '10px')
              : (textStyle.left = '');
            let textNode = this.parentNode.querySelector('.ui-switch-text');
            textNode.innerText === 'Off'
              ? (textNode.innerText = 'On')
              : (textNode.innerText = 'Off');
        });
      }, `
        .ui-switch {
            position: relative;
            background-color: #d0d2d3;
            margin: 50px;
            padding: 10px;
            width: 60px;
            height: 20px;
            border: none;
            border-radius: 50px;
            text-align: right;
            transition: background-color 0.1s ease-out;
        }

        .ui-switch-circle {
            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, 0.25), 0 4px 11px 0 rgba(0, 0, 0, 0.08),
            -1px 3px 3px 0 rgba(0, 0, 0, 0.14);
            transition: left 0.1s ease-out;
            cursor: pointer;
        }

        .ui-switch-text {
            position: absolute;
            background-color: initial;
            top: 11px;
            left: 45px;
            transition: left 0.1s ease-out;
        }
      `
    );
  }
}

Show All