Switch language tabs using ctrl+right, ctrl+left

[tpr]

Update 2017-10: this feature is bult-in to AdminOnSteroids module, with more features (eg. ctrl-down/up for expand/collapse lang tabs) and bug fixes.

This is a small snippet I put together to make easier to navigate between language tabs, using ctrl + right/left arrows.
I know there is a button to toggle the visibility of all lang tabs but I find this method easier.
 
It's far from perfect, doesn't work with ajax-loaded CKEditors and and the code itself could be polished more. But it does the job quite well.
 
To use, put this in ready.php:
 

 

$page->addHookAfter('render', function ($event) {

    if ($this->page->template != 'admin') {
        return;
    }

    $js = <<< HTML
    <script>
    $(document).ready(function () {

        var languagesCount = $('.ui-tabs-nav').eq(0).children('li').length,
            getIndex = function (index, direction) {
                if (direction == 'down') {
                    return index < 0 ? languagesCount - 1 : index;
                } else {
                    return index > languagesCount - 1 ? 0 : index;
                }
            }

        function switchLangCKE(ckeID) {

            var ckeInstance = CKEDITOR.instances[ckeID];

            ckeInstance.on('contentDom', function () {

                var editable = this.editable();

                editable.attachListener(editable, 'keydown', function (e) {

                    var langTabs = $('#' + ckeID).closest('.langTabs'),
                        index;

                    // left
                    if (e.data.getKeystroke() == CKEDITOR.CTRL + 37) {
                        index = langTabs.find('ul .ui-tabs-active').index() - 1;
                        index = getIndex(index, 'down');
                        return activateLangTab(index);
                    }

                    // right
                    if (e.data.getKeystroke() == CKEDITOR.CTRL + 39) {
                        index = langTabs.find('ul .ui-tabs-active').index() + 1;
                        index = getIndex(index, 'up');
                        return activateLangTab(index);
                    }

                    function activateLangTab(index) {

                        langTabs.tabs('option', 'active', index);
                        langTabs.find('input, textarea').eq(index).focus();

                        var currentCKEinsanceId = langTabs.find('li').eq(index).find('a').attr('href').replace('#langTab_', '');

                        setTimeout(function () {
                            CKEDITOR.instances[currentCKEinsanceId].focus();
                        }, 200)

                        switchLangCKE(currentCKEinsanceId);

                    }
                });
            });
        }

        if ($('.InputfieldCKEditor.hasLangTabs').length) {

            $('.InputfieldCKEditor.hasLangTabs').each(function () {
                var ckeInstanceId = $(this).find('textarea.FieldtypeTextareaLanguage.InputfieldCKEditorLoaded').eq(0).attr('id');

                if (ckeInstanceId) {
                    switchLangCKE(ckeInstanceId);
                }
            })

        }

        $(document).on('keydown', '.LanguageSupport input, .LanguageSupport textarea', function (e) {

            e = e || window.event;

            var keyCode = e.keyCode || e.which,
                arrow = {left: 37, up: 38, right: 39, down: 40},
                langTabs = $(this).closest('.langTabs'),
                index;

            function activateLangTab(index) {
                langTabs.tabs('option', 'active', index);
                langTabs.find('input, textarea').eq(index).focus();
            }

            if (e.ctrlKey) {

                switch (keyCode) {

                    case arrow.left:
                        index = langTabs.find('ul .ui-tabs-active').index() - 1;
                        index = getIndex(index, 'down');
                        return activateLangTab(index);
                        break;

                    case arrow.right:
                        index = langTabs.find('ul .ui-tabs-active').index() + 1;
                        index = getIndex(index, 'up');
                        return activateLangTab(index);
                        break;
                }
            }
        });

    });
    </script>
HTML;

    $event->return = str_replace('</body>', $js . PHP_EOL . '</body>', $event->return);
});

[szabesz]

Thank you for sharing! It would be nice to have this feature built in.

[flydev]

Yeah thanks.

Thank you for sharing! It would be nice to have this feature built in.

this.