<script type="text/javascript">
require([
"jquery",
"foundation",
"domReady!"
], function ($, Foundation) {
'use strict';
$(".optichoix-leaf").on("click", function () {
optiChoixLoadProducts(this.getAttribute("data-category-id"));
});
function optiChoixLoadProducts (id) {
$("#optichoix-product-list-"+id).load(
"/expertise/productlist",
"categoryId=" + id
);
}
// Product Finder
// https://get.foundation/sites/docs/drilldown-menu.html
let $productFinder = $("#productFinder"),
$productFinderDrilldown = new Foundation.Drilldown($productFinder),
$productFinderBreadcrumb = $('#productFinderBreadcrumb'),
$productFinderActionPrevious = $('#productFinderActionPrevious'),
$productFinderActionReset = $('#productFinderActionReset'),
$productFinderActionNext = $('#productFinderActionNext'),
navHistory = [],
currentPositionInNavHistory = -1; // "-1" car avec "0" (valeur du 1er index dans un array), nous aurions déjà répondu à une 1ère question
// On réinitialise la totale
function resetAll(){
// On referme le menu
$productFinder.foundation('_hideAll');
// FIX d'un bug du composant Drilldown de Foundation:
// à l'utilisation de la méthode _hideAll, les aria-expanded restent à true
$('[aria-expanded="true"]', $productFinder).each(function(){
$(this).attr('aria-expanded', false);
});
// On désactive les boutons Previous, Reset et Next
$productFinderActionPrevious.prop('disabled', true);
$productFinderActionReset.prop('disabled', true);
$productFinderActionNext.prop('disabled', true);
// On réinitialise l'historique de navigation
navHistory = [];
// On réinitialise la position courante dans l'historique de navigation
currentPositionInNavHistory = -1;
// On met à jour le breadcrumb
updateBreadcrumb();
}
// On génère le breadcrumb
function updateBreadcrumb(){
$productFinderBreadcrumb.empty();
$('[aria-expanded="true"]', $productFinder).each(function(){
$('<p class="product-finder-breadcrumb-element">'+$(this).attr('aria-label')+'</p>').appendTo($productFinderBreadcrumb);
});
}
// Au clic sur un choix proposé dans l'arbre des questions
$('.product-finder-tree', $productFinder).on('click', '.question', function(){
let $this = $(this);
let $closestExpanded = $this.closest('[aria-expanded="true"]');
// On pousse l'ID de la question cliquée dans le tableau navHistory
navHistory.push({
questionID: $closestExpanded.attr('id')
});
// On met à jour la position courante dans l'historique de navigation
currentPositionInNavHistory = navHistory.length -1;
// On met à jour le breadcrumb
updateBreadcrumb();
// On active les boutons Previous et Reset
$productFinderActionPrevious.prop('disabled', false);
$productFinderActionReset.prop('disabled', false);
});
// Au clic sur Reset button
// ...on invoque la fonction resetAll
$productFinderActionReset.on('click', resetAll);
// Au clic sur Previous button
$productFinderActionPrevious.on('click', function(){
// On récupère l'ID de la question correspondant à la currentPositionInNavHistory dans le tableau navHistory
let currentPositionInNavHistoryQuestionID = $('#'+navHistory[currentPositionInNavHistory].questionID);
// On met à jour le menu
// (dans le DOM, on remonte d'un cran dans l'arbre des questions)
let $theTargetSubMenuUlTag = currentPositionInNavHistoryQuestionID.closest('.submenu');
$productFinder.foundation('_showMenu', $theTargetSubMenuUlTag);
// -1 sur la valeur de currentPositionInNavHistory
currentPositionInNavHistory = currentPositionInNavHistory -1;
// Si la valeur de la position précédente est "-1", on réinitialise tout
if(currentPositionInNavHistory == "-1"){
resetAll();
// Sinon...
} else {
// On met à jour le breadcrumb
updateBreadcrumb();
// On active le bouton Next
$productFinderActionNext.prop('disabled', false);
}
});
// Au clic sur Next button
$productFinderActionNext.on('click', function(){
// +1 sur la valeur de currentPositionInNavHistory
currentPositionInNavHistory = currentPositionInNavHistory +1;
// On met à jour le menu
// (dans le DOM, on descend d'un cran dans l'arbre des questions)
let $theCurrentElementWithASubmenuToOpen = $('#'+navHistory[currentPositionInNavHistory].questionID);
$productFinder.foundation('_show', $theCurrentElementWithASubmenuToOpen);
// On met à jour le breadcrumb
updateBreadcrumb();
// Si la valeur de la position suivante correspond au dernier index du tableau navHistory
// (l'utilisateur n'est jamais allé plus loin dans l'arbre des questions)
let navHistoryLastIndex = navHistory.length -1;
if(navHistoryLastIndex == currentPositionInNavHistory){
// On désactive le button Next
$productFinderActionNext.prop('disabled', true);
} else {
// Nada...
return false;
}
});
})
</script>