zamjs v12.1.0
Overview
Zam is a component-based micro-library (around 900 Bytes).
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. Through the process of abstraction, a Zam component hides all but the relevant data — in order to reduce complexity and increase efficiency.
Basically Zam can build this.
By essentially doing this.
let uiswitch = new UISwitch();
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();
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() {
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')
.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;
}
`
);
}
}
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago