ZwiiCMS, le gestionnaire de site Web sans base de données. #zwii #cms #nosql #json https://www.zwiicms.fr
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

183 lines
5.8 KiB

3 years ago
5 months ago
3 years ago
4 months ago
3 years ago
4 months ago
3 years ago
3 years ago
3 years ago
4 months ago
3 years ago
3 years ago
3 years ago
4 months ago
3 years ago
4 months ago
3 years ago
4 months ago
3 years ago
4 months ago
3 years ago
4 months ago
3 years ago
3 years ago
3 years ago
3 years ago
4 months ago
3 years ago
  1. /**
  2. * This file is part of Zwii.
  3. *
  4. * For full copyright and license information, please see the LICENSE
  5. * file that was distributed with this source code.
  6. *
  7. * @author Rémi Jean <remi.jean@outlook.com>
  8. * @copyright Copyright (C) 2008-2018, Rémi Jean
  9. * @license GNU General Public License, version 3
  10. * @author Frédéric Tempez <frederic.tempez@outlook.com>
  11. * @copyright Copyright (C) 2018-2021, Frédéric Tempez
  12. * @link http://zwiicms.fr/
  13. */
  14. $(document).ready(function(){
  15. $("header").css("line-height", "");
  16. $("header").css("height", "");
  17. });
  18. /**
  19. * Aperçu en direct
  20. */
  21. $("input, select").on("change", function() {
  22. // Récupérer la taille de l'image
  23. var tmpImg = new Image();
  24. tmpImg.onload = function() {
  25. // Informations affichées
  26. $("#themeHeaderImageHeight").html(tmpImg.height + "px");
  27. $("#themeHeaderImageWidth").html(tmpImg.width + "px");
  28. $("#themeHeaderImageRatio").html(tmpImg.width / tmpImg.height);
  29. // Limiter la hauteur à 600 px
  30. if (tmpImg.height > 600) {
  31. tmpImgHeight = 600;
  32. } else {
  33. tmpImgHeight = tmpImg.height;
  34. }
  35. //Modifier la dropdown liste si une image n'est pas sélectionnée
  36. if ($("#themeHeaderImage").val() !== "" ) {
  37. // Une image est ajoutée ou changée
  38. if ($("#themeHeaderHeight option").length === 5) {
  39. // Pas d'image précédemment on ajoute l'option
  40. $("#themeHeaderHeight ").prepend('<option selected="selected" value="0"> Hauteur de l\'image sélectionnée </option>');
  41. }
  42. // Modifier la valeur
  43. $("#themeHeaderHeight option:eq(0)").val(tmpImgHeight + "px");
  44. // Modifier l'option
  45. $("#themeHeaderHeight option:eq(0)").html("Hauteur de l\'image sélectionnée (" + tmpImgHeight + "px)");
  46. }
  47. };
  48. if ($("#themeHeaderImage").val() === "" &&
  49. $("#themeHeaderHeight option").length === 6 ) {
  50. $("#themeHeaderHeight option:eq(0)").remove();
  51. }
  52. tmpImg.src= "<?php echo helper::baseUrl(false); ?>" + "site/file/source/" + $("#themeHeaderImage").val();
  53. // Import des polices de caractères
  54. var headerFont = $("#themeHeaderFont").val();
  55. var css = "@import url('https://fonts.googleapis.com/css?family=" + headerFont + "');";
  56. // Couleurs, image, alignement et hauteur de la bannière
  57. css += "header{background-color:" + $("#themeHeaderBackgroundColor").val() + ";text-align:" + $("#themeHeaderTextAlign").val() + ";";
  58. if ($("#themeHeaderImage").val()) {
  59. // Une image est sélectionnée
  60. css += "background-image:url('<?php echo helper::baseUrl(false); ?>site/file/source/" + $("#themeHeaderImage").val() + "');background-repeat:" + $("#themeHeaderImageRepeat").val() + ";background-position:" + $("#themeHeaderImagePosition").val() + ";";
  61. css += "background-size:" + $("#themeHeaderImageContainer").val() + ";";
  62. // Pas d'image sélectionnée
  63. } else {
  64. // Désactiver l'option responsive
  65. css += "background-image:none;";
  66. }
  67. css += "line-height:" + $("#themeHeaderHeight").val() + ";height:" + $("#themeHeaderHeight").val() + "}";
  68. // Taille, couleur, épaisseur et capitalisation du titre de la bannière
  69. css += "header span{color:" + $("#themeHeaderTextColor").val() + ";font-family:'" + headerFont.replace(/\+/g, " ") + "',sans-serif;font-weight:" + $("#themeHeaderFontWeight").val() + ";font-size:" + $("#themeHeaderFontSize").val() + ";text-transform:" + $("#themeHeaderTextTransform").val() + "}";
  70. // Cache le titre de la bannière
  71. if($("#themeHeaderTextHide").is(":checked")) {
  72. $("header #themeHeaderTitle").hide();
  73. }
  74. else {
  75. $("header #themeHeaderTitle").show();
  76. }
  77. // Marge
  78. if($("#themeHeaderMargin").is(":checked")) {
  79. if(<?php echo json_encode($this->getData(['theme', 'menu', 'position']) === 'site-first'); ?>) {
  80. css += 'header{margin:0 20px}';
  81. }
  82. else {
  83. css += 'header{margin:20px 20px 0 20px}';
  84. }
  85. }
  86. else {
  87. css += 'header{margin:0}';
  88. }
  89. // Position de la bannière
  90. switch($("#themeHeaderPosition").val()) {
  91. case 'hide':
  92. $("header").hide();
  93. break;
  94. case 'site':
  95. if(<?php echo json_encode($this->getData(['theme', 'menu', 'position']) === 'site-first'); ?>) {
  96. $("header").show().insertAfter("nav");
  97. }
  98. else {
  99. $("header").show().prependTo("#site");
  100. // Supprime le margin en trop du menu
  101. if(<?php echo json_encode($this->getData(['theme', 'menu', 'margin'])); ?>) {
  102. css += 'nav{margin:0 20px}';
  103. }
  104. }
  105. break;
  106. case 'body':
  107. if(<?php echo json_encode($this->getData(['theme', 'menu', 'position']) === 'body-first'); ?>) {
  108. $("header").show().insertAfter("nav");
  109. }
  110. else {
  111. $("header").show().insertAfter("#bar");
  112. }
  113. if(<?php echo json_encode($this->getData(['theme', 'menu', 'position']) === 'top'); ?>) {
  114. $("header").show().insertAfter("nav");
  115. }
  116. break;
  117. }
  118. // Ajout du css au DOM
  119. $("#themePreview").remove();
  120. $("<style>")
  121. .attr("type", "text/css")
  122. .attr("id", "themePreview")
  123. .text(css)
  124. .appendTo("head");
  125. }).trigger("change");
  126. // Affiche / Cache les options de l'image du fond
  127. $("#themeHeaderImage").on("change", function() {
  128. if($(this).val()) {
  129. $("#themeHeaderImageOptions").slideDown();
  130. }
  131. else {
  132. $("#themeHeaderImageOptions").slideUp(function() {
  133. $("#themeHeaderTextHide").prop("checked", false).trigger("change");
  134. });
  135. }
  136. }).trigger("change");
  137. // Affiche / Cache les options de la position
  138. $("#themeHeaderPosition").on("change", function() {
  139. if($(this).val() === 'site') {
  140. $("#themeHeaderPositionOptions").slideDown();
  141. }
  142. else {
  143. $("#themeHeaderPositionOptions").slideUp(function() {
  144. $("#themeHeaderMargin").prop("checked", false).trigger("change");
  145. });
  146. }
  147. }).trigger("change");
  148. // Affiche / Cache les options de la bannière cliquable si pas masquée
  149. $("#themeHeaderPosition").on("change", function() {
  150. if($(this).val() === 'hide') {
  151. $("#themeHeaderShow").slideUp(function() {
  152. $("#themeHeaderlinkHome").prop("checked", false).trigger("change");
  153. });
  154. }
  155. else {
  156. $("#themeHeaderShow").slideDown();
  157. }
  158. }).trigger("change");