Пример Instagram на JS

Небольшой аналог Instagram.

В процессе мы создадим несколько фильтров, которые будут применяться к фотографии в блоке .photo. Переключатели фильтров мы разместим в блоке .toggle-controls, а само переключение будет работать на JavaScript. Cначала подготовим разметку для нашего будущего фотоприложения.

Теперь давайте создадим первый набор фильтров для класса .walden. Набор фильтров применится к большой фото и к переключателю.

Давайте добавим заготовку для ещё одного переключателя. Класс для второго фильтра будет называться toaster.

Затем «отрепетируем» переключение фильтра без использования JavaScript. Для этого пока будем менять HTML-код вручную. При переключении фильтра происходит два события:

Первое. В переключателе класс active перемещается на текущий фильтр:

Было:
<ul class="toggle-controls">
    <li class="filter1 active"></li>
    <li class="filter2"></li>
</ul>

Стало:
<ul class="toggle-controls">
    <li class="filter1"></li>
    <li class="filter2 active"></li>
</ul>

Было:

</ul>

Стало:

</ul>

Второе. У блока с большим фото меняется класс текущего фильтра:

Было:  <div class="photo filter1"></div>
Стало: <div class="photo filter2"></div>

1 2	Было: <div class="photo filter1"></div> Стало: <div class="photo filter2"></div>

Мы «переключили» текущий фильтр, а чтобы увидеть его эффект, зададим его стили.

Этот фильтр будет делать фото ещё винтажнее, чем walden: сделает его малоконтрастным, с яркими цветами, небольшим поворотом по цветовому кругу и эффектом сепии.

Всё готово для «оживления» интерфейса с помощью JavaScript. HTML-код Кекстаграма приведён в исходное состояние: фильтр ещё не выбран и к фото не применён.

Сначала включим фильтр toaster и применим его к фотографии. Для этого:

1. Найдём элемент списка с классом toaster и сохраним его в переменную control. var control = document.querySelector('li.toaster');

2. Найдём элемент с классом photo и сохраним его в переменную photo. var photo = document.querySelector('.photo');

3. Теперь к элементу списка, хранящемуся в переменной control, добавим класс active: control.classList.add('active');

4. А к блоку большой фотографии, она уже в переменной photo, добавим класс toaster: photo.classList.add('toaster');

Теперь попробуйте повторить это сами. Обратите внимание, что при добавлении класса с помощью classList.add точка в начале строки не пишется.

На предыдущем шаге мы «включили» фильтр toaster из исходного состояния, а сейчас переключим его на walden. Для этого:

1. Снова найдём элемент списка с классом toaster, сохраним его в переменную toasterControl и удалим у него класс active, добавленный ранее: var toasterControl = document.querySelector('li.toaster'); toasterControl.classList.remove('active');

2. Найдём элемент списка с классом walden, сохраним его в переменную waldenControl и добавим ему класс active: var waldenControl = document.querySelector('li.walden'); waldenControl.classList.add('active');

3. Найдём элемент с классом photo и сохраним его в переменную photo. var photo = document.querySelector('.photo');

4. Удалим у фото класс toaster и добавим класс walden: photo.classList.remove('toaster'); photo.classList.add('walden');

Разберёмся подробнее в том коде, который мы написали. Вот один из фрагментов:

var toasterControl = document.querySelector('li.toaster');
if (toasterControl) {
    toasterControl.classList.remove('active');
}

var toasterControl = document.querySelector('li.toaster');

if (toasterControl) {

toasterControl.classList.remove('active');

}

var toasterControl обозначает, что мы создаём переменную с именем toasterControl.

document – это специальная переменная, в которой хранится корневой элемент HTML-документа, будем называть его просто «документ». В нём хранятся все остальные теги.

querySelector – это метод документа, который по указанному селектору ищет и возвращает первый найденный элемент, подходящий под селектор. В этом методе можно использовать любые CSS-селекторы, уже знакомые вам.

Метод querySelector не всегда может найти элемент и тогда переменная остаётся пустой. Чтобы проверить, что в переменной есть элемент и с ним можно работать, используется условный оператор if.

У элементов, которые мы находим с помощью querySelector, есть свойство classList, в котором хранится список классов элемента.

Список классов можно изменять, удаляя или добавляя в него классы с помощью методов add и remove свойства classList.

