Как повернуть 180 градусов

Question

Я внедрил spectrum color picker. Я пытаюсь повернуть .alphaSlider 180 град. Конечно, я могу сделать это с помощью CSS (используя transform: rotate(180deg)), но это своего рода хак, и в любом случае будут другие проблемы. Я хочу сделать это, используя JavaScript source file.

Как редактировать source file так, чтобы я мог повернуть 180 градусов .alphaSlider?

Вот соответствующий код:

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

БУМ! Готово. См. Jsfiddle. (Отрывок не позволяет мне размещать весь код.)

• Красного выбор цвета использует горизонтальные нормальный
• Синие использует вертикальную нормальный.
• Зеленый использует горизонтальный перевернутый.
• Aqua использует вертикальные перевернутые.

Не тестировалось в IE.

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

Вызывается, как это:

$(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 
    }); 
});