https://www.socialmotus.com/js/wl_Color.js

1/*----------------------------------------------------------------------*/
2/* wl_Color v 1.0 by revaxarts.com
3/* description: Makes a colorpicker on an input field
4/* dependency: miniColors Plugin
5/*----------------------------------------------------------------------*/
6$.fn.wl_Color = function (method) {
7
8	var args = arguments;
9	return this.each(function () {
10
11		var $this = $(this);
12
13
14		if ($.fn.wl_Color.methods[method]) {
15			return $.fn.wl_Color.methods[method].apply(this, Array.prototype.slice.call(args, 1));
16		} else if (typeof method === 'object' || !method) {
17			if ($this.data('wl_Color')) {
18				var opts = $.extend({}, $this.data('wl_Color'), method);
19			} else {
20				var opts = $.extend({}, $.fn.wl_Color.defaults, method, $this.data());
21			}
22		} else {
23			try {
24				return $this.miniColors(method, args[1]);
25			} catch (e) {
26				$.error('Method "' + method + '" does not exist');
27			}
28		}
29
30
31		if (!$this.data('wl_Color')) {
32
33			$this.data('wl_Color', {});
34
35			//bind the mouswheel event
36			$this.bind('mousewheel.wl_Color', function (event, delta) {
37				if (opts.mousewheel) {
38					event.preventDefault();
39					//delta must be 1 or -1 (different on macs and with shiftkey pressed)
40					var delta = (delta < 0) ? -1 : 1,
41						hsb = $this.data('hsb');
42						
43						//saturation with shift key
44					if(event.shiftKey){
45						hsb.s -= delta*2;
46						hsb.s = Math.round(Math.max(0,Math.min(100,hsb.s)));
47						console.log('s', hsb.s);
48						
49						//hue with alt key
50					}else if(event.altKey && event.shiftKey){
51						hsb.h += delta*5;
52						hsb.h = Math.round(hsb.h);
53						console.log('h', delta*5, hsb.h);
54						
55						//brightness without additional key
56					}else{
57						hsb.b += delta*2;
58						hsb.b = Math.round(Math.max(0,Math.min(100,hsb.b)));
59						console.log('b', hsb.b);
60					}
61					
62					$this.miniColors('value',hsb);
63					$this.trigger('change.wl_Color');
64				}
65			});
66			
67			//call the miniColors plugin with extra options
68			$this.miniColors($.extend({}, {
69				change: function (hex, rgb) {
70					$(this).trigger('change.wl_Color');
71				}
72			}), opts).trigger('keyup.miniColors');
73			
74			//bind a change event to the evet field for the callback
75			$this.bind('change.wl_Color', function () {
76				var val = $(this).val();
77				if (val && !/^#/.test(val)) val = '#'+val;
78				$(this).val(val);
79				opts.onChange.call($this[0], $(this).data('hsb'), val);
80			})
81			//hex values have 7 chars with #
82			.attr('maxlength',7);
83
84			
85			//prepend a '#' if not set
86			var val = $this.val();
87			if (val && !/^#/.test($this.val())) {
88				$this.val('#' + val.substr(0,6));
89			}
90
91		} else {
92
93		}
94		
95
96		if (opts) $.extend($this.data('wl_Color'), opts);
97	});
98
99};
100
101$.fn.wl_Color.defaults = {
102	mousewheel: true,
103	onChange: function (hsb, rgb) {}
104};
105$.fn.wl_Color.version = '1.0';
106
107
108$.fn.wl_Color.methods = {
109	destroy: function () {
110		var $this = $(this);
111		//destroy them
112		$this.removeData('wl_Color');
113		$this.miniColors('destroy');
114	},
115	set: function () {
116		var $this = $(this),
117			options = {};
118		if (typeof arguments[0] === 'object') {
119			options = arguments[0];
120		} else if (arguments[0] && arguments[1] !== undefined) {
121			options[arguments[0]] = arguments[1];
122		}
123		$.each(options, function (key, value) {
124			if ($.fn.wl_Color.defaults[key] !== undefined) {
125				$this.data('wl_Color')[key] = value;
126			} else if (key == 'value') {
127				$this.val(value).trigger('keyup.miniColors');
128			} else {
129				$.error('Key "' + key + '" is not defined');
130			}
131		});
132
133	}
134};