How to use color method in Testcafe

Best JavaScript code snippet using testcafe

Run Testcafe automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

jquery.colorpicker.js

Source: jquery.colorpicker.js Github

copy
1/*
2  mColorPicker
3  Version: 1.0 r34
4  
5  Copyright (c) 2010 Meta100 LLC.
6  http://www.meta100.com/
7  
8  Licensed under the MIT license 
9  http://www.opensource.org/licenses/mit-license.php 
10*/
11
12// After this script loads set:
13// $.fn.mColorPicker.init.replace = '.myclass'
14// to have this script apply to input.myclass,
15// instead of the default input[type=color]
16// To turn of automatic operation and run manually set:
17// $.fn.mColorPicker.init.replace = false
18// To use manually call like any other jQuery plugin
19// $('input.foo').mColorPicker({options})
20// options:
21// imageFolder - Change to move image location.
22// swatches - Initial colors in the swatch, must an array of 10 colors.
23// init:
24// $.fn.mColorPicker.init.enhancedSwatches - Turn of saving and loading of swatch to cookies.
25// $.fn.mColorPicker.init.allowTransparency - Turn off transperancy as a color option.
26// $.fn.mColorPicker.init.showLogo - Turn on/off the meta100 logo (You don't really want to turn it off, do you?).
27
28(function($){
29
30  var $o;
31
32  $.fn.mColorPicker = function(options) {
33            
34    $o = $.extend($.fn.mColorPicker.defaults, options);  
35
36    if ($o.swatches.length < 10) $o.swatches = $.fn.mColorPicker.defaults.swatches
37    if ($("div#mColorPicker").length < 1) $.fn.mColorPicker.drawPicker();
38
39    if ($('#css_disabled_color_picker').length < 1) $('head').prepend('<style id="css_disabled_color_picker" type="text/css">.mColorPicker[disabled] + span, .mColorPicker[disabled="disabled"] + span, .mColorPicker[disabled="true"] + span {filter:alpha(opacity=50);-moz-opacity:0.5;-webkit-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;}</style>');
40
41    $('.mColorPicker').live('keyup', function () {
42  
43      try {
44  
45        $(this).css({
46          'background-color': $(this).val()
47        }).css({
48          'color': $.fn.mColorPicker.textColor($(this).css('background-color'))
49        }).trigger('change');
50      } catch (r) {}
51    });
52
53    $('.mColorPickerTrigger').live('click', function () {
54
55      $.fn.mColorPicker.colorShow($(this).attr('id').replace('icp_', ''));
56    });
57
58    this.each(function () {
59
60      $.fn.mColorPicker.drawPickerTriggers($(this));
61    });
62
63    return this;
64  };
65
66  $.fn.mColorPicker.currentColor = false;
67  $.fn.mColorPicker.currentValue = false;
68  $.fn.mColorPicker.color = false;
69
70  $.fn.mColorPicker.init = {
71    replace: '[type=color]',
72    index: 0,
73    enhancedSwatches: true,
74    allowTransparency: false,
75  	checkRedraw: 'DOMUpdated', // Change to 'ajaxSuccess' for ajax only or false if not needed
76  	liveEvents: false,
77    showLogo: false
78  };
79
80  $.fn.mColorPicker.defaults = {
81    imageFolder: '../img/admin/',
82    swatches: [
83      "#ffffff",
84      "#ffff00",
85      "#00ff00",
86      "#00ffff",
87      "#0000ff",
88      "#ff00ff",
89      "#ff0000",
90      "#4c2b11",
91      "#3b3b3b",
92      "#000000"
93    ]
94  };
95
96  $.fn.mColorPicker.liveEvents = function() {
97
98    $.fn.mColorPicker.init.liveEvents = true;
99
100    if ($.fn.mColorPicker.init.checkRedraw && $.fn.mColorPicker.init.replace) {
101
102      $(document).bind($.fn.mColorPicker.init.checkRedraw + '.mColorPicker', function () {
103
104        $('input[data-mcolorpicker!="true"]').filter(function() {
105    
106          return ($.fn.mColorPicker.init.replace == '[type=color]')? this.getAttribute("type") == 'color': $(this).is($.fn.mColorPicker.init.replace);
107        }).mColorPicker();
108      });
109    }
110  };
111
112  $.fn.mColorPicker.drawPickerTriggers = function ($t) {
113
114    if ($t[0].nodeName.toLowerCase() != 'input') return false;
115
116    var id = $t.attr('id') || 'color_' + $.fn.mColorPicker.init.index++,
117        hidden = false;
118
119    $t.attr('id', id);
120  
121    if ($t.attr('text') == 'hidden' || $t.attr('data-text') == 'hidden') hidden = true;
122
123    var color = $t.val(),
124        width = ($t.width() > 0)? $t.width(): parseInt($t.css('width'), 10),
125        height = ($t.height())? $t.height(): parseInt($t.css('height'), 10),
126        flt = $t.css('float'),
127        image = (color == 'transparent')? "url('" + $o.imageFolder + "/grid.gif')": '',
128        colorPicker = '';
129
130    $('body').append('<span id="color_work_area"></span>');
131    $('span#color_work_area').append($t.clone(true));
132    colorPicker = $('span#color_work_area').html().replace(/type="color"/gi, '').replace(/input /gi, (hidden)? 'input type="hidden"': 'input type="text"');
133    $('span#color_work_area').html('').remove();
134    $t.after(
135      (hidden)? '<span style="cursor:pointer;border:1px solid black;float:' + flt + ';width:' + width + 'px;height:' + height + 'px;" id="icp_' + id + '">&nbsp;</span>': ''
136    ).after(colorPicker).remove();   
137
138    if (hidden) {
139
140      $('#icp_' + id).css({
141        'background-color': color,
142        'background-image': image,
143        'display': 'inline-block'
144      }).attr(
145        'class', $('#' + id).attr('class')
146      ).addClass(
147        'mColorPickerTrigger'
148      );
149    } else {
150
151      $('#' + id).css({
152        'background-color': color,
153        'background-image': image
154      }).css({
155        'color': $.fn.mColorPicker.textColor($('#' + id).css('background-color'))
156      }).after(
157        '<span style="cursor:pointer;" id="icp_' + id + '" class="mColorPickerTrigger input-group-addon"><img src="' + $o.imageFolder + 'color.png" style="border:0;margin:0 0 0 3px" align="absmiddle"></span>'
158      ).addClass('mColorPickerInput');
159    }
160
161    $('#icp_' + id).attr('data-mcolorpicker', 'true');
162
163    $('#' + id).addClass('mColorPicker');
164
165    return $('#' + id);
166  };
167
168  $.fn.mColorPicker.drawPicker = function () {
169
170    $(document.createElement("div")).attr(
171      "id","mColorPicker"
172    ).css(
173      'display','none'
174    ).html(
175      '<div id="mColorPickerWrapper"><div id="mColorPickerImg" class="mColor"></div><div id="mColorPickerImgGray" class="mColor"></div><div id="mColorPickerSwatches"><div class="mClear"></div></div><div id="mColorPickerFooter"><input type="text" size="8" id="mColorPickerInput"/></div></div>'
176    ).appendTo("body");
177
178    $(document.createElement("div")).attr("id","mColorPickerBg").css({
179      'display': 'none'
180    }).appendTo("body");
181
182    for (n = 9; n > -1; n--) {
183
184      $(document.createElement("div")).attr({
185        'id': 'cell' + n,
186        'class': "mPastColor" + ((n > 0)? ' mNoLeftBorder': '')
187      }).html(
188        '&nbsp;'
189      ).prependTo("#mColorPickerSwatches");
190    }
191
192    $('#mColorPicker').css({
193      'border':'1px solid #ccc',
194      'color':'#fff',
195      'z-index':999998,
196      'width':'194px',
197      'height':'184px',
198      'font-size':'12px',
199      'font-family':'times'
200    });
201
202    $('.mPastColor').css({
203      'height':'18px',
204      'width':'18px',
205      'border':'1px solid #000',
206      'float':'left'
207    });
208
209    $('#colorPreview').css({
210      'height':'50px'
211    });
212
213    $('.mNoLeftBorder').css({
214      'border-left':0
215    });
216
217    $('.mClear').css({
218      'clear':'both'
219    });
220
221    $('#mColorPickerWrapper').css({
222      'position':'relative',
223      'border':'solid 1px gray',
224      'z-index':999999
225    });
226    
227    $('#mColorPickerImg').css({
228      'height':'128px',
229      'width':'192px',
230      'border':0,
231      'cursor':'crosshair',
232      'background-image':"url('" + $o.imageFolder + "colorpicker.png')"
233    });
234    
235    $('#mColorPickerImgGray').css({
236      'height':'8px',
237      'width':'192px',
238      'border':0,
239      'cursor':'crosshair',
240      'background-image':"url('" + $o.imageFolder + "graybar.jpg')"
241    });
242    
243    $('#mColorPickerInput').css({
244      'border':'solid 1px gray',
245      'font-size':'10pt',
246      'margin':'3px',
247      'width':'80px'
248    });
249    
250    $('#mColorPickerImgGrid').css({
251      'border':0,
252      'height':'20px',
253      'width':'20px',
254      'vertical-align':'text-bottom'
255    });
256    
257    $('#mColorPickerSwatches').css({
258      'border-right':'1px solid #000'
259    });
260    
261    $('#mColorPickerFooter').css({
262      'background-image':"url('" + $o.imageFolder + "grid.gif')",
263      'position': 'relative',
264      'height':'26px'
265    });
266
267    if ($.fn.mColorPicker.init.allowTransparency) $('#mColorPickerFooter').prepend('<span id="mColorPickerTransparent" class="mColor" style="font-size:16px;color:#000;padding-right:30px;padding-top:3px;cursor:pointer;overflow:hidden;float:right;">transparent</span>');
268    if ($.fn.mColorPicker.init.showLogo) $('#mColorPickerFooter').prepend('<a href="http://meta100.com/" title="Meta100 - Designing Fun" alt="Meta100 - Designing Fun" style="float:right;" target="_blank"><img src="' +  $o.imageFolder + 'meta100.png" title="Meta100 - Designing Fun" alt="Meta100 - Designing Fun" style="border:0;border-left:1px solid #aaa;right:0;position:absolute;"/></a>');
269
270    $("#mColorPickerBg").click($.fn.mColorPicker.closePicker);
271
272    var swatch = $.fn.mColorPicker.getCookie('swatches'),
273        i = 0;
274
275    if (typeof swatch == 'string') swatch = swatch.split('||');
276    if (swatch == null || $.fn.mColorPicker.init.enhancedSwatches || swatch.length < 10) swatch = $o.swatches;
277
278    $(".mPastColor").each(function() {
279
280      $(this).css('background-color', swatch[i++].toLowerCase());
281    });
282  };
283
284  $.fn.mColorPicker.closePicker = function () {
285
286    $(".mColor, .mPastColor, #mColorPickerInput, #mColorPickerWrapper").unbind();
287    $("#mColorPickerBg").hide();
288    $("#mColorPicker").fadeOut()
289  };
290
291  $.fn.mColorPicker.colorShow = function (id) {
292
293    var $e = $("#icp_" + id);
294        pos = $e.offset(),
295        $i = $("#" + id);
296        hex = $i.attr('data-hex') || $i.attr('hex'),
297        pickerTop = pos.top + $e.outerHeight(),
298        pickerLeft = pos.left,
299        $d = $(document),
300        $m = $("#mColorPicker");
301
302    if ($i.attr('disabled')) return false;
303
304		// KEEP COLOR PICKER IN VIEWPORT
305		if (pickerTop + $m.height() > $d.height()) pickerTop = pos.top - $m.height();
306		if (pickerLeft + $m.width() > $d.width()) pickerLeft = pos.left - $m.width() + $e.outerWidth();
307  
308    $m.css({
309      'top':(pickerTop) + "px",
310      'left':(pickerLeft) + "px",
311      'position':'absolute'
312    }).fadeIn("fast");
313  
314    $("#mColorPickerBg").css({
315      'z-index':999990,
316      'background':'black',
317      'opacity': .01,
318      'position':'absolute',
319      'top':0,
320      'left':0,
321      'width': parseInt($d.width(), 10) + 'px',
322      'height': parseInt($d.height(), 10) + 'px'
323    }).show();
324  
325    var def = $i.val();
326  
327    $('#colorPreview span').text(def);
328    $('#colorPreview').css('background', def);
329    $('#color').val(def);
330  
331    if ($('#' + id).attr('data-text')) $.fn.mColorPicker.currentColor = $e.css('background-color');
332    else $.fn.mColorPicker.currentColor = $i.css('background-color');
333
334    if (hex == 'true') $.fn.mColorPicker.currentColor = $.fn.mColorPicker.RGBtoHex($.fn.mColorPicker.currentColor);
335
336    $("#mColorPickerInput").val($.fn.mColorPicker.currentColor);
337  
338    $('.mColor, .mPastColor').bind('mousemove', function(e) {
339  
340      var offset = $(this).offset();
341
342      $.fn.mColorPicker.color = $(this).css("background-color");
343
344      if ($(this).hasClass('mPastColor') && hex == 'true') $.fn.mColorPicker.color = $.fn.mColorPicker.RGBtoHex($.fn.mColorPicker.color);
345      else if ($(this).hasClass('mPastColor') && hex != 'true') $.fn.mColorPicker.color = $.fn.mColorPicker.hexToRGB($.fn.mColorPicker.color);
346      else if ($(this).attr('id') == 'mColorPickerTransparent') $.fn.mColorPicker.color = 'transparent';
347      else if (!$(this).hasClass('mPastColor')) $.fn.mColorPicker.color = $.fn.mColorPicker.whichColor(e.pageX - offset.left, e.pageY - offset.top + (($(this).attr('id') == 'mColorPickerImgGray')? 128: 0), hex);
348
349      $.fn.mColorPicker.setInputColor(id, $.fn.mColorPicker.color);
350    }).click(function() {
351  
352      $.fn.mColorPicker.colorPicked(id);
353    });
354  
355    $('#mColorPickerInput').bind('keyup', function (e) {
356  
357      try {
358  
359        $.fn.mColorPicker.color = $('#mColorPickerInput').val();
360        $.fn.mColorPicker.setInputColor(id, $.fn.mColorPicker.color);
361    
362        if (e.which == 13) $.fn.mColorPicker.colorPicked(id);
363      } catch (r) {}
364
365    }).bind('blur', function () {
366  
367      $.fn.mColorPicker.setInputColor(id, $.fn.mColorPicker.currentColor);
368    });
369  
370    $('#mColorPickerWrapper').bind('mouseleave', function () {
371  
372      $.fn.mColorPicker.setInputColor(id, $.fn.mColorPicker.currentColor);
373    });
374  };
375
376  $.fn.mColorPicker.setInputColor = function (id, color) {
377  
378    var image = (color == 'transparent')? "url('" + $o.imageFolder + "grid.gif')": '',
379        textColor = $.fn.mColorPicker.textColor(color);
380  
381    if ($('#' + id).attr('data-text') || $('#' + id).attr('text')) $("#icp_" + id).css({'background-color': color, 'background-image': image});
382    $("#" + id).val(color).css({'background-color': color, 'background-image': image, 'color' : textColor}).trigger('change');
383    $("#mColorPickerInput").val(color);
384  };
385
386  $.fn.mColorPicker.textColor = function (val) {
387  
388    if (typeof val == 'undefined' || val == 'transparent') return "black";
389    val = $.fn.mColorPicker.RGBtoHex(val);
390    return (parseInt(val.substr(1, 2), 16) + parseInt(val.substr(3, 2), 16) + parseInt(val.substr(5, 2), 16) < 400)? 'white': 'black';
391  };
392
393  $.fn.mColorPicker.setCookie = function (name, value, days) {
394  
395    var cookie_string = name + "=" + escape(value),
396      expires = new Date();
397      expires.setDate(expires.getDate() + days);
398    cookie_string += "; expires=" + expires.toGMTString();
399   
400    document.cookie = cookie_string;
401  };
402
403  $.fn.mColorPicker.getCookie = function (name) {
404  
405    var results = document.cookie.match ( '(^|;) ?' + name + '=([^;]*)(;|$)' );
406  
407    if (results) return (unescape(results[2]));
408    else return null;
409  };
410
411  $.fn.mColorPicker.colorPicked = function (id) {
412  
413    $.fn.mColorPicker.closePicker();
414  
415    if ($.fn.mColorPicker.init.enhancedSwatches) $.fn.mColorPicker.addToSwatch();
416  
417    $("#" + id).trigger('colorpicked');
418  };
419
420  $.fn.mColorPicker.addToSwatch = function (color) {
421  
422    var swatch = []
423        i = 0;
424 
425    if (typeof color == 'string') $.fn.mColorPicker.color = color.toLowerCase();
426  
427    $.fn.mColorPicker.currentValue = $.fn.mColorPicker.currentColor = $.fn.mColorPicker.color;
428  
429    if ($.fn.mColorPicker.color != 'transparent') swatch[0] = $.fn.mColorPicker.color.toLowerCase();
430  
431    $('.mPastColor').each(function() {
432  
433      $.fn.mColorPicker.color = $(this).css('background-color').toLowerCase();
434
435      if ($.fn.mColorPicker.color != swatch[0] && $.fn.mColorPicker.RGBtoHex($.fn.mColorPicker.color) != swatch[0] && $.fn.mColorPicker.hexToRGB($.fn.mColorPicker.color) != swatch[0] && swatch.length < 10) swatch[swatch.length] = $.fn.mColorPicker.color;
436  
437      $(this).css('background-color', swatch[i++])
438    });
439
440    if ($.fn.mColorPicker.init.enhancedSwatches) $.fn.mColorPicker.setCookie('swatches', swatch.join('||'), 365);
441  };
442
443  $.fn.mColorPicker.whichColor = function (x, y, hex) {
444  
445    var colorR = colorG = colorB = 255;
446    
447    if (x < 32) {
448  
449      colorG = x * 8;
450      colorB = 0;
451    } else if (x < 64) {
452  
453      colorR = 256 - (x - 32 ) * 8;
454      colorB = 0;
455    } else if (x < 96) {
456  
457      colorR = 0;
458      colorB = (x - 64) * 8;
459    } else if (x < 128) {
460  
461      colorR = 0;
462      colorG = 256 - (x - 96) * 8;
463    } else if (x < 160) {
464  
465      colorR = (x - 128) * 8;
466      colorG = 0;
467    } else {
468  
469      colorG = 0;
470      colorB = 256 - (x - 160) * 8;
471    }
472  
473    if (y < 64) {
474  
475      colorR += (256 - colorR) * (64 - y) / 64;
476      colorG += (256 - colorG) * (64 - y) / 64;
477      colorB += (256 - colorB) * (64 - y) / 64;
478    } else if (y <= 128) {
479  
480      colorR -= colorR * (y - 64) / 64;
481      colorG -= colorG * (y - 64) / 64;
482      colorB -= colorB * (y - 64) / 64;
483    } else if (y > 128) {
484  
485      colorR = colorG = colorB = 256 - ( x / 192 * 256 );
486    }
487
488    colorR = Math.round(Math.min(colorR, 255));
489    colorG = Math.round(Math.min(colorG, 255));
490    colorB = Math.round(Math.min(colorB, 255));
491
492    if (hex == 'true') {
493
494      colorR = colorR.toString(16);
495      colorG = colorG.toString(16);
496      colorB = colorB.toString(16);
497      
498      if (colorR.length < 2) colorR = 0 + colorR;
499      if (colorG.length < 2) colorG = 0 + colorG;
500      if (colorB.length < 2) colorB = 0 + colorB;
501
502      return "#" + colorR + colorG + colorB;
503    }
504    
505    return "rgb(" + colorR + ', ' + colorG + ', ' + colorB + ')';
506  };
507
508  $.fn.mColorPicker.RGBtoHex = function (color) {
509
510    color = color.toLowerCase();
511
512    if (typeof color == 'undefined') return '';
513    if (color.indexOf('#') > -1 && color.length > 6) return color;
514    if (color.indexOf('rgb') < 0) return color;
515
516    if (color.indexOf('#') > -1) {
517
518      return '#' + color.substr(1, 1) + color.substr(1, 1) + color.substr(2, 1) + color.substr(2, 1) + color.substr(3, 1) + color.substr(3, 1);
519    }
520
521    var hexArray = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"],
522        decToHex = "#",
523        code1 = 0;
524  
525    color = color.replace(/[^0-9,]/g, '').split(",");
526
527    for (var n = 0; n < color.length; n++) {
528
529      code1 = Math.floor(color[n] / 16);
530      decToHex += hexArray[code1] + hexArray[color[n] - code1 * 16];
531    }
532  
533    return decToHex;
534  };
535
536  $.fn.mColorPicker.hexToRGB = function (color) {
537
538    color = color.toLowerCase();
539  
540    if (typeof color == 'undefined') return '';
541    if (color.indexOf('rgb') > -1) return color;
542    if (color.indexOf('#') < 0) return color;
543
544    var c = color.replace('#', '');
545
546    if (c.length < 6) c = c.substr(0, 1) + c.substr(0, 1) + c.substr(1, 1) + c.substr(1, 1) + c.substr(2, 1) + c.substr(2, 1);
547
548    return 'rgb(' + parseInt(c.substr(0, 2), 16) + ', ' + parseInt(c.substr(2, 2), 16) + ', ' + parseInt(c.substr(4, 2), 16) + ')';
549  };
550
551    $(document).ready(function () {
552
553    if ($.fn.mColorPicker.init.replace) {
554    
555      $('input[data-mcolorpicker!="true"]').filter(function() {
556    
557        return ($.fn.mColorPicker.init.replace == '[type=color]')? this.getAttribute("type") == 'color': $(this).is($.fn.mColorPicker.init.replace);
558        }).mColorPicker();
559
560      $.fn.mColorPicker.liveEvents();
561  }
562  });
563})(jQuery);
Full Screen

