main.js

const patterns = {
  damier: `
    background-image: repeating-conic-gradient({{patternColor}} 0% 25%, {{backgroundColor}} 0% 50%);
    background-position: 0 0, calc({{patternSize}}/2) calc({{patternSize}}/2);
    background-size: {{patternSize}} {{patternSize}};
    background-color: {{backgroundColor}};
  `,
  grilleFine: `
    background-image:
      linear-gradient({{patternColor}} 2px, transparent 2px),
      linear-gradient(to right, {{patternColor}} 2px, transparent 2px);
    background-size: {{patternSize}} {{patternSize}};
    background-color: {{backgroundColor}};
  `,
  rayuresVerticales: `
    background-image: repeating-linear-gradient( to right, {{patternColor}}, {{patternColor}} 2px, transparent 2px, transparent);
    background-size: {{patternSize}} {{patternSize}};
    background-color: {{backgroundColor}};
  `,
  rayuresHorizontales: `
    background-image: repeating-linear-gradient( 0deg, {{patternColor}}, {{patternColor}} 2px, transparent 2px, transparent );
    background-size: {{patternSize}} {{patternSize}};
    background-color: {{backgroundColor}};
  `,
  rayuresDiagonales: `
    background-image: repeating-linear-gradient( 45deg, {{patternColor}} 0, {{patternColor}} 2px, transparent 0, transparent 50% );
    background-size: {{patternSize}} {{patternSize}};
    background-color: {{backgroundColor}};
  `,
  traitVertical: `
    background-image: linear-gradient(90deg, transparent 50%, {{patternColor}} 50%);
    background-size: {{patternSize}} {{patternSize}};
    background-color: {{backgroundColor}};
  `,
  traitHorizontal: `
    background-image: linear-gradient(0deg, transparent 50%, {{patternColor}} 50%);
    background-size: {{patternSize}} {{patternSize}};
    background-color: {{backgroundColor}};
  `,
  blocsDiagonaux: `
    background-image: repeating-linear-gradient( 45deg, transparent, transparent {{patternSize}}, {{patternColor}} {{patternSize}}, {{patternColor}} calc({{patternSize}}*2) );
    background-color: {{backgroundColor}};
    background-repeat: no-repeat;
    background-size: cover;
  `,
  croix: `
    background:
      conic-gradient(at 10% 50%, #0000 75%, {{patternColor}} 0),
      conic-gradient(at 10% 50%, #0000 75%, {{patternColor}} 0) calc(1*{{patternSize}}) calc(3*{{patternSize}}),
      conic-gradient(at 10% 50%, #0000 75%, {{patternColor}} 0) calc(2*{{patternSize}}) calc(1*{{patternSize}}),
      conic-gradient(at 10% 50%, #0000 75%, {{patternColor}} 0) calc(3*{{patternSize}}) calc(4*{{patternSize}}),
      conic-gradient(at 10% 50%, #0000 75%, {{patternColor}} 0) calc(4*{{patternSize}}) calc(2*{{patternSize}}),
      conic-gradient(at 50% 10%, #0000 75%, {{patternColor}} 0) 0 calc(4*{{patternSize}}),
      conic-gradient(at 50% 10%, #0000 75%, {{patternColor}} 0) calc(1*{{patternSize}}) calc(2*{{patternSize}}),
      conic-gradient(at 50% 10%, #0000 75%, {{patternColor}} 0) calc(2*{{patternSize}}) 0,
      conic-gradient(at 50% 10%, #0000 75%, {{patternColor}} 0) calc(3*{{patternSize}}) calc(3*{{patternSize}}),
      conic-gradient(at 50% 10%, #0000 75%, {{patternColor}} 0) calc(4*{{patternSize}}) calc(1*{{patternSize}}),
      {{backgroundColor}};
    background-size: calc({{patternSize}}*5) calc({{patternSize}}*5);
  `,
  triangleDiagonal: `
    background-image: linear-gradient(45deg, {{patternColor}} 50%, transparent 50%);
    background-size: {{patternSize}} {{patternSize}};
    background-color: {{backgroundColor}};
  `,
  croixDiagonale: `
    background:
      radial-gradient(circle, transparent 20%, {{backgroundColor}} 20%, {{backgroundColor}} 80%, transparent 80%, transparent) 0% 0% / calc({{patternSize}}*2) calc({{patternSize}}*2),
      radial-gradient(circle, transparent 20%, {{backgroundColor}} 20%, {{backgroundColor}} 80%, transparent 80%, transparent) {{patternSize}} {{patternSize}} / calc({{patternSize}}*2) calc({{patternSize}}*2),
      linear-gradient({{patternColor}} 2px, transparent 2px) 0px -1px / {{patternSize}} {{patternSize}},
      linear-gradient(90deg, {{patternColor}} 2px, {{backgroundColor}} 2px) -1px 0px / {{patternSize}} {{patternSize}} {{backgroundColor}};
    background-size: calc({{patternSize}}*2) calc({{patternSize}}*2), calc({{patternSize}}*2) calc({{patternSize}}*2), {{patternSize}} {{patternSize}}, {{patternSize}} {{patternSize}};
    background-color: {{backgroundColor}};
  `,
  losanges: `
    background:
      linear-gradient( 45deg, #0000 calc(25%/3), {{patternColor}} 0 calc(50%/3), #0000 0 calc(250%/3), {{patternColor}} 0 calc(275%/3), #0000 0 ),
      linear-gradient( 45deg, {{patternColor}} calc(25%/3), #0000 0 calc(50%/3), {{patternColor}} 0 25%, #0000 0 75%, {{patternColor}} 0 calc(250%/3), #0000 0 calc(275%/3), {{patternColor}} 0 ),
      linear-gradient( -45deg, #0000 calc(25%/3), {{patternColor}} 0 calc(50%/3), #0000 0 calc(250%/3), {{patternColor}} 0 calc(275%/3), #0000 0 ),
      linear-gradient( -45deg, {{patternColor}} calc(25%/3), #0000 0 calc(50%/3), {{patternColor}} 0 25%, #0000 0 75%, {{patternColor}} 0 calc(250%/3), #0000 0 calc(275%/3), {{patternColor}} 0 )
      {{backgroundColor}};
    background-size: calc({{patternSize}}*2) calc({{patternSize}}*2);
    background-position: 0 0, {{patternSize}} {{patternSize}};
  `,
  rayuresRadiales: `
    background:
      conic-gradient(at 62.5% 12.5%, {{patternColor}} 25%, #0000 0) calc({{patternSize}}/-8) calc({{patternSize}}/2),
      conic-gradient(at 62.5% 12.5%, {{patternColor}} 25%, #0000 0) calc(-3*{{patternSize}}/8) calc({{patternSize}}/4),
      conic-gradient(at 87.5% 62.5%, {{patternColor}} 25%, #0000 0) calc(3*{{patternSize}}/8) calc({{patternSize}}/4),
      conic-gradient(at 87.5% 62.5%, {{patternColor}} 25%, #0000 0) calc({{patternSize}}/-8) 0,
      conic-gradient(at 25% 12.5%, {{patternColor}} 25%, #0000 0) 0 calc({{patternSize}}/-4),
      conic-gradient(at 25% 12.5%, {{patternColor}} 25%, #0000 0) calc({{patternSize}}/-4) 0,
      conic-gradient(at 87.5% 87.5%, {{patternColor}} 25%, #0000 0) calc({{patternSize}}/8) 0
      {{backgroundColor}};
    background-size: {{patternSize}} {{patternSize}};
  `,
  cerclesRayures: `
    background:
      conic-gradient(from 90deg at 2px 2px, #0000 25%, {{backgroundColor}} 0) -1px -1px,
      linear-gradient(-45deg, {{backgroundColor}} 15%, {{patternColor}} 0 28%, #0000 0 72%, {{patternColor}} 0 85%, {{backgroundColor}} 0),
      linear-gradient(45deg, {{backgroundColor}} 15%, {{patternColor}} 0 28%, #0000 0 72%, {{patternColor}} 0 85%, {{backgroundColor}} 0),
      conic-gradient(from 90deg at 40% 40%, {{backgroundColor}} 25%, {{patternColor}} 0)
        calc({{patternSize}}/-5) calc({{patternSize}}/-5);
    background-size: {{patternSize}} {{patternSize}};
  `,
  grilleGlitch: `
    background:
      repeating-linear-gradient( transparent, transparent calc({{patternSize}} * 0.25), {{patternColor}} calc({{patternSize}} * 0.25), 
      {{patternColor}} calc({{patternSize}} * 0.375), transparent calc({{patternSize}} * 0.375), transparent calc({{patternSize}} * 0.5),
      {{patternColor}} calc({{patternSize}} * 0.375), {{patternColor}} {{patternSize}}, transparent {{patternSize}}, transparent calc({{patternSize}} * 1.125), 
      {{patternColor}} calc({{patternSize}} * 1.125), {{patternColor}} calc({{patternSize}} * 1.25), transparent calc({{patternSize}} * 1.25), transparent calc({{patternSize}} * 2) ),
      repeating-linear-gradient( 90deg, transparent, transparent calc({{patternSize}} * 0.25), {{patternColor}} calc({{patternSize}} * 0.25), 
      {{patternColor}} calc({{patternSize}} * 0.375), transparent calc({{patternSize}} * 0.375), transparent calc({{patternSize}} * 0.5),
      {{patternColor}} calc({{patternSize}} * 0.375), {{patternColor}} {{patternSize}}, transparent {{patternSize}}, transparent calc({{patternSize}} * 1.125), 
      {{patternColor}} calc({{patternSize}} * 1.125), {{patternColor}} calc({{patternSize}} * 1.25), transparent calc({{patternSize}} * 1.25), transparent calc({{patternSize}} * 2) ), {{backgroundColor}};
    background-blend-mode: multiply;
    background-color: {{backgroundColor}};
  `,
  rayuresQuatreDirections: `
    background:
      radial-gradient( farthest-side at -33.33% 50%, #0000 52%, {{patternColor}} 54% 57%, #0000 59%) 0 calc(calc({{patternSize}}*4)/2),
      radial-gradient( farthest-side at 50% 133.33%, #0000 52%, {{patternColor}} 54% 57%, #0000 59%) calc(calc({{patternSize}}*4)/2) 0,
      radial-gradient( farthest-side at 133.33% 50%, #0000 52%, {{patternColor}} 54% 57%, #0000 59%),
      radial-gradient( farthest-side at 50% -33.33%, #0000 52%, {{patternColor}} 54% 57%, #0000 59%), {{backgroundColor}};
    background-size:
      calc({{patternSize}}*4/4.667) calc({{patternSize}}*4),
      calc({{patternSize}}*4) calc({{patternSize}}*4/4.667);
  `,
  motifRadialLineaire: `
    background:
      radial-gradient( 27% 29% at right, #0000 83%, {{patternColor}} 85% 99%, #0000 101% ) calc({{patternSize}}/2) {{patternSize}},
      radial-gradient( 27% 29% at left, #0000 83%, {{patternColor}} 85% 99%, #0000 101% ) calc({{patternSize}}/-2) {{patternSize}},
      radial-gradient( 29% 27% at top, #0000 83%, {{patternColor}} 85% 99%, #0000 101% ) 0 calc({{patternSize}}/2),
      radial-gradient( 29% 27% at bottom, #0000 83%, {{patternColor}} 85% 99%, #0000 101%) 0 calc({{patternSize}}/-2) {{backgroundColor}};
    background-size: calc({{patternSize}}*2) calc({{patternSize}}*2);
  `,
  cubes3D: `
    background-image:
      linear-gradient(30deg, {{patternColor}} 12%, transparent 12.5%, transparent 87%, {{patternColor}} 87.5%, {{patternColor}}),
      linear-gradient(150deg, {{patternColor}} 12%, transparent 12.5%, transparent 87%, {{patternColor}} 87.5%, {{patternColor}}),
      linear-gradient(30deg, {{patternColor}} 12%, transparent 12.5%, transparent 87%, {{patternColor}} 87.5%, {{patternColor}}),
      linear-gradient(150deg, {{patternColor}} 12%, transparent 12.5%, transparent 87%, {{patternColor}} 87.5%, {{patternColor}}),
      linear-gradient(60deg, rgba(227,28,255,0.5) 25%, transparent 25.5%, transparent 75%, rgba(227,28,255,0.5) 75%, rgba(227,28,255,0.5)),
      linear-gradient(60deg, rgba(227,28,255,0.5) 25%, transparent 25.5%, transparent 75%, rgba(227,28,255,0.5) 75%, rgba(227,28,255,0.5));
    background-size: calc({{patternSize}}*2) calc({{patternSize}}*3.5);
    background-position: 0 0, 0 0, calc({{patternSize}}/1) calc({{patternSize}}*1.75), calc({{patternSize}}/1) calc({{patternSize}}*1.75), 0 0, calc({{patternSize}}/1) calc({{patternSize}}*1.75);
    background-color: {{backgroundColor}};
  `
};

