Tab focused on focus-element class html element

keyword-focus.js

(function (window, document) {

    var state = {
        mouseUsage: false,
        focusClass: 'focus-class',
        documentBody: document.body
    }


    var controller = {
        setFocus: function (element) {
            if (!state.mouseUsage) {
                view.addClass(element, state.focusClass);
            }
        },
        removeFocus: function (element) {
            view.removeClass(element, state.focusClass);
        },
        setMouseFoucs: function (element) {
            state.mouseUsage = true;
            view.removeClass(element, state.focusClass);

        },
        setKeyboardFocus: function (element) {
            state.mouseUsage = false;
        },
        init: function () {
            view.init();
        }
    }

    var view = {
        init: function () {
            var focusElements = document.getElementsByClassName('focus-element');
            for (let index = 0; index < focusElements.length; index++) {
                const element = focusElements[index];
                element.addEventListener('keydown', this.focusHandlers.onkeydown);
                element.addEventListener('mousedown', this.focusHandlers.onmousedown);
                element.addEventListener('focusin', this.focusHandlers.onfocusin);
                element.addEventListener('focusout', this.focusHandlers.onfocusout);
            }
        },
        focusHandlers: {
            onmousedown: function (event) {
                controller.setMouseFoucs(event.target);
            },
            onkeydown: function (event) {
                if (event.keyCode === 9) {
                    controller.setKeyboardFocus();
                }
            },
            onfocusout: function (event) {
                controller.removeFocus(event.target);
            },
            onfocusin: function (event) {
                controller.setFocus(event.target);
            }
        },
        removeClass: function (element, className) {
            element && this.hasClass(element, className) && element.classList.remove(className);
        },
        addClass: function (element, className) {
            element &&  !this.hasClass(element, className) && element.classList.add(className);
        },
        hasClass: function (element, className) {
            return element && element.classList.contains(className);
        },
    }
    controller.init();
})(window, document);