/*jshint undef: true, unused:true, browser:true */

[0] Fix | Delete

/*global jQuery: true, tinycolor: false */

[1] Fix | Delete

[2] Fix | Delete

/*!=========================================================================

[3] Fix | Delete

* jQuery Color Picker Sliders

[4] Fix | Delete

* v3.1.0

[5] Fix | Delete

*

[6] Fix | Delete

* An advanced responsive color selector with color swatches and support for

[7] Fix | Delete

* human perceived lightness. Works in all modern browsers and on touch devices.

[8] Fix | Delete

*

[9] Fix | Delete

* https://github.com/istvan-meszaros/css-colorpickersliders

[10] Fix | Delete

* http://www.virtuosoft.eu/code/css-colorpickersliders/

[11] Fix | Delete

*

[12] Fix | Delete

* Copyright 2013 István Ujj-Mészáros

[13] Fix | Delete

*

[14] Fix | Delete

* Thanks for the contributors:

[15] Fix | Delete

* imaguiraga - https://github.com/imaguiraga

[16] Fix | Delete

* balmasich - https://github.com/balmasich

[17] Fix | Delete

*

[18] Fix | Delete

* Licensed under the Apache License, Version 2.0 (the "License");

[19] Fix | Delete

* you may not use this file except in compliance with the License.

[20] Fix | Delete

* You may obtain a copy of the License at

[21] Fix | Delete

*

[22] Fix | Delete

* http://www.apache.org/licenses/LICENSE-2.0

[23] Fix | Delete

*

[24] Fix | Delete

* Unless required by applicable law or agreed to in writing, software

[25] Fix | Delete

* distributed under the License is distributed on an "AS IS" BASIS,

[26] Fix | Delete

* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

[27] Fix | Delete

* See the License for the specific language governing permissions and

[28] Fix | Delete

* limitations under the License.

[29] Fix | Delete

*

[30] Fix | Delete

* Requirements:

[31] Fix | Delete

*

[32] Fix | Delete

* TinyColor: https://github.com/bgrins/TinyColor

[33] Fix | Delete

*

[34] Fix | Delete

* Using color math algorithms from EasyRGB Web site:

[35] Fix | Delete

* http://www.easyrgb.com/index.php?X=MATH

[36] Fix | Delete

* ====================================================================== */

[37] Fix | Delete

[38] Fix | Delete

