Comment simplifier mon code javascript?
Bonjour,
Je suis en train de faire mon site web et j'utilise du javascript par le biais de la bibliothèque jQuery. Le truc c'est que je suis une tanche en javascript et que je me retrouve avec un tas de bouts de code adaptés de droite et de gauche et ça fini par être assez impressionnant à l'écran. Notez tout de même que ça fonctionne à l'heure actuelle, mais je pense qu'une optimisation serait possible.
Voilà mon code commenté (ce qui explique aussi pourquoi il est long) :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
| $(document).ready(function(){
//on vire le bouton créé automatiquement par jimdo
$('.jmd-nav__toggle-button').remove();
//on annule le liens pour les références -> faisable pour les éléments ayant des enfants
$('#cc-nav-view-2350882324 > a').click(function() {
return false;
});
//ajout de la classe has-sub lorsqu'il y a des enfants
$('.jmd-nav__list-item-0:has(.cc-nav-level-1)').addClass("has-sub");
//fonction au clic
$('.jmd-nav__list-item-0 > a').click(function(){
//on va chercher l'élément suivant celui qu'on a cliqué
var checkElement = $(this).next();
//on supprime les classes actives existantes
$('.j-nav-variant-nested li').removeClass('active');
//on ajoute une classe active à l'élément li le plus proche
$(this).closest('.jmd-nav__list-item-0').addClass('active');
//si notre checkElement est un sous-menu et que celui-ci est visible, alors on le désactive et on le cache
if((checkElement.is('.cc-nav-level-1')) && (checkElement.is(':visible'))) {
$(this).closest('.jmd-nav__list-item-0').removeClass('active');
checkElement.slideUp('normal');
}
//si notre checkElement est un sous-menu et qu'il est invisible, alors on cache les sous-menu visibles et on montre celui-ci
if((checkElement.is('.cc-nav-level-1')) && (!checkElement.is(':visible'))) {
$('.cc-nav-level-1:visible').slideUp('normal');
checkElement.slideDown('normal');
}
//si notre checkElement renvoie vers un sous-menu, alors on désactive les liens
if(checkElement.is('.cc-nav-level-1')) {
return false;
}
//si non, on suit le liens cliqué
else {
return true;
}
});
//si le liens visité a la class cc-nav-current, alors on la donne à son parent et on le montre à l'ouverture de la page
if($('.cc-nav-level-1 li').hasClass('cc-nav-current')){
$('.cc-nav-level-1').parent('li').addClass('cc-nav-current');
$('.cc-nav-level-1').slideDown('normal');
}
//si non, on le cache
else{
$('.cc-nav-level-1').slideUp(0);
}
//les éléments de sous-menu n'étant pas page courrante reçoivent un style
$('.cc-nav-level-1').children('li').not('cc-nav-current').find('a').css({'border-left' : '1px dashed #c2d944'}).last('a').css({'border-bottom' : '1px dashed #c2d944'});
//on ajoute un niveau de liste au-dessus du menu existant
$('.cc-nav-level-0').wrap('<ul class="cc-nav-level-X" id="navigation"><li class="jmd-nav__list-item-X" id="ref-lvl"></li></ul>');
//cette partie du code sera soumise à une condition : la largeur de la fenêtre devra être inférieure à 924px
//Je suis encore en train de tester la fonction permettant ce miracle
//on ajoute un liens et un nom d'entête avant le menu existant
var openMenu = document.createElement('a');
openMenu.setAttribute('href', '#');
openMenu.setAttribute('data-link-title', 'Ouvrir le menu');
openMenu.innerHTML = 'Ouvrir le menu';
var buttonAfter= document.getElementById('cc-nav-view-2074207824');
var refElement = buttonAfter.parentNode;
var parentElement = document.getElementById('ref-lvl');
parentElement.insertBefore(openMenu, refElement);
//on insère des balises span à l'intérieur des liens, encadrant le texte existant
$('a').wrapInner('<span></span>');
//fonction au clic
$('.jmd-nav__list-item-X > a').click(function(){
//le même que checkElement : on vérifie l'élément suivant celui qui a été cliqué
var checkElement2 = $(this).next();
//on supprime les classes active de chaque élément de liste li
$('.j-nav-variant-nested li').removeClass('active');
//on ajoute la classe active à l'élément de niveau X le plus proche (de toute façon il n'y en a qu'un)
$(this).closest('.jmd-nav__list-item-X').addClass('active');
//si notre checkElement2 est un sous-menu et qu'il est visible, alors je le cache et le désactive
if((checkElement2.is('.cc-nav-level-0')) && (checkElement2.is(':visible'))) {
$(this).closest('.jmd-nav__list-item-X').removeClass('active');
checkElement2.slideUp('normal');
}
//si notre chackElement2 est un sous-menu et qu'il est invisible, alors je cache les autres menus ouverts et je montre celui-ci
if((checkElement2.is('.cc-nav-level-0')) && (!checkElement2.is(':visible'))) {
$('.cc-nav-level-0:visible').slideUp('normal');
checkElement2.slideDown('normal');
}
//si notre checkElement2 est un sous-menu, alors je ne suis pas le liens sur lequel j'ai cliqué
if(checkElement2.is('.cc-nav-level-0')) {
return false;
}
//si non je suis le liens cliqué
else {
return true;
}
});
}); |
Pour le voir marcher vous pouvez aller voir ici (en sachant que sur codepen, certaines fonctions ne sont pas testables, du coup je vous demande de me croire quand je vous dit que ça fonctionne :mrgreen:. Cela dit, si vous avez d'autres propositions plus efficaces, je suis ouvert !).
Comme je l'ai déjà dit, je suis ouvert à des propositions assez radicales qui permettraient plus d'efficacité et, pourquoi pas, une optimisation du code.
Dernière chose à savoir : je construit mon site sur jimdo (pour tout un tas de raisons) et du coup je ne touche pas à la structure html directement (ça peut avoir des effets néfastes sur le fonctionnement du site...), même s'il m'arrive de la modifier grâce à javascript.
D'avance merci pour votre aide et désolé pour ce pavé que je vous donne à lire. :oops:
