Stack handsontable cells area selection background with existing cell background images

handsontable_selection_area_background_hook.js

Handsontable.hooks.add('beforeInitWalkontable', function (walkontableConfig) {
    var areaSelection = walkontableConfig.selections.area;
    var oldDraw = areaSelection.draw;
    var olAddClassAtCoords = areaSelection.addClassAtCoords;
    areaSelection.draw = function (wotInstance) {
        var nodes = wotInstance.wtTable.TABLE.querySelectorAll('.custarea');
        for (var i = 0, len = nodes.length; i < len; i++) {
            var TD = nodes[i];
            TD.removeAttribute("style"); //use this for IE
            wotInstance.wtTable.removeClassFromCells("custarea");
        }
        oldDraw.call(this, wotInstance);
    };

    areaSelection.addClassAtCoords = function (wotInstance, sourceRow, sourceColumn, className) {
        var TD = wotInstance.wtTable.getCell(new WalkontableCellCoords(sourceRow, sourceColumn));
        var FF = "-moz-linear-gradient(top,  rgba(181,209,255,0.34) 0%, rgba(181,209,255,0.34) 100%)"; /* FF3.6+ */
        var chrome = "-webkit-linear-gradient(top,  rgba(181,209,255,0.34) 0%,rgba(181,209,255,0.34) 100%)"; /* Chrome10+,Safari5.1+ */
        var opera =  "-o-linear-gradient(top,  rgba(181,209,255,0.34) 0%,rgba(181,209,255,0.34) 100%)"; /* Opera 11.10+ */
        var ie  = "-ms-linear-gradient(top,  rgba(181,209,255,0.34) 0%,rgba(181,209,255,0.34) 100%)"; /* IE10+ */
        var w3c_selection_gradient_css = "linear-gradient(to bottom,  rgba(181,209,255,0.34) 0%,rgba(181,209,255,0.34) 100%)"; /* W3C */
   
        if (typeof TD === 'object') {
            var TDcomputedStyle = document.defaultView.getComputedStyle(TD, null);
            if (TDcomputedStyle.backgroundImage.indexOf("linear-gradient") < 0) {
                TD.style.backgroundImage = TDcomputedStyle.backgroundImage + ", " + w3c_selection_gradient_css;
            }
        }

        olAddClassAtCoords.call(this, wotInstance, sourceRow, sourceColumn, "custarea"); // add a custom class to track selected sells (because selection.className will be erased before calling draw())
    };

});