JavaScript API

animate

Run animation on an element, add regular CSS class. Removes CSS class after animation end.

Parameters

animateToState

Run animation on an element, add CSS state. Do not remove CSS class after animation end.

Parameters

animateFromState

Run animation on an element, remove CSS state. Do not remove CSS class after animation end.

Parameters

afterTransitions

Fire callback after all element’s CSS transitions finished.

Parameters

afterTransitionsOrAnimations

Fire callback after all element’s CSS transitions or animations finished.

Parameters

appear

Show element with CSS transition.

tamia.appeared and tamia.toggled events will be fired the moment transition ends.

Parameters

Examples

.dialog {
  appear-fade();
}
<div class="dialog is-hidden js-dialog">...</div>
appear($$('.js-dialog'));

disappear

Hide element with CSS transition.

tamia.disappeared and tamia.toggled events will be fired the moment transition ends.

Parameters

toggle

Toggle element’s visibility with CSS transition. See appear/disappear for details.

Parameters

Component

Base component class.

After initialization all components will have ok state.

You can redefine the following methods in your components:

  • init() - element is attached to the DOM;
  • destroy() - element is detached from the DOM;
  • attributeChanged(name, previousValue, value) - attribute is changed.

And the following static properties:

  • binded - list of methods that should be binded to this;
  • template - OPORJSON template.

Examples

class Pony extends Component {
  static binded = 'toggle';
  init() {
    onEvent(this.elem, 'click', '.js-toggle', this.toggle);
  }
  toggle() {
    toggleState(this.elem, 'pink');
  }
}

registerComponent('u-pony', Pony);
<u-pony class="pink-pony is-pink">
  <button class="pink-pony__button js-toggle">To pink or not to pink?</button>
</u-pony>

component.init

Put all your initialization code in this method. Calls when element is attached to the DOM.

component.destroy

You can implement this method to do destroy component. Calls when element is detached from the DOM.

component.attributeChanged

You can implement this method to react to element attributes changes.

Parameters

  • name string Attribute name.
  • previousValue any Previous value.
  • value any New value.

data

Read data-attributes, set values to a cache.

Parameters

  • elem HTMLElement Element.
  • attr string Attribute name (camelCase).
  • value [any] Attribute value (if you want to set a new value).

Returns any Current value if the value param if missed.

onEvent

Attach event handler.

Parameters

  • elem HTMLElement Element.
  • eventName string Event name.
  • selector [string] CSS selector for event delegation.
  • handler Function Handler function.
  • originalHandler [Function] Handler function that will be used to remove event handler with off() function.

offEvent

Remove event handler.

Parameters

oneEvent

Attach event handler that will be executed only once.

Parameters

triggerEvent

Trigger custom DOM event.

Parameters

  • elem HTMLElement Element.
  • eventName string Event name.
  • detail ...any
  • detail.null.null.null any Extra data.

Returns boolean

triggerNativeEvent

Trigger native DOM event (like click).

Parameters

Returns boolean

oporElement

Generate DOM tree from OPORJSON.

Parameters

  • json Object OPORJSON (block or element is required).

    • json.tag [string] Tag name. (optional, default div)
    • json.block [string] Block name (.block).
    • json.elem [string] Element name (.block__elem).
    • json.mods [(string | Array)] Modifier(s) (.block_mod).
    • json.states [(string | Array)] State(s) (.is-state).
    • json.js [(string | Array)] JS class(es) (.js-hook).
    • json.mix [(OPORJSON | string | Array)] Blocks to mix ({block: 'scrollable'}).
    • json.attrs [Object] HTML attributes ({href: '/about'}).
    • json.element [string] Selector of an existing DOM element (inside rootElem) or @root (rootElem).
    • json.link [boolean] Store link to an element (link name: ${json.elem}Elem, see example).
    • json.content [(Object | string | Array)] Child element(s) or text content.
  • rootElem [HTMLElement] Root DOM element.
  • links [Object] (Internal.)
  • isChildren [boolean] (Internal.)

Examples

let [select, links] = oporElement({
  block: 'select',
  mods: ['big', 'awesome'],
  states: 'hidden',
  content: {
    block: 'select',
    elem: 'box-foo',
    js: 'select-box',
    link: true,
    content: 'Choose something'
  }
});
this.elem.appendChild(select);
Object.assign(this, links);  // {boxFooElem: $$('.js-select-box')}

Returns (HTMLElement | Array) Single generated DOM element or an array [elem, links].

oporClass

Generate class names for given OPORJSON element.

Parameters

  • json Object OPORJSON
  • returnArray [boolean](default false) Return array, concatenated string otherwise.

Examples

oporClass({block: 'select', elem: 'box', js: 'box'});  // "select__box js-box"

Returns (string | Array)

registerComponent

Bind component class to a tag name.

Parameters

  • tag string Custom tag name.
  • Ctor class Component class.
  • parent [object] Base HTML element.

Examples

registerComponent('u-pony', Pony);

toggleState

Toggle specified state on an element.

Parameters

Returns boolean

addState

Add specified state to an element.

Parameters

removeState

Remove specified state from an element.

Parameters

hasState

Return whether an element has specified state.

Parameters

Returns boolean