π Complete API Reference
Comprehensive reference for all OnigiriJS methods, properties, and options.
Core API
Onigiri(selector, context)
Main constructor for selecting and manipulating DOM elements.
Onigiri(selector: string | Element | NodeList, context?: Element) β Onigiri
Examples:
O('.button')
O('#container')
O(element)
O('.item', container)
O
Shorthand alias for Onigiri constructor.
O === Onigiri // true
DOM Manipulation
.each(callback)
.each(callback: (element, index) => void) β Onigiri
.on(event, [selector], handler)
.on(event: string, selector?: string, handler: Function) β Onigiri
.off(event, handler)
.off(event: string, handler?: Function) β Onigiri
.trigger(event, data)
.trigger(event: string, data?: any) β Onigiri
.addClass(className)
.addClass(className: string) β Onigiri
.removeClass(className)
.removeClass(className: string) β Onigiri
.toggleClass(className)
.toggleClass(className: string) β Onigiri
.hasClass(className)
.hasClass(className: string) β boolean
.attr(name, [value])
.attr(name: string, value?: string) β string | Onigiri
.removeAttr(name)
.removeAttr(name: string) β Onigiri
.data(key, [value])
.data(key: string, value?: any) β any | Onigiri
.html([content])
.html(content?: string) β string | Onigiri
.text([content])
.text(content?: string) β string | Onigiri
.val([value])
.val(value?: string) β string | Onigiri
.css(property, [value])
.css(property: string | object, value?: string) β string | Onigiri
.show()
.show() β Onigiri
.hide()
.hide() β Onigiri
.append(content)
.append(content: string | Element) β Onigiri
.prepend(content)
.prepend(content: string | Element) β Onigiri
.remove()
.remove() β Onigiri
.empty()
.empty() β Onigiri
.find(selector)
.find(selector: string) β Onigiri
.parent()
.parent() β Onigiri
.children()
.children() β Onigiri
.siblings()
.siblings() β Onigiri
Component API
new Onigiri.Component(config)
Component(config: ComponentConfig) β Component
Config Options:
interface ComponentConfig {
data?: object,
methods?: object,
computed?: object,
watchers?: object,
template?: string | function,
beforeCreate?: function,
created?: function,
beforeMount?: function,
mounted?: function,
beforeUpdate?: function,
updated?: function,
beforeDestroy?: function,
destroyed?: function
}
component.mount(selector)
mount(selector: string | Element) β Component
component.destroy()
destroy() β void
component.$el
$el: Element
Event Emitter API
new Onigiri.EventEmitter()
EventEmitter() β EventEmitter
emitter.on(event, handler, [namespace])
on(event: string, handler: Function, namespace?: string) β EventEmitter
emitter.once(event, handler, [namespace])
once(event: string, handler: Function, namespace?: string) β EventEmitter
emitter.off(event, [handler], [namespace])
off(event?: string, handler?: Function, namespace?: string) β EventEmitter
emitter.emit(event, ...args)
emit(event: string, ...args: any[]) β EventEmitter
Security API
Onigiri.security.init(options)
init(options?: SecurityOptions) β Security
Options:
interface SecurityOptions {
csrfToken?: string,
csrfHeader?: string,
csrfParam?: string,
csrfMetaName?: string,
cspNonce?: string,
autoInjectCSRF?: boolean
}
Onigiri.security.getToken()
getToken() β string
Onigiri.security.setToken(token)
setToken(token: string) β Security
Onigiri.security.getNonce()
getNonce() β string
Onigiri.security.setNonce(nonce)
setNonce(nonce: string) β Security
Onigiri.security.addCSRFToHeaders(headers)
addCSRFToHeaders(headers: object) β object
Onigiri.security.addCSRFToData(data)
addCSRFToData(data: object | FormData) β object | FormData
Onigiri.security.addCSRFToForm(form)
addCSRFToForm(form: HTMLFormElement) β void
Onigiri.security.createScript(src, [onload])
createScript(src: string, onload?: Function) β HTMLScriptElement
Onigiri.security.createStyle(content)
createStyle(content: string) β HTMLStyleElement
Onigiri.security.executeScript(code)
executeScript(code: string) β void
Onigiri.security.sanitizeHTML(html)
sanitizeHTML(html: string) β string
Onigiri.security.escapeHTML(str)
escapeHTML(str: string) β string
Onigiri.security.isValidURL(url)
isValidURL(url: string) β boolean
Onigiri.security.isSameOrigin(url)
isSameOrigin(url: string) β boolean
AJAX API
Onigiri.ajax(options)
ajax(options: AjaxOptions) β Promise
Options:
interface AjaxOptions {
url: string,
method?: string,
headers?: object,
data?: any, // object β JSON body. FormData/URLSearchParams/Blob
// are passed through untouched (browser sets its
// own Content-Type, including multipart boundaries)
csrf?: boolean, // only attached when the request target is same-origin
credentials?: string, // default: 'same-origin'
timeout?: number
}
FormData instance as data and it's sent as-is - no JSON serialization, no forced Content-Type header, so multipart uploads work correctly.
Onigiri.get(url, [options])
get(url: string, options?: AjaxOptions) β Promise
Onigiri.post(url, data, [options])
post(url: string, data: any, options?: AjaxOptions) β Promise
Onigiri.put(url, data, [options])
put(url: string, data: any, options?: AjaxOptions) β Promise
Onigiri.delete(url, [options])
delete(url: string, options?: AjaxOptions) β Promise
Storage API
Onigiri.storage.setPrefix(prefix)
setPrefix(prefix: string) β Storage
Onigiri.storage.set(key, value, [options])
set(key: string, value: any, options?: StorageOptions) β boolean
Options:
interface StorageOptions {
expires?: number // milliseconds
}
Onigiri.storage.get(key, [defaultValue])
get(key: string, defaultValue?: any) β any
Onigiri.storage.remove(key)
remove(key: string) β boolean
Onigiri.storage.clear()
clear() β boolean
Onigiri.storage.has(key)
has(key: string) β boolean
Onigiri.storage.keys()
keys() β string[]
Onigiri.storage.getAll([prefix])
getAll(prefix?: string) β object
Onigiri.storage.size()
size() β number
Onigiri.storage.session.*
Session storage has the same API as local storage (without expiration)
PJAX API
Onigiri.pjax.init(options)
init(options?: PjaxOptions) β Pjax
Options:
interface PjaxOptions {
timeout?: number,
push?: boolean,
replace?: boolean,
scrollTo?: number | false,
maxCacheLength?: number,
csrf?: boolean
}
Onigiri.pjax.load(url, [options])
load(url: string, options?: PjaxOptions) β Promise
Onigiri.pjax.submit(form, [options])
submit(form: HTMLFormElement, options?: PjaxOptions) β void
Onigiri.pjax.clearCache([url])
clearCache(url?: string) β void
Validation API
Onigiri.validation.validate(form, rules)
validate(form: HTMLFormElement, rules: ValidationRules) β ValidationResult
Rules:
interface ValidationRules {
[fieldName: string]: {
required?: boolean,
email?: boolean,
url?: boolean,
numeric?: boolean,
alpha?: boolean,
alphanumeric?: boolean,
min?: number,
max?: number,
minLength?: number,
maxLength?: number,
pattern?: string
}
}
Result:
interface ValidationResult {
isValid: boolean,
errors: {
[fieldName: string]: string[]
}
}
Onigiri.validation.addRule(name, func, message)
addRule(name: string, func: Function, message?: string) β Validation
O(form).validate(rules)
.validate(rules: ValidationRules) β ValidationResult
Animation API
.fadeIn([duration], [callback])
.fadeIn(duration?: number, callback?: Function) β Onigiri
.fadeOut([duration], [callback])
.fadeOut(duration?: number, callback?: Function) β Onigiri
.slideDown([duration], [callback])
.slideDown(duration?: number, callback?: Function) β Onigiri
.slideUp([duration], [callback])
.slideUp(duration?: number, callback?: Function) β Onigiri
Translation (i18n) API
Onigiri.i18n.init(options)
init(options?: I18nOptions) β I18n
Options:
interface I18nOptions {
locale?: string,
fallbackLocale?: string,
storageKey?: string,
autoDetect?: boolean,
missingTranslationWarning?: boolean
}
Onigiri.i18n.setLocale(locale)
setLocale(locale: string) β I18n
Onigiri.i18n.getLocale()
getLocale() β string
Onigiri.i18n.addTranslations(locale, translations, [namespace])
addTranslations(locale: string, translations: object, namespace?: string) β I18n
Onigiri.i18n.addMessages(messages)
addMessages(messages: { [locale: string]: object }) β I18n
Onigiri.i18n.t(key, [params], [locale])
t(key: string, params?: object, locale?: string) β string
Onigiri.t(key, [params], [locale])
t(key: string, params?: object, locale?: string) β string
Onigiri.i18n.tc(key, count, [params], [locale])
tc(key: string, count: number, params?: object, locale?: string) β string
Onigiri.tc(key, count, [params], [locale])
tc(key: string, count: number, params?: object, locale?: string) β string
Onigiri.i18n.has(key, [locale])
has(key: string, locale?: string) β boolean
Onigiri.i18n.formatDate(date, format, [locale])
formatDate(date: Date | string, format: string, locale?: string) β string
Formats: 'short', 'medium', 'long', 'full', 'time', 'datetime'
Onigiri.i18n.formatNumber(number, [options], [locale])
formatNumber(number: number, options?: object, locale?: string) β string
Onigiri.i18n.formatCurrency(amount, currency, [locale])
formatCurrency(amount: number, currency: string, locale?: string) β string
Onigiri.i18n.getLocales()
getLocales() β string[]
Onigiri.i18n.translatePage()
translatePage() β I18n
Onigiri.i18n.getTranslations([locale])
getTranslations(locale?: string) β object
Onigiri.i18n.loadTranslation(url, locale, [namespace])
loadTranslation(url: string, locale: string, namespace?: string) β Promise<boolean>
Fetches a JSON (or PHP-array-exported) file and merges it into locale. Pass namespace to nest it under a key instead of merging at the root.
Onigiri.i18n.loadFromPath(basePath, locale, [label], [format])
loadFromPath(basePath: string, locale: string, label?: string, format?: string) β Promise<boolean>
Builds the URL as {basePath}/{locale}/{label}.{format}. label defaults to 'messages' and merges at the root; any other label is nested under that name.
Onigiri.i18n.loadMultiple(basePath, locale, labels, [format])
loadMultiple(basePath: string, locale: string, labels: string[], format?: string) β Promise<boolean[]>
Onigiri.i18n.importJSON(jsonString, locale, [namespace])
importJSON(jsonString: string, locale: string, namespace?: string) β boolean
Onigiri.i18n.importPHP(phpString, locale, [namespace])
importPHP(phpString: string, locale: string, namespace?: string) β boolean
Onigiri.i18n.exportJSON(locale, [namespace])
exportJSON(locale: string, namespace?: string) β string
Onigiri.i18n.exportPHP(locale, [namespace])
exportPHP(locale: string, namespace?: string) β string
Onigiri.i18n.downloadTranslation(locale, [label], [format])
downloadTranslation(locale: string, label?: string, format?: string) β void
Triggers a browser download of the locale's translations as a JSON or PHP file.
O(selector).translate()
.translate() β Onigiri
HumHub API
Onigiri.humhub(moduleName, config)
humhub(moduleName: string, config: HumHubConfig) β Component
Config:
interface HumHubConfig extends ComponentConfig {
selector: string,
autoInit?: boolean,
pjax?: boolean
}
Router API
Onigiri.router.init(options)
interface RouterOptions {
mode?: 'history' | 'hash', // default: 'history'
root?: string, // default: '/'
container?: string, // default: '#main'
linkSelector?: string, // default: 'a[data-route]'
formSelector?: string, // default: 'form[data-route]'
pjax?: boolean, // default: true
pjaxTimeout?: number, // default: 5000
scrollToTop?: boolean, // default: true
scrollBehavior?: 'smooth' | 'auto',
updateTitle?: boolean, // default: true
csrf?: boolean, // default: true
cachePages?: boolean, // default: true
maxCache?: number, // default: 20
prefetch?: boolean, // default: false
prefetchDelay?: number, // default: 100
loadingClass?: string,
transitionDuration?: number
}
Onigiri.router.route(path, handler, [options])
route(path: string | object, handler?: Function, options?: RouteOptions) β Onigiri.router
Pass an object as the first argument to register several routes at once.
Onigiri.router.navigate(path, [options])
navigate(path: string, options?: { replace?: boolean, data?: any }) β Onigiri.router
Onigiri.router.back() / forward() / reload([bypassCache])
back() β void
forward() β void
reload(bypassCache?: boolean) β void
Onigiri.router.getCurrentPath() / getCurrentRoute()
getCurrentPath() β string
getCurrentRoute() β object | null
Onigiri.router.before(hook) / after(hook) / onError(hook)
before(hook: Function) β Onigiri.router
after(hook: Function) β Onigiri.router
onError(hook: Function) β Onigiri.router
Onigiri.router.url(name, [params])
url(name: string, params?: object) β string
Builds a URL from a named route.
Onigiri.router.clearCache([path]) / prefetch(path)
clearCache(path?: string) β Onigiri.router
prefetch(path: string) β Onigiri.router
Onigiri.route(path, handler, [options]) / Onigiri.navigate(path, [options])
// Shorthand aliases for Onigiri.router.route() / .navigate()
Theme Mode API
Onigiri.mode.init(options)
interface ModeOptions {
storageKey?: string, // default: 'onigiri_theme_mode'
defaultMode?: string, // default: 'light'
autoDetect?: boolean, // default: true
syncWithSystem?: boolean, // default: true
attribute?: string, // default: 'data-theme'
classPrefix?: string, // default: 'theme-'
transitions?: boolean, // default: true
transitionDuration?: number // default: 300
}
Options are merged with Onigiri.deepExtend(), so a partial nested override (e.g. just classes.light) will not wipe out its siblings.
Onigiri.mode.get() / set(mode, [save]) / toggle()
get() β string // 'light' | 'dark'
set(mode: string, save?: boolean) β Onigiri.mode
toggle() β Onigiri.mode
Onigiri.mode.isDark() / isLight()
isDark() β boolean
isLight() β boolean
Onigiri.mode.addTheme(name, definition)
addTheme(name: string, definition: object) β Onigiri.mode
Onigiri.mode.registerClasses(mode, classes)
registerClasses(mode: string, classes: object) β Onigiri.mode
Onigiri.mode.applyTo(element, [mode])
applyTo(element: Element | string, mode?: string) β Onigiri.mode
Onigiri.mode.destroy()
destroy() β void
Portal API
Onigiri.portal.init(options)
interface PortalOptions {
overlay?: boolean, // default: true
closeButton?: boolean, // default: true
closeOnOverlayClick?: boolean, // default: true
closeOnEscape?: boolean, // default: true
lockScroll?: boolean, // default: true
animationDuration?: number, // default: 300
stackPortals?: boolean, // default: true
zIndexBase?: number // default: 9000
}
Onigiri.portal.create(content, [options])
create(content: string | Element, options?: PortalOptions) β string // portalId
Onigiri.portal.teleport(element, targetSelector, [options])
teleport(element: Element | string, targetSelector: string, options?: object) β Onigiri.portal
Onigiri.portal.mount(portalId) / unmount(portalId, [callback]) / destroy(portalId)
mount(portalId: string) β Onigiri.portal
unmount(portalId: string, callback?: Function) β Onigiri.portal
destroy(portalId: string) β Onigiri.portal
Onigiri.portal.update(portalId, content)
update(portalId: string, content: string | Element) β Onigiri.portal
Onigiri.portal.getActive() / closeTop() / closeAll()
getActive() β object | null
closeTop() β Onigiri.portal
closeAll() β Onigiri.portal
Onigiri.modal(content, [options])
modal(content: string | Element, options?: object) β string // portalId
Onigiri.toast(message, [options])
toast(message: string, options?: {
type?: 'success' | 'error' | 'warning' | 'info',
position?: string,
duration?: number,
icon?: string
}) β string
Realtime (SSE) API
Onigiri.realtime.init(options)
interface RealtimeOptions {
reconnect?: boolean, // default: true
reconnectInterval?: number, // default: 3000
maxReconnectAttempts?: number, // default: 10
heartbeatInterval?: number, // default: 30000 (0 disables)
withCredentials?: boolean // default: false
}
Onigiri.realtime.connect(url, [options])
connect(url: string, options?: RealtimeOptions) β object // connection
Onigiri.realtime.on(url, eventType, handler)
on(url: string, eventType: string, handler: Function) β Onigiri.realtime
Built-in event types are 'open', 'message', and 'error'; any custom SSE event name your server sends also works.
Onigiri.realtime.off(url, eventType, [handler])
off(url: string, eventType: string, handler?: Function) β Onigiri.realtime
Onigiri.realtime.disconnect(url) / close(url) / disconnectAll()
disconnect(url: string) β Onigiri.realtime
close(url: string) β Onigiri.realtime
disconnectAll() β Onigiri.realtime
Onigiri.realtime.getStatus(url) / isConnected(url) / getConnections()
getStatus(url: string) β 'connecting' | 'connected' | 'error' | 'closed' | 'disconnected'
isConnected(url: string) β boolean
getConnections() β string[]
Onigiri.realtime.subscribe(url, events)
subscribe(url: string, events: object) β Onigiri.realtime
Registers several handlers at once, keyed by event type.
new Onigiri.SSE(url, [options])
const stream = new Onigiri.SSE(url: string, options?: RealtimeOptions);
stream.on(eventType: string, handler: Function) β Onigiri.SSE
stream.off(eventType: string, handler?: Function) β Onigiri.SSE
stream.close() β void
stream.isConnected() β boolean
stream.getStatus() β string
Onigiri.liveCounter(url, selector, [options])
liveCounter(url: string, selector: string, options?: {
eventType?: string, // default: 'count'
initialValue?: number, // default: 0
format?: Function,
animate?: boolean // default: true
}) β object
Onigiri.liveList(url, selector, [options])
liveList(url: string, selector: string, options?: {
eventType?: string, // default: 'item'
template?: Function, // default: escaped JSON in an <li>
prepend?: boolean, // default: true
maxItems?: number, // default: 100
animate?: boolean // default: true
}) β object
The default template HTML-escapes each item. A custom template must escape its own dynamic fields - this renders live, server-pushed content via innerHTML.
Onigiri.liveBadge(url, selector, [options])
liveBadge(url: string, selector: string, options?: {
eventType?: string,
threshold?: number,
className?: string
}) β object
Utility API
Onigiri.extend(target, ...sources)
extend(target: object, ...sources: object[]) β object
Shallow merge - a nested object under a key in source replaces (not merges with) the same key in target. Blocks __proto__/constructor/prototype keys, so merging config parsed from JSON can't repoint an object's prototype.
Onigiri.deepExtend(target, ...sources)
deepExtend(target: object, ...sources: object[]) β object
Recursive version of extend() - nested plain objects are merged key-by-key instead of replaced wholesale. Arrays and non-plain objects (DOM nodes, class instances) are still replaced, not merged. Use this for config with nested structure, like Onigiri.mode's classes map, where a partial override shouldn't wipe out sibling keys.
Onigiri.noConflict([alsoRestoreShortAlias])
noConflict(alsoRestoreShortAlias?: boolean = true) β Onigiri
Restores whatever previously occupied window.Onigiri / window.O (e.g. another library also using the short O alias) and returns this Onigiri reference, so you can reassign it to a custom name:
const OnigiriJS = Onigiri.noConflict();
// window.O and window.Onigiri are restored to whatever they held before
Onigiri.debounce(func, wait)
debounce(func: Function, wait: number) β Function
Onigiri.throttle(func, limit)
throttle(func: Function, limit: number) β Function
Onigiri.isArray(value)
isArray(value: any) β boolean
Onigiri.isObject(value)
isObject(value: any) β boolean
Onigiri.isFunction(value)
isFunction(value: any) β boolean
Onigiri.isEmpty(value)
isEmpty(value: any) β boolean
Onigiri.clone(object)
clone(object: any) β any
Plugin API
Onigiri.use(plugin, [options])
use(plugin: Plugin | Function, options?: any) β Onigiri
Plugin Interface:
interface Plugin {
install(Onigiri: Onigiri, options?: any): void
}
Events
Component Events
// Emitted on data change
'change:propertyName' β (newValue, oldValue)
'update' β (propertyName, newValue, oldValue)
// Custom events
component.emit('custom:event', data)
PJAX Events
// Before PJAX request
'onigiri:pjax:before' β { url, options }
// After PJAX complete
'onigiri:pjax:complete' β { url, container }
Translation Events
// Locale changed
'onigiri:locale:changed' β { locale }
// Translation files finished loading
'onigiri:translations:loaded' β { locale, files }
Router Events
// Router initialized
'onigiri:router:ready' β { path }
// Navigation complete
'onigiri:router:complete' β { path, route }
Theme Mode Events
// Mode module initialized
'onigiri:mode:ready' β { mode }
// Theme changed
'onigiri:mode:change' β { mode, oldMode }
Portal Events
// Portal added to the page
'onigiri:portal:mounted' β { portalId, element }
// Portal removed
'onigiri:portal:unmounted' β { portalId }
Realtime (SSE) Events
// Connection opened
'onigiri:realtime:connected' β { url }
// Connection error
'onigiri:realtime:error' β { url, error }
// Connection closed
'onigiri:realtime:closed' β { url }
Emoji Events
// Emoji picked from the picker
'onigiri:emoji:selected' β { emoji, target }
Module Check
Onigiri.modules
Onigiri.modules: {
events: boolean,
components: boolean,
security: boolean,
ajax: boolean,
storage: boolean,
pjax: boolean,
router: boolean,
validation: boolean,
animate: boolean,
translation: boolean,
mode: boolean,
portal: boolean,
realtime: boolean,
emojis: boolean,
plugins: boolean,
humhub: boolean
}
// Set to true by each module as it loads. Core itself does not set a
// `core` flag - if `Onigiri` exists at all, core is loaded.
// The bundled plugins in onigiri-plugins.js also set `cookies` and
// `animation` when installed via Onigiri.use().
Version
Onigiri.version
Onigiri.version β string // "1.0.0"
Type Definitions
For TypeScript users, here are the core type definitions:
declare interface OnigiriStatic {
(selector: string | Element | NodeList, context?: Element): Onigiri;
version: string;
modules: { [key: string]: boolean };
extend(target: object, ...sources: object[]): object;
debounce(func: Function, wait: number): Function;
throttle(func: Function, limit: number): Function;
ajax(options: AjaxOptions): Promise<any>;
get(url: string, options?: AjaxOptions): Promise<any>;
post(url: string, data: any, options?: AjaxOptions): Promise<any>;
put(url: string, data: any, options?: AjaxOptions): Promise<any>;
delete(url: string, options?: AjaxOptions): Promise<any>;
t(key: string, params?: object, locale?: string): string;
tc(key: string, count: number, params?: object, locale?: string): string;
}
declare interface Onigiri {
elements: Element[];
length: number;
each(callback: (element: Element, index: number) => void): Onigiri;
on(event: string, handler: Function): Onigiri;
on(event: string, selector: string, handler: Function): Onigiri;
off(event: string, handler?: Function): Onigiri;
addClass(className: string): Onigiri;
removeClass(className: string): Onigiri;
toggleClass(className: string): Onigiri;
hasClass(className: string): boolean;
attr(name: string): string;
attr(name: string, value: string): Onigiri;
html(): string;
html(content: string): Onigiri;
text(): string;
text(content: string): Onigiri;
fadeIn(duration?: number, callback?: Function): Onigiri;
fadeOut(duration?: number, callback?: Function): Onigiri;
slideDown(duration?: number, callback?: Function): Onigiri;
slideUp(duration?: number, callback?: Function): Onigiri;
translate(): Onigiri;
}
declare const Onigiri: OnigiriStatic;
declare const O: OnigiriStatic;
β Development Roadmap
Track the progress of OnigiriJS modules. Tasks are marked complete by the development team.
OnigiriJS Module Roadmap
Implementation progress of planned modules