Friday, February 3, 2017

Return MouseWheel Event to Sitecore 8+ Ribbon

Do you know that there was  nice feature in Sitecore 6 - 7.2 that allows use mouse scroll on Content Editor Ribbon?

Once working on project based on Sitecore 7.2 I accidentally scrolls mouse wheel when cursor was on Content Editor ribbon. Sitecore behavior surprised me: it switched to the next Content Editor tab. I found it nice useful feature that speed up work in Content Editor, especially when you are looking for some button and forgot where it is located. It saves time and nerves and I used to utilize this feature day to day.

But, when I switched to project based on Sitecore 8, I was disappointed. Scroll doesn't work on ribbon any more... And I decided return this feature into Sitecore and even a little bit improve it.

All that you need, find \sitecore\shell\Applications\Content Manager\Content Editor.js file and put this JavaScript to the end:

jQuery(document).ready(function () {
    jQuery("#RibbonPanel").bind("mousewheel", function (event) {
        var array = jQuery(event.currentTarget).find(".scRibbonNavigatorButtonsGroupButtons a");
        if (array.length > 1) {
            var active = jQuery(event.currentTarget).find(".scRibbonNavigatorButtonsGroupButtons a.scRibbonNavigatorButtonsActive");
            var index = array.index(active);
            var delta = (event.originalEvent.wheelDelta > 0 ? 1 : -1);
            if (index === array.length - delta) {
                if (delta < 0) {
                    array[0].click();
                }
                else {
                    array[1].click();
                }
            }
            else {
                if (index === 0) {
                    array.last().click();
                }
                else {
                    array[index + delta].click();
                }
            }
        }
    });
});

Voila, you can use scroll for ribbon navigation again!