How to Rotate 180 Deg

Question

I implemented spectrum color picker. I'm trying to rotate the .alphaSlider 180 deg. Of course I can do it with CSS (using transform: rotate(180deg)), but that's sort of a hack, and, there will anyway be other problems. I want to do it using the JavaScript source file.

How can I edit the source file so that I can rotate 180 Deg the .alphaSlider?

Here's the relevant code:

Source: (Lines: 387-395)

draggable(alphaSlider, function (dragX, dragY, e) {
    currentAlpha = (dragX / alphaWidth);
    isEmpty = false;
    if (e.shiftKey) {
        currentAlpha = Math.round(currentAlpha * 10) / 10;
    }
    move();
}, dragStart, dragStop);

Source: (Lines: 1068 - 1073)

var t0 = e.originalEvent && e.originalEvent.touches && e.originalEvent.touches[0];
var pageX = t0 && t0.pageX || e.pageX;
var pageY = t0 && t0.pageY || e.pageY;

var dragX = Math.max(0, Math.min(pageX - offset.left, maxWidth));
var dragY = Math.max(0, Math.min(pageY - offset.top, maxHeight));

Answer 1

BOOM! Done. See jsfiddle. (Snippet doesn't allow me to post all the code.)

• Red color picker uses horizontal normal
• Blue uses vertical normal.
• Green uses horizontal flipped.
• Aqua uses vertical flipped.

Haven't tested in IE.

http://jsfiddle.net/4z7d6ze5/2/

Called like this:

$(document).ready(function() {
    $("#custom").spectrum({
        color: "#FF0000",
        showAlpha: true
    });
    $("#custom2").spectrum({
        color: "#0000FF",
        showAlpha: true,
        alphaVertical: true
    });
    $("#custom3").spectrum({
        color: "#00FF00",
        showAlpha: true,
        flipAlpha: true
    });
    $("#custom4").spectrum({
        color: "#00FFFF",
        showAlpha: true,
        flipAlpha: true,
        alphaVertical: true
    });
});