Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I've implemented an Iris Colour Picker into the front-end of my theme thanks to the help provided in this question and all works well on the desktop front. However, it seems as though when it comes to an iPad device the colour picker doesn't work as expected. The mouse dragging event isn't being recognised, however clicking around the colour area works, it's like the mousedrag event isn't being recognised.

Is this a known issue and is there perhaps a way I can duckpunch the functionality into the colour picker?

share|improve this question
add comment

1 Answer

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();
    }
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.