[9.2.12] Thème - menu - couleur fond page sélectionnée

core/core.php

@@ -1015,6 +1015,13 @@ class common {
 			$this->setData(['core', 'dataVersion', 9211]);
 			$this->saveData();
 		}
+		// Version 9.2.12
+		if($this->getData(['core', 'dataVersion']) < 9212) {
+			$this->setData(['theme','menu', 'activeColorAuto',true]);
+			$this->setData(['theme','menu', 'activeColor','rgba(255, 255, 255, 1)']);
+			$this->setData(['core', 'dataVersion', 9212]);
+			$this->saveData();
+		}
 	}
 }
 
@@ -1140,11 +1147,17 @@ class core extends common {
 			$colors = helper::colorVariants($this->getData(['theme', 'header', 'textColor']));
 			$css .= 'header span{color:' . $colors['normal'] . ';font-family:"' . str_replace('+', ' ', $this->getData(['theme', 'header', 'font'])) . '",sans-serif;font-weight:' . $this->getData(['theme', 'header', 'fontWeight']) . ';font-size:' . $this->getData(['theme', 'header', 'fontSize']) . ';text-transform:' . $this->getData(['theme', 'header', 'textTransform']) . '}';
 			// Menu
-			$colors = helper::colorVariants($this->getData(['theme', 'menu', 'backgroundColor']));
+			$colors = helper::colorVariants($this->getData(['theme', 'menu', 'backgroundColor']));							
 			$css .= 'nav,nav a{background-color:' . $colors['normal'] . '}';
 			$css .= 'nav a,#toggle span,nav a:hover{color:' . $this->getData(['theme', 'menu', 'textColor']) . '}';
 			$css .= 'nav a:hover{background-color:' . $colors['darken'] . '}';
-			$css .= 'nav a.active{background-color:' . $colors['veryDarken'] . '}';
+			if ($this->getData(['theme','menu','activeColorAuto']) === true) {
+				$css .= 'nav a.active{background-color:' . $colors['veryDarken'] . '}';				
+			} else {
+				$css .= 'nav a.active{background-color:' . $this->getData(['theme','menu','activeColor']) . '}';
+				$color2 = helper::colorVariants($this->getData(['theme', 'menu', 'textColor']));
+				$css .= 'nav a.active{color:' .  $color2['text'] . '}';
+			}				
 			$css .= '#menu{text-align:' . $this->getData(['theme', 'menu', 'textAlign']) . '}';
 			if($this->getData(['theme', 'menu', 'margin'])) {
 				if(
@@ -1157,7 +1170,7 @@ class core extends common {
 					$css .= 'nav{margin:0 20px 0}';
 				}
 			}
-			$css .= '#toggle span,#menu a{padding:' . $this->getData(['theme', 'menu', 'height']) .';font-family:"' . str_replace('+', ' ', $this->getData(['theme', 'menu', 'font'])) . '",sans-serif;font-weight:' . $this->getData(['theme', 'menu', 'fontWeight']) . ';font-size:' . $this->getData(['theme', 'menu', 'fontSize']) . ';text-transform:' . $this->getData(['theme', 'menu', 'textTransform']) . '}';
+			$css .= '#toggle span,#menu a{padding:' . $this->getData(['theme', 'menu', 'height']) .';font-family:"' . str_replace('+', ' ', $this->getData(['theme', 'menu', 'font'])) . '",sans-serif;font-weight:' . $this->getData(['theme', 'menu', 'fontWeight']) . ';font-size:' . $this->getData(['theme', 'menu', 'fontSize']) . ';text-transform:' . $this->getData(['theme', 'menu', 'textTransform']) . '}';			
 			// Pied de page
 			$colors = helper::colorVariants($this->getData(['theme', 'footer', 'backgroundColor']));
 			if($this->getData(['theme', 'footer', 'margin'])) {

core/module/install/ressource/defaultdata.php

@@ -478,7 +478,9 @@ class install extends common {
 				'textAlign' => 'left',
 				'textColor' => 'rgba(255, 255, 255, 1)',
 				'textTransform' => 'none',
-				'fixed' => false
+				'fixed' => false,
+				'activeColor' => 'rgba(255, 255, 255, 1)',
+				'activeColorAuto' => true
 			],
 			'site' => [
 				'backgroundColor' => 'rgba(255, 255, 255, 1)',

core/module/theme/theme.php

@@ -442,7 +442,9 @@ class theme extends common {
 				'textAlign' => $this->getInput('themeMenuTextAlign'),
 				'textColor' => $this->getInput('themeMenuTextColor'),
 				'textTransform' => $this->getInput('themeMenuTextTransform'),
-				'fixed' => $this->getInput('themeMenuFixed', helper::FILTER_BOOLEAN)			
+				'fixed' => $this->getInput('themeMenuFixed', helper::FILTER_BOOLEAN),
+				'activeColorAuto' => $this->getInput('themeMenuActiveColorAuto', helper::FILTER_BOOLEAN),
+				'activeColor' => $this->getInput('themeMenuActiveColor')
 			]]);
 			// Valeurs en sortie
 			$this->addOutput([

core/module/theme/view/menu/menu.js.php

@@ -22,7 +22,11 @@ $("input, select").on("change", function() {
 	css += "nav,nav a{background-color:" + colors.normal + "}";
 	css += "nav a,#toggle span,nav a:hover{color:" + $("#themeMenuTextColor").val() + "}";
 	css += "nav a:hover{background-color:" + colors.darken + "}";
-	css += "nav a.active{background-color:" + colors.veryDarken + "}";
+	if ($("#themeMenuActiveColorAuto").is(':checked')) {
+		css += "nav a.active{background-color:" + colors.veryDarken + "}";
+	} else {
+		css += "nav a.active{background-color:" +  $("#themeMenuActiveColor").val() +  "}";
+	}	
 	// Taille, hauteur, épaisseur et capitalisation de caractères du menu
 	css += "#toggle span,#menu a{padding:" + $("#themeMenuHeight").val() + ";font-family:'" + menuFont.replace(/\+/g, " ")  + "',sans-serif;font-weight:" + $("#themeMenuFontWeight").val() + ";font-size:" + $("#themeMenuFontSize").val() + ";text-transform:" + $("#themeMenuTextTransform").val() + "}";
 	// Alignement du menu
@@ -92,6 +96,7 @@ $("input, select").on("change", function() {
 			break;			
 	}
 });
+//
 // Lien de connexion (addClass() et removeClass() au lieu de hide() et show() car ils ne conservent pas le display-inline: block; de #themeMenuLoginLink)
 $("#themeMenuLoginLink").on("change", function() {
 	if($(this).is(":checked")) {
@@ -101,6 +106,7 @@ $("#themeMenuLoginLink").on("change", function() {
 		$("#menuLoginLink").addClass('displayNone');
 	}
 }).trigger("change");
+
 // Affiche / Cache les options de la position
 $("#themeMenuPosition").on("change", function() {
 	if($(this).val() === 'site-first' || $(this).val() === 'site-second') {
@@ -112,6 +118,7 @@ $("#themeMenuPosition").on("change", function() {
 		});
 	}
 }).trigger("change");
+
 // Affiche / Cache les options du menu fixe
 $("#themeMenuPosition").on("change", function() {
 	if($(this).val() === 'top') {
@@ -123,3 +130,13 @@ $("#themeMenuPosition").on("change", function() {
 		});
 	}
 }).trigger("change");
+
+// Affiche la sélection de couleur auto
+
+$("#themeMenuActiveColorAuto").on("change", function() {
+	if ($(this).is(':checked') ) {
+		$("#themeMenuActiveColorWrapper").slideUp();
+	} else {			
+		$("#themeMenuActiveColorWrapper").slideDown();
+	}
+}).trigger("change");

core/module/theme/view/menu/menu.php

@@ -34,6 +34,22 @@
 						]); ?>
                 </div>
             </div>
+            <div class="row">
+                <div class="col6">
+                    <?php echo template::text('themeMenuActiveColor', [
+							'class' => 'colorPicker',
+							'help' => 'Couleur d\'arrièreplan du menu sélectionné.<br>Le curseur horizontal règle le niveau de transparence.',							
+							'label' => 'Activé',
+							'value' => $this->getData(['theme', 'menu', 'activeColor'])
+						]); ?>
+                </div>
+                <div class="col12">
+                        <?php echo template::checkbox('themeMenuActiveColorAuto', true, 'Page active, couleur de fond automatique.', [
+                            'checked' => $this->getData(['theme', 'menu', 'activeColorAuto']),
+                            'help' => 'La couleur de fond de la page active peut être définie automatique ou selon une couleur définie, comme par exemple celle de fond des pages.'
+                        ]); ?>
+                </div>                
+            </div>
         </div>
     </div>
     <div class="col4">