zenn v0.9.14

Under development

About

Zenn is a Javascript boilerplate library for web projects that aims to make maintaining and improving any project easy.

Installation

Install with npm:

$ npm install zenn

Modules

The library provides modules that each focus on a single small task. Some modules default export a class, others export multiple objects. These can include a collection of utility functions, or ready-to-use 'singletons' (prototype-linked objects) that often act as an adapter or utility-layer for DOM API's.

ZennCharacterLimiter

import ZennCharacterLimiter from 'zenn/lib/ZennCharacterLimiter';

The Zenn character limiter limits the maximum input length of input[type="text"], input[type="email"] or textarea elements to a given amount of characters.

ZennCharacterLimiter documentation

ZennWordLimiter

import ZennWordLimiter from 'zenn/lib/ZennWordLimiter';

The Zenn word-limiter limits the maximum input length of input[type="text"], input[type="email"] or textarea elements to a given amount of words.

ZennWordLimiter documentation

ZennHistory

import * as ZennHistory from 'zenn/lib/ZennHistory';
// or
import { PUSH, REPLACE } from 'zenn/lib/ZennHistory';

The ZennHistory module provides 2 objects PUSH and REPLACE that share the same API. They operate on the window.history.pushState() and window.history.replaceState() methods respectively. The modules are focused on an approach where you 'patch' the current history state. For instance, you might only want to add new key-value pairs to the existing query-string, and keep all other data of the current entry intact:

ZennHistory.PUSH.assignQuery({ test: 42 });

this will add test=42 to the query-string in a new state (we used the PUSH object).

ZennHistory documentation

ZennStateSwitch

import ZennStateSwitch from 'zenn/lib/ZennStateSwitch';

The ZennStateSwitch allows to synchronize one or multiple HTML elements' classes with a state value from a given array of strings. The switch implements a ReactiveX Observable that emits new states as they are set through the class its API. An array of valid state strings is to be passed to the constructor.

ZennStateSwitch documentation

ZennEmitter

import ZennEmitter from 'zenn/lib/ZennEmitter';

The ZennEmitter class is built on top of ReactiveX JS, and provides a center point for event subscriptions to multiple custom event types.

ZennStateSwitch documentation