northern v0.0.1-alpha25

Northern

Installation

You can install it using your package manager.

Using npm:

npm i northern

Using yarn:

yarn add northern

Getting started

In your script, you can import Northern by using:

import * as Northern from 'northern';

Or a specific method or class only:

import Select from 'northern/Select';
import html from 'northern/html';

Then, use them in your code:

new Select(document.querySelector('select'));

document.body.appendChild(html('<h1>Welcome</h1>'));

Classes

Select

Select is a library to make Selects beautiful and practical, based on Bootstrap.

To initialize a Select, you just have to call this element in the Select class, with the optional parameters available:

import Select from 'northern/Select';
// Or
import { Select } from 'northern';

new Select(document.querySelector('select'));

new Select(document.querySelector('select', {
    search: true,  // Adds a search bar to filter in the options,
    max: 5         // Display a scroll bar when there are more than 5 options
}));

new Select(document.querySelector('select', {
    search: {
        url: 'https://api.website.com/users',            // URL of our API, the search will add "?q=MySearch" to filter
        headers: {
            'Authorization': 'Bearer xxxxx'              // We can add headers to the query that will be performed
        },
        data: data => ({                                 // "data" is our query response for one item
            key: data.id,                                // We associate the key of our future "option" with the ID of our API result
            value: data.firstName + ' ' + data.lastName  // We associate the value of our future "option" with the full name of our API result
        })
    }
}));

You can also use a function as url:

new Select(document.querySelector('select'), {
    search: value => 'https://api.website.com/users/' + value + '/all'
});

Autogrow

Autogrow is a library to automatically enlarge and shrink a textarea:

new Autogrow(document.querySelector('textarea'));

Button

Button is a library to disable a button and display a loader during processing:

const button = new Button(document.querySelector('button'))

setInterval(() => {
    button.setLoading(!button.isLoading()) // The state of the button is reversed every second
}, 1000)

Functions

html

html is a function to transform a string into an HTML element:

const button = html('<button type="submit" class="btn btn-success">Create</button>');

onClick

onClick is a function to detect the click on any selector, even if it was created after its appearance in the DOM:

onClick('button.btn-success', function() {
    this.disabled = true;

    alert('Clicked!');
});

const button = html('<button type="submit" class="btn btn-success">Create</button>');

document.body.appendChild(button);

wrapAll

wrapAll is a function to wrap several elements by another element:

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

// We create the element that will encompass our items
const parent = document.createElement('div');
parent.classList.add('items');

document.body.appendChild(parent);

// We wrap our items
wrapAll(parent, document.querySelectorAll('.item'));

Result:

<div class="items">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>