Cet article considère que vous avez déjà des connaissances en html5, CSS3, et des bases de javascript/jQuery
Actuellement, nous avons un site statique avec des offres qui mènent à un pdf. Le problème, c’est que pour éditer les offres, il faut forcément mettre les mains dans le code ! Pas très pratique quand des personnes non dev doivent gérer les offres…
D’un autre côté, nous avons www.welcomekit.co qui nous met à disposition une interface d’édition des offres, de suivi de candidature, et divers outils utils.
Ce serait cool de pouvoir combiner les deux ! On pourrait non seulement éditer les offres sans toucher à une seule ligne de code, et avoir toutes les candidatures à un seul et même endroit.
Et ça tombe bien, car WelcomeKit nous met à disposition un widget à intégrer directement sur notre site ! Le point négatif, c’est que pour l’instant notre site a déjà son propre design, et celui proposé avec le widget ne colle pas…
Nous allons donc voir comment mettre le widget à nos couleurs, trier en onglet par département, et même ajouter une phrase d’accroche !
Maintenant, vous pouvez copier-coller votre code sur votre site !
Cela devrait ressembler à ça :
Argh ! Très laid… Mais pas d’inquiétudes, CSS va fixer ça ! (Nous n’utilisons pas celui procuré par le welcomekit)
#welcomekit-embed {
width: 100%;
}
.welcomekit-jobs-list {
display: flex;
flex-direction: column;
align-items: center;
}
.welcomekit-jobs-list-item {
position: relative;
width: 50%;
border-bottom: 1px solid #ddd;
margin-bottom: 20px;
padding: 3.5em 6em;
background-color: white;
color: #404040;
border-radius: 7px;
list-style-type: none;
}
.welcomekit-jobs-list-item:first-child:after {
position: absolute;
content: " ";
bottom: 100%;
left: 50%;
height: 0;
width: 0;
border: solid transparent;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #ffffff;
border-width: 10px;
margin-left: -10px;
}
.welcomekit-job-name {
text-transform: uppercase;
letter-spacing: 3px;
font-size: 1.1em;
margin-bottom: 5px;
font-family: Montserrat, sans-serif;
}
.welcomekit-job-infos {
display: flex;
justify-content: center;
align-items: center;
}
.welcomekit-jobs-info li {
list-style-type: none;
margin-left: 9px;
margin-right: 9px;
font-size: 0.8em;
color: white;
}
.welcomekit-job-contractType {
padding: 2px 4px;
font-family: Montserrat, sans-serif;
}
.welcomekit-job-officeCity {
position: relative;
font-family: Georgia, sans-serif;
}
.welcomekit-job-officeCity:before {
position: absolute;
content: '•';
top: 0;
left: -11px;
}
.cdi {
background-color: #61919F;
}
.stage {
background-color: #E78351;
}
Et voilà !
C’est quand même mieux comme ça ! Mais on constate que tous les départements sont sur la même page, et si l’on a beaucoup d’offres d’emplois, cela rend la recherche compliquée… La solution que je propose est d’ajouter un onglet pour chaque département :
HTML
<div class="jobs-tab-container">
<ul class="jobs-tab" data-selector="code">
<li class="jobs-tab__content"><span>code</span></li>
</ul>
<ul class="jobs-tab" data-selector="business">
<li class="jobs-tab__content"><span>business</span></li>
</ul>
<ul class="jobs-tab" data-selector="marketing">
<li class="jobs-tab__content"><span>marketing</span></li>
</ul>
<ul class="jobs-tab" data-selector="projet">
<li class="jobs-tab__content"><span>projet</span></li>
</ul>
</div>
CSS
.jobs-tab-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex-wrap: wrap;
margin-top: 30px;
}
.jobs-tab {
width: auto;
height: auto;
border-right: 1px solid #d9f4ee;
}
.jobs-tab:last-child {
border-right: none;
}
.jobs-tab__content {
list-style-type: none;
padding: 0 25px;
font-size: 1.1em;
text-transform: uppercase;
font-size: Montserrat, sans-serif;
cursor: pointer;
}
Le résultat :
Maintenant il est temps d’ajouter un peu de JS pour séparer les différentes catégories par département, et en afficher uniquement une par onglet.
Mais le script du widget WelcomeKit fait appel à leur API avec une requête AJAX avant de créer le HTML correspondant, nous avons donc besoin d’attendre que ce soit fini avant de pouvoir le modifier. La solution pour cela est d’utiliser un MutationObserver.
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (!mutation.addedNodes) return
for (var i = 0; i < mutation.addedNodes.length; i++) {
// The code will be write here
}
})
})
var target = document.querySelector('#welcomekit-embed');
var config = {childList: true, subtree: true, attributes: false, characterData: false};
observer.observe(target, config);
Le code au sein de la boucle for va être exécuté de façon asynchrone, après que le “script embed” ait fini d’ajouter les éléments à '#welcomekit-embed'.
Comment ça marche ? Le callback du MutationObserver va être appelé à chaque fois qu’une modification apparaît sur sa cible. Les arguments sont les mutations qui sont executées. Nous choisissons ensuite quels types de mutation doivent être écoutées. Si la mutation consiste à ajouter des élements enfants, nous exectutons ensuite le code à l’intérieur de la boucle for.
Maintenant nous n’avons plus qu’à écrire le code concernant le widget dans la boucle for. Dans notre cas, le widget consiste en un gros élément .welcomekit-departments, le code ne sera donc lancé qu’une fois.
Plus d’infos sur MutationObservers peuvent être trouvées sur MDN: https://developer.mozilla.org/en/docs/Web/API/MutationObserver
Commençons avec ce code :
var node = mutation.addedNodes[i]
var departments = $(node).find(".welcomekit-department");
departments.each(function() {
$(this).addClass("block-cat--" +
$(this).find(".welcomekit-department-name").text().toLowerCase().replace(/ /g, '-')
);
});
Cela permet de différentier les 4 onglets (départements). Premièrement, on vise le noeud enfant $(node).find(".welcomekit-department"), et pour chacun d’entre eux on ajoute la classe block-cat--[department-name]. On utilise une simple expression régulière pour slugify le nom du département.
Pour afficher un seul onglet à la fois, je procède ainsi :
// hide all the tab contents except the first one
$(".block-cat--business, .block-cat--marketing, .block-cat--projet").hide();
// add the selected class on the first button
$('.jobs-tab[data-selector="code"]').find('li span').addClass('jobs-tab--selected');
// listen to clicks on the
$('.jobs-tab').click(function(){
var blockName = $(this).data('selector');
$('.jobs-tab--selected').removeClass('jobs-tab--selected');
$(this).find('li span').addClass('jobs-tab--selected');
$('.welcomekit-department').hide();
$('.block-cat--' + blockName).show();
});
Les 2 premières lignes sont pour l’init; on cache 3 blocs (ainsi il n’en reste qu’un seul affiché), on ajoute la classe jobs-tab--selected au bouton affiché afin qu’il soit visuellement différent.
Ensuite, nous écoutons le click sur les boutons, déplaçons la classe jobs-tab--selected sur le bouton qui vient d’être cliqué, et cachons tous les . welcomekit-departement, sauf celui sélectionné.
Le résultat :
On peut styliser l’actuel onglet jobs-tab--selected avec du CSS.
C’est pas mal, mais on peut encore mieux faire. Que pensez-vous d’ajouter une phrase d’accroche pour chaque offre ?
Il faut retourner sur www.welcomekit.co et modifier la description de chaque offre.
Mon astuce est d’ajouter une blockquote au début, qui deviendra ensuite notre fameuse phrase d’accroche sur l’offre.
On peut ensuite retourner dans le code.
Dans le welcomekit, ajouter "description" dans le tableau wk.display.
Voici le code complet :
welcomeKitReady(function() {
var wk = new WelcomeKitEmbed('zoLz9wL')
wk.group('department')
wk.display(["title","contractType","officeCity", "description"])
wk.locale('fr')
wk.website('wk-careers_toucan-toco')
wk.render()
});
On remarque que toute la description est affichée. Ainsi, on peut utiliser ce CSS pour tout cacher sauf le blockquote (la phrase d’accroche) :
.welcomekit-job-description p, .welcomekit-job-description ul {
display: none;
}
.welcomekit-job-description blockquote p {
display: block;
padding-bottom: 0;
font-size: 1.2em;
color: #313131;
}
Cela devrait ressembler à ça :
Nous y sommes presque ! Il suffit juste de positionner la phrase d’accroche en dessous des infos. welcomekit-job-description, welcomekit-job-contractType et welcomekit-job-officeCity sont dans le même container, on ne peut donc pas utiliser flex-direction: column si l’on souhaite garder contractType et officeCity sur la même ligne. Une solution possible est d’utiliser position: absolute.
.welcomekit-job-infos {
...
margin-top: 50px;
}
.welcomekit-job-contractType {
...
position: absolute;
top: -38px;
left: calc(50% - 52px);
}
.welcomekit-job-officeCity {
...
position: absolute;
top: -35px;
left: calc(50% - 0px);
}
Résultat :
La page entière :
J’aurais souhaité rendre la liste des départements dynamique, mais c’est en dehors du temps accordé pour cette feature. Stay tuned pour une seconde version prochainement ;)
On aurait aussi pu se pencher directement sur la requête lancée par le widget vers l’API du welcomekit, et rebuild le widget selon nos besoins, cependant ils font déjà un très bon travail avec le job template (bonnes organisation et classes HTML), il est donc plus facile de compléter et étendre leur travail plutôt que de tout recommencer de zéro.
Merci pour votre intérêt, j’espère que vous avez apprécié ce tuto ! :D
Un grand merci à l’équipe du Welcomekit qui fournit de supers widgets et plateformes de recrutement, il est vraiment agréable d’utiliser ces derniers !