WordPress Iris Colour Picker adding iOS touch events

After a bit of investigation, the following code will add touch events to the Iris picker which uses jQuery UI. I did have to make the color picker handle 25px x 25px so it’s easier to grab on an iPad, but other than that this works:

    $(document).on({
        touchstart: touchHandler,
        touchmove: touchHandler,
        touchend: touchHandler,
        touchcancel: touchHandler
    });

    function touchHandler(event) {
        // trick to add support for touch event to elements/widgets that do not support it 
        // by convetting convert touchevents into mouseevents

        // only apply this trick to ui-draggable elements
        if ( ! $(event.target).hasClass('ui-draggable') ) { 
            return;
        }   

        var touches = event.changedTouches,
            first = touches[0],
            type = ""; 

        switch(event.type) {
            case "touchstart": type = "mousedown"; break;
            case "touchmove":  type="mousemove"; break;    
            case "touchend":   type="mouseup"; break;
            default: return;
        }   

        // convert touchevents into mouseevents
        var simulatedEvent = document.createEvent("MouseEvent");
        simulatedEvent.initMouseEvent(type, true, true, window, 1,
                                  first.screenX, first.screenY,
                                  first.clientX, first.clientY, false,
                                  false, false, false, 0/*left*/, null);

        first.target.dispatchEvent(simulatedEvent);
                event.preventDefault();
    }