turbo-starter v1.1.16

Installation

npm install turbo-starter

Turbo Helper

Some cool methods to use

Default settings

turbo.settings = {
    loaderPath: '/images/misc/loader.svg',

    animation: {
        duration: 300,
        showClass: 'animation-slide-in-fwd-center',
        hideClass: 'animation-slide-out-bck-center',
    },

    text: {
        save: 'Save',
        edit: 'Edit',
        delete: 'Delete',
        confirm: 'Confirm',
        cancel: 'Cancel',
        dialog_window: 'Dialog window',
        info: 'Info',
        hide: 'Hide',
        empty: 'Empty',
    },

    notification: {
        autoHideTime: 5000,
    },

    logger: {
        custom: false,
    },
}

Methods

showLoader - appends loader to body

turbo.startLoader();

hideLoader - hide loader

turbo.endLoader();

isEmpty - check if object is empty

const obj = {};

turbo.isEmpty(obj);
// > true

beNode - convert selector to node if exists

const selector = '#my-element';

const element = turbo.beNode(selector);

getData - get element data attribute

const el = document.querySelector('#element');

turbo.getData(el, 'name');
// > 'turbo'

showElement - show element to destination with nice animation

const el = document.createElement('div');
const destination = '#destination-element';

// 'append', 'prepend', 'insertAfter'
const position = 'prepend';
const display = 'flex';

turbo.showElement(el, destination, position, display);

hideElement - convert selector to node if exists

turbo.hideElement('#some-element');

getCss - get element style

const el = document.querySelector('#element');

turbo.getCss(el, 'display');
// > 'inline-block'

collectFormData - collect form data to object

const form = '#form';

turbo.collectFormData(form);
// > {
//      name: 'John',
//      email: 'john@example.com,
//      color: 'blue',  
//   }

confirmation - show confirmation dialog

turbo.confirmation('Are you sure?').then(() => {
    // do something
});

showDialog - show nice dialog window

const content = '<p>Hello, I\'m dialog window</p>';
const buttons = {
    primaryButton: {
        value: 'Confirmation text',
        class: 'some classes',
        id: 'cutom-button-id',
        hide: false,
        callback: () => {
            // do something
        }
    },
    cancelButton: {},
};

turbo.showDialog('Information', content, buttons, 'my-dialog');

notify - show notification

const message = 'Just some information';
const heading = 'Hey!';

turbo.notify(message, heading, 'error');

disableEnter - disable default enter function

turbo.disableEnter();

floatingPlaceholders - get right functionality of floating placeholders

const el = '#my-form';

turbo.floatingPlaceholders(el);

toggleDropdown - show/hide dropdown content

const dropdownElement = document.querySelector('#dropdown-element');
const dropdownContent = document.querySelector('#dropdown-content');
const position = dropdownElement.getBoundingClientRect();
const style = {}

style.width = parseFloat(turbo.getCss('.navigation', 'width')) * .9;
style.x = style.width * .05;
style.y = position.bottom - position.top + position.height;

turbo.toggleDropdown(dropdownContent, style, langSwitcher.querySelector('.arrow'), true);

tableActionsBinding - show edit and delete buttons for table actions, check and uncheck checkboxes in table

const table = document.querySelector('#my-table');

turbo.tableActionsBinding(table);

setCheckedState - check or uncheck checkboxes in table

Empty array of rowsId will mean all checkboxes should be checked or unchecked

const table = document.querySelector('#my-table');
const checked = true;
const rowsId = [1, 3];

turbo.setCheckedState(table, checked, rowsId);

Turbo Validator

Default settings

turbo.settings = {
    rulesErrors: {
        required: 'Field {fieldName} is required',
        string: 'Field {fieldName} must be a string',
        integer: 'Field {fieldName} must be a number',
        max: 'Maximal length of field {fieldName} is {additionalValue}',
        min: 'Minimal length of field {fieldName} is {additionalValue}',
        maxNum: 'Maximum number is {additionalValue}',
        minNum: 'Minimum number is {additionalValue}',
        email: 'This email is not valid',
    },

    rulesMethods: {
        required: this.notEmpty,
        string: this.isString,
        integer: this.isNumber,
        max: this.maxLength,
        min: this.minLength,
        maxNum: this.maxNumber,
        minNum: this.minNumber,
    },
};

Usage

Rules

Available rules

• required - input cannot be empty
• string - is string
• integer - is number
• max - max length
• min - min length
• maxNum - maximum number
• minNum - minimum number

{
    inputName: '{ruleName}:{additionalValue}>{label}'
}

Example

const form = document.querySelector('#form');

const rules = {
    name: 'min:2>name',
    email: 'required>email',
};

const stopAfterFirstError = false;
const errorSettings = {
    show: true,
    floatingPlaceholders: false,
};

const valid = validator.validate(form, rules, stopAfterFirstError, errorSettings);

if (valid) {
    // is valid
}

Methods

showFormErrors - show errors

Error object

{
    inputName: 'Error message';
}

Example

const errors = {
    name: 'Name is required'
};
const floatingPlaceholders = false;

validator.showFormErrors('#my-form', errors, floatingPlaceholders);