(function($) {

[39] Fix | Delete

"use strict";

[40] Fix | Delete

[41] Fix | Delete

$.fn.ColorPickerSliders = function(options) {

[42] Fix | Delete

[43] Fix | Delete

return this.each(function(i, el) {

[44] Fix | Delete

[45] Fix | Delete

var alreadyinitialized = false,

[46] Fix | Delete

settings,

[47] Fix | Delete

triggerelement = $(this),

[48] Fix | Delete

container,

[49] Fix | Delete

elements,

[50] Fix | Delete

swatches,

[51] Fix | Delete

MAXLIGHT = 101, // 101 needed for bright colors (maybe due to rounding errors)

[52] Fix | Delete

dragTarget = false,

[53] Fix | Delete

lastUpdateTime = 0,

[54] Fix | Delete

color = {

[55] Fix | Delete

tiny: null,

[56] Fix | Delete

hsla: null,

[57] Fix | Delete

rgba: null,

[58] Fix | Delete

cielch: null

[59] Fix | Delete

},

[60] Fix | Delete

MAXVALIDCHROMA = 144; // maximum valid chroma value found convertible to rgb (blue)

[61] Fix | Delete

[62] Fix | Delete

[63] Fix | Delete

setTimeout(init,20);

[64] Fix | Delete

[65] Fix | Delete

function init() {

[66] Fix | Delete

[67] Fix | Delete

if (alreadyinitialized) {

[68] Fix | Delete

return;

[69] Fix | Delete

}

[70] Fix | Delete

[71] Fix | Delete

alreadyinitialized = true;

[72] Fix | Delete

[73] Fix | Delete

_initSettings();

[74] Fix | Delete

[75] Fix | Delete

_buildHtml();

[76] Fix | Delete

_initElements();

[77] Fix | Delete

[78] Fix | Delete

if (triggerelement.is("input")) {

[79] Fix | Delete

color.tiny = tinycolor(triggerelement.val());

[80] Fix | Delete

[81] Fix | Delete

if (!color.tiny.format) {

[82] Fix | Delete

color.tiny = tinycolor(settings.color);

[83] Fix | Delete

}

[84] Fix | Delete

}

[85] Fix | Delete

else {

[86] Fix | Delete

color.tiny = tinycolor(settings.color);

[87] Fix | Delete

}

[88] Fix | Delete

[89] Fix | Delete

color.hsla = color.tiny.toHsl();

[90] Fix | Delete

color.rgba = color.tiny.toRgb();

[91] Fix | Delete

color.cielch = $.fn.ColorPickerSliders.rgb2lch(color.rgba);

[92] Fix | Delete

[93] Fix | Delete

_renderSwatches();

[94] Fix | Delete

_bindEvents();

[95] Fix | Delete

[96] Fix | Delete

_updateAllElements();

[97] Fix | Delete

[98] Fix | Delete

}

[99] Fix | Delete

[100] Fix | Delete

function updateColor(newcolor, disableinputupdate) {

[101] Fix | Delete

var updatedcolor = tinycolor(newcolor);

[102] Fix | Delete

[103] Fix | Delete

if (updatedcolor.format) {

[104] Fix | Delete

container.removeClass("cp-unconvertible-cie-color");

[105] Fix | Delete

[106] Fix | Delete

color.tiny = updatedcolor;

[107] Fix | Delete

color.hsla = updatedcolor.toHsl();

[108] Fix | Delete

color.rgba = updatedcolor.toRgb();

[109] Fix | Delete

color.cielch = $.fn.ColorPickerSliders.rgb2lch(color.rgba);

[110] Fix | Delete

[111] Fix | Delete

_updateAllElements(disableinputupdate);

[112] Fix | Delete

[113] Fix | Delete

return true;

[114] Fix | Delete

}

[115] Fix | Delete

else {

[116] Fix | Delete

return false;

[117] Fix | Delete

}

[118] Fix | Delete

}

[119] Fix | Delete

[120] Fix | Delete

function showPopup() {

[121] Fix | Delete

$('.cp-container.cp-popup').hide();

[122] Fix | Delete

[123] Fix | Delete

var viewportwidth = $(window).width(),

[124] Fix | Delete

offset = triggerelement.offset(),

[125] Fix | Delete

popuporiginalwidth;

[126] Fix | Delete

[127] Fix | Delete

popuporiginalwidth = container.data('popup-original-width');

[128] Fix | Delete

[129] Fix | Delete

if (typeof popuporiginalwidth === "undefined") {

[130] Fix | Delete

popuporiginalwidth = container.outerWidth();

[131] Fix | Delete

container.data('popup-original-width', popuporiginalwidth);

[132] Fix | Delete

}

[133] Fix | Delete

[134] Fix | Delete

if (offset.left + popuporiginalwidth + 12 <= viewportwidth) {

[135] Fix | Delete

container.css('left', offset.left).width(popuporiginalwidth);

[136] Fix | Delete

}

[137] Fix | Delete

else if (popuporiginalwidth <= viewportwidth) {

[138] Fix | Delete

container.css('left', viewportwidth - popuporiginalwidth - 12).width(popuporiginalwidth);

[139] Fix | Delete

}

[140] Fix | Delete

else {

[141] Fix | Delete

container.css('left', 0).width(viewportwidth - 12);

[142] Fix | Delete

}

[143] Fix | Delete

[144] Fix | Delete

container.css('top', offset.top + triggerelement.outerHeight()).show();

[145] Fix | Delete

}

[146] Fix | Delete

[147] Fix | Delete

function hidePopup() {

[148] Fix | Delete

container.hide();

[149] Fix | Delete

}

[150] Fix | Delete

[151] Fix | Delete

function _initSettings() {

[152] Fix | Delete

settings = $.extend({

[153] Fix | Delete

color: 'hsl(342, 52%, 70%)',

[154] Fix | Delete

swatches: ['FFFFFF', 'C0C0C0', '808080', '000000', 'FF0000', '800000', 'FFFF00', '808000', '00FF00', '008000', '00FFFF', '008080', '0000FF', '000080', 'FF00FF', '800080'],

[155] Fix | Delete

customswatches: 'colorpickkersliders', // false or a grop name

[156] Fix | Delete

connectedinput: false, // can be a jquery object or a selector

[157] Fix | Delete

flat: false,

[158] Fix | Delete

disableautopopup: false,

[159] Fix | Delete

updateinterval: 30, // update interval of the sliders while in drag (ms)

[160] Fix | Delete

previewontriggerelement: true,

[161] Fix | Delete

previewcontrasttreshold: 15,

[162] Fix | Delete

previewformat: 'rgb', // rgb/hsl/hex

[163] Fix | Delete

erroneousciecolormarkers: true,

[164] Fix | Delete

invalidcolorsopacity: 1, // everything below 1 causes slightly slower responses

[165] Fix | Delete

finercierangeedges: true, // can be disabled for faster responses

[166] Fix | Delete

titleswatchesadd: "Add color to swatches",

[167] Fix | Delete

titleswatchesremove: "Remove color from swatches",

[168] Fix | Delete

titleswatchesreset: "Reset to default swatches",

[169] Fix | Delete

order: {},

[170] Fix | Delete

labels: {},

[171] Fix | Delete

onchange: function() {

[172] Fix | Delete

}

[173] Fix | Delete

}, options);

[174] Fix | Delete

[175] Fix | Delete

if (options.hasOwnProperty('order')) {

[176] Fix | Delete

settings.order = $.extend({

[177] Fix | Delete

opacity: false,

[178] Fix | Delete

hsl: false,

[179] Fix | Delete

rgb: false,

[180] Fix | Delete

cie: false,

[181] Fix | Delete

preview: false

[182] Fix | Delete

}, options.order);

[183] Fix | Delete

}

[184] Fix | Delete

else {

[185] Fix | Delete

settings.order = {

[186] Fix | Delete

opacity: 0,

[187] Fix | Delete

hsl: 1,

[188] Fix | Delete

rgb: 2,

[189] Fix | Delete

cie: 3, // cie sliders can increase response time of all sliders!

[190] Fix | Delete

preview: 4

[191] Fix | Delete

};

[192] Fix | Delete

}

[193] Fix | Delete

[194] Fix | Delete

if (!options.hasOwnProperty('labels')) {

[195] Fix | Delete

options.labels = {};

[196] Fix | Delete

}

[197] Fix | Delete

[198] Fix | Delete

settings.labels = $.extend({

[199] Fix | Delete

hslhue: 'Hue',

[200] Fix | Delete

hslsaturation: 'Saturation',

[201] Fix | Delete

hsllightness: 'Lightness',

[202] Fix | Delete

rgbred: 'RGB-Red',

[203] Fix | Delete

rgbgreen: 'RGB-Green',

[204] Fix | Delete

rgbblue: 'RGB-Blue',

[205] Fix | Delete

cielightness: 'CIE-Lightness',

[206] Fix | Delete

ciechroma: 'CIE-Chroma',

[207] Fix | Delete

ciehue: 'CIE-hue',

[208] Fix | Delete

opacity: 'Opacity',

[209] Fix | Delete

preview: 'Preview'

[210] Fix | Delete

}, options.labels);

[211] Fix | Delete

[212] Fix | Delete

// force preview when browser doesn't support css gradients

[213] Fix | Delete

if ((!settings.order.hasOwnProperty('preview') || settings.order.preview === false) && !$.fn.ColorPickerSliders.gradientSupported()) {

[214] Fix | Delete

settings.order.preview = 10;

[215] Fix | Delete

}

[216] Fix | Delete

}

[217] Fix | Delete

[218] Fix | Delete

function _buildHtml() {

[219] Fix | Delete

var sliders = [],

[220] Fix | Delete

color_picker_html = '';

[221] Fix | Delete

[222] Fix | Delete

if (settings.order.opacity !== false) {

[223] Fix | Delete

sliders[settings.order.opacity] = '<div class="cp-slider cp-opacity cp-transparency"><span>' + settings.labels.opacity + '</span><div class="cp-marker"></div></div>';

[224] Fix | Delete

}

[225] Fix | Delete

[226] Fix | Delete

if (settings.order.hsl !== false) {

[227] Fix | Delete

sliders[settings.order.hsl] = '<div class="cp-slider cp-hslhue cp-transparency"><span>' + settings.labels.hslhue + '</span><div class="cp-marker"></div></div><div class="cp-slider cp-hslsaturation cp-transparency"><span>' + settings.labels.hslsaturation + '</span><div class="cp-marker"></div></div><div class="cp-slider cp-hsllightness cp-transparency"><span>' + settings.labels.hsllightness + '</span><div class="cp-marker"></div></div>';

[228] Fix | Delete

}

[229] Fix | Delete

[230] Fix | Delete

if (settings.order.rgb !== false) {

[231] Fix | Delete

sliders[settings.order.rgb] = '<div class="cp-slider cp-rgbred cp-transparency"><span>' + settings.labels.rgbred + '</span><div class="cp-marker"></div></div><div class="cp-slider cp-rgbgreen cp-transparency"><span>' + settings.labels.rgbgreen + '</span><div class="cp-marker"></div></div><div class="cp-slider cp-rgbblue cp-transparency"><span>' + settings.labels.rgbblue + '</span><div class="cp-marker"></div></div>';

[232] Fix | Delete

}

[233] Fix | Delete

[234] Fix | Delete

if (settings.order.cie !== false) {

[235] Fix | Delete

sliders[settings.order.cie] = '<div class="cp-slider cp-cielightness cp-transparency"><span>' + settings.labels.cielightness + '</span><div class="cp-marker"></div></div><div class="cp-slider cp-ciechroma cp-transparency"><span>' + settings.labels.ciechroma + '</span><div class="cp-marker"></div></div><div class="cp-slider cp-ciehue cp-transparency"><span>' + settings.labels.ciehue + '</span><div class="cp-marker"></div></div>';

[236] Fix | Delete

}

[237] Fix | Delete

[238] Fix | Delete

if (settings.order.preview !== false) {

[239] Fix | Delete

sliders[settings.order.preview] = '<div class="cp-preview cp-transparency"><input type="text" readonly="readonly"></div>';

[240] Fix | Delete

}

[241] Fix | Delete

[242] Fix | Delete

color_picker_html += '<div class="cp-sliders">';

[243] Fix | Delete

[244] Fix | Delete

for (var i = 0; i < sliders.length; i++) {

[245] Fix | Delete

if (typeof sliders[i] === "undefined") {

[246] Fix | Delete

continue;

[247] Fix | Delete

}

[248] Fix | Delete

[249] Fix | Delete

color_picker_html += sliders[i];

[250] Fix | Delete

}

[251] Fix | Delete

[252] Fix | Delete

color_picker_html += '</div>';

[253] Fix | Delete

[254] Fix | Delete

if (settings.swatches) {

[255] Fix | Delete

color_picker_html += '<div class="cp-swatches"><button type="button" class="add" title="' + settings.titleswatchesadd + '"></button><button type="button" class="remove" title="' + settings.titleswatchesremove + '"></button><button type="button" class="reset" title="' + settings.titleswatchesreset + '"></button><ul></ul><div style="clear:both"></div></div>';

[256] Fix | Delete

}

[257] Fix | Delete

[258] Fix | Delete

if (settings.flat) {

[259] Fix | Delete

if (triggerelement.is("input")) {

[260] Fix | Delete

container = $('<div class="cp-container"></div>').insertAfter(triggerelement);

[261] Fix | Delete

}

[262] Fix | Delete

else {

[263] Fix | Delete

container = $('<div class="cp-container"></div>');

[264] Fix | Delete

triggerelement.append(container);

[265] Fix | Delete

}

[266] Fix | Delete

}

[267] Fix | Delete

else {

[268] Fix | Delete

[269] Fix | Delete

container = $('<div class="cp-container"></div>').appendTo('body');

[270] Fix | Delete

}

[271] Fix | Delete

[272] Fix | Delete

container.append(color_picker_html);

[273] Fix | Delete

[274] Fix | Delete

if (settings.connectedinput instanceof jQuery) {

[275] Fix | Delete

settings.connectedinput.add(triggerelement);

[276] Fix | Delete

}

[277] Fix | Delete

else if (settings.connectedinput === false) {

[278] Fix | Delete

settings.connectedinput = triggerelement;

[279] Fix | Delete

}

[280] Fix | Delete

else {

[281] Fix | Delete

settings.connectedinput = $(settings.connectedinput).add(triggerelement);

[282] Fix | Delete

}

[283] Fix | Delete

[284] Fix | Delete

if (!settings.flat) {

[285] Fix | Delete

container.addClass('cp-popup');

[286] Fix | Delete

}

[287] Fix | Delete

[288] Fix | Delete

var preview = settings.connectedinput.closest('.style-choice').find('.preview');

[289] Fix | Delete

preview = preview.length ? preview : settings.connectedinput.closest('.section-stream').find('.preview')

[290] Fix | Delete

container.data('preview', preview);

[291] Fix | Delete

container.data('input', settings.connectedinput);

[292] Fix | Delete

container.data('prop', settings.connectedinput.attr('id'));

[293] Fix | Delete

}

[294] Fix | Delete

[295] Fix | Delete

function _initElements() {

[296] Fix | Delete

elements = {

[297] Fix | Delete

connectedinput: false,

[298] Fix | Delete

actualswatch: false,

[299] Fix | Delete

swatchescontainer: $(".cp-swatches", container),

[300] Fix | Delete

swatches: $(".cp-swatches ul", container),

[301] Fix | Delete

swatches_add: $(".cp-swatches button.add", container),

[302] Fix | Delete

swatches_remove: $(".cp-swatches button.remove", container),

[303] Fix | Delete

swatches_reset: $(".cp-swatches button.reset", container),

[304] Fix | Delete

all_sliders: $(".cp-sliders, .cp-preview input", container),

[305] Fix | Delete

sliders: {

[306] Fix | Delete

hue: $(".cp-hslhue span", container),

[307] Fix | Delete

hue_marker: $(".cp-hslhue .cp-marker", container),

[308] Fix | Delete

saturation: $(".cp-hslsaturation span", container),

[309] Fix | Delete

saturation_marker: $(".cp-hslsaturation .cp-marker", container),

[310] Fix | Delete

lightness: $(".cp-hsllightness span", container),

[311] Fix | Delete

lightness_marker: $(".cp-hsllightness .cp-marker", container),

[312] Fix | Delete

opacity: $(".cp-opacity span", container),

[313] Fix | Delete

opacity_marker: $(".cp-opacity .cp-marker", container),

[314] Fix | Delete

red: $(".cp-rgbred span", container),

[315] Fix | Delete

red_marker: $(".cp-rgbred .cp-marker", container),

[316] Fix | Delete

green: $(".cp-rgbgreen span", container),

[317] Fix | Delete

green_marker: $(".cp-rgbgreen .cp-marker", container),

[318] Fix | Delete

blue: $(".cp-rgbblue span", container),

[319] Fix | Delete

blue_marker: $(".cp-rgbblue .cp-marker", container),

[320] Fix | Delete

cielightness: $(".cp-cielightness span", container),

[321] Fix | Delete

cielightness_marker: $(".cp-cielightness .cp-marker", container),

[322] Fix | Delete

ciechroma: $(".cp-ciechroma span", container),

[323] Fix | Delete

ciechroma_marker: $(".cp-ciechroma .cp-marker", container),

[324] Fix | Delete

ciehue: $(".cp-ciehue span", container),

[325] Fix | Delete

ciehue_marker: $(".cp-ciehue .cp-marker", container),

[326] Fix | Delete

preview: $(".cp-preview input", container)

[327] Fix | Delete

}

[328] Fix | Delete

};

[329] Fix | Delete

[330] Fix | Delete

if (settings.connectedinput) {

[331] Fix | Delete

if (settings.connectedinput instanceof jQuery) {

[332] Fix | Delete

elements.connectedinput = settings.connectedinput;

[333] Fix | Delete

}

[334] Fix | Delete

else {

[335] Fix | Delete

elements.connectedinput = $(settings.connectedinput);

[336] Fix | Delete

}

[337] Fix | Delete

}

[338] Fix | Delete

[339] Fix | Delete

if (!settings.customswatches) {

[340] Fix | Delete

elements.swatches_add.hide();

[341] Fix | Delete

elements.swatches_remove.hide();

[342] Fix | Delete

elements.swatches_reset.hide();

[343] Fix | Delete

}

[344] Fix | Delete

}

[345] Fix | Delete

[346] Fix | Delete

function destroyColorPicker() {

[347] Fix | Delete

if (container instanceof jQuery) {

[348] Fix | Delete

hidePopup();

[349] Fix | Delete

container.remove();

[350] Fix | Delete

alreadyinitialized = false;

[351] Fix | Delete

}

[352] Fix | Delete

}

[353] Fix | Delete

[354] Fix | Delete

function resetColorPicker() {

[355] Fix | Delete

init();

[356] Fix | Delete

}

[357] Fix | Delete

[358] Fix | Delete

function _bindEvents() {

[359] Fix | Delete

triggerelement.on('colorpickersliders.destroy', function() {

[360] Fix | Delete

destroyColorPicker();

[361] Fix | Delete

});

[362] Fix | Delete

[363] Fix | Delete

triggerelement.on('colorpickersliders.reset', function() {

[364] Fix | Delete

resetColorPicker();

[365] Fix | Delete

});

[366] Fix | Delete

[367] Fix | Delete

triggerelement.on('colorpickersliders.updateColor', function(e, newcolor) {

[368] Fix | Delete

updateColor(newcolor);

[369] Fix | Delete

});

[370] Fix | Delete

[371] Fix | Delete

triggerelement.on('colorpickersliders.showPopup', function() {

[372] Fix | Delete

showPopup();

[373] Fix | Delete

});

[374] Fix | Delete

[375] Fix | Delete

triggerelement.on('colorpickersliders.hidePopup', function() {

[376] Fix | Delete

hidePopup();

[377] Fix | Delete

});

[378] Fix | Delete

[379] Fix | Delete

$(document).on("colorpickersliders.changeswatches", function() {

[380] Fix | Delete

_renderSwatches();

[381] Fix | Delete

});

[382] Fix | Delete

[383] Fix | Delete

if (!settings.flat && !settings.disableautopopup) {

[384] Fix | Delete

// we need tabindex defined to be focusable

[385] Fix | Delete

if (typeof triggerelement.attr("tabindex") === "undefined") {

[386] Fix | Delete

triggerelement.attr("tabindex", -1);

[387] Fix | Delete

}

[388] Fix | Delete

[389] Fix | Delete

// buttons doesn't get focus in webkit browsers

[390] Fix | Delete

// https://bugs.webkit.org/show_bug.cgi?id=22261

[391] Fix | Delete

// and only input and button are focusable on iPad

[392] Fix | Delete

// so it is safer to register click on any other than inputs

[393] Fix | Delete

if (!triggerelement.is("input")) {

[394] Fix | Delete

$(triggerelement).on("click", function(ev) {

[395] Fix | Delete

showPopup();

[396] Fix | Delete

[397] Fix | Delete

ev.stopPropagation();

[398] Fix | Delete

});

[399] Fix | Delete

[400] Fix | Delete

$(document).on("click", function() {

[401] Fix | Delete

hidePopup();

[402] Fix | Delete

});

[403] Fix | Delete

}

[404] Fix | Delete

[405] Fix | Delete

$(triggerelement).on("focus", function(ev) {

[406] Fix | Delete

showPopup();

[407] Fix | Delete

[408] Fix | Delete

ev.stopPropagation();

[409] Fix | Delete

});

[410] Fix | Delete

[411] Fix | Delete

$(triggerelement).on("blur", function(ev) {

[412] Fix | Delete

hidePopup();

[413] Fix | Delete

[414] Fix | Delete

ev.stopPropagation();

[415] Fix | Delete

});

[416] Fix | Delete

[417] Fix | Delete

container.on("touchstart mousedown", function(ev) {

[418] Fix | Delete

ev.preventDefault();

[419] Fix | Delete

ev.stopPropagation();

[420] Fix | Delete

[421] Fix | Delete

return false;

[422] Fix | Delete

});

[423] Fix | Delete

}

[424] Fix | Delete

[425] Fix | Delete

container.on("contextmenu", function(ev) {

[426] Fix | Delete

ev.preventDefault();

[427] Fix | Delete

return false;

[428] Fix | Delete

});

[429] Fix | Delete

[430] Fix | Delete

elements.swatches.on("click", "li span", function(ev) {

[431] Fix | Delete

var color = $(this).css("background-color");

[432] Fix | Delete

updateColor(color);

[433] Fix | Delete

ev.preventDefault();

[434] Fix | Delete

});

[435] Fix | Delete

[436] Fix | Delete

elements.swatches_add.on("click", function(ev) {

[437] Fix | Delete

_addCurrentColorToSwatches();

[438] Fix | Delete

ev.preventDefault();

[439] Fix | Delete

});

[440] Fix | Delete

[441] Fix | Delete

elements.swatches_remove.on("click", function(ev) {

[442] Fix | Delete

_removeActualColorFromSwatches();

[443] Fix | Delete

ev.preventDefault();

[444] Fix | Delete

});

[445] Fix | Delete

[446] Fix | Delete

elements.swatches_reset.on("click", function(ev) {

[447] Fix | Delete

_resetSwatches();

[448] Fix | Delete

ev.preventDefault();

[449] Fix | Delete

});

[450] Fix | Delete

[451] Fix | Delete

elements.sliders.hue.parent().on("touchstart mousedown", function(ev) {

[452] Fix | Delete

ev.preventDefault();

[453] Fix | Delete

[454] Fix | Delete

if (ev.which > 1) {

[455] Fix | Delete

return;

[456] Fix | Delete

}

[457] Fix | Delete

[458] Fix | Delete

dragTarget = "hue";

[459] Fix | Delete

[460] Fix | Delete

var percent = _updateMarkerPosition(dragTarget, ev);

[461] Fix | Delete

[462] Fix | Delete

_updateColorsProperty('hsla', 'h', 3.6 * percent);

[463] Fix | Delete

[464] Fix | Delete

_updateAllElements();

[465] Fix | Delete

});

[466] Fix | Delete

[467] Fix | Delete

elements.sliders.saturation.parent().on("touchstart mousedown", function(ev) {

[468] Fix | Delete

ev.preventDefault();

[469] Fix | Delete

[470] Fix | Delete

if (ev.which > 1) {

[471] Fix | Delete

return;

[472] Fix | Delete

}

[473] Fix | Delete

[474] Fix | Delete

dragTarget = "saturation";

[475] Fix | Delete

[476] Fix | Delete

var percent = _updateMarkerPosition(dragTarget, ev);

[477] Fix | Delete

[478] Fix | Delete

_updateColorsProperty('hsla', 's', percent / 100);

[479] Fix | Delete

[480] Fix | Delete

_updateAllElements();

[481] Fix | Delete

});

[482] Fix | Delete

[483] Fix | Delete

elements.sliders.lightness.parent().on("touchstart mousedown", function(ev) {

[484] Fix | Delete

ev.preventDefault();

[485] Fix | Delete

[486] Fix | Delete

if (ev.which > 1) {

[487] Fix | Delete

return;

[488] Fix | Delete

}

[489] Fix | Delete

[490] Fix | Delete

dragTarget = "lightness";

[491] Fix | Delete

[492] Fix | Delete

var percent = _updateMarkerPosition(dragTarget, ev);

[493] Fix | Delete

[494] Fix | Delete

_updateColorsProperty('hsla', 'l', percent / 100);

[495] Fix | Delete

[496] Fix | Delete

_updateAllElements();

[497] Fix | Delete

});

[498] Fix | Delete

[499] Fix | Delete