Как управлять цветами в JavaScript через Chroma.js

Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)

В сегодняшнем видеоуроке, я покажу вам как управлять цветами в JavaScript. Всё верно, JavaScript. Не CSS. Поехали и посмотрим о чём я говорю!

Смотрите видеоурок

Мы все привыкли к мысли о том, что CSS обрабатывает стили, в то время как JavaScript используется для поведения и эти две вещи должны быть отдельны. Но когда невозможно определить стили непосредственно через CSS, например, когда они установлены с помощью пользовательского ввода, JavaScript сделает всю тяжёлую работу за вас.

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

Цепляем

Chroma можно выудить из его репа на Github или вставить с CDNJS, используя эту ссылку:

1	<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.4/chroma.min.js"></script>

Демонстрация

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

Если вы захотите следить, как я воссоздаю то, что в демо, возьмите файл start.html (который содержит все, кроме JavaScript, который мы напишем), и откройте его в редакторе кода.

Heres what were building — Вот, что мы делаем

Начните с добавления следующего фрагмента кода между тегами <script> в нижней части html-документа: в нижней части html-документа:

       document.addEventListener('DOMContentLoaded', function() {
            
            var btnGenerateColorScheme = document.querySelector('#generate-color-scheme'),
                btnGenerateColorScale = document.querySelector('#generate-color-scale'),
                colorScheme = document.querySelector('.color-scheme'),
                colorScale = document.querySelector('.color-scale'),
                steps = 5, // is preferably an odd number
                chromaColor, userColor, colorList, scaleColors, scaleCount, scaleList;
            
            btnGenerateColorScheme.addEventListener('click', function() {
               
            });

            btnGenerateColorScale.addEventListener('click', function() {
             
            });

        });      

Это большой кусок, но гораздо менее устрашающий, чем вы можете сперва подумать! Он начинается с прослушивателя событий DOMContentLoaded, который ждёт, пока документ будет загружен, перед выполнением любой из следующих функций.

Затем я определяю кучу переменных, которые мы будем использовать, начиная с двух кнопок, затем контейнеров colorScheme и colorScale, затем steps (число, которое мы будем использовать в ближайшее время).

Наконец, есть два прослушивателя событий клика с (пока что) пустыми функциями. Мы начнем с первого из них: btnGenerateColorScheme, который (как неудивительно) является кнопкой, которая будет генерировать цветовую схему.

btnGenerateColorScheme

В пустой функции, между фигурными скобками, мы начнём с задания пустого массива colorList:

1	// Reinitialize the color list.
2	colorList = [];

Когда пользователь нажимает на кнопку, первое, что нам нужно сделать — получить цвет из поля ввода #user-color.

1	// Get the color value.
2	userColor = document.querySelector('#user-color').value;

Затем нам нужно сбросить значения в списке схемы цветов. Это делается обрезкой innerHTML элемента .color-scheme, чем в нашем случае является <ol>. Здесь вы видите, как мы назначаем innerHTML равным на пустую строку.

1	// Reset the content of the color scheme list.
2	colorScheme.innerHTML = '';

Вызов Chroma

Переходим к весёлой части! Мы подключаем билиотеку chroma.js, вызывая chroma() и передаём цвет:

1	// Initialize Chroma.
2	chromaColor = chroma(userColor);

Значение цвета userColor мы достали из поля ввода ранее.

Мы собираемся создать монохроматическую цветовую схему, основанную на выбранном цвете. Мы сделаем это, создав массив, благодаря циклу for:

1	// Create a monchromatic color scheme.
2	for (var i = 0; i < steps; i++) {
3	colorList[i] = chromaColor.darken(i);
4	}

Этот цикл повторяет число шагов, определенных в переменной steps (мы установили там 5, помните?) Каждый раз, когда мы повторяем, в коллекцию добавляется слегка более темный оттенок.

Наконец, нам нужно сгенерировать некоторые элементы, используя пять значений в нашем массиве. Каждый раз, когда мы создаем элемент <li>, задаём ему backgroundColor в соответствии с нашим colorList, а затем дополняем им colorScheme.

                // Generate some elements.
                for (var j = 0; j < colorList.length; j++) {
                    var newItem = document.createElement('li');

                    newItem.style.backgroundColor = colorList[j];

                    colorScheme.appendChild(newItem);
                }

Готово!

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

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

Видеоурок также включает инструкции по созданию генератора цветовой гаммы, поэтому подключайтесь и сообщите мне, как у вас получается!

Дополнительные ресурсы

chroma.js на Github
Его создатель @driven_by_data (Gregor Aisch) на Twitter
Начальный файл для этого урока