Photoshop color picker на jQuery

[Logonoff]

Полезный пост с ссылкой на GitHub и живым рабочим демо. Хабр еще торт.

[PaulZi]

Диалогов выбора цвета на jqueryui пруд-пруди, в том числе и на хабре.
Так что вы как то плохо искали, а так конечно молодцы!

[viruseg]

Да, много, но всё что есть ни как не вписывалось в мой проект. В том числе и по приведённым вами ссылкам.

[Ulkiorra]

Думаю, было бы полезно окно с шестнадцатиричным представлением цвета.

[viruseg]

Доступен метод getHEX(). При необходимости добавить к себе на страницу проекта поле, где будет отображаться HEX, не составит труда. Не стал лепить сразу т.к. не хочется перегружать лишними элементами.

[Argutator]

На мой взгляд, окошко с шестнадцатиричным кодом цвета как-раз таки лишним и не будет. Краткое и удобное представление цвета. Даже если пользователю не нужно копировать код подобранного цвета, он ведь может захотеть задать цвет, в том числе и в hex-виде.
Хотя, конечно, не зная особенностей вашего проекта, однозначно утверждать, что это упущение, нельзя :)

[viruseg]

Аудитория моего проекта даже малейшего представления не имеет о том, что такое шестнадцатеричный цвет. Демо выложено на том же домене, что и сам проект. Хотя все кому было интересно уже посмотрели, яндекс.метрика зафиксировала довольно сильный всплеск посетителей после этой статьи.

[Vest]

Жаль, что картинка палитры внизу «захардкожена».

[viruseg]

Делал скриншотом в png. Вроде не вижу разницы с оригиналом.

[viruseg]

Только что открыл в двух окнах ту, что на сайте и скриншот из фотошопа без оптимизаций размера png. На IPS матрице не смог увидеть ни малейшей разницы, смотрел под увеличением, постоянно нажимая alt+tab. Изображения идентичны.

[Vest]

Да не про это! Можно было бы построить изображение математически.
Вопрос, сколько бы это ресурсов заняло. Но всё же — оригинальнее, согласитесь :)

Это как верстать сайты из кусков скриншотов десктопных приложений.

[viruseg]

Создать палитру динамически займёт минимум ресурсов. Только сходу не могу придумать алгоритм по которому строится именно такая же палитра. Надо посмотреть внимательно. Внести изменения дело десяти минут.

[TheShock]

В Канвасе слева направо градиент из 8 контрольных точек, поверх градиент белый-прозрачный-чёрный.

[andreishe]

По-моему, это просто боковая поверхность цилиндра HSL. Соответственно по горизонтальной оси — Hue, по вертикальной — Lightness.

[TheShock]

Ну это если «правильно». А я предложил вариант «быстро» =)

[viruseg]

Сделал динамическое создание палитры. Получилось чуть ярче, хотя так даже лучше.

[CodeByZen]

Не работает на IE7. :) Стоит посмотреть сюда.

[viruseg]

Ie7 не поддерживает canvas. Заниматься поддержкой устаревших браузеров не вижу ни какого смысла.

[tushev]

Везет вам, раз не видите смысла.
А вот у меня недавно один заказчик затребовал поддржку IE6, для своей интранет системы. По его словам этот бразуер их внутренний корпоротивный стандарт, и установка других брузеров недопустима, и это «Обсуждению не подлежит!!!». Я долго смеялся, но это была весьма крупная компания, и от такого проекта отказываться было глупо.
К счастью я добился совместимости за пару часов перелопатив JavaScript-ы, а вмеру перекосившийся дизайн интерфейсов их устроил.

[viruseg]

Хорошо, что у меня за спиной нет заказчиков. Для своих целей писать всё же приятней. А делать поддержку ie8 и ниже в моём случае не только лень, но и бессмысленно.

Вот посещаемость за три недели, период конечно небольшой, но я не думаю, что со временем картина сильно изменится.
Два визита через ie8 и те скорее всего мои, через виртуальную машину.

Скриншот

[AHDPEu]

Крутая штучка :) Одобрят!

[kidar2]

Дизайн этого пикера — унылое Г.

[agentx001]

Не знаю кому как, но лично мне было бы удобнее пользоваться стоковым диалогом…
input type = "color"

[agentx001]

Ну вот что за идиотская манера молча сливать карму?

[AHDPEu]

Тоже, как то давно, создавал свой колорпикер с выбором HSL, RGB, HEX и 2 квадратиками с выбранным цветом. Только цели создания были другие немного — нет jquery, есть IE7. В принципе дело не сложное.

Посмотрев код, думаю всё дело в начиналось как раз без фреймворков, так как, пользование document.getElementById(id) быстро превращается в $(id).

А такие функции как:
drawrCanvasR: function()
drawrCanvasG: function()
drawrCanvasB: function()
Я бы заменил на 1 функцию, менять код в 3х практически одинаковых функциях — скучное занятие.

Ну и самое наверно главное, 2 колорпикера на странице не будут работать. Точнее будет только один. Понятно дело, можно использовать один колорпикер на все случаи жизни, но не всегда удобно (аяксовые всплывашки, выбор цвета метки на карте и тд). Требуется точно знать, что уже скрипты колорпикера загружены или грузить их на каждой странице.

[viruseg]

Вы бы хоть попробовали ради интереса. На гитхабе как раз выложен пример, где на одной странице работают два колорпикера.

[AHDPEu]

слона проглядел, id же. Этот пункт считаю недействительным :)

[viruseg]

На счёт трёх почти одинаковых функций вы конечно же правы. Их вполне можно было бы объединить в одну. Но именно в данном случае от такого «упрощения» код стал бы только запутаннее. Хотя может мой скилл просто не позволяет это сделать по-нормальному.