tchak / klown-website

klown-website.vercel.app
MIT License
0 stars 1 forks source link

Ajout de fonction JS pour améliorer l'UI de la page catégorie #3

Open BenjmnG opened 3 years ago

BenjmnG commented 3 years ago

Hello Paul,

J'inscris ici deux fonctions JS qui devraient être intégrées à la page Catégorie Je comprends qu'elles doivent se placer dans app/hooks.ts. Ma syntaxe n'est toutefois pas aussi concise que la tienne

/*
  Filter UI ehancement
               */
let sortOptions = [...document.querySelectorAll('.sort-options label')]
sortOptions.forEach( function(el, i){
  el.addEventListener("click", function(){

    if(bodyId == "categorie"){
      setTimeout(function(){
        scrollContainer.scrollLeft = 0;
      }, 300);
    }

    // reset if double clic
    let id = el.getAttribute('for'),
        input = document.getElementById(id);
    if(input.checked){ 
      setTimeout(function(){
        document.getElementById('medium-reset').checked = true;
      }, 300);
    }
  });
});

/*
  Carrousel UI
               */
function verticalTrigger(){
  let scrollTrigger = document.querySelector('#scrollTrigger'),
      step = (document.body.clientWidth)*.9,
      delta = step/4;

  scrollTrigger.addEventListener("click", function(){
    if (scrollContainer.offsetWidth + scrollContainer.scrollLeft + delta >= scrollContainer.scrollWidth) {
      scrollContainer.scrollLeft = 0    
    } else{
      scrollContainer.scrollBy(step ,0)
    }
  });  
}
BenjmnG commented 2 years ago

Pour rappel, c'est la fonction verticalTrigger qui gère la navigation entre les œuvres des pages catégories. A ce stade cette navigation se fait difficilement.