Sla-navigate

This is a single javascript lib which u can navigate easily in the dom with.

Installation

Use the npm package manager to install it or just download the index.js file

npm install sla-navigate

Angular:

#####angualar.json

"scripts": [
  "node_modules/sla-navigate/index.js"
]

#####The component which you want to use in

import {AfterViewInit, Component, ViewChild} from '@angular/core';
import {slaNavigate} from 'sla-navigate/index.js';

export class TestComponent implements AfterViewInit {
    @ViewChild('element', {static: true}) element;

    constructor() {}

    ngAfterViewInit() {
        slaNavigate.configure({rootElement: this.element.nativeElement});
        slaNavigate.collectTabs();
    }

##Summary Configs in the constructor can be changed via: configure method

slaNavigate.configure({
    rootElement: document.body,
    KEY_CODE_ENTER: 13,
    INPUT_LEAVE_FOCUS_NEXT_ELEMENT: false
 });

##CSS

CSS classes (tab class name can be changed by: TAB_ITEMS_CLASS_NAME)

 //Add class to elements which u want to make tab element
 .tab {
    transition: 0.2s;
 }
 
 //Focused tab element
.tab:focus {
    background: #efefef;
    border: 1px solid red !important;
    outline: 1px solid red !important;
    transition: 0.2s;
 }
 
//writable input elements (like type=text, type=number, etc) got readonly attribute before u can edit them
input.tab:read-only {
    background: pink;
}
 
 

##Configs

/**
 * root element, usually document.body
 * after this: call collectTabs to see changes!
 */
this.rootElement = document.body;

/**
 * keyCode: go previous tab element
 */
this.KEY_CODE_PREVIOUS = 111;

/**
 * keyCode: go next tab element
 */
this.KEY_CODE_NEXT = 106;

/**
 * keyCode: go into an element (if its a group [ so it has tab child])
 */
this.KEY_CODE_ENTER = 13;

/**
 * keyCode: go outside of an element to its parent tab if it has
 */
this.KEY_CODE_BACK = 8;

/**
 * keyCode: leaving an input element
 */
this.INPUT_LEAVE_KEY_CODE = 13;

/**
 * keyCode: +1 to number input element
 */
this.KEY_CODE_PLUS = 107;

/**
 * keyCode: -1 to number input element
 */
this.KEY_CODE_MINUS = 109;

/**
 * keyCode: send event to an element which is focused
 * event in mouseEvents[]
 *
 * @type {number}
 */
this.KEY_CODE_SEND_MOUSE_EVENT = 13;

/**
 * After leaving and input element by INPUT_LEAVE_KEY_CODE
 * false: it goes to its parent
 * true: it goes to its parent and afterthat to the parent's next tab element
 */
this.INPUT_LEAVE_FOCUS_NEXT_ELEMENT = false;

/**
 * class name of the tab elements with u can mark the tabs with
 */
this.TAB_ITEMS_CLASS_NAME = "tab";

/**
 * data attribute for a tab element, if you enter on it itt wil jump to TAB_NAME
 */
this.TAB_TARGET_NAME = "data-tab-target-name";

/**
 * data attribute for a tab element, if you enter on TAB_TARGET_NAME element then that will jump to this element
 */
this.TAB_NAME = "data-tab-name";

/**
 * data attribute for a tab element, if you back on it itt wil jump to TAB_NAME
 */
this.TAB_BACK = "data-tab-back";

/**
 * array of mouse events
 * name a class which runs an event on element
 *
 * eg.: {
            className: 'tab-click',
            eventName: 'click'
        },
 {
    className: 'tab-dblclick',
     eventName: 'dblclick'
 }
 *
 * @type {Array}
 */
this.mouseEvents = [
    {
        className: 'tab-click',
        eventName: 'click'
    },
    {
        className: 'tab-dblclick',
        eventName: 'dblclick'
    }
];

/**
 * form elements
 *
 * @type {string[]}
 */
this.formElements = ['input', 'select'];

/**
 * form elements type which is writeable
 *
 * @type {string[]}
 */
this.writableFormElementTypes = ['text', 'number'];

/**
 * form elements which have only two values (eg: checked unchecked)
 * @type {string[]}
 */
this.booleanFormElementsTypes = ['checkbox', 'radio'];




/**
 * You can make shortcuts to element with this data attribute
 * eg.: if you write '+100-' then the focus will jump to the element which has tha
 * TAB_SHORTCUT_NAME data attribute with a value: 100
 */
this.TAB_SHORTCUT_NAME = "data-tab-code";

##Methods

configure(config: Object): void

collectTabs(): void

focusPreviousElement(): void

focusNextElement(): void

enterIntoElement(): void

backFromElement(): void

focusElement(): void

getPreviousElement: HtmlElement

getNextElement: HtmlElement

sendMouseEvent(element, eventType = null, config = {})

##Data attributes #####TAB_TARGET_NAME (data-tab-target-name) Data attribute for a tab element, if you enter on it itt wil jump to an element whats TAB_NAME is the same as the TAB_TARGET_NAME value

#####TAB_NAME (data-tab-name) Data attribute for a tab element, if you enter on TAB_TARGET_NAME element which has the same value as this element then that will jump to this element

#####TAB_SHORTCUT_NAME (data-tab-code)

You can make shortcuts to an element with this data attribute

<div class="tab" data-tab-code="100"></div>

type

+100-

and the element gets the focus

version 1.0.11