// OUVRIR/FERMER LISTBOX
const btnOpenListbox = document.getElementById('btnOpenListbox');
const patternList = document.getElementById('patternList');
const labelPattern = document.getElementById('labelPattern');

btnOpenListbox.addEventListener('click', () => {
  patternList.classList.toggle('hidden');
});

patternList.addEventListener('click', (event) => {
  const patternTitle = event.target.textContent
  labelPattern.textContent = patternTitle;

  patternList.classList.toggle('hidden');
  displayCode();
  updatePreview();
});

// COLOR INPUT
const patternColorInput = document.getElementById('patternColor');
const backgroundColorInput = document.getElementById('backgroundColor');

const patternColorPreview = document.getElementById('patternColorPreview');
const backgroundColorPreview = document.getElementById('backgroundColorPreview');

const textColor = document.getElementById('textColor');
const textBackground = document.getElementById('textBackground');
// Mise à jours du code hexadecimal :
textColor.textContent = patternColorInput.value;
textBackground.textContent = backgroundColorInput.value;
// color :
function updatePatternColor() {
  const color = patternColorInput.value;
  patternColorPreview.style.backgroundColor = color;
  textColor.textContent = color;

  displayCode();
  updatePreview();
}
// backgroundColor :
function updateBackgroundColor() {
  const color = backgroundColorInput.value;
  backgroundColorPreview.style.backgroundColor = color;
  textBackground.textContent = color;

  displayCode();
  updatePreview();
}