Теперь немного отдохнём от JavaScript и создадим ещё один фильтр.

Вернёмся к JavaScript и немного улучшим наш код. Посмотрите эти строчки: var control = document.querySelector('li.toaster'); photo.classList.add('toaster');

Название фильтра toaster в коде повторяется два раза, Карл. Чтобы «переключить» фильтр, придётся поменять код в двух местах. А это лишняя работа!

Избавимся от дублирования. В начале кода создадим переменную с названием фильтра: var filterName = 'toaster'; В метод поиска элементов мы передаём строку li.toaster. Чтобы получить такую же строку из переменной, воспользуемся операцией «склеивания» строк: 'li.' + filterName // результат: 'li.toaster'

В коде для поиска переключателя заменим строку на выражение с переменной:

Было:  var control = document.querySelector('li.toaster');
Стало: var control = document.querySelector('li.' + filterName);

1 2	Было: var control = document.querySelector('li.toaster'); Стало: var control = document.querySelector('li.' + filterName);

Внутри photo.classList.add находится такое же значение, как и в переменной, поэтому просто заменяем строку на переменную:

Было:  photo.classList.add('toaster');
Стало: photo.classList.add(filterName);

1 2	Было: photo.classList.add('toaster'); Стало: photo.classList.add(filterName);

Продолжим улучшать наш JavaScript. Теперь упакуем весь код, отвечающий за переключение фильтров, в функцию. Это позволит проще его использовать и изменять.

Функция создаётся выражением, начинающимся с ключевого слова function. Например, в этом коде мы создаём функцию для суммирования чисел c именем sum:

// Определение функции
function sum(a, b) {
    return a + b;
}

sum(1, 5); // Вызов функции. Результат выполнения: 6.

// Определение функции

function sum(a, b) {

return a + b;

}

sum(1, 5); // Вызов функции. Результат выполнения: 6.

У функции есть набор параметров, в нашем случае это переменные a и b, и тело, которое выполняется при вызове функции. Тело функции заключается в фигурные скобки. Количество параметров может быть любым, их может и не быть вовсе.

Обернём наш код для переключения фильтров в функцию toggleFilter, у которой будет один параметр — filterName. А затем вызовем функцию с разными названиями фильтра в качестве параметра.

Кстати, переменная filterName нам больше не нужна, так как название фильтра передаётся в функцию в параметре с таким же именем, поэтому в коде создание переменной закомментировано.

На первый взгляд функция работает правильно. Но только при одном переключении фильтра, когда мы запускаем функцию только один раз. Ведь при каждом обновлении кода страница в мини-браузере обновляется целиком. Поэтому при первом запуске мы имеем дело с «чистым» исходным состоянием.

Если же вызвать созданную функцию несколько раз подряд с разными параметрами: toggleFilter('toaster'); toggleFilter('kelvin'); То активными станут сразу несколько переключателей, а к фотографии применятся несколько фильтров одновременно.

У HTML-элементов есть возможность создавать специальные атрибуты, в которых можно хранить вспомогательную информацию и легко передавать её в JavaScript. Такие атрибуты начинаются с префикса data-.

При этом data-атрибуты валидны и никак не влияют на отображение элементов в браузере.

Давайте добавим переключателям data-атрибуты data-filter, в которых будем хранить название каждого фильтра.

Чтобы с помощью JavaScript считать значение data-атрибутов, нужно использовать свойство dataset. Пример:

HTML:
<div class="control" data-filtername="walden"></div>

JavaScript:
var control = document.querySelector('.control');
var filter = control.dataset.filtername;
// в переменной filter теперь строка «walden»

HTML:

JavaScript:

var control = document.querySelector('.control');

var filter = control.dataset.filtername;

// в переменной filter теперь строка «walden»

В свойстве dataset HTML-элемента хранятся все значения его data-атрибутов. Обратиться к ним можно по названию data-атрибута, удалив из названия приставку data-.

Добавлять содержимое в HTML-элемент через JavaScript можно с помощью свойства innerHTML:

var control = document.querySelector('.control');
control.innerHTML = 'walden';

1 2	var control = document.querySelector('.control'); control.innerHTML = 'walden';

Присвоенная свойству innerHTML строка заменяет всё содержимое HTML-элемента. В этой строке можно использовать любой HTML-код.

