bannière animée
This commit is contained in:
parent
decf28fe54
commit
8f9dea9c26
|
|
@ -1,5 +1,10 @@
|
|||
# Changelog
|
||||
|
||||
## Version 4.4.03 de Deltacms
|
||||
- Modifications :
|
||||
- Nouvelle option pour la bannière : une bannière animée avec Swiper
|
||||
- Corrections :
|
||||
|
||||
## Version 4.4.02 de Deltacms
|
||||
- Modifications :
|
||||
- mise en conformité W3C des blocs utilisés en édition et en administration,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
|
||||
# DeltaCMS 4.4.02
|
||||
# DeltaCMS 4.4.03
|
||||
|
||||
DeltaCMS est un CMS sans base de données (flat-file) qui permet de créer et gérer facilement un site web sans aucune connaissance en programmation.
|
||||
L'administration du site est bilingue anglais ou français, le site peut être rédigé dans une des principales langues européennes.
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ class common {
|
|||
|
||||
// Numéro de version
|
||||
const DELTA_UPDATE_URL = 'https://update.deltacms.fr/master/';
|
||||
const DELTA_VERSION = '4.4.02';
|
||||
const DELTA_VERSION = '4.4.03';
|
||||
const DELTA_UPDATE_CHANNEL = "v4";
|
||||
|
||||
public static $actions = [];
|
||||
|
|
@ -2581,6 +2581,7 @@ class core extends common {
|
|||
$css .= 'input[type="checkbox"]:checked + label::before,.speechBubble{background-color:' . $colors['normal'] . ';color:' . $colors['text'] . ';}';
|
||||
$css .= '.speechBubble::before {border-color:' . $colors['normal'] . ' transparent transparent transparent;}';
|
||||
$css .= '.button {background-color:' . $colors['normal'] . ';color:' . $colors['text'] . ';}.button:hover {background-color:' . $colors['darken'] . ';color:' . $colors['text'] . ';}.button:active {background-color:' . $colors['veryDarken'] . ';color:' . $colors['text'] . ';}';
|
||||
$css .= '.buttonPreview {background-color:' . $colors['normal'] . '!important;color:' . $colors['text'] . '!important;}.buttonPreview:hover {background-color:' . $colors['darken'] . '!important;color:' . $colors['text'] . '!important;}.buttonPreview:active {background-color:' . $colors['veryDarken'] . '!important;color:' . $colors['text'] . '!important;}';
|
||||
$colors = helper::colorVariants($this->getData(['admin','backgroundColorButtonGrey']));
|
||||
$css .= '.button.buttonGrey {background-color: ' . $colors['normal'] . ';color: ' . $colors['text'] . ';}.button.buttonGrey:hover {background-color:' . $colors['darken'] . ';color:' . $colors['text'] . ';}.button.buttonGrey:active {background-color:' . $colors['veryDarken'] . ';color:' . $colors['text'] . ';}';
|
||||
$colors = helper::colorVariants($this->getData(['admin','backgroundColorButtonRed']));
|
||||
|
|
@ -2591,6 +2592,7 @@ class core extends common {
|
|||
$css .= '.button.buttonGreen, button[type=submit] {background-color: ' . $colors['normal'] . ';color: ' . $colors['text'] . ';}.button.buttonGreen:hover, button[type=submit]:hover {background-color: ' . $colors['darken'] . ';color: ' . $colors['text'] .';}.button.buttonGreen:active, button[type=submit]:active {background-color: ' . $colors['darken'] . ';color: ' .$colors['text'] .';}';
|
||||
$colors = helper::colorVariants($this->getData(['admin','backgroundBlockColor']));
|
||||
$css .= '.block {border: 1px solid ' . $this->getData(['admin','borderBlockColor']) . ';}.block > h4, .blockTitle {background-color: ' . $colors['normal'] . ';color:' . $colors['text'] . ';}';
|
||||
|
||||
// en admin la couleur de fond du block est la couleur de la page admin, on supprime l'ombre et le radius du block définis pour le theme
|
||||
$css .= '.block {border-radius: 0px;box-shadow: none;}.block > h4, .blockTitle {border-radius: 0px;}';
|
||||
$css .= '.block {background-color: ' . $this->getData(['admin','backgroundColor']) . ';}';
|
||||
|
|
|
|||
|
|
@ -91,8 +91,14 @@ if ($this->getData(['core', 'dataVersion']) < 4401) {
|
|||
$this->setData(['core', 'dataVersion', 4401]);
|
||||
}
|
||||
|
||||
if ($this->getData(['core', 'dataVersion']) < 4402) {
|
||||
if ($this->getData(['core', 'dataVersion']) < 4403) {
|
||||
$this->setData(['theme', 'header', 'swiperImagesDir', '']);
|
||||
$this->setData(['theme', 'header', 'swiperContent', '']);
|
||||
$this->setData(['theme', 'header', 'swiperEffects', 'fade']);
|
||||
$this->setData(['theme', 'header', 'swiperDirection', false]);
|
||||
$this->setData(['theme', 'header', 'swiperTime', '2000']);
|
||||
$this->setData(['theme', 'header', 'swiperTransition', '1000']);
|
||||
// Mise à jour
|
||||
$this->setData(['core', 'dataVersion', 4402]);
|
||||
$this->setData(['core', 'dataVersion', 4403]);
|
||||
}
|
||||
?>
|
||||
|
|
|
|||
|
|
@ -17,6 +17,11 @@ if( $this->getInput('DELTA_I18N_SITE') !== '' && $this->getInput('DELTA_I18N_SIT
|
|||
?>
|
||||
<link rel="stylesheet" href="<?php echo helper::baseUrl(false); ?>core/layout/common.css">
|
||||
<link rel="stylesheet" href="<?php echo helper::baseUrl(false) . self::DATA_DIR; ?>theme.css">
|
||||
<?php if( $this->getData([ 'theme', 'header', 'feature']) === 'swiper') { ?>
|
||||
<!-- Link Swiper's CSS -->
|
||||
<link rel="stylesheet" href="<?php echo helper::baseUrl(false); ?>core/vendor/swiper/swiper-bundle.min.css"/>
|
||||
<link rel="stylesheet" href="<?php echo helper::baseUrl(false); ?>core/vendor/swiper/swiper_deltacms.css"/>
|
||||
<?php } ?>
|
||||
<link rel="stylesheet" href="<?php echo helper::baseUrl(false) . self::DATA_DIR; ?>custom.css">
|
||||
<!-- Détection RSS -->
|
||||
<?php if ( ( $this->getData(['page', $this->getUrl(0), 'moduleId']) === 'blog'
|
||||
|
|
@ -113,8 +118,8 @@ if( $this->getInput('DELTA_I18N_SITE') !== '' && $this->getInput('DELTA_I18N_SIT
|
|||
$headerClass .= $this->getData(['theme', 'header', 'tinyHidden']) ? ' bannerDisplay ' : '';
|
||||
$headerClass .= $this->getData(['theme', 'header', 'wide']) === 'none' ? '' : 'container';
|
||||
?>
|
||||
<header <?php echo empty($headerClass) ? '' : 'class="' . $headerClass . '"';?>>
|
||||
<?php if ($this->getData(['theme','header','feature']) === 'wallpaper' ): ?>
|
||||
<header <?php echo empty($headerClass) ? '' : 'class="' . $headerClass . '"'; ?> >
|
||||
<?php if ($this->getData(['theme','header','feature']) === 'wallpaper' ) { ?>
|
||||
<?php echo ($this->getData(['theme','header','linkHomePage']) ) ? '<a class="headertitle" href="' . helper::baseUrl(false) . '">' : ''; ?>
|
||||
<?php if(
|
||||
$this->getData(['theme', 'header', 'textHide']) === false
|
||||
|
|
@ -126,11 +131,14 @@ if( $this->getInput('DELTA_I18N_SITE') !== '' && $this->getInput('DELTA_I18N_SIT
|
|||
<span id="themeHeaderTitle"> </span>
|
||||
<?php endif; ?>
|
||||
<?php echo ( $this->getData(['theme','header','linkHomePage']) ) ? '</a>' : ''; ?>
|
||||
<?php else: ?>
|
||||
<?php } elseif( $this->getData(['theme','header','feature']) === 'feature') { ?>
|
||||
<div id="featureContent">
|
||||
<?php echo $this->getData(['theme','header','featureContent']);?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php } else { ?>
|
||||
<!-- Swiper -->
|
||||
<?php echo $this->getData(['theme','header','swiperContent']);?>
|
||||
<?php } ?>
|
||||
</header>
|
||||
<?php endif; ?>
|
||||
|
||||
|
|
@ -178,7 +186,7 @@ if( $this->getInput('DELTA_I18N_SITE') !== '' && $this->getInput('DELTA_I18N_SIT
|
|||
$headerClass .= $this->getData(['theme', 'header', 'tinyHidden']) ? ' bannerDisplay ' : '';
|
||||
?>
|
||||
<header <?php echo empty($headerClass) ? '' : 'class="' . $headerClass . '"';?>>
|
||||
<?php if ($this->getData(['theme','header','feature']) === 'wallpaper' ): ?>
|
||||
<?php if ($this->getData(['theme','header','feature']) === 'wallpaper' ){ ?>
|
||||
<?php echo ( $this->getData(['theme','header','linkHomePage']) ) ? '<a class="headertitle" href="' . helper::baseUrl(false) . '">' : ''; ?>
|
||||
<?php if(
|
||||
$this->getData(['theme', 'header', 'textHide']) === false
|
||||
|
|
@ -190,11 +198,14 @@ if( $this->getInput('DELTA_I18N_SITE') !== '' && $this->getInput('DELTA_I18N_SIT
|
|||
<span id="themeHeaderTitle"> </span>
|
||||
<?php endif; ?>
|
||||
<?php echo ( $this->getData(['theme','header','linkHomePage']) ) ? '</a>' : ''; ?>
|
||||
<?php else: ?>
|
||||
<?php } elseif($this->getData(['theme','header','feature']) === 'feature' ){?>
|
||||
<div id="featureContent">
|
||||
<?php echo $this->getData(['theme','header','featureContent']);?>
|
||||
<?php echo $this->getData(['theme','header','featureContent']);?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php } else { ?>
|
||||
<!-- Swiper -->
|
||||
<?php echo $this->getData(['theme','header','swiperContent']); ?>
|
||||
<?php } ?>
|
||||
</header>
|
||||
<?php endif; ?>
|
||||
<?php if(
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ class init extends common {
|
|||
]
|
||||
],
|
||||
'core' => [
|
||||
'dataVersion' => 4402,
|
||||
'dataVersion' => 4403,
|
||||
'lastBackup' => 0,
|
||||
'lastClearTmp' => 0,
|
||||
'lastAutoUpdate' => 0,
|
||||
|
|
@ -338,7 +338,13 @@ class init extends common {
|
|||
'feature' => 'wallpaper',
|
||||
'featureContent' => '<p>Bannière vide</p>',
|
||||
'width' => 'container',
|
||||
'homePageOnly' => false
|
||||
'homePageOnly' => false,
|
||||
'swiperImagesDir' => '',
|
||||
'swiperContent' => '',
|
||||
'swiperEffects' => 'fade',
|
||||
'swiperDirection' => false,
|
||||
'swiperTime' => '2000',
|
||||
'swiperTransition' => '1000'
|
||||
],
|
||||
'menu' => [
|
||||
'backgroundColor' => 'rgba(32, 59, 82, 0.85)',
|
||||
|
|
|
|||
|
|
@ -165,6 +165,16 @@ $text['core_theme_view']['header'][33] = 'Custom content';
|
|||
$text['core_theme_view']['header'][34] ='Save';
|
||||
$text['core_theme_view']['header'][35] = "Height of the selected image (";
|
||||
$text['core_theme_view']['header'][36] = "Banner only visible on the home page";
|
||||
$text['core_theme_view']['header'][37] = "Preview";
|
||||
$text['core_theme_view']['header'][38] = "Image selection";
|
||||
$text['core_theme_view']['header'][39] = "Effect settings";
|
||||
$text['core_theme_view']['header'][40] = "Effect type";
|
||||
$text['core_theme_view']['header'][41] = "The best is to do some tests, a click on the 'Preview' button is necessary";
|
||||
$text['core_theme_view']['header'][42] = "Image display time";
|
||||
$text['core_theme_view']['header'][43] = "Display and transition times are cumulative";
|
||||
$text['core_theme_view']['header'][44] = "Transition time between 2 images";
|
||||
$text['core_theme_view']['header'][45] = "Display and transition times are cumulative";
|
||||
$text['core_theme_view']['header'][46] = "Direction, rotation, order of passage reversed";
|
||||
$text['core_theme_view']['index'][0] = 'Click on an area to access its customisation options. You can also display hidden areas using the button below';
|
||||
$text['core_theme_view']['index'][1] = 'Home';
|
||||
$text['core_theme_view']['index'][2] = 'Help';
|
||||
|
|
@ -388,7 +398,8 @@ $headerPositions = [
|
|||
];
|
||||
$headerFeatures = [
|
||||
'wallpaper' => 'Solid colour or wallpaper',
|
||||
'feature' => 'Custom content'
|
||||
'feature' => 'Custom content',
|
||||
'swiper' => 'Animated banner'
|
||||
];
|
||||
$imagePositions = [
|
||||
'top left' => 'Top left',
|
||||
|
|
@ -401,6 +412,25 @@ $imagePositions = [
|
|||
'bottom center' => 'Bottom center',
|
||||
'bottom right' => 'Bottom right'
|
||||
];
|
||||
$swiperEffects =[
|
||||
'none' => 'Horizontal scrolling',
|
||||
'vertical' => 'Scroll vertically',
|
||||
'fade' => 'fade',
|
||||
'cube' => 'cube effect'
|
||||
];
|
||||
$swiperTime = [
|
||||
'100' => '100ms',
|
||||
'200' => '200ms',
|
||||
'500' => '500ms',
|
||||
'1000' => '1s',
|
||||
'2000' => '2s',
|
||||
'3000' => '3s',
|
||||
'4000' => '4s',
|
||||
'5000' => '5s',
|
||||
'6000' => '6s',
|
||||
'8000' => '8s',
|
||||
'10000' => '10s'
|
||||
];
|
||||
$menuFontSizes = [
|
||||
'.8em' => 'Very small (80%)',
|
||||
'.9em' => 'Small (90%)',
|
||||
|
|
|
|||
|
|
@ -162,9 +162,19 @@ $text['core_theme_view']['header'][30] = 'Largeur : ';
|
|||
$text['core_theme_view']['header'][31] = ' | Hauteur : ';
|
||||
$text['core_theme_view']['header'][32] = ' | ratio : ';
|
||||
$text['core_theme_view']['header'][33] = 'Contenu personnalisé';
|
||||
$text['core_theme_view']['header'][34] ='Enregistrer';
|
||||
$text['core_theme_view']['header'][35] = "Hauteur de l\'image sélectionnée (";
|
||||
$text['core_theme_view']['header'][34] = 'Enregistrer';
|
||||
$text['core_theme_view']['header'][35] = "Hauteur de l'image sélectionnée (";
|
||||
$text['core_theme_view']['header'][36] = "Bannière visible uniquement sur la page d'accueil";
|
||||
$text['core_theme_view']['header'][37] = "Aperçu";
|
||||
$text['core_theme_view']['header'][38] = "Sélection des images";
|
||||
$text['core_theme_view']['header'][39] = "Paramétrage des effets";
|
||||
$text['core_theme_view']['header'][40] = "Type d'effet";
|
||||
$text['core_theme_view']['header'][41] = "Le mieux est de faire des essais, un clic sur le bouton 'Aperçu' est nécessaire";
|
||||
$text['core_theme_view']['header'][42] = "Temps d'affichage de l'image";
|
||||
$text['core_theme_view']['header'][43] = "Les temps d'affichage et de transition se cumulent";
|
||||
$text['core_theme_view']['header'][44] = "Temps de transition entre 2 images";
|
||||
$text['core_theme_view']['header'][45] = "Les temps d'affichage et de transition se cumulent";
|
||||
$text['core_theme_view']['header'][46] = "Direction, sens de rotation, ordre de passage inversés";
|
||||
$text['core_theme_view']['index'][0] = 'Cliquez sur une zone afin d\'accéder à ses options de personnalisation. Vous pouvez également afficher les zones cachées à l\'aide du bouton ci-dessous.';
|
||||
$text['core_theme_view']['index'][1] = 'Accueil';
|
||||
$text['core_theme_view']['index'][2] = 'Aide';
|
||||
|
|
@ -387,7 +397,8 @@ $headerPositions = [
|
|||
];
|
||||
$headerFeatures = [
|
||||
'wallpaper' => 'Couleur unie ou papier-peint',
|
||||
'feature' => 'Contenu personnalisé'
|
||||
'feature' => 'Contenu personnalisé',
|
||||
'swiper' => 'Bannière animée'
|
||||
];
|
||||
$imagePositions = [
|
||||
'top left' => 'En haut à gauche',
|
||||
|
|
@ -400,6 +411,25 @@ $imagePositions = [
|
|||
'bottom center' => 'En bas au centre',
|
||||
'bottom right' => 'En bas à droite'
|
||||
];
|
||||
$swiperEffects =[
|
||||
'none' => 'Défilement horizontal',
|
||||
'vertical' => 'Défilement vertical',
|
||||
'fade' => 'fondu',
|
||||
'cube' => 'effet cube'
|
||||
];
|
||||
$swiperTime = [
|
||||
'100' => '100ms',
|
||||
'200' => '200ms',
|
||||
'500' => '500ms',
|
||||
'1000' => '1s',
|
||||
'2000' => '2s',
|
||||
'3000' => '3s',
|
||||
'4000' => '4s',
|
||||
'5000' => '5s',
|
||||
'6000' => '6s',
|
||||
'8000' => '8s',
|
||||
'10000' => '10s'
|
||||
];
|
||||
$menuFontSizes = [
|
||||
'.8em' => 'Très petite (80%)',
|
||||
'.9em' => 'Petite (90%)',
|
||||
|
|
|
|||
|
|
@ -54,6 +54,9 @@ class theme extends common {
|
|||
|
||||
// Variable pour construire la liste des pages du site
|
||||
public static $pagesList = [];
|
||||
|
||||
//Liste des dossiers avec images
|
||||
public static $listDirs =[];
|
||||
|
||||
/**
|
||||
* Thème des écrans d'administration
|
||||
|
|
@ -425,11 +428,102 @@ class theme extends common {
|
|||
public function header() {
|
||||
// Lexique
|
||||
include('./core/module/theme/lang/'. $this->getData(['config', 'i18n', 'langAdmin']) . '/lex_theme.php');
|
||||
// Liste des dossiers dans site/file/source triés et non vides
|
||||
$filter = ['jpg', 'jpeg', 'png', 'gif', 'tiff', 'ico', 'webp'];
|
||||
self::$listDirs = helper::scanDir(self::FILE_DIR.'source', $filter);
|
||||
sort(self::$listDirs);
|
||||
// Soumission du formulaire
|
||||
if($this->isPost()) {
|
||||
$this->setData([ 'theme', 'update', true]);
|
||||
// Modification des URL des images dans la bannière perso
|
||||
$featureContent = $this->getInput('themeHeaderText', null);
|
||||
// Bannière animée avec swiper
|
||||
if( $this->getInput('themeHeaderFeature') === 'swiper' ){
|
||||
$swiperContent = $this->swiperContent('header');
|
||||
/*
|
||||
// Extraction des images du dossier choisi
|
||||
$iterator = new DirectoryIterator('./'.self::$listDirs[$this->getInput('themeHeaderDirectory')]);
|
||||
$imageFile = [];
|
||||
foreach($iterator as $key=>$fileInfos) {
|
||||
if($fileInfos->isDot() === false AND $fileInfos->isFile() AND @getimagesize($fileInfos->getPathname())) {
|
||||
$imageFile[$key] = $fileInfos->getPathname();
|
||||
}
|
||||
}
|
||||
sort($imageFile);
|
||||
// Préparation du contenu
|
||||
$swiperContent = '';
|
||||
// Adaptation du css au client pour l'option de défilement vertical
|
||||
if( $this->getInput('themeHeaderSwiperEffects') === 'vertical'){
|
||||
$size = getimagesize($imageFile[0]);
|
||||
$swiperContent .= '<script>
|
||||
$.wrapper = function(){
|
||||
var heightImg = '. $size[1] . ',
|
||||
widthImg = '. $size[0] .',
|
||||
heightMod ,
|
||||
widthMod,
|
||||
widthSiteInt,
|
||||
wclient,
|
||||
widthSite;
|
||||
widthSite = "'. $this->getData(['theme', 'site', 'width' ]) . '";
|
||||
wclient = document.body.clientWidth;
|
||||
switch ( widthSite )
|
||||
{
|
||||
case "750px":
|
||||
widthMod = 750;
|
||||
break;
|
||||
case "960px":
|
||||
widthMod = 960;
|
||||
break;
|
||||
case "1170px":
|
||||
widthMod = 1170;
|
||||
break;
|
||||
default:
|
||||
widthMod = wclient;
|
||||
}
|
||||
if( wclient < widthMod) widthMod = wclient;
|
||||
heightMod = heightImg * ( widthMod / widthImg );
|
||||
$(".swiper-wrapper").css("width", widthMod);
|
||||
$(".swiper-wrapper").css("height", heightMod);
|
||||
console.log( widthSite +" * " + wclient +" ** " + widthMod + " - " + heightMod);
|
||||
}
|
||||
$.wrapper();
|
||||
$(window).resize(function(){
|
||||
$.wrapper();
|
||||
});
|
||||
</script>';
|
||||
}
|
||||
$swiperContent .= '<div id="headerSwiper"><div class="swiper mySwiper"><div class="swiper-wrapper">';
|
||||
foreach($imageFile as $value ) {
|
||||
$swiperContent .= '<div class="swiper-slide"><img src="'.$value.'" /></div>';
|
||||
}
|
||||
$swiperContent .= '</div></div></div>';
|
||||
$swiperContent .= '<script src="./core/vendor/swiper/swiper-bundle.min.js"></script>';
|
||||
$swiperContent .= '<script> var swiperBanner = new Swiper(".mySwiper", { ';
|
||||
// Effets retenus fade, cube, sans effet avec défilement H ou V
|
||||
$reverse ='false';
|
||||
switch ($this->getInput('themeHeaderSwiperEffects')) {
|
||||
case 'fade':
|
||||
$swiperContent .= 'effect: "fade",';
|
||||
break;
|
||||
case 'cube':
|
||||
$swiperContent .= 'effect: "cube",';
|
||||
break;
|
||||
case 'vertical':
|
||||
$swiperContent .= 'direction: "vertical",';
|
||||
break;
|
||||
case 'none':
|
||||
break;
|
||||
}
|
||||
$reverse ='false';
|
||||
if( $this->getInput('themeHeaderSwiperDirection') === '1') $reverse = 'true';
|
||||
$swiperContent .= 'loop: true,';
|
||||
$swiperContent .= 'autoplay: {delay: '.$this->getInput('themeHeaderSwiperTime').', reverseDirection: '.$reverse.', },';
|
||||
$swiperContent .= 'speed: '.$this->getInput('themeHeaderSwiperTransition').', });';
|
||||
$swiperContent .= '</script>';
|
||||
*/
|
||||
|
||||
|
||||
}
|
||||
// $featureContent = str_replace(helper::baseUrl(false,false), './', $featureContent);
|
||||
// Si une image est positionnée, l'arrière en transparent.
|
||||
$this->setData(['theme', 'header', [
|
||||
|
|
@ -453,7 +547,13 @@ class theme extends common {
|
|||
'tinyHidden' => $this->getInput('themeHeaderTinyHidden', helper::FILTER_BOOLEAN),
|
||||
'feature' => $this->getInput('themeHeaderFeature'),
|
||||
'featureContent' => $featureContent,
|
||||
'homePageOnly' => $this->getInput('themeHeaderHomePageOnly', helper::FILTER_BOOLEAN)
|
||||
'homePageOnly' => $this->getInput('themeHeaderHomePageOnly', helper::FILTER_BOOLEAN),
|
||||
'swiperImagesDir' => self::$listDirs[$this->getInput('themeHeaderDirectory')],
|
||||
'swiperContent' => $swiperContent,
|
||||
'swiperEffects' => $this->getInput('themeHeaderSwiperEffects'),
|
||||
'swiperDirection' => $this->getInput('themeHeaderSwiperDirection', helper::FILTER_BOOLEAN),
|
||||
'swiperTime' => $this->getInput('themeHeaderSwiperTime'),
|
||||
'swiperTransition' => $this->getInput('themeHeaderSwiperTransition')
|
||||
]]);
|
||||
// Modification de la position du menu selon la position de la bannière
|
||||
if ( $this->getData(['theme','header','position']) == 'site' )
|
||||
|
|
@ -486,11 +586,17 @@ class theme extends common {
|
|||
}
|
||||
|
||||
// Valeurs en sortie
|
||||
$this->addOutput([
|
||||
'notification' => $text['core_theme']['header'][0],
|
||||
'redirect' => helper::baseUrl() . 'theme',
|
||||
'state' => true
|
||||
]);
|
||||
if (isset($_POST['themeHeaderSubmit'])){
|
||||
$this->addOutput([
|
||||
'notification' => $text['core_theme']['header'][0],
|
||||
'redirect' => helper::baseUrl() . 'theme',
|
||||
'state' => true
|
||||
]);
|
||||
} else { //Preview
|
||||
$this->addOutput([
|
||||
'redirect' => helper::baseUrl() . 'theme/header'
|
||||
]);
|
||||
}
|
||||
}
|
||||
self::$fonts = $this->extract('./site/data/fonts.json');
|
||||
// Valeurs en sortie
|
||||
|
|
@ -656,7 +762,8 @@ class theme extends common {
|
|||
'blockBorderRadius' => $this->getInput('themeBlockBorderRadius'),
|
||||
'blockBorderShadow' => $this->getInput('themeBlockBorderShadow')
|
||||
]]);
|
||||
|
||||
// Si barrière animée nouveau swiperContent
|
||||
if($this->getData(['theme', 'header', 'feature']) === 'swiper' ) $this->swiperContent('site');
|
||||
// Valeurs en sortie
|
||||
$this->addOutput([
|
||||
'notification' => $text['core_theme']['site'][0],
|
||||
|
|
@ -908,5 +1015,109 @@ class theme extends common {
|
|||
return $fonts;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Calcul de swiperContent utilisé par site() ou par header()
|
||||
*/
|
||||
private function swiperContent( $source ) {
|
||||
if( $source === 'site' ){
|
||||
$dir = $this->getData(['theme', 'header', 'swiperImagesDir' ]);
|
||||
$effect = $this->getData(['theme', 'header', 'swiperEffects']);
|
||||
$direction = $this->getData(['theme', 'header', 'swiperDirection']);
|
||||
$time = $this->getData(['theme', 'header', 'swiperTime']);
|
||||
$transition = $this->getData(['theme', 'header', 'swiperTransition']);
|
||||
}
|
||||
else {
|
||||
$dir = self::$listDirs[$this->getInput('themeHeaderDirectory')];
|
||||
$effect = $this->getInput('themeHeaderSwiperEffects');
|
||||
$direction = $this->getInput('themeHeaderSwiperDirection');
|
||||
$time = $this->getInput('themeHeaderSwiperTime');
|
||||
$transition = $this->getInput('themeHeaderSwiperTransition');
|
||||
}
|
||||
// Extraction des images du dossier choisi
|
||||
$iterator = new DirectoryIterator('./'.$dir);
|
||||
$imageFile = [];
|
||||
foreach($iterator as $key=>$fileInfos) {
|
||||
if($fileInfos->isDot() === false AND $fileInfos->isFile() AND @getimagesize($fileInfos->getPathname())) {
|
||||
$imageFile[$key] = $fileInfos->getPathname();
|
||||
}
|
||||
}
|
||||
sort($imageFile);
|
||||
// Préparation du contenu
|
||||
$swiperContent = '';
|
||||
// Adaptation du css au client pour l'option de défilement vertical
|
||||
if( $effect === 'vertical'){
|
||||
$size = getimagesize($imageFile[0]);
|
||||
$swiperContent .= '<script>
|
||||
$.wrapper = function(){
|
||||
var heightImg = '. $size[1] . ',
|
||||
widthImg = '. $size[0] .',
|
||||
heightMod ,
|
||||
widthMod,
|
||||
widthSiteInt,
|
||||
wclient,
|
||||
widthSite;
|
||||
widthSite = "'. $this->getData(['theme', 'site', 'width' ]) . '";
|
||||
wclient = document.body.clientWidth;
|
||||
switch ( widthSite )
|
||||
{
|
||||
case "750px":
|
||||
widthMod = 750;
|
||||
break;
|
||||
case "960px":
|
||||
widthMod = 960;
|
||||
break;
|
||||
case "1170px":
|
||||
widthMod = 1170;
|
||||
break;
|
||||
default:
|
||||
widthMod = wclient;
|
||||
}
|
||||
if( wclient < widthMod) widthMod = wclient;
|
||||
heightMod = heightImg * ( widthMod / widthImg );
|
||||
$(".swiper-wrapper").css("width", widthMod);
|
||||
$(".swiper-wrapper").css("height", heightMod);
|
||||
console.log( widthSite +" * " + wclient +" ** " + widthMod + " - " + heightMod);
|
||||
}
|
||||
$.wrapper();
|
||||
$(window).resize(function(){
|
||||
$.wrapper();
|
||||
});
|
||||
</script>';
|
||||
}
|
||||
$swiperContent .= '<div id="headerSwiper"><div class="swiper mySwiper"><div class="swiper-wrapper">';
|
||||
foreach($imageFile as $value ) {
|
||||
$swiperContent .= '<div class="swiper-slide"><img src="'.$value.'" /></div>';
|
||||
}
|
||||
$swiperContent .= '</div></div></div>';
|
||||
$swiperContent .= '<script src="./core/vendor/swiper/swiper-bundle.min.js"></script>';
|
||||
$swiperContent .= '<script> var swiperBanner = new Swiper(".mySwiper", { ';
|
||||
// Effets retenus fade, cube, sans effet avec défilement H ou V
|
||||
$reverse ='false';
|
||||
switch ($effect) {
|
||||
case 'fade':
|
||||
$swiperContent .= 'effect: "fade",';
|
||||
break;
|
||||
case 'cube':
|
||||
$swiperContent .= 'effect: "cube",';
|
||||
break;
|
||||
case 'vertical':
|
||||
$swiperContent .= 'direction: "vertical",';
|
||||
break;
|
||||
case 'none':
|
||||
break;
|
||||
}
|
||||
$reverse ='false';
|
||||
if( $direction === '1') $reverse = 'true';
|
||||
$swiperContent .= 'loop: true,';
|
||||
$swiperContent .= 'autoplay: {delay: '. $time .', reverseDirection: '.$reverse.', },';
|
||||
$swiperContent .= 'speed: '. $transition .', });';
|
||||
$swiperContent .= '</script>';
|
||||
if( $source === 'site' ){
|
||||
$this->setData(['theme', 'header', 'swiperContent', $swiperContent ]);
|
||||
} else {
|
||||
return $swiperContent;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,38 +29,45 @@ $(document).ready(function(){
|
|||
$("input, select").on("change", function() {
|
||||
|
||||
var css = "";
|
||||
// Bannière animée avec Swiper
|
||||
if ($("#themeHeaderFeature").val() == "swiper") {
|
||||
// fixe la hauteur à hauteur du contenu
|
||||
$("#themeHeaderHeight").val("unset");
|
||||
// Masque le contenu perso et le papier peint
|
||||
$("#featureContent").hide();
|
||||
$("#themeHeaderTitle").hide();
|
||||
}
|
||||
|
||||
// Contenu perso
|
||||
if ($("#themeHeaderFeature").val() == "feature") {
|
||||
// $("#themeHeaderHeight").val() unset pour 'Hauteur du contenu', sinon valeur en px
|
||||
css = "header{min-height: 20px; height:" + $("#themeHeaderHeight").val() + "; overflow:hidden; background-position:top; background-repeat: no-repeat; line-height:1.15; background-color:unset; background-image:unset; text-align:unset;}";
|
||||
|
||||
$("#featureContent").appendTo("header").show();
|
||||
$("#themeHeaderTitle").hide();
|
||||
$("#headerSwiper").hide();
|
||||
}
|
||||
|
||||
|
||||
// Couleurs, image, alignement et hauteur de la bannière
|
||||
if ($("#themeHeaderFeature").val() == "wallpaper") {
|
||||
|
||||
// Masque le contenu perso
|
||||
// Masque le contenu perso ou la bannière Swiper
|
||||
$("#featureContent").hide();
|
||||
|
||||
tmpImg.src= "<?php echo helper::baseUrl(false); ?>" + "site/file/source/" + $("#themeHeaderImage").val();
|
||||
// Déterminer la taille de l'image
|
||||
tmpImg.onload = function() {
|
||||
// Informations affichées
|
||||
$("#themeHeaderImageHeight").html(tmpImg.height + "px");
|
||||
$("#themeHeaderImageWidth").html(tmpImg.width + "px");
|
||||
$("#themeHeaderImageRatio").html(tmpImg.width / tmpImg.height);
|
||||
};
|
||||
|
||||
$("#headerSwiper").hide();
|
||||
|
||||
var headerFont = $("#themeHeaderFont").val();
|
||||
css = "header{text-align:" + $("#themeHeaderTextAlign").val() + ";";
|
||||
|
||||
// Sélection d'une image réalisée
|
||||
if( $("#themeHeaderImage").val() !== ""){
|
||||
|
||||
tmpImg.src= "<?php echo helper::baseUrl(false); ?>" + "site/file/source/" + $("#themeHeaderImage").val();
|
||||
// Déterminer la taille de l'image
|
||||
tmpImg.onload = function() {
|
||||
// Informations affichées
|
||||
$("#themeHeaderImageHeight").html(tmpImg.height + "px");
|
||||
$("#themeHeaderImageWidth").html(tmpImg.width + "px");
|
||||
$("#themeHeaderImageRatio").html(tmpImg.width / tmpImg.height);
|
||||
};
|
||||
css += "background-image:url('<?php echo helper::baseUrl(false); ?>site/file/source/" + $("#themeHeaderImage").val() + "');background-repeat:" + $("#themeHeaderImageRepeat").val() + ";background-position:" + $("#themeHeaderImagePosition").val() + ";";
|
||||
css += "background-size:" + $("#themeHeaderImageContainer").val() + ";";
|
||||
if( $("#themeHeaderHeight").val() !== 'unset'){
|
||||
|
|
@ -236,11 +243,22 @@ $("#themeHeaderPosition").on("change", function() {
|
|||
$("#themeHeaderFeature").on("change", function() {
|
||||
if($(this).val() === 'wallpaper') {
|
||||
$(".wallpaperContainer").show();
|
||||
$(".colorsContainer").show();
|
||||
$(".featureContainer").hide();
|
||||
$("#themeHeaderTextColorWrapper").show();
|
||||
$(".swiperContainer").hide();
|
||||
}
|
||||
if($(this).val() === 'feature') {
|
||||
$(".featureContainer").show();
|
||||
$(".colorsContainer").show();
|
||||
$(".wallpaperContainer").hide();
|
||||
$("#themeHeaderTextColorWrapper").hide();
|
||||
$(".swiperContainer").hide();
|
||||
}
|
||||
if($(this).val() === 'swiper') {
|
||||
$(".swiperContainer").show();
|
||||
$(".colorsContainer").hide();
|
||||
$(".featureContainer").hide();
|
||||
$(".wallpaperContainer").hide();
|
||||
$("#themeHeaderTextColorWrapper").hide();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<?php
|
||||
// Lexique
|
||||
include('./core/module/theme/lang/'. $this->getData(['config', 'i18n', 'langAdmin']) . '/lex_theme.php');
|
||||
// Passage de la langue d'administration à Tinymce
|
||||
// Passage de la langue d'administration à Tinymce
|
||||
?>
|
||||
<script>
|
||||
var lang_admin = "<?php echo $lang_admin ?>";
|
||||
|
|
@ -33,7 +33,14 @@ echo template::formOpen('themeHeaderForm');
|
|||
'class' => 'buttonHelp'
|
||||
]); ?>
|
||||
</div>
|
||||
<div class="col2 offset6">
|
||||
<div class="col2 offset4">
|
||||
<?php echo template::submit('themeHeaderSubmitPreview',[
|
||||
'value' => $text['core_theme_view']['header'][37],
|
||||
'ico' =>'',
|
||||
'class' => 'buttonPreview'
|
||||
]); ?>
|
||||
</div>
|
||||
<div class="col2">
|
||||
<?php echo template::submit('themeHeaderSubmit',[
|
||||
'value' => $text['core_theme_view']['header'][34]
|
||||
]); ?>
|
||||
|
|
@ -101,7 +108,7 @@ echo template::formOpen('themeHeaderForm');
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row colorsContainer">
|
||||
<div class="col12">
|
||||
<div class="block">
|
||||
<div class="blockTitle"><?php echo $text['core_theme_view']['header'][10]; ?></div>
|
||||
|
|
@ -246,6 +253,61 @@ echo template::formOpen('themeHeaderForm');
|
|||
<div id="featureContent" class="displayNone">
|
||||
<?php echo $this->getData(['theme','header','featureContent']);?>
|
||||
</div>
|
||||
|
||||
<div class="row swiperContainer">
|
||||
<div class="col12">
|
||||
<div class="block">
|
||||
<div class="blockTitle"><?php echo $text['core_theme_view']['header'][38]; ?></div>
|
||||
<div class="row">
|
||||
<div class="col6">
|
||||
<?php echo template::select('themeHeaderDirectory', str_replace('site/file/source/','',$module::$listDirs), [
|
||||
'label' => 'Choisissez le dossier',
|
||||
'help' => 'Ce dossier contient les images de la bannière, l\'ordre de passage est alphanumérique (0...9a...z).',
|
||||
'selected' => array_search( $this->getData(['theme', 'header', 'swiperImagesDir']),$module::$listDirs )
|
||||
]);
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row swiperContainer">
|
||||
<div class="col12">
|
||||
<div class="block">
|
||||
<div class="blockTitle"><?php echo $text['core_theme_view']['header'][39]; ?></div>
|
||||
<div class="row">
|
||||
<div class="col4">
|
||||
<?php echo template::select('themeHeaderSwiperEffects', $swiperEffects, [
|
||||
'label' => $text['core_theme_view']['header'][40],
|
||||
'help' => $text['core_theme_view']['header'][41],
|
||||
'selected' => $this->getData(['theme', 'header', 'swiperEffects'])
|
||||
]); ?>
|
||||
</div>
|
||||
<div class="col4">
|
||||
<?php echo template::select('themeHeaderSwiperTime', $swiperTime, [
|
||||
'label' => $text['core_theme_view']['header'][42],
|
||||
'help' => $text['core_theme_view']['header'][43],
|
||||
'selected' => $this->getData(['theme', 'header', 'swiperTime'])
|
||||
]); ?>
|
||||
</div>
|
||||
<div class="col4">
|
||||
<?php echo template::select('themeHeaderSwiperTransition', $swiperTime, [
|
||||
'label' => $text['core_theme_view']['header'][44],
|
||||
'help' => $text['core_theme_view']['header'][45],
|
||||
'selected' => $this->getData(['theme', 'header', 'swiperTransition'])
|
||||
]); ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col4">
|
||||
<?php echo template::checkbox('themeHeaderSwiperDirection', true, $text['core_theme_view']['header'][46], [
|
||||
'checked' => $this->getData(['theme', 'header', 'swiperDirection'])
|
||||
]); ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php echo template::formClose(); ?>
|
||||
<script>
|
||||
var textOption = <?php echo '"'.$text['core_theme_view']['header'][35].'"'; ?>;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,614 @@
|
|||
/**
|
||||
* Swiper 8.4.5
|
||||
* Most modern mobile touch slider and framework with hardware accelerated transitions
|
||||
* https://swiperjs.com
|
||||
*
|
||||
* Copyright 2014-2022 Vladimir Kharlampidi
|
||||
*
|
||||
* Released under the MIT License
|
||||
*
|
||||
* Released on: November 21, 2022
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family:swiper-icons;
|
||||
src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');
|
||||
font-weight:400;
|
||||
font-style:normal
|
||||
}
|
||||
:root {
|
||||
--swiper-theme-color:#007aff
|
||||
}
|
||||
.swiper {
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
list-style:none;
|
||||
padding:0;
|
||||
z-index:1
|
||||
}
|
||||
.swiper-vertical>.swiper-wrapper {
|
||||
flex-direction:column
|
||||
}
|
||||
.swiper-wrapper {
|
||||
position:relative;
|
||||
width:100%;
|
||||
height:100%;
|
||||
z-index:1;
|
||||
display:flex;
|
||||
transition-property:transform;
|
||||
box-sizing:content-box
|
||||
}
|
||||
.swiper-android .swiper-slide,
|
||||
.swiper-wrapper {
|
||||
transform:translate3d(0px,0,0)
|
||||
}
|
||||
.swiper-pointer-events {
|
||||
touch-action:pan-y
|
||||
}
|
||||
.swiper-pointer-events.swiper-vertical {
|
||||
touch-action:pan-x
|
||||
}
|
||||
.swiper-slide {
|
||||
flex-shrink:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
position:relative;
|
||||
transition-property:transform
|
||||
}
|
||||
.swiper-slide-invisible-blank {
|
||||
visibility:hidden
|
||||
}
|
||||
.swiper-autoheight,
|
||||
.swiper-autoheight .swiper-slide {
|
||||
height:auto
|
||||
}
|
||||
.swiper-autoheight .swiper-wrapper {
|
||||
align-items:flex-start;
|
||||
transition-property:transform,height
|
||||
}
|
||||
.swiper-backface-hidden .swiper-slide {
|
||||
transform:translateZ(0);
|
||||
-webkit-backface-visibility:hidden;
|
||||
backface-visibility:hidden
|
||||
}
|
||||
.swiper-3d,
|
||||
.swiper-3d.swiper-css-mode .swiper-wrapper {
|
||||
perspective:1200px
|
||||
}
|
||||
.swiper-3d .swiper-cube-shadow,
|
||||
.swiper-3d .swiper-slide,
|
||||
.swiper-3d .swiper-slide-shadow,
|
||||
.swiper-3d .swiper-slide-shadow-bottom,
|
||||
.swiper-3d .swiper-slide-shadow-left,
|
||||
.swiper-3d .swiper-slide-shadow-right,
|
||||
.swiper-3d .swiper-slide-shadow-top,
|
||||
.swiper-3d .swiper-wrapper {
|
||||
transform-style:preserve-3d
|
||||
}
|
||||
.swiper-3d .swiper-slide-shadow,
|
||||
.swiper-3d .swiper-slide-shadow-bottom,
|
||||
.swiper-3d .swiper-slide-shadow-left,
|
||||
.swiper-3d .swiper-slide-shadow-right,
|
||||
.swiper-3d .swiper-slide-shadow-top {
|
||||
position:absolute;
|
||||
left:0;
|
||||
top:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
pointer-events:none;
|
||||
z-index:10
|
||||
}
|
||||
.swiper-3d .swiper-slide-shadow {
|
||||
background:rgba(0,0,0,.15)
|
||||
}
|
||||
.swiper-3d .swiper-slide-shadow-left {
|
||||
background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))
|
||||
}
|
||||
.swiper-3d .swiper-slide-shadow-right {
|
||||
background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))
|
||||
}
|
||||
.swiper-3d .swiper-slide-shadow-top {
|
||||
background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))
|
||||
}
|
||||
.swiper-3d .swiper-slide-shadow-bottom {
|
||||
background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))
|
||||
}
|
||||
.swiper-css-mode>.swiper-wrapper {
|
||||
overflow:auto;
|
||||
scrollbar-width:none;
|
||||
-ms-overflow-style:none
|
||||
}
|
||||
.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
|
||||
display:none
|
||||
}
|
||||
.swiper-css-mode>.swiper-wrapper>.swiper-slide {
|
||||
scroll-snap-align:start start
|
||||
}
|
||||
.swiper-horizontal.swiper-css-mode>.swiper-wrapper {
|
||||
scroll-snap-type:x mandatory
|
||||
}
|
||||
.swiper-vertical.swiper-css-mode>.swiper-wrapper {
|
||||
scroll-snap-type:y mandatory
|
||||
}
|
||||
.swiper-centered>.swiper-wrapper::before {
|
||||
content:'';
|
||||
flex-shrink:0;
|
||||
order:9999
|
||||
}
|
||||
.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
|
||||
margin-inline-start:var(--swiper-centered-offset-before)
|
||||
}
|
||||
.swiper-centered.swiper-horizontal>.swiper-wrapper::before {
|
||||
height:100%;
|
||||
min-height:1px;
|
||||
width:var(--swiper-centered-offset-after)
|
||||
}
|
||||
.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
|
||||
margin-block-start:var(--swiper-centered-offset-before)
|
||||
}
|
||||
.swiper-centered.swiper-vertical>.swiper-wrapper::before {
|
||||
width:100%;
|
||||
min-width:1px;
|
||||
height:var(--swiper-centered-offset-after)
|
||||
}
|
||||
.swiper-centered>.swiper-wrapper>.swiper-slide {
|
||||
scroll-snap-align:center center
|
||||
}
|
||||
.swiper-virtual .swiper-slide {
|
||||
-webkit-backface-visibility:hidden;
|
||||
transform:translateZ(0)
|
||||
}
|
||||
.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
|
||||
content:'';
|
||||
position:absolute;
|
||||
left:0;
|
||||
top:0;
|
||||
pointer-events:none
|
||||
}
|
||||
.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
|
||||
height:1px;
|
||||
width:var(--swiper-virtual-size)
|
||||
}
|
||||
.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
|
||||
width:1px;
|
||||
height:var(--swiper-virtual-size)
|
||||
}
|
||||
:root {
|
||||
--swiper-navigation-size:44px
|
||||
}
|
||||
.swiper-button-next,
|
||||
.swiper-button-prev {
|
||||
position:absolute;
|
||||
top:50%;
|
||||
width:calc(var(--swiper-navigation-size)/ 44 * 27);
|
||||
height:var(--swiper-navigation-size);
|
||||
margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));
|
||||
z-index:10;
|
||||
cursor:pointer;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
color:var(--swiper-navigation-color,var(--swiper-theme-color))
|
||||
}
|
||||
.swiper-button-next.swiper-button-disabled,
|
||||
.swiper-button-prev.swiper-button-disabled {
|
||||
opacity:.35;
|
||||
cursor:auto;
|
||||
pointer-events:none
|
||||
}
|
||||
.swiper-button-next.swiper-button-hidden,
|
||||
.swiper-button-prev.swiper-button-hidden {
|
||||
opacity:0;
|
||||
cursor:auto;
|
||||
pointer-events:none
|
||||
}
|
||||
.swiper-navigation-disabled .swiper-button-next,
|
||||
.swiper-navigation-disabled .swiper-button-prev {
|
||||
display:none!important
|
||||
}
|
||||
.swiper-button-next:after,
|
||||
.swiper-button-prev:after {
|
||||
font-family:swiper-icons;
|
||||
font-size:var(--swiper-navigation-size);
|
||||
text-transform:none!important;
|
||||
letter-spacing:0;
|
||||
font-variant:initial;
|
||||
line-height:1
|
||||
}
|
||||
.swiper-button-prev,
|
||||
.swiper-rtl .swiper-button-next {
|
||||
left:10px;
|
||||
right:auto
|
||||
}
|
||||
.swiper-button-prev:after,
|
||||
.swiper-rtl .swiper-button-next:after {
|
||||
content:'prev'
|
||||
}
|
||||
.swiper-button-next,
|
||||
.swiper-rtl .swiper-button-prev {
|
||||
right:10px;
|
||||
left:auto
|
||||
}
|
||||
.swiper-button-next:after,
|
||||
.swiper-rtl .swiper-button-prev:after {
|
||||
content:'next'
|
||||
}
|
||||
.swiper-button-lock {
|
||||
display:none
|
||||
}
|
||||
.swiper-pagination {
|
||||
position:absolute;
|
||||
text-align:center;
|
||||
transition:.3s opacity;
|
||||
transform:translate3d(0,0,0);
|
||||
z-index:10
|
||||
}
|
||||
.swiper-pagination.swiper-pagination-hidden {
|
||||
opacity:0
|
||||
}
|
||||
.swiper-pagination-disabled>.swiper-pagination,
|
||||
.swiper-pagination.swiper-pagination-disabled {
|
||||
display:none!important
|
||||
}
|
||||
.swiper-horizontal>.swiper-pagination-bullets,
|
||||
.swiper-pagination-bullets.swiper-pagination-horizontal,
|
||||
.swiper-pagination-custom,
|
||||
.swiper-pagination-fraction {
|
||||
bottom:10px;
|
||||
left:0;
|
||||
width:100%
|
||||
}
|
||||
.swiper-pagination-bullets-dynamic {
|
||||
overflow:hidden;
|
||||
font-size:0
|
||||
}
|
||||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
|
||||
transform:scale(.33);
|
||||
position:relative
|
||||
}
|
||||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
|
||||
transform:scale(1)
|
||||
}
|
||||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
|
||||
transform:scale(1)
|
||||
}
|
||||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
|
||||
transform:scale(.66)
|
||||
}
|
||||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
|
||||
transform:scale(.33)
|
||||
}
|
||||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
|
||||
transform:scale(.66)
|
||||
}
|
||||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
|
||||
transform:scale(.33)
|
||||
}
|
||||
.swiper-pagination-bullet {
|
||||
width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));
|
||||
height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));
|
||||
display:inline-block;
|
||||
border-radius:50%;
|
||||
background:var(--swiper-pagination-bullet-inactive-color,#000);
|
||||
opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)
|
||||
}
|
||||
button.swiper-pagination-bullet {
|
||||
border:none;
|
||||
margin:0;
|
||||
padding:0;
|
||||
box-shadow:none;
|
||||
-webkit-appearance:none;
|
||||
appearance:none
|
||||
}
|
||||
.swiper-pagination-clickable .swiper-pagination-bullet {
|
||||
cursor:pointer
|
||||
}
|
||||
.swiper-pagination-bullet:only-child {
|
||||
display:none!important
|
||||
}
|
||||
.swiper-pagination-bullet-active {
|
||||
opacity:var(--swiper-pagination-bullet-opacity, 1);
|
||||
background:var(--swiper-pagination-color,var(--swiper-theme-color))
|
||||
}
|
||||
.swiper-pagination-vertical.swiper-pagination-bullets,
|
||||
.swiper-vertical>.swiper-pagination-bullets {
|
||||
right:10px;
|
||||
top:50%;
|
||||
transform:translate3d(0px,-50%,0)
|
||||
}
|
||||
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
|
||||
.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
|
||||
margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;
|
||||
display:block
|
||||
}
|
||||
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
|
||||
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
|
||||
top:50%;
|
||||
transform:translateY(-50%);
|
||||
width:8px
|
||||
}
|
||||
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
|
||||
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
|
||||
display:inline-block;
|
||||
transition:.2s transform,.2s top
|
||||
}
|
||||
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
|
||||
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
|
||||
margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)
|
||||
}
|
||||
.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
|
||||
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
|
||||
left:50%;
|
||||
transform:translateX(-50%);
|
||||
white-space:nowrap
|
||||
}
|
||||
.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
|
||||
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
|
||||
transition:.2s transform,.2s left
|
||||
}
|
||||
.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
|
||||
transition:.2s transform,.2s right
|
||||
}
|
||||
.swiper-pagination-progressbar {
|
||||
background:rgba(0,0,0,.25);
|
||||
position:absolute
|
||||
}
|
||||
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
|
||||
background:var(--swiper-pagination-color,var(--swiper-theme-color));
|
||||
position:absolute;
|
||||
left:0;
|
||||
top:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
transform:scale(0);
|
||||
transform-origin:left top
|
||||
}
|
||||
.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
|
||||
transform-origin:right top
|
||||
}
|
||||
.swiper-horizontal>.swiper-pagination-progressbar,
|
||||
.swiper-pagination-progressbar.swiper-pagination-horizontal,
|
||||
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
|
||||
.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
|
||||
width:100%;
|
||||
height:4px;
|
||||
left:0;
|
||||
top:0
|
||||
}
|
||||
.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
|
||||
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,
|
||||
.swiper-pagination-progressbar.swiper-pagination-vertical,
|
||||
.swiper-vertical>.swiper-pagination-progressbar {
|
||||
width:4px;
|
||||
height:100%;
|
||||
left:0;
|
||||
top:0
|
||||
}
|
||||
.swiper-pagination-lock {
|
||||
display:none
|
||||
}
|
||||
.swiper-scrollbar {
|
||||
border-radius:10px;
|
||||
position:relative;
|
||||
-ms-touch-action:none;
|
||||
background:rgba(0,0,0,.1)
|
||||
}
|
||||
.swiper-scrollbar-disabled>.swiper-scrollbar,
|
||||
.swiper-scrollbar.swiper-scrollbar-disabled {
|
||||
display:none!important
|
||||
}
|
||||
.swiper-horizontal>.swiper-scrollbar,
|
||||
.swiper-scrollbar.swiper-scrollbar-horizontal {
|
||||
position:absolute;
|
||||
left:1%;
|
||||
bottom:3px;
|
||||
z-index:50;
|
||||
height:5px;
|
||||
width:98%
|
||||
}
|
||||
.swiper-scrollbar.swiper-scrollbar-vertical,
|
||||
.swiper-vertical>.swiper-scrollbar {
|
||||
position:absolute;
|
||||
right:3px;
|
||||
top:1%;
|
||||
z-index:50;
|
||||
width:5px;
|
||||
height:98%
|
||||
}
|
||||
.swiper-scrollbar-drag {
|
||||
height:100%;
|
||||
width:100%;
|
||||
position:relative;
|
||||
background:rgba(0,0,0,.5);
|
||||
border-radius:10px;
|
||||
left:0;
|
||||
top:0
|
||||
}
|
||||
.swiper-scrollbar-cursor-drag {
|
||||
cursor:move
|
||||
}
|
||||
.swiper-scrollbar-lock {
|
||||
display:none
|
||||
}
|
||||
.swiper-zoom-container {
|
||||
width:100%;
|
||||
height:100%;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
text-align:center
|
||||
}
|
||||
.swiper-zoom-container>canvas,
|
||||
.swiper-zoom-container>img,
|
||||
.swiper-zoom-container>svg {
|
||||
max-width:100%;
|
||||
max-height:100%;
|
||||
object-fit:contain
|
||||
}
|
||||
.swiper-slide-zoomed {
|
||||
cursor:move
|
||||
}
|
||||
.swiper-lazy-preloader {
|
||||
width:42px;
|
||||
height:42px;
|
||||
position:absolute;
|
||||
left:50%;
|
||||
top:50%;
|
||||
margin-left:-21px;
|
||||
margin-top:-21px;
|
||||
z-index:10;
|
||||
transform-origin:50%;
|
||||
box-sizing:border-box;
|
||||
border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));
|
||||
border-radius:50%;
|
||||
border-top-color:transparent
|
||||
}
|
||||
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,
|
||||
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
|
||||
animation:swiper-preloader-spin 1s infinite linear
|
||||
}
|
||||
.swiper-lazy-preloader-white {
|
||||
--swiper-preloader-color:#fff
|
||||
}
|
||||
.swiper-lazy-preloader-black {
|
||||
--swiper-preloader-color:#000
|
||||
}
|
||||
@keyframes swiper-preloader-spin {
|
||||
0% {
|
||||
transform:rotate(0deg)
|
||||
}
|
||||
100% {
|
||||
transform:rotate(360deg)
|
||||
}
|
||||
}
|
||||
.swiper .swiper-notification {
|
||||
position:absolute;
|
||||
left:0;
|
||||
top:0;
|
||||
pointer-events:none;
|
||||
opacity:0;
|
||||
z-index:-1000
|
||||
}
|
||||
.swiper-free-mode>.swiper-wrapper {
|
||||
transition-timing-function:ease-out;
|
||||
margin:0 auto
|
||||
}
|
||||
.swiper-grid>.swiper-wrapper {
|
||||
flex-wrap:wrap
|
||||
}
|
||||
.swiper-grid-column>.swiper-wrapper {
|
||||
flex-wrap:wrap;
|
||||
flex-direction:column
|
||||
}
|
||||
.swiper-fade.swiper-free-mode .swiper-slide {
|
||||
transition-timing-function:ease-out
|
||||
}
|
||||
.swiper-fade .swiper-slide {
|
||||
pointer-events:none;
|
||||
transition-property:opacity
|
||||
}
|
||||
.swiper-fade .swiper-slide .swiper-slide {
|
||||
pointer-events:none
|
||||
}
|
||||
.swiper-fade .swiper-slide-active,
|
||||
.swiper-fade .swiper-slide-active .swiper-slide-active {
|
||||
pointer-events:auto
|
||||
}
|
||||
.swiper-cube {
|
||||
overflow:visible
|
||||
}
|
||||
.swiper-cube .swiper-slide {
|
||||
pointer-events:none;
|
||||
-webkit-backface-visibility:hidden;
|
||||
backface-visibility:hidden;
|
||||
z-index:1;
|
||||
visibility:hidden;
|
||||
transform-origin:0 0;
|
||||
width:100%;
|
||||
height:100%
|
||||
}
|
||||
.swiper-cube .swiper-slide .swiper-slide {
|
||||
pointer-events:none
|
||||
}
|
||||
.swiper-cube.swiper-rtl .swiper-slide {
|
||||
transform-origin:100% 0
|
||||
}
|
||||
.swiper-cube .swiper-slide-active,
|
||||
.swiper-cube .swiper-slide-active .swiper-slide-active {
|
||||
pointer-events:auto
|
||||
}
|
||||
.swiper-cube .swiper-slide-active,
|
||||
.swiper-cube .swiper-slide-next,
|
||||
.swiper-cube .swiper-slide-next+.swiper-slide,
|
||||
.swiper-cube .swiper-slide-prev {
|
||||
pointer-events:auto;
|
||||
visibility:visible
|
||||
}
|
||||
.swiper-cube .swiper-slide-shadow-bottom,
|
||||
.swiper-cube .swiper-slide-shadow-left,
|
||||
.swiper-cube .swiper-slide-shadow-right,
|
||||
.swiper-cube .swiper-slide-shadow-top {
|
||||
z-index:0;
|
||||
-webkit-backface-visibility:hidden;
|
||||
backface-visibility:hidden
|
||||
}
|
||||
.swiper-cube .swiper-cube-shadow {
|
||||
position:absolute;
|
||||
left:0;
|
||||
bottom:0px;
|
||||
width:100%;
|
||||
height:100%;
|
||||
opacity:.6;
|
||||
z-index:0
|
||||
}
|
||||
.swiper-cube .swiper-cube-shadow:before {
|
||||
content:'';
|
||||
background:#000;
|
||||
position:absolute;
|
||||
left:0;
|
||||
top:0;
|
||||
bottom:0;
|
||||
right:0;
|
||||
filter:blur(50px)
|
||||
}
|
||||
.swiper-flip {
|
||||
overflow:visible
|
||||
}
|
||||
.swiper-flip .swiper-slide {
|
||||
pointer-events:none;
|
||||
-webkit-backface-visibility:hidden;
|
||||
backface-visibility:hidden;
|
||||
z-index:1
|
||||
}
|
||||
.swiper-flip .swiper-slide .swiper-slide {
|
||||
pointer-events:none
|
||||
}
|
||||
.swiper-flip .swiper-slide-active,
|
||||
.swiper-flip .swiper-slide-active .swiper-slide-active {
|
||||
pointer-events:auto
|
||||
}
|
||||
.swiper-flip .swiper-slide-shadow-bottom,
|
||||
.swiper-flip .swiper-slide-shadow-left,
|
||||
.swiper-flip .swiper-slide-shadow-right,
|
||||
.swiper-flip .swiper-slide-shadow-top {
|
||||
z-index:0;
|
||||
-webkit-backface-visibility:hidden;
|
||||
backface-visibility:hidden
|
||||
}
|
||||
.swiper-creative .swiper-slide {
|
||||
-webkit-backface-visibility:hidden;
|
||||
backface-visibility:hidden;
|
||||
overflow:hidden;
|
||||
transition-property:transform,opacity,height
|
||||
}
|
||||
.swiper-cards {
|
||||
overflow:visible
|
||||
}
|
||||
.swiper-cards .swiper-slide {
|
||||
transform-origin:center bottom;
|
||||
-webkit-backface-visibility:hidden;
|
||||
backface-visibility:hidden;
|
||||
overflow:hidden
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,26 @@
|
|||
/** Swiper pour Deltacms personnalisation **/
|
||||
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* la class swiper-wrapper est modifiée par le script contenu dans le json theme/header/swiperContent */
|
||||
.swiper-wrapper{
|
||||
width: 100%;
|
||||
max-height: 600px;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.swiper-slide img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
Loading…
Reference in New Issue