lapervenche/ZwiiCMS
1
0
Fork 0
forked from ZwiiCMS-Team/ZwiiCMS
Code Issues Pull Requests Projects Releases Activity

[9.2.25] Preview du site

Browse Source
This commit is contained in:
Fred Tempez 2020-03-16 10:20:25 +01:00
parent 2615198d7a
commit 8c4ebad69a
3 changed files with 103 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
core/module/theme/view/site/site.css
View File

@ -29,4 +29,11 @@ textarea,
.button.buttonGrey, .button.buttonGrey,
.button.buttonGrey:hover { .button.buttonGrey:hover {
color: rgba(33, 34, 35, 1); color: rgba(33, 34, 35, 1);
}
div.preview {
border-radius: 2%;
-webkit-box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.75);
-moz-box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.75);
box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.75);
} }

36
core/module/theme/view/site/site.js.php
View File

@ -10,6 +10,37 @@
* @link http://zwiicms.com/ * @link http://zwiicms.com/
*/ */
/*
* Chargement de l'aperçu
*/
$( document ).ready(function() {
// Import des polices de caractères
var titleFont = $("#themeTitleFont").val();
var textFont = $("#themeTextFont").val();
var css = "@import url('https://fonts.googleapis.com/css?family=" + titleFont + "|" + textFont + "');";
var colors = core.colorVariants($("#themeButtonBackgroundColor").val());
css += "h1.preview,h3.preview{color:" + $("#themeTitleTextColor").val() + ";font-family:'" + titleFont.replace(/\+/g, " ") + "',sans-serif;font-weight:" + $("#themeTitleFontWeight").val() + ";text-transform:" + $("#themeTitleTextTransform").val() + "}";
css += "p.preview{color:" + $("#themeTextTextColor").val() + "}";
css += "div.preview{background-color:" + $("#themeSiteBackgroundColor").val() + ";}";
// Couleurs des liens
colors = core.colorVariants($("#themeLinkTextColor").val());
css += "a.preview{color:" + colors.normal + "}";
css += "a.preview:hover{color:" + colors.darken + "}";
// Paramètrage du DOM
$("#themePreview").remove();
$("<style>")
.attr("type", "text/css")
.attr("id", "themePreview")
.text(css)
.appendTo("head");
});
/** /**
* Aperçu en direct * Aperçu en direct
*/ */
@ -36,14 +67,18 @@ $("input, select").on("change", function() {
colors = core.colorVariants($("#themeLinkTextColor").val()); colors = core.colorVariants($("#themeLinkTextColor").val());
//css += "a{color:" + colors.normal + "}"; //css += "a{color:" + colors.normal + "}";
//css += "a:hover{color:" + colors.darken + "}"; //css += "a:hover{color:" + colors.darken + "}";
css += "a.preview{color:" + colors.normal + "}";
css += "a.preview:hover{color:" + colors.darken + "}";
// Couleur, polices, épaisseur et capitalisation de caractères des titres // Couleur, polices, épaisseur et capitalisation de caractères des titres
//css += "h1,h2,h3,h4,h5,h6{color:" + $("#themeTitleTextColor").val() + ";font-family:'" + titleFont.replace(/\+/g, " ") + "',sans-serif;font-weight:" + $("#themeTitleFontWeight").val() + ";text-transform:" + $("#themeTitleTextTransform").val() + "}"; //css += "h1,h2,h3,h4,h5,h6{color:" + $("#themeTitleTextColor").val() + ";font-family:'" + titleFont.replace(/\+/g, " ") + "',sans-serif;font-weight:" + $("#themeTitleFontWeight").val() + ";text-transform:" + $("#themeTitleTextTransform").val() + "}";
css += "h1.preview,h3.preview{color:" + $("#themeTitleTextColor").val() + ";font-family:'" + titleFont.replace(/\+/g, " ") + "',sans-serif;font-weight:" + $("#themeTitleFontWeight").val() + ";text-transform:" + $("#themeTitleTextTransform").val() + "}";
// Police de caractères // Police de caractères
css += "body{font-family:'" + textFont.replace(/\+/g, " ") + "',sans-serif}"; css += "body{font-family:'" + textFont.replace(/\+/g, " ") + "',sans-serif}";
// Taille du texte // Taille du texte
css += "body,.row > div{font-size:" + $("#themeTextFontSize").val() + "}"; css += "body,.row > div{font-size:" + $("#themeTextFontSize").val() + "}";
// Couleur du texte // Couleur du texte
//css += "body,.block h4,input[type='email'],input[type='text'],input[type='password'],.inputFile,select,textarea,.inputFile,.button.buttonGrey,.button.buttonGrey:hover{color:" + $("#themeTextTextColor").val() + "}"; //css += "body,.block h4,input[type='email'],input[type='text'],input[type='password'],.inputFile,select,textarea,.inputFile,.button.buttonGrey,.button.buttonGrey:hover{color:" + $("#themeTextTextColor").val() + "}";
css += "p.preview{color:" + $("#themeTextTextColor").val() + "}";
// Largeur du site // Largeur du site
css += ".container{max-width:" + $("#themeSiteWidth").val() + "}"; css += ".container{max-width:" + $("#themeSiteWidth").val() + "}";
if ($("#themeSiteWidth").val() === "100%") { if ($("#themeSiteWidth").val() === "100%") {
@ -55,6 +90,7 @@ $("input, select").on("change", function() {
// Couleur du site, arrondi sur les coins du site et ombre sur les bords du site // Couleur du site, arrondi sur les coins du site et ombre sur les bords du site
//css += "#site{background-color:" + $("#themeSiteBackgroundColor").val() + ";border-radius:" + $("#themeSiteRadius").val() + ";box-shadow:" + $("#themeSiteShadow").val() + " #212223}"; //css += "#site{background-color:" + $("#themeSiteBackgroundColor").val() + ";border-radius:" + $("#themeSiteRadius").val() + ";box-shadow:" + $("#themeSiteShadow").val() + " #212223}";
css += "#site{border-radius:" + $("#themeSiteRadius").val() + ";box-shadow:" + $("#themeSiteShadow").val() + " #212223}"; css += "#site{border-radius:" + $("#themeSiteRadius").val() + ";box-shadow:" + $("#themeSiteShadow").val() + " #212223}";
css += "div.preview{background-color:" + $("#themeSiteBackgroundColor").val() + ";}";
// Ajout du css au DOM // Ajout du css au DOM
$("#themePreview").remove(); $("#themePreview").remove();
$("<style>") $("<style>")

100
core/module/theme/view/site/site.php
View File

@ -17,47 +17,67 @@
<div class="block"> <div class="block">
<h4>Couleurs</h4> <h4>Couleurs</h4>
<div class="row"> <div class="row">
<div class="col4"> <div class="col8">
<?php echo template::text('themeSiteBackgroundColor', [ <div class="row">
'class' => 'colorPicker', <div class="col6">
'help' => 'Le curseur horizontal règle le niveau de transparence.', <?php echo template::text('themeSiteBackgroundColor', [
'label' => 'Fond', 'class' => 'colorPicker',
'value' => $this->getData(['theme', 'site', 'backgroundColor']) 'help' => 'Le curseur horizontal règle le niveau de transparence.',
]); ?> 'label' => 'Fond',
'value' => $this->getData(['theme', 'site', 'backgroundColor'])
]); ?>
</div>
<div class="col6">
<?php echo template::text('themeTextTextColor', [
'class' => 'colorPicker',
'help' => 'Le curseur horizontal règle le niveau de transparence.',
'label' => 'Texte',
'value' => $this->getData(['theme', 'text', 'textColor'])
]); ?>
</div>
</div>
<div class="row">
<div class="col6">
<?php echo template::text('themeTitleTextColor', [
'class' => 'colorPicker',
'help' => 'Le curseur horizontal règle le niveau de transparence.',
'label' => 'Titres',
'value' => $this->getData(['theme', 'title', 'textColor'])
]); ?>
</div>
<div class="col6">
<?php echo template::text('themeLinkTextColor', [
'class' => 'colorPicker',
'help' => 'Le curseur horizontal règle le niveau de transparence.',
'label' => 'Liens',
'value' => $this->getData(['theme', 'link', 'textColor'])
]); ?>
</div>
</div>
<div class="col6 offset3">
<?php echo template::text('themeButtonBackgroundColor', [
'class' => 'colorPicker',
'help' => 'Le curseur horizontal règle le niveau de transparence.',
'label' => 'Boutons',
'value' => $this->getData(['theme', 'button', 'backgroundColor'])
]); ?>
</div>
</div> </div>
<div class="col4"> <div class="col4 preview">
<?php echo template::text('themeTextTextColor', [ <h1 class="preview">Aperçu</h1>
'class' => 'colorPicker', <div class="row">
'help' => 'Le curseur horizontal règle le niveau de transparence.', <div class="col8">
'label' => 'Texte', <h3 class="preview">Titre 3 </h3>
'value' => $this->getData(['theme', 'text', 'textColor']) <p class="preview">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
]); ?> </div>
</div> <div class="col4">
<div class="col4"> <p><a href="#" class="preview">Hyperlien</a></p>
<?php echo template::text('themeLinkTextColor', [ <?php echo template::button('themeSiteTest', [
'class' => 'colorPicker', 'class' => 'buttonPreview',
'help' => 'Le curseur horizontal règle le niveau de transparence.', 'value' => 'Test'
'label' => 'Liens', ]); ?>
'value' => $this->getData(['theme', 'link', 'textColor']) </div>
]); ?> </div>
</div>
</div>
<div class="row">
<div class="col4">
<?php echo template::text('themeTitleTextColor', [
'class' => 'colorPicker',
'help' => 'Le curseur horizontal règle le niveau de transparence.',
'label' => 'Titres',
'value' => $this->getData(['theme', 'title', 'textColor'])
]); ?>
</div>
<div class="col4 offset4">
<?php echo template::text('themeButtonBackgroundColor', [
'class' => 'colorPicker',
'help' => 'Le curseur horizontal règle le niveau de transparence.',
'label' => 'Boutons',
'value' => $this->getData(['theme', 'button', 'backgroundColor'])
]); ?>
</div> </div>
</div> </div>
</div> </div>