Если нужно совершить несколько однотипных действий, то можно использовать цикл for. Вот его синтаксис:

for (var num = 0; num <= 5; num++) {
    console.log(num);
}
// Выведет в «консоль» числа 0, 1, 2, 3, 4 и 5

for (var num = 0; num <= 5; num++) {

console.log(num);

}

// Выведет в «консоль» числа 0, 1, 2, 3, 4 и 5

Ранее мы использовали метод querySelector, который возвращает только один элемент: первый элемент, соответствующий селектору.

Другой метод querySelectorAll возвращает все элементы, соответствующие селектору.

С помощью for удобно перебирать найденные элементы:

var controls = document.querySelectorAll('.toggle-controls li');
for (var i = 0; i < controls.length; i++) {
    controls[i].innerHTML = 'переключатель';
}
// Во все элементы списка переключателей запишется строка «переключатель».

var controls = document.querySelectorAll('.toggle-controls li');

for (var i = 0; i < controls.length; i++) {

controls[i].innerHTML = 'переключатель';

}

// Во все элементы списка переключателей запишется строка «переключатель».

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

Лучше найти все переключатели внутри списка и перебрать их с помощью цикла. И внутри цикла задавать название каждому переключателю.

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

Первая ошибка заключается в том, что все переключатели подсвечиваются как активные. Причина в том, что внутри функции класс active добавляется текущему переключателю, но не удаляется у ставших неактивными.

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

На предыдущем шаге мы уже находили все переключатели и сохраняли их в переменную controls: var controls = document.querySelectorAll('.toggle-controls li'); Теперь мы можем использовать эту переменную внутри функции — добавить в начало функции ещё один цикл, который пройдётся по всем переключателям и удалит у них класс.

Ошибку с выделением активного переключателя исправили. Осталась вторая ошибка: фильтр на большой фотографии применяется неправильно. Причина — лишние классы фильтров у большой фотографии. Вот что происходит с HTML, когда функция переключения вызывается несколько раз: <div class="photo walden toaster kelvin"></div>

Чтобы исправить ошибку, надо удалять классы фильтров у блока фотографии при каждом переключении. Но класс photo удалять нельзя. Классы фильтров мы знаем, ведь они хранятся в data-атрибутах переключателей.

Поэтому в том же цикле, где сбрасывается класс active, можно у каждого переключателя брать название фильтра и удалять этот класс у большого фото:

for (var i = 0; i < controls.length; i++) {
    ...
    photo.classList.remove(имя фильтра из dataset-атрибута переключателя);
}

for (var i = 0; i < controls.length; i++) {

...

photo.classList.remove(имя фильтра из dataset-атрибута переключателя);

}

И ещё одна важная деталь. Переменная photo теперь используется в самом начале функции, поэтому мы вынесем строчку поиска переменной из функции в самый верх кода: var controls = document.querySelectorAll('.toggle-controls li'); var photo = document.querySelector('.photo');

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

В предыдущих шагах мы подготовили функцию для переключения фильтров и запускали её из JavaScript-кода. Сейчас мы сделаем так, чтобы пользователь сам мог менять фильтры, щёлкая по переключателям мышкой.

Для этого нам нужно научиться отслеживать и обрабатывать события, которые происходят на веб-странице. Для этого в JavaScript, существует метод addEventListener:

var toaster = document.querySelector('li.toaster');
toaster.addEventListener('click', function() {
    toggleFilter(toaster.dataset.filter);
});

var toaster = document.querySelector('li.toaster');

toaster.addEventListener('click', function() {

toggleFilter(toaster.dataset.filter);

});

В этом фрагменте кода мы сделали следующее:

Нашли элемент списка и у него вызвали метод addEventListener.
Указали отслеживать событие click или «щелчок мыши».
Для щелчков указали функцию-обработчик без названия, внутри которой вызвали функцию переключения фильтров.

Метод addEventListener был вызван у одного элемента, поэтому будут обрабатываться события только этого элемента. Первый параметр задаёт тип события, второй — функцию-обработчик.

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

Поэтому, чтобы обрабатывать щелчки по всем переключателям, лучше воспользоваться циклом. Тем более, что цикл по всем переключателям у нас уже есть.

А чтобы сократить код в цикле, создадим новую функцию:

function clickControl(control) {
  control.addEventListener('click', function() {
      toggleFilter(control.dataset.filter);
  });
};

