HAKA
Functional Javascript HTML and DOM manipulation toolkit.
The whole library is less than 4K minified. Works in all browsers, including IE.
Install
npm i haka
Usage
Use only the functions you need, only q
is required for most functions.
// From NodeJS
var { q, qa, esc, raw, css, html, text, attr, time, params, cookie, store, serialize, flash } = require('haka')
// Include directly in your site
<script src="/dist/haka-min.js"></script>
Querying
Haka uses document.querySelector
and document.querySelectorAll
behind the scenes.
// Get first element from document
q('#el')
// Get first element from #app
q('#el', '#app')
// Get all elements from document
qa('.els')
// Get all elements from #app
qa('.els', '#app')
// Chaining, apply to one
q('#el', el => el.innerHTML = '<span>Hello</span>')
// Chaining, apply to all
qa('li', el => el.innerHTML = '<span>Hello</span>')
Escape string
Escapes string making it safe.
// Outputs: <div>hello</div>
esc('<div>Hello</div>')
Unescape string
Unsescapes an escaped string.
// Outputs: <div>Hello</div>
raw('<div>hello</div>')
Text content
Sets and gets the text content of elements.
// Insert text into element
text('#el', 'Hello')
// Get text from element
text('#el')
HTML content
Sets and gets the HTML content of elements.
// Get HTML from element
html('#el')
// Insert HTML into element
html('#el', '<div>Hello</div>')
// Insert HTML before element
html('#el', '<div>Hello</div>', 'before')
// Insert HTML after element
html('#el', '<div>Hello</div>', 'after')
// Insert HTML at top of element
html('#el', '<div>Hello</div>', 'top')
// Insert HTML at end of element
html('#el', '<div>Hello</div>', 'end')
// Works with HTML elements as well
html(q('button'), '<span>Loading</span>')
CSS
Add and remove CSS styles from elements.
// Get css value
css('#el', 'backgroundColor')
// Replace css values
css('#el', 'background-color: yellow; color: red')
// Remove all css values
css('#el', '')
// Merge css values
css('#el', { backgroundColor: 'yellow', color: null })
Attributes
Sets and gets the attributes of elements.
// Get all attributes
attr('#app')
// Get specific attribute
attr('#app', 'class')
// Set attributes
attr('#app', { class: 'hello', id: 'bye' })
Time format
Formats date objects into date strings.
var date = new Date()
// Default language is 'en'
time(date)
// Options for language and format
time(date, {
lang: 'no',
day: 'numeric',
weekday: 'long',
month: 'long',
format: '%weekday %day. %Month'
})
All options for DateTimeFormat are supported.
Number format
Formats numbers based on locale.
var number = 100000
// Default language is 'en'
num(number)
// Custom language as string
num(number, 'no')
// Options for language and format
num(number, {
lang: 'no',
style: 'currency',
currency: 'EUR',
maximumSignificantDigits: 3
})
All options for NumberFormat are supported.
Query params
Get URL query parameters.
// Get the id parameter (?id=1)
params('id')
// Get parameters by number (/site/name)
params(0) // site
params(1) // name
Cookies
Sets, gets and deletes browser cookies.
// Get a cookie
cookie('name')
// Set a cookie, expires in 30 days
cookie('name', 'hello')
// Set a cookie with expiry in days
cookie('name', 'hello', { days: 7 })
// Set cookie domain, default is current domain
cookie('name', 'hello', { domain: 'www.7i.no' })
// Set cookie domain, all subdomains
cookie('name', 'hello', { domain: '.7i.no' })
// Set cookie path, default is '/'
cookie('name', 'hello', { path: '/admin' })
// Set cookie with httpOnly and secure options
cookie('name', 'hello', { httpOnly: 1, secure: 1 })
// Delete a cookie
cookie('name', null)
Store
Sets, gets and deletes sessionStorage values.
// Get a store value
store('name')
// Set a store value
store('name', 'hello')
// Delete a store value, returns the previous value if any
store('name', null)
// Clear store, delete all values
store()
Form serialization
Collects values from <form>
elements.
// Serialize form
var data = serialize(form)
The values will not be included if the input fields are empty or the name
attribute is missing.
The input fields have support for types:
<!-- Convert the value to number -->
<input type="number">
<!-- The data-type attribute overrides the type attribute -->
<input data-type="number">
<!-- Convert to boolean, true or false -->
<input data-type="bool" value="true">
<!-- Values false, off, 0 and '' becomes false -->
<input data-type="bool" value="false">
<!-- Convert to date object -->
<input type="date" data-type="date">
You can specify defaults if the value is empty:
<!-- Default value is 'hello' -->
<input data-default="hello">
<!-- Default value is empty string: '' -->
<input data-default="">
<!-- Combine with data-type, becomes the number 0 -->
<input data-type="number" data-default="0">
Flash messages
Displays flash message notifications. Depends on the cookie
function.
The default id for the container is flash
and requires an initial opacity of 0. The message will automatically fade out after 5 seconds.
<div id="flash">Messages will be displayed here</div>
Run the flash
function to display the messages.
// Display flash message
flash('hello')
// With default options
flash('hello', { el: '#flash', time: 5000, name: 'flash' })
// Prepare flash message on next page load
cookie('flash', 'hello')
// Display flash message from cookie above
flash()
MIT licensed. Enjoy!