mColorPicker.js

Source: mColorPicker.js Github

copy
1/*
2  mColorPicker
3  Version: 1.0.0
4  
5  Copyright (c) 2010 Meta100 LLC.
6  
7  Permission is hereby granted, free of charge, to any person
8  obtaining a copy of this software and associated documentation
9  files (the "Software"), to deal in the Software without
10  restriction, including without limitation the rights to use,
11  copy, modify, merge, publish, distribute, sublicense, and/or sell
12  copies of the Software, and to permit persons to whom the
13  Software is furnished to do so, subject to the following
14  conditions:
15  
16  The above copyright notice and this permission notice shall be
17  included in all copies or substantial portions of the Software.
18  
19  Except as contained in this notice, the name(s) of the above 
20  copyright holders shall not be used in advertising or otherwise 
21  to promote the sale, use or other dealings in this Software 
22  without prior written authorization.
23  
24  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
25  EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
26  OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
27  NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
28  HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
29  WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
30  FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
31  OTHER DEALINGS IN THE SOFTWARE.
32*/
33
34mColorPicker = {
35  current_color: false,
36  current_value: false,
37  color: false,
38  imageUrl: cfg_site_url+'js/lib/jQuery_plugins/mColorPicker/images/', //Change if you want to use local images.
39  swatches: ["#ffffff","#ffff00","#00ff00","#00ffff","#0000ff","#ff00ff","#ff0000","#4c2b11","#3b3b3b","#000000"],
40  colorShow: function (id, updateInput) {
41
42    var id2 = 'icp_' + id;
43        eICP = jQuery("#" + id2).offset();
44  
45    jQuery("#mColorPicker").css({
46      'top':(eICP.top + jQuery("#" + id2).outerHeight()) + "px",
47      'left':(eICP.left) + "px",
48      'position':'absolute'
49    }).fadeIn("fast");
50  
51    jQuery("#mColorPickerBg").css({
52      'position':'absolute',
53      'top':0,
54      'left':0,
55      'width':'100%',
56      'height':'100%'
57    }).fadeIn("fast");
58  
59    var def = jQuery("#" + id).val();
60  
61    jQuery('#colorPreview span').text(def);
62    jQuery('#colorPreview').css('background', def);
63    jQuery('#color').val(def);
64  
65    mColorPicker.current_color = jQuery('#' + id).val();
66    mColorPicker.color = jQuery('#' + id).css('background-color');
67    var hxs = jQuery('#mColorPicker');
68  
69    jQuery('#mColorPickerImg').unbind().mousemove(function(e) {
70  
71      var offset = jQuery('#mColorPickerImg').offset();
72  
73      mColorPicker.color = mColorPicker.whichColor (e.pageX - offset.left, e.pageY - offset.top);
74      mColorPicker.setInputColor(id, mColorPicker.color, updateInput);
75    }).bind('mouseleave', function (e) {
76  
77      mColorPicker.setInputColor(id, mColorPicker.current_color, updateInput);
78    }).click(function(e) {
79  
80      mColorPicker.colorPicked(id, updateInput);
81    });
82  
83    jQuery('#mColorPickerImgGray').unbind().mousemove(function(e) {
84  
85      var offset = jQuery('#mColorPickerImgGray').offset();
86  
87      mColorPicker.color = mColorPicker.whichColor (e.pageX - offset.left, e.pageY - offset.top + 128);
88      mColorPicker.setInputColor(id, mColorPicker.color, updateInput);
89    }).bind('mouseleave', function (e) {
90  
91      mColorPicker.setInputColor(id, mColorPicker.current_color, updateInput);
92    }).click(function(e) {
93  
94      mColorPicker.colorPicked(id, updateInput);
95    });
96  
97    jQuery('.pastColor').unbind().mousemove(function(e) {
98  
99      mColorPicker.color = mColorPicker.toRGBHex(jQuery(this).css("background-color"));
100      mColorPicker.setInputColor(id, mColorPicker.color, updateInput);
101    }).bind('mouseleave', function (e) {
102  
103      mColorPicker.setInputColor(id, mColorPicker.current_color, updateInput);
104    }).click(function(e) {
105  
106      mColorPicker.colorPicked(id, updateInput);
107    });
108  
109    jQuery('#mColorPickerTransparent').unbind().mouseover(function(e) {
110  
111      mColorPicker.color = 'transparent';
112      mColorPicker.setInputColor(id, mColorPicker.color, updateInput);
113    }).bind('mouseleave', function (e) {
114  
115      mColorPicker.setInputColor(id, mColorPicker.current_color, updateInput);
116    }).click(function(e) {
117  
118      mColorPicker.colorPicked(id, updateInput);
119    });
120  
121    jQuery('#mColorPickerInput').unbind().bind('keyup', function (e) {
122  
123      mColorPicker.color = jQuery('#mColorPickerInput').val();
124      mColorPicker.setInputColor(id, mColorPicker.color, updateInput);
125  
126      if (e.which == 13) {
127        mColorPicker.colorPicked(id, updateInput);
128      }
129    }).bind('blur', function (e) {
130  
131      mColorPicker.setInputColor(id, mColorPicker.current_color, updateInput);
132    });
133  
134    jQuery('#mColorPickerSwatches').unbind().bind('mouseleave', function (e) {
135  
136      mColorPicker.setInputColor(id, mColorPicker.current_color, updateInput);
137    });
138  
139    jQuery('#mColorPickerFooter').unbind().bind('mouseleave', function (e) {
140  
141      mColorPicker.setInputColor(id, mColorPicker.current_color, updateInput);
142    });
143  
144    jQuery('#mColorPickerWrapper').unbind().bind('mouseleave', function (e) {
145  
146      mColorPicker.setInputColor(id, mColorPicker.current_color, updateInput);
147    });
148  
149    jQuery('#mColorPicker').unbind().bind('mouseleave', function (e) {
150  
151      mColorPicker.setInputColor(id, mColorPicker.current_color, updateInput);
152    });
153  },
154  setInputColor: function (id, color, updateInput) {
155  
156    var image = (color == 'transparent')? "url('" + mColorPicker.imageUrl + "grid.gif')": '',
157      textColor = (color == 'transparent')? "#000000": mColorPicker.textColor(color);
158  
159    if (updateInput) jQuery("#icp_" + id).css({'background-color': color, 'background-image': image});
160    jQuery("#" + id).val(color).css({'background-color': color, 'background-image': image, 'color' : textColor});
161    jQuery("#mColorPickerInput").val(color);
162  },
163  textColor: function (val) {
164  
165    return (parseInt(val.substr(1, 2), 16) + parseInt(val.substr(3, 2), 16) + parseInt(val.substr(5, 2), 16) < 400)? 'white': 'black';
166  },
167  set_cookie: function (name, value, days) {
168  
169    var cookie_string = name + "=" + escape(value),
170      expires = new Date();
171      expires.setDate(expires.getDate() + days);
172    cookie_string += "; expires=" + expires.toGMTString();
173   
174    document.cookie = cookie_string;
175  },
176  get_cookie: function (cookie_name) {
177  
178    var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' );
179  
180    if (results) return (unescape(results[2]));
181    else return null;
182  },
183  colorPicked: function (id, updateInput) {
184  
185    var swatch = [],
186        i = 0;
187  
188    mColorPicker.current_value = mColorPicker.current_color = mColorPicker.color;
189  
190    jQuery("#mColorPickerImg").unbind();
191    jQuery("#mColorPickerImgGray").unbind();
192    jQuery(".pastColor").unbind();
193    jQuery("#mColorPickerBg").hide();
194    jQuery("#mColorPicker").fadeOut();
195  
196    if (mColorPicker.color != 'transparent') swatch[0] = mColorPicker.color;
197  
198    jQuery('.pastColor').each(function() {
199  
200      var color = mColorPicker.toRGBHex(jQuery(this).css('background-color'));
201
202      if (color != swatch[0] && swatch.length < 10) {
203  
204        swatch[swatch.length] = color;
205      }
206  
207      jQuery(this).css('background-color', swatch[i++])
208    });
209  
210    mColorPicker.set_cookie('swatches', swatch.join(','), 365);
211  },
212  whichColor: function(x,y){
213  
214    var colorR = colorG = colorB = 256;
215    
216    if (x < 32) {
217  
218      colorG = x * 8;
219      colorB = 1;
220    } else if (x < 64) {
221  
222      colorR = 256 - (x - 32 ) * 8;
223      colorB = 1;
224    } else if (x < 96) {
225  
226      colorR = 1;
227      colorB = (x - 64) * 8;
228    } else if (x < 128) {
229  
230      colorR = 1;
231      colorG = 256 - (x - 96) * 8;
232    } else if (x < 160) {
233  
234      colorR = (x - 128) * 8;
235      colorG = 1;
236    } else {
237  
238      colorG = 1;
239      colorB = 256 - (x - 160) * 8;
240    }
241  
242    if (y < 64) {
243  
244      colorR = colorR + (256 - colorR) * (64 - y) / 64;
245      colorG = colorG + (256 - colorG) * (64 - y) / 64;
246      colorB = colorB + (256 - colorB) * (64 - y) / 64;
247    } else if (y <= 128) {
248  
249      colorR = colorR - colorR * (y - 64) / 64;
250      colorG = colorG - colorG * (y - 64) / 64;
251      colorB = colorB - colorB * (y - 64) / 64;
252    } else if (y > 128) {
253  
254      colorR = 256 - ( x / 192 * 256 );
255      colorG = 256 - ( x / 192 * 256 );
256      colorB = 256 - ( x / 192 * 256 );
257    }
258    
259    colorR = parseInt(colorR);
260    colorG = parseInt(colorG);
261    colorB = parseInt(colorB);
262    
263    if (colorR >= 256) colorR = 255;
264    if (colorG >= 256) colorG = 255;
265    if (colorB >= 256) colorB = 255;
266    
267    colorR = colorR.toString(16);
268    colorG = colorG.toString(16);
269    colorB = colorB.toString(16);
270    
271    if (colorR.length < 2) colorR = 0 + colorR;
272    if (colorG.length < 2) colorG = 0 + colorG;
273    if (colorB.length < 2) colorB = 0 + colorB;
274    
275    return "#" + colorR + colorG + colorB;
276  },
277  toRGBHex: function (num) {
278  
279    if (num.indexOf('#') > -1) return num;
280
281    var hexArray = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"],
282        decToHex = "#",
283        code1 = 0;
284  
285    num = num.replace(/[^0-9,]/g, '').split(",");
286
287    for (var n = 0; n < num.length; n++) {
288
289      code1 = Math.floor(num[n] / 16);
290      decToHex += hexArray[code1] + hexArray[num[n] - code1 * 16];
291    }
292  
293    return decToHex;
294  },
295  main: function() {
296  
297    jQuery('input').filter(function(index) {
298  
299      return this.getAttribute("type") == 'color';
300    }).each(function (i) {
301  
302      if (i == 0) {
303  
304        jQuery(document.createElement("div")).attr(
305          "id","mColorPicker"
306        ).css(
307          'display','none'
308        ).html(
309          '<div id="mColorPickerWrapper"><div id="mColorPickerImg"></div><div id="mColorPickerImgGray"></div><div id="mColorPickerSwatches"><div id="cell0" class="pastColor">&nbsp;</div><div id="cell1" class="pastColor noLeftBorder">&nbsp;</div><div id="cell2" class="pastColor noLeftBorder">&nbsp;</div><div id="cell3" class="pastColor noLeftBorder">&nbsp;</div><div id="cell4" class="pastColor noLeftBorder">&nbsp;</div><div id="cell5" class="pastColor noLeftBorder">&nbsp;</div><div id="cell6" class="pastColor noLeftBorder">&nbsp;</div><div id="cell7" class="pastColor noLeftBorder">&nbsp;</div><div id="cell8" class="pastColor noLeftBorder">&nbsp;</div><div id="cell9" class="pastColor noLeftBorder">&nbsp;</div><div class="clear"></div></div><div id="mColorPickerFooter"><input type="text" size="8" id="mColorPickerInput"/><span id="mColorPickerTransparent">transparent</span></div></div>'
310        ).appendTo("body");
311  
312        jQuery(document.createElement("div")).attr("id","mColorPickerBg").click(function() {
313  
314          jQuery("#mColorPickerBg").hide();
315          jQuery("#mColorPicker").fadeOut()
316        }).appendTo("body");
317  
318        jQuery('table.pickerTable td').css({
319          'width':'12px',
320          'height':'14px',
321          'border':'1px solid #000',
322          'cursor':'pointer'
323        });
324  
325        jQuery('#mColorPicker table.pickerTable').css({
326          'border-collapse':'collapse'
327        });
328  
329        jQuery('#mColorPicker').css({
330          'border':'1px solid #ccc',
331          'background':'#333',
332          'color':'#fff',
333          'z-index':999998,
334          'width':'194px',
335          'height':'184px',
336          'font-size':'12px',
337          'font-family':'times'
338        });
339  
340        jQuery('.pastColor').css({
341          'height':'18px',
342          'width':'18px',
343          'border':'1px solid #000',
344          'float':'left'
345        });
346    
347        jQuery('#colorPreview').css({
348          'height':'50px'
349        });
350    
351        jQuery('.noLeftBorder').css({
352          'border-left':'0'
353        });
354    
355        jQuery('.clear').css({
356          'clear':'both'
357        });
358    
359        jQuery('#mColorPickerWrapper').css({
360          'position':'relative',
361          'border':'solid 1px gray',
362          'background-color':'white',
363          'z-index':'999999'
364        });
365        
366        jQuery('#mColorPickerImg').css({
367          'height':'128px',
368          'width':'192px',
369          'border':'0',
370          'cursor':'crosshair',
371          'background-image':"url('" + mColorPicker.imageUrl + "colorpicker.png')"
372        });
373        
374        jQuery('#mColorPickerImgGray').css({
375          'height':'8px',
376          'width':'192px',
377          'border':'0',
378          'cursor':'crosshair',
379          'background-image':"url('" + mColorPicker.imageUrl + "graybar.jpg')"
380        });
381        
382        jQuery('#mColorPickerInput').css({
383          'border':'solid 1px gray',
384          'font-size':'12pt',
385          'margin':'1px'
386        });
387        
388        jQuery('#mColorPickerImgGrid').css({
389          'border':'0',
390          'height':'20px',
391          'width':'20px',
392          'vertical-align':'text-bottom'
393        });
394        
395        jQuery('#mColorPickerSwatches').css({
396          'background-color':'#000'
397        });
398        
399        jQuery('#mColorPickerFooter').css({
400          'background-image':"url('" + mColorPicker.imageUrl + "grid.gif')"
401        });
402        
403        jQuery('#mColorPickerTransparent').css({
404          'font-size':' 18px',
405          'color':'#000',
406          'padding-left':' 4px',
407          'cursor':' pointer',
408          'overflow': 'hidden'
409        });
410      }
411  
412      var id = jQuery(this).attr('id'),
413          currentTime = new Date(),
414          updateInput = false;
415  
416      if (id == '') id = jQuery(this).attr('name');
417      if (id == '') id = 'color_' + currentTime.getTime();
418  
419      jQuery(this).attr('id', id);
420  
421      if (jQuery(this).attr('text') == 'hidden') {
422  
423        var color = jQuery(this).val(),
424            width = (jQuery(this).width() > 0)? jQuery(this).width(): parseInt(jQuery(this).css('width'));
425            height = (jQuery(this).height())? jQuery(this).height(): parseInt(jQuery(this).css('height'));
426            flt = jQuery(this).css('float'),
427            image = (color == 'transparent')? "url('" + mColorPicker.imageUrl + "/grid.gif')": '',
428            textColor = (color == 'transparent')? "#000000": mColorPicker.textColor(color),
429            colorPicker = '';
430    
431        jQuery('body').append('<span id="color_work_area"></span>');
432        jQuery('span#color_work_area').append(jQuery(this).clone(true));
433        colorPicker = jQuery('span#color_work_area').html().replace(/type=[^a-z]*color[^a-z]*/gi, 'type="hidden"');
434        jQuery('span#color_work_area').html('').remove();
435        jQuery(this).after(
436          '<span style="cursor:pointer;border:1px solid black;float:' + flt + ';width:' + width + 'px;height:' + height + 'px;" id="icp_' + id + '">&nbsp;</span>'
437        ).after(colorPicker).remove();   
438  
439        jQuery('#icp_' + id).css({
440          'background-color': color,
441          'background-image': image,
442          'display': 'inline-block',
443          'color' : textColor
444        });
445  
446        updateInput = true;
447      } else {
448  
449        var color = jQuery(this).val(),
450            id = jQuery(this).attr('id'),
451            image = (color == 'transparent')? "url('" + mColorPicker.imageUrl + "/grid.gif')": '',
452            textColor = (color == 'transparent')? "#000000": mColorPicker.textColor(color),
453            colorPicker = '';
454    
455        jQuery('body').append('<span id="color_work_area"></span>');
456        jQuery('span#color_work_area').append(jQuery(this).clone(true));
457        colorPicker = jQuery('span#color_work_area').html().replace(/type=[^a-z]*color[^a-z]*/gi, 'type="text"');
458        jQuery('span#color_work_area').html('').remove();
459        jQuery(this).after(colorPicker).remove();   
460
461        jQuery('#' + id).css({
462          'background-color': color,
463          'background-image': image,
464          'color' : textColor
465        }).after(
466          '<span style="cursor:pointer;" id="icp_' + id + '"><img src="' + mColorPicker.imageUrl + 'color.png" style="border:0;margin:0 0 0 3px" align="absmiddle"></span>'
467        );
468      }
469  
470      jQuery('#icp_' + id).bind('click', function () {
471  
472        mColorPicker.colorShow(id, updateInput);
473      });
474  
475      var swatch = mColorPicker.get_cookie('swatches'),
476      i = 0;
477  
478      if (swatch == null) swatch = mColorPicker.swatches;
479      else swatch = swatch.split(',');
480  
481      jQuery(".pastColor").each(function() {
482  
483        jQuery(this).css('background-color', swatch[i++]);
484      });
485    });
486  }
487};
488
489jQuery(document).ready(function () {
490
491  mColorPicker.main();
492});
Full Screen

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Try LambdaTest

Run JavaScript Tests on LambdaTest Cloud Grid

Execute automation tests with Testcafe on a cloud-based Grid of 3000+ real browsers and operating systems for both web and mobile applications.

Test now for Free
LambdaTestX

We use cookies to give you the best experience. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. Learn More in our Cookies policy, Privacy & Terms of service

Allow Cookie
Sarah

I hope you find the best code examples for your project.

If you want to accelerate automated browser testing, try LambdaTest. Your first 100 automation testing minutes are FREE.

Sarah Elson (Product & Growth Lead)