JSFiddle - React, Tailwind, and code Playground

by Corentin Ballot

HTML

<div>
  <div class="-dsg_vortex_display" data-dsgvortex_display="etape=debut" data-dsgvortex_class="red:type_residence=principale">
    Parce que vous en êtes au début de vos recherches
  </div>
  <div class="-dsg_vortex_display" data-dsgvortex_display="etape=trouvé">
    Parce que vous avez déjà trouvé votre bien
  </div>
  <div class="-dsg_vortex_display" data-dsgvortex_display="etape=promesse">
    Parce que vous allez signer une promesse de vente
  </div>
  <div class="-dsg_vortex_display" data-dsgvortex_display="etape=recherche_pret">
    Parce que vous recherchez une offre de prêt
  </div>
</div>

CSS

.-dsg_vortex_display {
  display: none;
}

.red {
  background-color: red;
}

JavaScript

let data = {
	etape: "debut",
  type_residence: "principale"
};

// DISPLAY
(function() {
  var vortex_elements = document.querySelectorAll(".-dsg_vortex_display");

  for(let elem of vortex_elements) {
  	console.log(elem);
    
  	// data-dsgvortex_display
		if(elem.dataset.dsgvortex_display!=undefined) {
      let show=false;
      for(let cond of elem.dataset.dsgvortex_display.split(',')) {
        let q=cond.split('=')[0], r=cond.split('=')[1];
        show=show||data[q]===r;
      }
      if(show) {
        elem.style.display="unset";
      }
    }

		// data-dsgvortex_hide
    if(elem.dataset.dsgvortex_hide!=undefined) {
      let hide=false;
      for(let cond of elem.dataset.dsgvortex_hide.split(',')) {
        let q=cond.split('=')[0], r=cond.split('=')[1];
        hide=hide||data[q]===r;
      }
      if(hide) {
        elem.style.display="none";
      }
    }
    
    // data-dsgvortex_class
    if(elem.dataset.dsgvortex_class!=undefined) {
      let addclass=false,c;
      for(let class_cond of elem.dataset.dsgvortex_class.split(';')) {
      	c=class_cond.split(':')[0];
        for(let cond of class_cond.split(':')[1].split(',')) {
          let q=cond.split('=')[0], r=cond.split('=')[1];
          addclass=addclass||data[q]===r;
        }
      }
      if(addclass) {
        elem.classList.add(c);
      } else {
      	elem.classList.remove(c);
      }
    }
  }
})();