📚 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.prototype.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.prototype.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,
    csrf?: boolean,
    timeout?: number
}

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

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
}

Utility API

Onigiri.extend(target, ...sources)

extend(target: object, ...sources: object[]) → object

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 }

Module Check

Onigiri.modules

Onigiri.modules: {
    core: boolean,
    events: boolean,
    components: boolean,
    security: boolean,
    ajax: boolean,
    storage: boolean,
    pjax: boolean,
    validation: boolean,
    animate: boolean,
    translation: boolean,
    humhub: boolean
}

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;