Выбиралка цветов Color Picker

В этой заметке я хочу представить ещё одно своё JavaScript творение: Color Picker - выбиралку цветов. Скрипт довольно простой по функционалу и установке, ну, и впринципе код у него тоже не очень сложный. Он НЕ использует JQuery и картинки, небольшой по размеру, и довольно прост и быстр. Работает в IE 6-9, Opera, FireFox, Safari, Chrom.

Color Picker по - умолчанию генерирует палитру из 216 безопасных web ветов, и имеет определённый CSS стилями вид, но вид и содержимое палитры можно настраивать. Ниже пара примеров на что он способен.

Скрипт обновлен до версии 1.2 (добавлена кнопка закрытия палитры), но листинги остались старыми. Новая версия только в архиве.

Архив скрипта с примерами можно скачать тут:
colorPicker.v1.1 (Исходная версия)
colorPicker.v1.2 (Добавлена кнопка, закрывающая палитру)

Введу некоторые определения, что бы мне было проще вам объяснять:

Палитра

Собственно сама палитра, содержащая образцы цветов

Образец

Элемент палитры, при клике на котором выбирается цвет.

Пикер

Это квадратик с цветом, который видит пользователь, и на который ему нужно кликнуть, что бы появилась палитра цветов.

Color Picker интеграция

Пользоваться скриптом довольно просто. Color Picker - имеет всего три доступных метода (показано с указанием типа данных):

ColorPicker.insertInto( HTMLElement element, string name, string selected, int offsX, int offsY)

Основной метод - вставляет Color Picker в указанный html - элемент. Параметры:

1. HTMLElement element - Узел DOM - древа, в который нужно поместить Color Picker
2. string name - имя элемента формы, который будет представлять выбранный цвет*
3. string selected - строка типа "#FFCC00" - цвет пикера по-умолчанию
4. int offsX - смещение координат палитры (прав. верх. угол) относительно клика мышки по горизонтали
5. int offsY - смещение координат палитры (прав. верх. угол) относительно клика мышки по вертикали

* - Color Picker сам создаёт скрытый элемент INPUT и помещает его в DOM перед пикером. Если вы не зададите имя явно - скрипт попытается установить имя скрытого элемента INPUT такое же, как id - элемента, указанного в первом параметре.

        // Добавляем на страницу:
		ColorPicker.insertInto( document.getElementById("color_picker_two"), "base_color", "#0000ff", 10, 15 );
        

ColorPicker.setPallete( array arrayOfColors )

Позволяет установить свою палитру цветов. Принимает параметр - массив, например:

        ColorPicker.setPallete(["#FFFFFF","#FFCC00","#00FFCC","#0000FF","#00CCFF","#CC00FF"]);
        

ColorPicker.setClasses( string picker, string palette, string colorItem )

Позволяет указать свои имёна классов стилей для пикера, палитры, и образцов цветов например:

        ColorPicker.setColors("col-safe-picker","col-safe-palette","col-safe-item");
        

Это потребуется тогда, когда вы захотите задать свою палитру цветов или изменить внешний вид стандарных.

Color Picker пример использования

Певрое, что нужно это форма - в два её элемента мы вставим Color Picker-ы:

<form method="get" action="">
    <p><label>Безопасные WEB цвета: <span id="color_picker_one"></span></label></p>
    <p><label>Базовые WEB цвета + град. серого: <span id="color_picker_two"></span></label></p>
    <p><button type="submit">Отправить</button></p>
</form>

Подключаем основной файл Color Picker - а

<script type="text/javascript" src="colorPicker.v1.1.js"></script>

Далее устанавливаем два элемента для выбора цвета - один из них будет с нестандарной палитрой:

<script type="text/javascript">
    // Безопасные web цвета (стандарнт.), добавляем на страницу:	
    ColorPicker.insertInto( document.getElementById("color_picker_one"), "safe_color", "#ff0000" );		
    // Базовые web цвета + град. серого:
    ColorPicker.setPallete(["#BE2137","#FFA100","#00752C","#0052AC","#701F85",
                            "#E62937","#FFCB00","#009E2F","#0079F1","#873CBE",
                            "#FF7525","#FDF900","#00E430","#00A9FF","#C87AFF",
                            "#FFFFFF","#999999","#666666","#333333","#000000"]);									
    // Так как цветов меньше палитра будет иметь иной внешний вид - нужно скорректировать стили:									
    ColorPicker.setClasses("col-safe-picker","col-safe-palette","col-safe-item");			
    // Добавляем на страницу:
    ColorPicker.insertInto( document.getElementById("color_picker_two"), "base_color", "#0000ff", 5, 5 );			
</script>

Добавим стили для стандарной палитры:

<style type+"text/css">
/* Безопасные цвета */
.col-pic-item{float:left;width:15px;height:15px;border:solid 1px #FFF;margin:0px}
.col-pic-item:hover{border:solid 1px #00FF00}
.col-pic-picker{width:30px;height:30px;border: solid 2px #666;float: left; margin-right: 15px;}
.col-pic-palette{width:306px;border:solid 2px #666}

В JS - листинге выше, в строке 5 мы установили свою палитру, а она имеет меньше цветов чем стандарная, поэтому в строке 10, там же, мы указали новые классы стилей - определим их:

/* Базовые цвета */
.col-safe-item{float:left;width:40px;height:40px;border:solid 1px #FFF;margin:0px}
.col-safe-item:hover{border:solid 1px #00FF00}
.col-safe-picker{width:30px;height:30px;border: solid 2px #666;float: left; margin-right: 15px;}
.col-safe-palette{width:210px;border:solid 2px #666}

</style>

По сути для Color Picker нужно всего три класса: для самого пикера, для палитры и для образцов. Для выразительности, для образцов цвета мы добавили ещё один псевдокласс ... :hover Вот собственно и всё.

Надеюсь объяснил доступно, файлы скрипта вы можете скачать по ссылке в начале статьи, но до кучи привожу листинг скрипта - как всегда старался проще и корочеесли будут вопросы пишите.

Color Picker листинг

var ColorPicker = (function (GLOB) {

	"use strict";
	
	var DOC            = GLOB.document,
		pickerClass    = "col-pic-picker",
		paletteClass   = "col-pic-palette",
		colorItemClass = "col-pic-item",
		PALETTE        = [],
        
		// Создаёт DOM-элемент для образца цвета
		getColorItem = function (clickHandler) {
			var colDiv = DOC.createElement("DIV");
			colDiv.className = colorItemClass;
			colDiv.onclick = clickHandler;
			return colDiv;
		},
		
		// Получить прокрутку страницы:
		pageScroll = function() {
			return {
				y: GLOB.pageYOffset || DOC.documentElement.scrollTop  || DOC.body.scrollTop,
				x: GLOB.pageXOffset || DOC.documentElement.scrollLeft || DOC.body.scrollLeft
			}
		},
		
		// Формирование палитры цветов ( используются 216 Safe Web Colors )
		// Эта ф-ция не доступна из вне.
		createPalette = function (srcPicker, srcInput) {
		
			var palette = DOC.createElement("DIV"),
				length  = PALETTE.length,
				hexR	= "",
				hexG	= "",
				hexB	= "",
				colItem	= null,
				i,
				q,
				m,
                
				// Обработчик кликов на образцах:
				clickHandler = function () {
					srcPicker.style.background = this.style.background;
					srcInput.value = this.hv;
					palette.style.display  = "none";
				},
                
				// Добавляет образец цвета в палитру:
				addColor	= function ( color ) {
					colItem = getColorItem(clickHandler);
					colItem.style.background = colItem.hv = color;
					palette.appendChild(colItem);
				};
                
			// Если пользователь не задал свою палитру:
			if (length === 0) {
				// Генерим палитру Safe Web Colors:
				for (i = 0x0; i <= 0xff; i += 0x33) {
					hexR = (i > 0) ? i.toString(16) : "00";
					for (q = 0x0; q <= 0xff; q += 0x33) {
						hexG = (q > 0) ? q.toString(16) : "00";
						for (m = 0x0; m <= 0xff; m += 0x33) {
							hexB = (m > 0) ? m.toString(16) : "00";
							addColor("#" + hexR + hexB + hexG);	
						}
					}
				}
            // Иначе, если пользователь ввёл свой массив цветов - выводим его:
			} else {
		        for (i = 0; i < length; i += 1) {
					addColor(PALETTE[i]);
				}
			}
			
			// Конфиг палитры:
			palette.className 		= paletteClass;
			palette.style.display	= "none";
			palette.style.position	= "absolute";
			
			// Добавляем в DOM
			DOC.body.appendChild(palette);
			return palette;
		};
		
	return {
		/**
		 * Установка имён классов стилей.
		 * @param string picker - Имя класса для значка выбора цвета, по-умолчанию: "col-pic-picker".
		 * @param string palette - Имя класса для появляющейся палитры, по-умолчанию: "col-pic-palette".
		 * @param string colorItem - Имя класса элементов - образцов цвета в палитре, для  по-умолчанию: "col-pic-item". 
		 * @return ColorPicker
		 */
		setClasses : function (picker, palette, colorItem) {
			pickerClass    = picker; 
			paletteClass   = palette; 
			colorItemClass = colorItem;
			return this;
		},
		/**
		 * Установка своей палитры цветов.
		 * @param array arrayOfColors - массив HEX-значений цветов.
		 * @return ColorPicker
		 */
		setPallete : function (arrayOfColors) {
			PALETTE = arrayOfColors;
			return this;
		},
		/**
		 * Вставить выбиралку цвета в HTMLElement
		 * @param HTMLElement element - элемент, результат выборки: document.getElementById
		 * @param string name - атрибут для элемента формы, представляющего выбранный цвет.
		 * @param string selected - значение по-умолчанию для элемента формы, представляющего выбранный цвет.
		 * @param int offsX - смещение палитры относительно эемента выбора цвета по горизонтали
		 * @param int offsY - смещение палитры относительно эемента выбора цвета по вертикали
		 * @return ColorPicker
		 */
		insertInto : function (element, name, selected, offsX, offsY) {
		
			var picker		= DOC.createElement("DIV"),
				hideInput	= DOC.createElement("INPUT"),
				palette		= createPalette(picker, hideInput),
				oX			= offsX || 1,
				oY			= offsY || 1;
				
			// Скрытый элемент формы, значение которого
			// будет меняться, в зависимости от выбора цвета 
			// и которое будет передаваться на сервер.
			hideInput.value	= picker.style.background = selected;	
			hideInput.type	= "hidden";
			hideInput.name	= name || element.id;
			
			picker.className = pickerClass;	
            
            // Обработчик клика на элементе - пикере
			picker.onclick   = function (ev) {
			
				var e = ev || GLOB.event,
					x = e.clientX,
					y = e.clientY;
					
				palette.style.display  = "block";
				palette.style.top  = (y + pageScroll().y) - oY + "px";
				palette.style.left = (x + pageScroll().x) + oX + "px";
			};
			
			// Добавляем в DOM
			element.appendChild(picker);
			element.insertBefore(hideInput, picker);
			
			return this;
		}
	};
}(this));