OrantuganJS - oInlineComponents

Install using npm:

npm i -D ojs-inline-components

Set of small components which can be use in ojs-core's library syntax. Compatible also with store and oStore

Quick start

import { oInput } from 'ojs-inline-components';
...
const oInputInstance = oInput('number').name('exampleName').id('exampleId');
const oInputHtml = oInputInstance.init(); // <input type="text" name="exampleName" id="exampleId" />

To use oInlineComponents you need to use function constructor (ex.oInput(...)). Just like in ojs-core - init method returns html output from your instance First and only argument (typeOrConfig) as name says can be type: string (oButton and oInput) or initConfig: object with configuration. Default type value: "text"

InitConfig usage

const oInputInstance = oInput({
    name: 'exampleName',
    type: 'text',
    id: 'exampleId',
});

console.log(oInputInstance.init()); // <input type="text" name="exampleName" id="exampleId" />

Each component represents one interactive element from html and has own set of methods.

#go to oInput

#go to oButton

#go to oTextarea

oInput

.attr()

.attr(attrs :Array<attributeType> | Object)

You can add within this method any argument you want.

type attributeType = {
  name :String,
  val :any
};

Examples:

oInputInstance.attr([
    {
        name: 'type',
        val: 'number'
    }
]);
// or
oInputInstance.attr({
  attributeName: attributeValue
});

.checked()

.checked(checked :Boolean)

Checked attribute value.

.classList()

.classList(classList :Array<String> | String)

Add list of css classes names by HTML style (separated by space character).

.classList('cssClass1 cssClass2');

.db()

.db(db :Object|oStore, name :String, updateOn="change" :String)

• db - Object or oStore instance to update value
• name - name of key in db
• updateOn - name of the event after which db is updated

const exampleDb = {
  exampleKey: 'exampleValue',
};
(...)
oInput().db(exampleDb, 'exampleKey', 'keyUp');

.dbIndex()

.dbIndex(index :Number)

Index of db when db is an Array.

.disabled()

.disabled(disabled :Boolean)

Disabled attribute value.

.event() and .events()

.event(eventObject :eventType)
.events(events :Array<eventType>)

Set all available event listeners.

type eventType = {
  name :string,
  fn :() => any
}

oInput().event({
  name: 'change',
  fn: () => someFn()
});

oInput().events([{
  name: 'change',
  fn: () => someFn()
}]);

.getValue()

Returns value of input.

.formatter()

.formatter(formatterFunction :Function, formatOnEvent :String)

List of valid events:

• change
• input
• keyup
• keydown
• focus
• focusin
• focusout
• click

oInput().formatter(
  clearWhiteSpaces, // function that clear whitespaces from string
  'keyup'
);

Result of example above: all whitespaces would be removed from string on each keyup event trigger.

.id()

.id(id :String|Number)

Id attribute value.

.init()

oInput().init();

Returns HTML result value of whole oInlineComponent instance.

.max()

.max(max :any)

Max attribute value.

.min()

.min(min :any)

Min attribute value.

.maxLength()

.maxLength(maxLength :Number)

MaxLength attribute value.

.name()

.name(name :String)

Name attribute value.

.onChange()

.onChange(event :Function)

Add event listener for change event.

.onFocus() .onFocusOut() .onKeyUp() .onKeyDown()

Just like onChange method

.pattern()

.pattern(pattern :String)

Pattern attribute value.

.placeholder()

.placeholder(placeholder :any)

Set placeholder.

.readonly()

.readonly(readonly :Boolean)

Readonly attribute value.

.required()

.required(required :Boolean)

Required attribute value.

.step()

.step(step :Number | 'any')

Step attribute value;

.type()

.type(type :String)

Type attribute value.

.value()

.value(value :any)

Value of the input.

oButton

.attr() - link

.classList() - link

.disabled() - - link

.event() .events() - link

.id() - link

.init() - link

.name() - link

.onClick() .onSubmit()

.onClick(event :Function)
// and
.onSubmit(event :Function)

Adds event listener to click or submit event

oButton().onClick(() => doSomething());

.text()

.text(text :String|Number)

Add text content to Button.

.type()

.type(type :'button' | 'submit' | 'reset')

Type attribute value.

.value()

Equivalent of .text() method

oTextarea

.attr() - link

.classList() - link

.cols()

.cols(cols :Number)

Cols attribute value.

.db() - - link

.dbIndex() - - link

.disabled() - - link

.event() .events() - link

.formatter() - link

.getValue()

Returns text content of the textarea.

.id() - link

.init() - link

.maxLength() - link

.name() - link

.onChange() .onFocus() .onFocusOut() .onKeyUp() .onKeyDown()

Adds event listeners to specific events.

.placeholder() - link

.readonly() - link

.required() - link

.rows()

.rows(rows :Number)

Rows attribute value.

.value() - link

.wrap()

.wrap(wrap='soft' :'soft'|'hard')

Wrap attribute value.