@vks-dev/jquery-color-chooser/index.js

jQuery Color Chooser - Color picker helper - VKS package

/*global window:false, setTimeout:false, clearTimeout:false, jQuery:false, VKS:false, console:false, Offline:false, Visibility:false, ActiveXObject:false*/

/*!
	File: jquery.colorChooser.js

	Copyright (c) 2010-2015 Visual Knowledge Share Ltd, All rights reserved.
*/

/**
*/
$.fn.colorChooser = function(opts, cmnd, cmndParam) {
	var self = $(this),
		changeCb = opts && opts.change || $.noop,
		colorChooserBox,
		colorLineBox,
		colorPalette,
		colors,
		inputs = self.filter('input'),
		lineColors;

	// Perform command
	if (opts === 'option') {
		if (!inputs.parent().is('.color-chooser')) {
			throw('Call color chooser command before initialization.');
		}

		switch(cmnd) {
			case 'destroy':
			case 'hidePalette':
			case 'showPalette':
			case 'setColor':
				$(inputs).trigger(cmnd, cmndParam);
				break;
		}
	}
	// Create color chooser
	else {
		inputs
			// Command events
			.on('showPalette.colorChooser', function(ev) {
				var input = $(ev.target);

				input.each(function(i, elm) {
					$(elm).next('.palette')
						.css('top', (elm.offsetHeight + 4).toString() + 'px')
						.show();
				});
				// bind window click with timeout
				// in order to avoid immediate event trigger
				setTimeout(function() {
					$(window).on('click.colorChooser touchstart.colorChooser', function() {
						input.colorChooser('option', 'hidePalette');
						$(window).off('.colorChooser');
					});
				}, 1);
			})
			.on('hidePalette.colorChooser', function(ev) {
				$(ev.target).next('.palette').hide();
			})
			.on('setColor.colorChooser', function(ev, cmndParam) {
				if (/^#[0-9a-f]{6}$/i.test(cmndParam)) {
					var color = cmndParam.toUpperCase(),
						elm   = ev.target,
						input = $(elm);

					input
						.val(color)
						.prev('i').css('background', color);

					changeCb(elm, elm.value);
				}
			})
			.on('destroy.colorChooser', function(ev) {
				var input = $(ev.target),
					box   = input.parent();

				input.off('.colorChooser').insertBefore(box);
				box.remove();
			})
			// Behavior events
			.on('blur.colorChooser', function(ev) {
				var color,
					input = $(ev.target),
					value = input.val();

				if (value.length == 7) {
					color = value;
				}
				else if (value.length == 4) {
					color = value.replace(/^#(.)(.)(.)$/, '#$1$1$2$2$3$3');
				}
				else {
					return;
				}

				input.colorChooser('option', 'setColor', color);
			});

		// Wrap into span.color-chooser
		inputs.wrap('<span class="color-chooser"/>');
		colorChooserBox = inputs.parent();

		// Create color sample shown in the input
		$('<i/>')
			.prependTo(colorChooserBox)
			.on('click touchstart', function(ev) {
				ev.preventDefault();
				$(ev.target).next('input').colorChooser('option', 'showPalette');
			});

		// Create color palette
		colors = [
			'#cc0000 #ff6600 #ffff00 #00c9f9 #000000 #333333 #ffffff #ff00cc #fecbf4',
			'#1f824c #01b06b #019875 #03a67b #03c9a8 #16a086 #1ca39c #1bbc9b #2ecb70',
			'#85d479 #90c695 #7ee0d1 #a1decf #c8f6c7 #6cb9f1 #82cfe1 #8ac4f4 #5aaae5',
			'#19b5ff #1e8cc1 #203b96 #203240 #2d3e50 #34495e #3b539b #24a6f1 #316f7c',
			'#3699dc #c4eff6 #dae0e0 #d4d6d3 #ffeddc #ececec #eeeff1 #e4f1ff #f2f1ef',
			'#d45280 #f62658 #db0a5d #dec5e2 #e08283 #e46a69 #e64d3d #e87e06 #eb9530',
			'#66339a #674172 #8d44ad #933c80 #9a12b4 #9a59b3 #be91d4 #bf55ed #b0a9d5',
			'#f8cb16 #f99406 #f76a0e #f9bf3a #fde3a8 #fe0000 #f04937 #d64542 #f42513'
		];
		colorPalette = $('<span class="palette"></span>').appendTo(colorChooserBox);
		for (var i = 0, l = colors.length; i < l; i++) {
			colorLineBox = $('<b/>').appendTo(colorPalette);
			lineColors = colors[i].split(' ');

			for (var j = 0, l2 = lineColors.length; j < l2; j++) {
				$('<i/>')
					.data('color', lineColors[j])
					.css('background', lineColors[j])
					.appendTo(colorLineBox);
			}
		}
		// Bind palette color chosen event
		$('i', colorPalette).on('click touchstart', function(ev) {
			ev.preventDefault();
			var elm     = $(ev.target),
				color   = elm.data('color'),
				palette = elm.closest('.palette'),
				input   = palette.prev('input');

			input
				.colorChooser('option', 'setColor', color)
				.colorChooser('option', 'hidePalette');
		});
	}

	return self;
};