function clickControl(control) {

control.addEventListener('click', function() {

toggleFilter(control.dataset.filter);

});

};

Функция clickControl принимает найденный элемент и добавляет ему обработчик щелчков мыши, в котором вызывается функция переключения фильтра. Название фильтра для функции переключения берётся из data-атрибута самого элемента.

Благодаря clickControl нам нужно добавить только одну строчку в цикл, чтобы все переключатели заработали:

for (var i = 0; i < controls.length; i++) {
    ... 
    clickControl(controls[i]);
}

for (var i = 0; i < controls.length; i++) {

...

clickControl(controls[i]);

}

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

1. Изменим обработчик внутри clickControl:

Было:  toggleFilter(control.dataset.filter);
Стало: toggleFilter(control);

1 2	Было: toggleFilter(control.dataset.filter); Стало: toggleFilter(control);

2. Изменим параметр у toggleFilter, теперь это не строка, а элемент:

Было:  function toggleFilter(filterName)
Стало: function toggleFilter(control)

1 2	Было: function toggleFilter(filterName) Стало: function toggleFilter(control)

3. В toggleFilter передаётся переключатель и искать его уже не надо, удаляем лишний код

4. Название фильтра для фото теперь берём из data-атрибута переключателя:

Было:  photo.classList.add(filterName);
Стало: photo.classList.add(control.dataset.filter);

1 2	Было: photo.classList.add(filterName); Стало: photo.classList.add(control.dataset.filter);

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

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

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

Чтобы изменить CSS-свойство элемента в скрипте, нужно обратиться к свойству styleэлемента. Например: var element = document.querySelector('.photo-original'); element.style.width = '10px';

В этом коде элементу задаётся ширина 10px.

С помощью element.style можно и получать, и изменять значения свойств.

Но названия свойств в JavaScript не всегда совпадают с их названиями в CSS. Например, CSS-свойство left совпадает с style.left, но CSS-свойство baсkground-color уже отличается: style.backgroundColor.

Результат:

HTML:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>Кекстаграм: финал</title>
        <base href="/assets/course98/">
        <link href="style.css" rel="stylesheet">
        <link href="course.css" rel="stylesheet">
    </head>
    <body class="keksta">
        <div class="photos">
            <div class="photo"></div>
            <div class="photo-original"></div> 
            <div class="separator">↔</div>
        </div>
        <ul class="toggle-controls">
            <li class="walden" data-filter="walden"></li>
            <li class="toaster" data-filter="toaster"></li>
            <li class="kelvin" data-filter="kelvin"></li>
            <li class="oldie" data-filter="oldie"></li>
        </ul>
        <script src="script.js"></script>
        <script src="separator.js"></script>
    </body>
</html>

<!DOCTYPE html>

<head>

<title>Кекстаграм: финал</title>

</head>

</div>

</ul>

</body>

</html>

CSS:

.walden {
    filter: contrast(0.9) brightness(1.2) hue-rotate(-20deg) saturate(1.7) sepia(0.4);
}

.toaster {
    filter: saturate(2.5) hue-rotate(-30deg) contrast(0.67) sepia(0.4);
}

.kelvin {
    filter: contrast(1.1) brightness(1.3) saturate(2.4) sepia(0.4);
}

.oldie {
    filter: contrast(2) saturate(5) hue-rotate(-180deg);
}

.willow {
    filter: saturate(0.02) contrast(0.85) brightness(1.2) sepia(0.02);
}

.photos {
    position: relative;
}

.photo,
.photo-original {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
}

.photo {
    z-index: 10;
    background-image: url("img/spb-1.jpg");
}

.photo-original {
    z-index: 20;
    width: 50%;
    background-image: url("img/spb-1.jpg");
}

