{"id":19142250,"url":"https://github.com/eldoy/haka","last_synced_at":"2025-05-06T23:45:34.372Z","repository":{"id":46904222,"uuid":"216004521","full_name":"eldoy/haka","owner":"eldoy","description":"Functional Javascript HTML and DOM manipulation library","archived":false,"fork":false,"pushed_at":"2023-04-14T12:38:17.000Z","size":464,"stargazers_count":5,"open_issues_count":10,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-19T16:11:34.248Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eldoy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-10-18T11:00:01.000Z","updated_at":"2025-02-02T20:53:08.000Z","dependencies_parsed_at":"2024-11-09T07:29:15.844Z","dependency_job_id":"7fe8f99a-cba2-4bd0-bf87-325bcc230c3f","html_url":"https://github.com/eldoy/haka","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eldoy%2Fhaka","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eldoy%2Fhaka/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eldoy%2Fhaka/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eldoy%2Fhaka/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eldoy","download_url":"https://codeload.github.com/eldoy/haka/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252788404,"owners_count":21804280,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T07:26:32.925Z","updated_at":"2025-05-06T23:45:34.348Z","avatar_url":"https://github.com/eldoy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# HAKA\nFunctional Javascript HTML and DOM manipulation toolkit.\n\nThe whole library is less than 4K minified. Works in all browsers, including IE.\n\n### Install\n`npm i haka`\n\n### Usage\nUse only the functions you need, only `q` is required for most functions.\n```js\n// From NodeJS\nvar { q, qa, esc, raw, css, html, text, attr, time, params, cookie, store, serialize, flash } = require('haka')\n\n// Include directly in your site\n\u003cscript src=\"/dist/haka-min.js\"\u003e\u003c/script\u003e\n```\n\n### Querying\nHaka uses `document.querySelector` and `document.querySelectorAll` behind the scenes.\n```js\n// Get first element from document\nq('#el')\n\n// Get first element from #app\nq('#el', '#app')\n\n// Get all elements from document\nqa('.els')\n\n// Get all elements from #app\nqa('.els', '#app')\n\n// Chaining, apply to one\nq('#el', el =\u003e el.innerHTML = '\u003cspan\u003eHello\u003c/span\u003e')\n\n// Chaining, apply to all\nqa('li', el =\u003e el.innerHTML = '\u003cspan\u003eHello\u003c/span\u003e')\n```\n\n### Escape string\nEscapes string making it safe.\n```js\n// Outputs: \u0026lt;div\u0026gt;hello\u0026lt;/div\u0026gt;\nesc('\u003cdiv\u003eHello\u003c/div\u003e')\n```\n\n### Unescape string\nUnescapes an escaped string.\n```js\n// Outputs: \u003cdiv\u003eHello\u003c/div\u003e\nraw('\u0026lt;div\u0026gt;hello\u0026lt;/div\u0026gt;')\n```\n\n### Text content\nSets and gets the text content of elements.\n```js\n// Insert text into element\ntext('#el', 'Hello')\n\n// Get text from element\ntext('#el')\n```\n\n### HTML content\nSets and gets the HTML content of elements.\n```js\n// Get HTML from element\nhtml('#el')\n\n// Insert HTML into element\nhtml('#el', '\u003cdiv\u003eHello\u003c/div\u003e')\n\n// Insert HTML before element\nhtml('#el', '\u003cdiv\u003eHello\u003c/div\u003e', 'before')\n\n// Insert HTML after element\nhtml('#el', '\u003cdiv\u003eHello\u003c/div\u003e', 'after')\n\n// Insert HTML at top of element\nhtml('#el', '\u003cdiv\u003eHello\u003c/div\u003e', 'top')\n\n// Insert HTML at end of element\nhtml('#el', '\u003cdiv\u003eHello\u003c/div\u003e', 'end')\n\n// Works with HTML elements as well\nhtml(q('button'), '\u003cspan\u003eLoading\u003c/span\u003e')\n```\n\n### CSS\nAdd and remove CSS styles from elements.\n```js\n// Get css value\ncss('#el', 'backgroundColor')\n\n// Replace css values\ncss('#el', 'background-color: yellow; color: red')\n\n// Remove all css values\ncss('#el', '')\n\n// Merge css values\ncss('#el', { backgroundColor: 'yellow', color: null })\n```\n\n### Attributes\nSets and gets the attributes of elements.\n```js\n// Get all attributes\nattr('#app')\n\n// Get specific attribute\nattr('#app', 'class')\n\n// Set attributes\nattr('#app', { class: 'hello', id: 'bye' })\n```\n\n### Time format\nFormats date objects into date strings.\n```js\nvar date = new Date()\n\n// Default language is 'en'\ntime(date)\n\n// Options for language and format\ntime(date, {\n  lang: 'no',\n  day: 'numeric',\n  weekday: 'long',\n  month: 'long',\n  format: '%weekday %day. %Month'\n})\n```\nAll options for [DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) are supported.\n\n### Number format\nFormats numbers based on locale.\n\n```js\nvar number = 100000\n\n// Default language is 'en'\nnum(number)\n\n// Custom language as string\nnum(number, 'no')\n\n// Options for language and format\nnum(number, {\n  lang: 'no',\n  style: 'currency',\n  currency: 'EUR',\n  maximumSignificantDigits: 3\n})\n```\nAll options for [NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) are supported.\n\n\n### Query params\nGet URL query parameters.\n```js\n// Get the id parameter (?id=1)\nparams('id')\n\n// Get parameters by number (/site/name)\nparams(0) // site\nparams(1) // name\n```\n\n### Cookies\nSets, gets and deletes browser cookies.\n```js\n// Get a cookie\ncookie('name')\n\n// Set a cookie, expires in 30 days\ncookie('name', 'hello')\n\n// Set a cookie with expiry in days\ncookie('name', 'hello', { days: 7 })\n\n// Set cookie domain, default is current domain\ncookie('name', 'hello', { domain: 'www.7i.no' })\n\n// Set cookie domain, all subdomains\ncookie('name', 'hello', { domain: '.7i.no' })\n\n// Set cookie path, default is '/'\ncookie('name', 'hello', { path: '/admin' })\n\n// Set cookie with httpOnly and secure options\ncookie('name', 'hello', { httpOnly: 1, secure: 1 })\n\n// Delete a cookie\ncookie('name', null)\n```\n\n### Store\nSets, gets and deletes sessionStorage values.\n```js\n// Get a store value\nstore('name')\n\n// Set a store value\nstore('name', 'hello')\n\n// Delete a store value, returns the previous value if any\nstore('name', null)\n\n// Clear store, delete all values\nstore()\n```\n\n### Form serialization\nCollects values from `\u003cform\u003e` elements.\n```js\n// Serialize form\nvar data = serialize(form)\n```\nThe values will not be included if the input fields are empty or the `name` attribute is missing.\n\nThe input fields have support for types:\n```html\n\u003c!-- Convert the value to number --\u003e\n\u003cinput type=\"number\"\u003e\n\n\u003c!-- The data-type attribute overrides the type attribute --\u003e\n\u003cinput data-type=\"number\"\u003e\n\n\u003c!-- Convert to boolean, true or false --\u003e\n\u003cinput data-type=\"bool\" value=\"true\"\u003e\n\n\u003c!-- Values false, off, 0 and '' becomes false --\u003e\n\u003cinput data-type=\"bool\" value=\"false\"\u003e\n\n\u003c!-- Convert to date object --\u003e\n\u003cinput type=\"date\" data-type=\"date\"\u003e\n```\n\nYou can specify defaults if the value is empty:\n```html\n\u003c!-- Default value is 'hello' --\u003e\n\u003cinput data-default=\"hello\"\u003e\n\n\u003c!-- Default value is empty string: '' --\u003e\n\u003cinput data-default=\"\"\u003e\n\n\u003c!-- Combine with data-type, becomes the number 0 --\u003e\n\u003cinput data-type=\"number\" data-default=\"0\"\u003e\n```\n\n### Flash messages\nDisplays flash message notifications. Depends on the `cookie` function.\n\nThe default id for the container is `flash` and requires an initial opacity of 0. The message will automatically fade out after 5 seconds.\n```html\n\u003cdiv id=\"flash\"\u003eMessages will be displayed here\u003c/div\u003e\n```\n\nRun the `flash` function to display the messages.\n```js\n// Display flash message\nflash('hello')\n\n// With default options\nflash('hello', { el: '#flash', time: 5000, name: 'flash' })\n\n// Prepare flash message on next page load\ncookie('flash', 'hello')\n\n// Display flash message from cookie above\nflash()\n```\n\nMIT licensed. Enjoy!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feldoy%2Fhaka","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feldoy%2Fhaka","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feldoy%2Fhaka/lists"}