JS night mode

Publié le 18 février 2024

JavaScript

Déclaration des variables pour les éléments du DOM :

const playerHeader = document.querySelector('.player-header');
const nightColor = document.querySelector('.night-color')
const dayColor = document.querySelector('.day-color')
const screenbox = document.querySelector('.screen');
const moon = document.querySelector('.moon');
const sun = document.querySelector('.sun');
const mode = document.querySelector('.mode');
const sunny = document.querySelector('.sunny');
const diskTree = document.querySelector('.disk-title');
const title = document.querySelector('.title');
const subtitle = document.querySelector('.subtitle');
const play = document.getElementById('play');
const pause = document.getElementById('pause');
const progress = document.querySelector('.progress');
const progressBar = document.getElementById('progressBar');
const slider = document.querySelector('.volume-slider');
const volumeBar = document.querySelector('.volume-bar');
const runningTime  = document.querySelector('.run');
const totalTime  = document.querySelector('.total');
const cursor = document.querySelector('.cursor');

Assignation des classes primaires :

sun.classList.add('none');
dayColor.classList.add('none');

Mise en écoute de l’évènement 'click'pour déclencher changeMode():

mode.addEventListener('click',changeMode);

1 – Solution linéaire :

Sinature de la fonction changeMode() :

function changeMode() {
    mode.classList.toggle('change');
    shut.classList.toggle('shadow');
    shut.classList.toggle('bluer');
    playerHeader.classList.toggle('degrade')
    diskTree.classList.toggle('background')
    moon.classList.toggle('none');
    nightColor.classList.toggle('none');
    sun.classList.toggle('view');
    dayColor.classList.toggle('view');
    screenbox.classList.toggle('background');
    sunny.classList.toggle('shadow')
    runningTime.classList.toggle('deeper');
    totalTime.classList.toggle('deeper');
    progress.classList.toggle('unset');
    progressBar.classList.toggle('color');
    slider.classList.toggle('white-slider');
    volumeBar.classList.toggle('alt-color');
    title.classList.toggle('deeper');
    subtitle.classList.toggle('deeper');
}

2 – Factorisation à l’aide d’une fonction intermédiaire :

Création de la fonction toggleAll()pour y passer en arguments les paires éléments et classe à basculer via classList.toggle():

function toggleAll(pairs) {
  pairs.forEach(([el, cls]) => el.classList.toggle(cls));
}

Fonction changeMode()appelant les paires éléments et classe comme arguments de toggleAll():

function changeMode() {
  toggleAll([
    [mode, 'change'],
    [shut, 'shadow'],
    [shut, 'bluer'],
    [playerHeader, 'degrade'],
    [diskTree, 'background'],
    [moon, 'none'],
    [nightColor, 'none'],
    [sun, 'view'],
    [dayColor, 'view'],
    [screenbox, 'background'],
    [sunny, 'shadow'],
    [runningTime, 'deeper'],
    [totalTime, 'deeper'],
    [progress, 'unset'],
    [progressBar, 'color'],
    [slider, 'white-slider'],
    [volumeBar, 'alt-color'],
    [title, 'deeper'],
    [subtitle, 'deeper'],
  ]);
}

3 – Factorisation via un objet :

Déclaration de variable hors scope newshuthors scope :

const newshut = document.querySelector('.shut');

Déclaration de l’objet toggleConfig{}permettant de déclarer les classes alternatives assignées aux éléments à modifier :

const toggleConfig = {
  'light-modal': [modal],
  'shadow': [newshut, sunny],
  'bluer': [newshut],
  'degrade': [playerHeader],
  'background': [diskTree, screenbox],
  'none': [moon, nightColor],
  'view': [sun, dayColor],
  'deeper':[runningTime, totalTime, title, subtitle],
  'unset': [progress],
  'color': [progressBar],
  'white-slider': [slider],
  'alt-color': [volumeBar],
};

Fonction changeMode()à l’aide de la méthode entries():

function changeMode() {
    Object.entries(toggleConfig).forEach(([cls, elements]) => {
    elements.forEach(el => el.classList.toggle(cls));
    });
}