.separator {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 30;
    width: 30px;
    height: 30px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.walden {

filter: contrast(0.9) brightness(1.2) hue-rotate(-20deg) saturate(1.7) sepia(0.4);

}

.toaster {

filter: saturate(2.5) hue-rotate(-30deg) contrast(0.67) sepia(0.4);

}

.kelvin {

filter: contrast(1.1) brightness(1.3) saturate(2.4) sepia(0.4);

}

.oldie {

filter: contrast(2) saturate(5) hue-rotate(-180deg);

}

.willow {

filter: saturate(0.02) contrast(0.85) brightness(1.2) sepia(0.02);

}

.photos {

position: relative;

}

.photo,

.photo-original {

position: absolute;

width: 100%;

height: 100%;

background-size: cover;

}

.photo {

z-index: 10;

background-image: url("img/spb-1.jpg");

}

.photo-original {

z-index: 20;

width: 50%;

background-image: url("img/spb-1.jpg");

}

.separator {

position: absolute;

top: 50%;

left: 50%;

z-index: 30;

width: 30px;

height: 30px;

border: 2px solid #ffffff;

border-radius: 50%;

transform: translate(-50%, -50%);

}

JS script:

var controls = document.querySelectorAll('.toggle-controls li');
var photo = document.querySelector('.photo');

for (var i = 0; i < controls.length; i++) {
    controls[i].innerHTML = controls[i].dataset.filter;
    clickControl(controls[i]);
}

function toggleFilter(control) {
    for (var i = 0; i < controls.length; i++) {
        controls[i].classList.remove('active');
        photo.classList.remove(controls[i].dataset.filter);
    }

    control.classList.add('active');

    if (photo) {
        photo.classList.add(control.dataset.filter);
    }
}

function clickControl(control) {
    control.addEventListener('click', function() {
        toggleFilter(control);
    });
}

var defaultFilter = document.querySelector('li.oldie');
toggleFilter(defaultFilter);

var controls = document.querySelectorAll('.toggle-controls li');

var photo = document.querySelector('.photo');

for (var i = 0; i < controls.length; i++) {

controls[i].innerHTML = controls[i].dataset.filter;

clickControl(controls[i]);

}

function toggleFilter(control) {

for (var i = 0; i < controls.length; i++) {

controls[i].classList.remove('active');

photo.classList.remove(controls[i].dataset.filter);

}

control.classList.add('active');

if (photo) {

photo.classList.add(control.dataset.filter);

}

function clickControl(control) {

control.addEventListener('click', function() {

toggleFilter(control);

});

}

var defaultFilter = document.querySelector('li.oldie');

toggleFilter(defaultFilter);

JS separator:

var separator = document.querySelector('.separator');
var originalPhoto = document.querySelector('.photo-original');
var filteredPhoto = document.querySelector('.photo');
var photoContainer = document.querySelector('.photos');
var flag = false;

separator.addEventListener('mousedown', function(event) {
  event.preventDefault();
  flag = true;
}, false);

document.addEventListener('mouseup', function(event) {
  flag = false;
}, false);

photoContainer.addEventListener('mousemove', function(event) {
  var res = event.pageX - this.offsetLeft;

  if (flag && (res > 0) && (res < filteredPhoto.offsetWidth)) {
    separator.style.left = res + 'px';
    originalPhoto.style.width = res + 'px';
  }

}, false);

var separator = document.querySelector('.separator');

var originalPhoto = document.querySelector('.photo-original');

var filteredPhoto = document.querySelector('.photo');

var photoContainer = document.querySelector('.photos');

var flag = false;

separator.addEventListener('mousedown', function(event) {

event.preventDefault();

flag = true;

}, false);

document.addEventListener('mouseup', function(event) {

flag = false;

}, false);

photoContainer.addEventListener('mousemove', function(event) {

var res = event.pageX - this.offsetLeft;

if (flag && (res > 0) && (res < filteredPhoto.offsetWidth)) {

separator.style.left = res + 'px';

originalPhoto.style.width = res + 'px';

}

}, false);

Просто пример:

HTML:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>Испытание: игровые фишки</title>
        <base href="/assets/course98/">
        <link href="style.css" rel="stylesheet">
        <link href="course.css" rel="stylesheet">
    </head>
    <body class="exam-table">
        <ul class="chips">
            <li data-number="1"></li>
            <li data-number="2"></li>
            <li data-number="3"></li>
            <li data-number="4"></li>
            <li data-number="9"></li>
            <li data-number="10"></li>
            <li data-number="11"></li>
            <li data-number="12"></li>
            <li data-number="5"></li>
            <li data-number="6"></li>
            <li data-number="7"></li>
            <li data-number="8"></li>
            <li data-number="13"></li>
            <li data-number="14"></li>
            <li data-number="15"></li>
            <li data-number="16"></li>
        </ul>
    </body>
</html>

<!DOCTYPE html>

<head>

<title>Испытание: игровые фишки</title>

</head>

</ul>

</body>

</html>

CSS:

li.color-1 {
    border-color: #001f3f;
}

li.color-2 {
    border-color: #0074d9;
}

li.color-3 {
    border-color: #7fdbff;
}

li.color-4 {
    border-color: #39cccc;
}

li.color-5 {
    border-color: #3d9970;
}

li.color-6 {
    border-color: #2ecc40;
}

li.color-7 {
    border-color: #01ff70;
}

li.color-8 {
    border-color: #ffdc00;
}

li.color-9 {
    border-color: #ff851B;
}

li.color-10 {
    border-color: #ff4136;
}

li.color-11 {
    border-color: #85144b;
}

li.color-12 {
    border-color: #f012Be;
}

li.color-13 {
    border-color: #b10dc9;
}

li.color-14 {
    border-color: #111111;
}

li.color-15 {
    border-color: #aaaaaa;
}

li.color-16 {
    border-color: #ffffff;
}

li.color-1 {

border-color: #001f3f;

}

li.color-2 {

border-color: #0074d9;

}

li.color-3 {

border-color: #7fdbff;

}

li.color-4 {

border-color: #39cccc;

}

li.color-5 {

border-color: #3d9970;

}

li.color-6 {

border-color: #2ecc40;

}

li.color-7 {

border-color: #01ff70;

}

li.color-8 {

border-color: #ffdc00;

}

li.color-9 {

border-color: #ff851B;

}

li.color-10 {

border-color: #ff4136;

}

li.color-11 {

border-color: #85144b;

}

li.color-12 {

border-color: #f012Be;

}

li.color-13 {

border-color: #b10dc9;

}

li.color-14 {

border-color: #111111;

}

li.color-15 {

border-color: #aaaaaa;

}

li.color-16 {

border-color: #ffffff;

}

JS:

// Добавление класса элементу, переданному в качестве параметра. Название класса составляется с помощью data-атрибута этого элемента
function setNumber(element) {
    element.classList.add('color-' + element.dataset.number);
}

// Добавление элементу четырёхцветного фона
function reColor(element) {
    var baseColor = getComputedStyle(element).borderTopColor;
    var color = baseColor.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
    element.style.borderTopColor = colorShift(color, 40);
    element.style.borderRightColor = colorShift(color, 60);
    element.style.borderBottomColor = colorShift(color, 80);
    element.style.borderLeftColor = colorShift(color, 20);
}

// Смещение цветового тона
function colorShift(color, shift) {
    var rgb = '#';
    for (var i = 1; i <= 3; i++) { 
        var part = parseInt(color[i]) - shift;
        part = Math.round(Math.min(Math.max(0, part), 255));
        part = part.toString(16);
        rgb += ('00' + part).substr(part.length);
    }
    return rgb;
}

var controls = document.querySelectorAll('.chips li');
for (var i = 0; i < controls.length; i++) {
    setNumber(controls[i]);
    reColor(controls[i]);
    controls[i].innerHTML = controls[i].dataset.number;
}

// Добавление класса элементу, переданному в качестве параметра. Название класса составляется с помощью data-атрибута этого элемента

function setNumber(element) {

element.classList.add('color-' + element.dataset.number);

}

// Добавление элементу четырёхцветного фона

function reColor(element) {

var baseColor = getComputedStyle(element).borderTopColor;

var color = baseColor.match(/^rgb\s*$\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*$$/i);

element.style.borderTopColor = colorShift(color, 40);

element.style.borderRightColor = colorShift(color, 60);

element.style.borderBottomColor = colorShift(color, 80);

element.style.borderLeftColor = colorShift(color, 20);

}

// Смещение цветового тона

function colorShift(color, shift) {

var rgb = '#';

for (var i = 1; i <= 3; i++) {

var part = parseInt(color[i]) - shift;

part = Math.round(Math.min(Math.max(0, part), 255));

part = part.toString(16);

rgb += ('00' + part).substr(part.length);

}

return rgb;

}

var controls = document.querySelectorAll('.chips li');

for (var i = 0; i < controls.length; i++) {

setNumber(controls[i]);

reColor(controls[i]);

controls[i].innerHTML = controls[i].dataset.number;

}

Архив

Последнее