patternColorInput.addEventListener('input', updatePatternColor);
backgroundColorInput.addEventListener('input', updateBackgroundColor);

// RANGE INPUT
const patternSizeInput = document.getElementById('patternSize');

const rangeslider = document.getElementById('rangeslider');
const rangesliderFill = document.getElementById('rangesliderFill');
const rangesliderHandle = document.getElementById('rangesliderHandle');
const patternSizeText = document.getElementById('patternSizeText');

const offsetHandle = -10;
// Mise à jour de la taille
function updatePatternSize() {
  const value = parseInt(patternSizeInput.value, 10);
  const min = parseInt(patternSizeInput.min, 10);
  const max = parseInt(patternSizeInput.max, 10);

  patternSizeText.textContent = value + "px";

  const ratio = (value - min) / (max - min);
  const sliderWidth = rangeslider.offsetWidth;

  const fillWidth = ratio * sliderWidth;
  const handleLeft = ratio * sliderWidth;

  rangesliderFill.style.width = fillWidth + "px";
  rangesliderHandle.style.left = (handleLeft + offsetHandle) + "px";
}
// Initialisation
function initPatternSize() {
  updatePatternSize();
  patternSizeInput.addEventListener('input', updatePatternSize);
}

initPatternSize();

// MISE A JOURS DU CODE AFFICHE
const codeBox = document.getElementById('codeBox');

