@makechtec/cuahuitl

CuahuitlDOM

Validator class

Constructor:

new Validator();

Methods:

isValidElement( element: any) : boolean;

Check if the element is null or undefined, then return false if it is. Else return true.

CuahuitlDOM class

Constructor:

new CuahuitlDOM();

Methods:

findAndThen( query: string, success: any, fail: any ) : any;

Attempt to find a DOM element using the supplied query, if this element is found then it will call the success. Also pass the element as param.

Optionally you can pass a fail callback in case of the element is not found.

isInDOM(query string): boolean;

Check if the element is found in the DOM, then returns a boolean value.

find(query string): HTMLElement | null;

Same as document.querySelector().

nodeByQuery(query string): HTMLElement | null;

Returns a Node object.

Usage

import {CuahuitlDOM} from '@makechtec/cuahuitl';

const dom = new CuahuitlDOM();

dom.findAndThen("#root", (element) => console.log(element.textNode), () => console.log("not found element"));

Node class

Constructor:

new Node(query: string);

The query descriptor.

Methods:

isInDOM(): boolean;

Same as CuahuitlDOM but use the same query descriptor.

getElement();

Same as CuahuitlDOM.find but use the same query descriptor.

Usage

import {Node} from '@makechtec/cuahuitl';

const title = new Node("#title1");

if(title.isInDOM()){
    console.log(title.getElement());
}

Viewport class

Constructor:

new Viewport();
new Viewport( breakpoints: Array<Breakpoint> );

Methods:

addBreakpoint( breakpoint: BreakPoint ): Viewport;

removeBreakpointByName( name: string ): Viewport;

Add or return breakpoints, then returns the same Viewport instance.

currentBreakpoint(): Breakpoint;

Measure the window.innertWidth and returns the breakpoint which corresponds.

Breakpoint class

Constructor:

new Breakpoint();
new Breakpoint(minWidth: number, maxWidth: number, name: string);

As you can see the information is the min and max width in pixels. Also the name to be identified.

Usage

import {Viewport, Breakpoint} from '@makechtec/cuahuitl';

const breakpoints = [
    new Breakpoint( 0, 769, "small" ),
    new Breakpoint( 770, 960, "medium" ),
    new Breakpoint( 961, 2000, "large" )
];

const viewport = new Viewport(breakpoints);

if(viewport.currentBreakpoint().name == "small"){
    console.log("this is mobile");
}

ClassListWrapper

It simply serves as a wrapper for a class list without a target object.

Constructor:

new ClassListWrapper( str: string );

Methods:

classList(): DOMTokenList;

Returns a class list built from the specific string.