simple-images-upload/public/js/main.js

/* eslint-disable no-unused-vars */
let timeout = null;

/**
 * Fonction permettant d'afficher un message dans un toastr
 * @param {String} message
 * @param {Boolean} success
 */
function showToastr(message, success = false) {
  const x = document.getElementById('toastr');
  if (message) {
    x.getElementsByTagName('SPAN')[0].innerHTML = message;
  }

  if (timeout) {
    clearTimeout(timeout);
    x.classList.remove('show');
  }

  x.classList.remove('success');
  x.classList.remove('error');
  if (success) {
    x.classList.add('success');
  } else {
    x.classList.add('error');
  }

  x.classList.add('show');

  timeout = setTimeout(() => {
    x.classList.remove('show');
  }, 3000);
}

/**
 * Fonction permettant de masquer le toastr
 */
function hideToastr() {
  const x = document.getElementById('toastr');

  x.className = x.className.replace('show', '');
  x.getElementsByTagName('SPAN')[0].innerHTML = '';
}

/**
 * Fonction permettant de copier le contenu d'un input dans le presse papier
 * @param {String} itemId
 * @param {String} message
 */
const copyToClipboard = (itemId, message) => {
  const copyText = document.getElementById(itemId);
  copyText.select();
  document.execCommand('copy');

  showToastr(message, true);
};

/**
 * Fonction permettant d'afficher une modale
 */
const showModale = () => {
  const x = document.getElementsByClassName('modal');

  x[0].classList.add('is-visible');
};

/**
 * Fonction permettant de fermer une modale
 */
const closeModale = () => {
  const x = document.getElementsByClassName('modal');

  x[0].classList.remove('is-visible');
};

/**
 * Fonction permettant d'afficher la modale avec le détails d'une image
 * @param {Number} itemId
 */
const displayImageDetails = (itemId) => {
  const x = document.getElementById(`item-${itemId}`);
  const original = x.dataset.original;
  const medium = x.dataset.medium;
  const small = x.dataset.small;

  document.getElementById('previewImage').src = small;
  document.getElementById('originalFile-0').value = original;
  document.getElementById('mediumFile-0').value = medium;
  document.getElementById('smallFile-0').value = small;
  document.getElementById('bbcode-0').value = `[url=${original}][img]${medium}[/img][/url]`;

  showModale();
};

/**
 * Fonction permettant de récupérer le thème du système
 * @return {String}
 */
function getPreferredColorScheme() {
  if (window.matchMedia) {
    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  }
  return 'light';
}

/**
 * Fonction permettant de changer le thème du site
 * @param {String} scheme
 */
function setColorScheme(scheme) {
  document.documentElement.setAttribute('data-theme', scheme);
}

/**
 * Ensemble d'actions effectuées au chargement de la page
 */
document.addEventListener('DOMContentLoaded', () => {
  const $navbarBurgers = Array.prototype.slice.call(
      document.querySelectorAll('.navbar-burger'),
      0,
  );
  if ($navbarBurgers.length > 0) {
    $navbarBurgers.forEach((el) => {
      el.addEventListener('click', () => {
        const {target} = el.dataset;
        const $target = document.getElementById(target);

        el.classList.toggle('is-active');
        $target.classList.toggle('is-active');
      });
    });
  }
});

if (window.matchMedia) {
  /**
   * Event permettant de détecter les changements de thème du système
   */
  const colorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
  colorSchemeQuery.addEventListener('change', () => {
    const selectedColorScheme = localStorage.getItem('theme') || 'system';

    if (selectedColorScheme === 'system') {
      const preferedColorScheme = getPreferredColorScheme();
      setColorScheme(preferedColorScheme);
    }
  });

  /**
   * Au chargement de la page on détecte le thème à charger
   */
  setColorScheme(getPreferredColorScheme());
}