function displayCode() {
  const currentPatternLabel = labelPattern.textContent.trim();
  const patternOptions = patternList.querySelectorAll('li');
  let currentPatternId = null;

  for (const option of patternOptions) {
    const optionLabel = option.textContent.trim();

    if (optionLabel === currentPatternLabel) {
      currentPatternId = option.dataset.pattern;
      break;
    }
  }
  if (!currentPatternId) {
    codeBox.textContent = '';
    return;
  }

  const template = patterns[currentPatternId];
  
  const coloredTemplate = applyColors(template);
  const sizedTemplate = applySize(coloredTemplate);

  codeBox.textContent = sizedTemplate;
}
patternSizeInput.addEventListener('input', () => {
  displayCode();
  updatePreview();
});

// color
function applyColors(template) {
  const patternColor = patternColorInput.value;
  const backgroundColor = backgroundColorInput.value;

  let result = template;
  result = result.replaceAll('{{patternColor}}', patternColor);
  result = result.replaceAll('{{backgroundColor}}', backgroundColor);

  return result;
}
// size
function applySize(template) {
  const sizeValue = patternSizeInput.value;
  const sizePx = sizeValue + "px";

  let result = template;
  result = result.replaceAll('{{patternSize}}', sizePx);

  return result;
}

// MISE A J0URS DE LA PREVIEW
const previewBox = document.getElementById('previewBox');

function updatePreview() {
  const css = codeBox.textContent.trim();
  if (!css) {
    previewBox.style.cssText = '';
    return;
  }
  previewBox.style.cssText = css;
}

displayCode();
updatePreview();