Nouveau style des articles de news

This commit is contained in:
Fred Tempez 2021-07-23 19:34:23 +02:00
parent 16ccc1d376
commit c5b637e902
6 changed files with 118 additions and 76 deletions

View File

@ -19,7 +19,8 @@
- Nouvelle option permettant de transférer les fichiers de sauvegarde automatiques dans le gestionnaire de fichiers. - Nouvelle option permettant de transférer les fichiers de sauvegarde automatiques dans le gestionnaire de fichiers.
- Module News 3.4 : - Module News 3.4 :
- Changement de nom, Actualités -> News - Changement de nom, Actualités -> News
- La version courte des articles dépend du nombre de caractères au lieu de la hauteur de la div. L'effet flou inutile est aussi supprimé. - La version abrégée des articles dépend du nombre de caractères au lieu de la hauteur de la div. L'effet flou inutile est aussi supprimé.
- Personnalisation du style, encadrement, et couleur de fond des blocs d'articles.
## version 10.6.03 ## version 10.6.03

View File

@ -49,24 +49,41 @@ class news extends common {
8 => '8 articles', 8 => '8 articles',
12 => '12 articles', 12 => '12 articles',
16 => '16 articles', 16 => '16 articles',
22 => '22 articles' 22 => '22 articles'
]; ];
// Nombre de colone par page // Nombre de colone par page
public static $columns = [ public static $columns = [
12 => '1 Colonne', 12 => '1 colonne',
6 => '2 Colonnes', 6 => '2 colonnes',
4 => '3 Colonnes', 4 => '3 colonnes',
2 => '4 Colonnes' 3 => '4 colonnes'
]; ];
public static $nbrCol = 1; public static $nbrCol = 1;
public static $height = [ public static $height = [
200 => '200 caractères', -1 => 'Article complet',
400 => '400 caractères',
600 => '600 caractères',
500 => '800 caractères',
1000 => '1000 caractères', 1000 => '1000 caractères',
-1 => 'Article complet' 800 => '800 caractères',
600 => '600 caractères',
400 => '400 caractères',
200 => '200 caractères',
];
public static $borderWidth = [
0 => 'Aucune',
'0.1em' => 'Très fine',
'0.15em' => 'Fine',
'0.2em' => 'Très petite',
'0.25em' => 'Petite',
];
public static $borderStyle =[
'none' => 'Aucune',
'solid' => 'Tiret',
'inset' => '3D enfoncé',
'outset'=> '3D surélevé',
'ridge' => 'Relief 1',
'groove'=> 'Relief 2'
]; ];
// Signature de l'article // Signature de l'article
@ -178,13 +195,12 @@ class news extends common {
// Soumission du formulaire // Soumission du formulaire
if($this->isPost()) { if($this->isPost()) {
// Générer la feuille de CSS // Générer la feuille de CSS
//$style = '.newsContent {height:' . $this->getInput('newsConfigItemsHeight',helper::FILTER_STRING_SHORT) . ';}'; $style = '.newsFrame {';
//if ($this->getInput('newsConfigItemsBlur',helper::FILTER_STRING_SHORT) !== '100%') { $style .= 'border:' . $this->getInput('newsThemeBorderStyle',helper::FILTER_STRING_SHORT) . ' ' . $this->getInput('newsThemeBorderColor') . ' ' . $this->getInput('newsThemeBorderWidth',helper::FILTER_STRING_SHORT) . ';';
// $style = '.newsBlur {height: ' . $this->getInput('newsConfigItemsBlur',helper::FILTER_STRING_SHORT) . ';}'; $style .= 'background-color:' . $this->getInput('newsThemeBackgroundColor') . ';';
//$style .= '.newsBlur {background: linear-gradient(' . $this->getData(['theme', 'text', 'textColor']) . ' ' . $this->getInput('newsConfigItemsBlur',helper::FILTER_STRING_SHORT) . ',rgba(255,255,255,0) );'; $style .= '}';
//$style .= ' background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;}';
//}
// Dossier de l'instance // Dossier de l'instance
if (!is_dir(self::DATADIRECTORY . $this->getUrl(0))) { if (!is_dir(self::DATADIRECTORY . $this->getUrl(0))) {
@ -196,9 +212,11 @@ class news extends common {
// Fin feuille de style // Fin feuille de style
$this->setData(['module', $this->getUrl(0), 'theme',[ $this->setData(['module', $this->getUrl(0), 'theme',[
'style' => $success ? self::DATADIRECTORY . $this->getUrl(0) . '/theme.css' : '', 'style' => $success ? self::DATADIRECTORY . $this->getUrl(0) . '/theme.css' : '',
//'itemsHeight' => $this->getInput('newsConfigItemsHeight',helper::FILTER_STRING_SHORT), 'borderStyle' => $this->getInput('newsThemeBorderStyle',helper::FILTER_STRING_SHORT),
//'itemsBlur' => $this->getInput('newsConfigItemsBlur',helper::FILTER_STRING_SHORT) 'borderColor' => $this->getInput('newsThemeBorderColor'),
'borderWidth' => $this->getInput('newsThemeBorderWidth',helper::FILTER_STRING_SHORT),
'backgroundColor' => $this->getInput('newsThemeBackgroundColor')
]]); ]]);
$this->setData(['module', $this->getUrl(0), 'config',[ $this->setData(['module', $this->getUrl(0), 'config',[
@ -209,6 +227,8 @@ class news extends common {
'height' => $this->getInput('newsConfigHeight', helper::FILTER_INT,true), 'height' => $this->getInput('newsConfigHeight', helper::FILTER_INT,true),
'versionData' => $this->getData(['module', $this->getUrl(0), 'config', 'versionData']) 'versionData' => $this->getData(['module', $this->getUrl(0), 'config', 'versionData'])
]]); ]]);
// Valeurs en sortie // Valeurs en sortie
$this->addOutput([ $this->addOutput([
'redirect' => helper::baseUrl() . $this->getUrl(0) . '/config', 'redirect' => helper::baseUrl() . $this->getUrl(0) . '/config',
@ -262,7 +282,10 @@ class news extends common {
// Valeurs en sortie // Valeurs en sortie
$this->addOutput([ $this->addOutput([
'title' => 'Configuration du module', 'title' => 'Configuration du module',
'view' => 'config' 'view' => 'config',
'vendor' => [
'tinycolorpicker'
]
]); ]);
} }
} }
@ -512,10 +535,11 @@ class news extends common {
} }
// Mise à jour 3.4 // Mise à jour 3.4
if (version_compare($versionData, '3.4', '<') ) { if (version_compare($versionData, '3.4', '<') ) {
$this->deleteData(['module',$this->getUrl(0),'theme']); // Effacer le style précédent
if (is_dir(self::DATADIRECTORY . $this->getUrl(0) )) { unlink(self::DATADIRECTORY . $this->getUrl(0) . '/theme.css');
$this->removeDir(self::DATADIRECTORY . $this->getUrl(0)); $this->deleteData(['module', $this->getUrl(0), 'theme' ]);
} // Le générer
$this->init();
// Mettre à jour la version // Mettre à jour la version
$this->setData(['module',$this->getUrl(0),'config', 'versionData', '3.4' ]); $this->setData(['module',$this->getUrl(0),'config', 'versionData', '3.4' ]);
} }
@ -526,35 +550,36 @@ class news extends common {
*/ */
private function init() { private function init() {
$fileCSS = self::DATADIRECTORY . $this->getUrl(0) . '/theme.css';
//$fileCSS = self::DATADIRECTORY . $this->getUrl(0) . '/theme.css';
// Données du module absentes // Données du module absentes
require_once('module/news/ressource/defaultdata.php');
if ($this->getData(['module', $this->getUrl(0), 'config' ]) === null) { if ($this->getData(['module', $this->getUrl(0), 'config' ]) === null) {
require_once('module/news/ressource/defaultdata.php');
$this->setData(['module', $this->getUrl(0), 'config', init::$defaultData]); $this->setData(['module', $this->getUrl(0), 'config', init::$defaultData]);
}
if ($this->getData(['module', $this->getUrl(0), 'theme' ]) === null) {
// Données de thème // Données de thème
//$this->setData(['module', $this->getUrl(0), 'theme', init::$defaultTheme]); $this->setData(['module', $this->getUrl(0), 'theme', init::$defaultTheme]);
//$this->setData(['module', $this->getUrl(0), 'theme', 'style', self::DATADIRECTORY . $this->getUrl(0) . '/theme.css' ]); $this->setData(['module', $this->getUrl(0), 'theme', 'style', self::DATADIRECTORY . $this->getUrl(0) . '/theme.css' ]);
} }
// Dossier de l'instance // Dossier de l'instance
//if (!is_dir(self::DATADIRECTORY . $this->getUrl(0) )) { if (!is_dir(self::DATADIRECTORY . $this->getUrl(0) )) {
// mkdir (self::DATADIRECTORY . $this->getUrl(0) , 0777, true); mkdir (self::DATADIRECTORY . $this->getUrl(0) , 0777, true);
//} }
// Check la présence de la feuille de style // Check la présence de la feuille de style
//if ( !file_exists(self::DATADIRECTORY . $this->getUrl(0) . '/theme.css')) { if ( !file_exists(self::DATADIRECTORY . $this->getUrl(0) . '/theme.css')) {
// Générer la feuille de CSS // Générer la feuille de CSS
// Supprimé dans 3.4 $style = '.newsFrame {';
// $style = '.newsContent {height: ' . $this->getData([ 'module', $this->getUrl(0), 'theme', 'itemsHeight' ]) .';}'; $style .= 'border:' . $this->getData(['module', $this->getUrl(0), 'theme', 'borderStyle' ]) . ' ' .$this->getData(['module', $this->getUrl(0), 'theme', 'borderColor' ]) . ' ' . $this->getData(['module', $this->getUrl(0), 'theme', 'borderWidth' ]) . ';';
// Pas d'effet flou à l'initialisation $style .= 'background-color:' . $this->getData(['module', $this->getUrl(0), 'theme', 'backgroundColor' ]) . ';';
//$style .= '.newsBlur {background: linear-gradient(' . $this->getData(['theme', 'text', 'textColor']) . ' ' . $this->getData([ 'module', $this->getUrl(0), 'theme', 'itemsBlur' ]) . ',rgba(255,255,255,0) );'; $style .= '}';
//$style .= ' background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;}';
// Sauver la feuille de style // Sauver la feuille de style
//file_put_contents(self::DATADIRECTORY . $this->getUrl(0) . '/theme.css' , $style ); file_put_contents(self::DATADIRECTORY . $this->getUrl(0) . '/theme.css' , $style );
// Stocker le nom de la feuille de style // Stocker le nom de la feuille de style
//$this->setData(['module', $this->getUrl(0), 'theme', 'style', self::DATADIRECTORY . $this->getUrl(0) . '/theme.css']); $this->setData(['module', $this->getUrl(0), 'theme', 'style', self::DATADIRECTORY . $this->getUrl(0) . '/theme.css']);
//} }
} }
} }

View File

@ -5,13 +5,16 @@ class init extends search {
'feedsLabel' => '', 'feedsLabel' => '',
'itemsperPage' => 8, 'itemsperPage' => 8,
'itemsperCol' => 12, 'itemsperCol' => 12,
'height' => 1000, 'height' => -1,
'versionData' => '3.4' 'versionData' => '3.4'
]; ];
/*
public static $defaultTheme = [ public static $defaultTheme = [
'itemsHeight' => 'auto', 'style' => '',
'itemsBlur' => '0%' 'borderStyle' => 'none',
'borderColor' => 'rgba(33, 34, 35, 1)',
'backgroundColor' => 'rgba(255, 255, 255, 1)',
'borderWidth' => '0'
]; ];
*/
} }

View File

@ -40,9 +40,8 @@
<div class="row"> <div class="row">
<div class="col4"> <div class="col4">
<?php echo template::select('newsConfigItemsperCol', $module::$columns, [ <?php echo template::select('newsConfigItemsperCol', $module::$columns, [
'label' => 'Pagination', 'label' => 'Nombre de colonnes',
'selected' => $this->getData(['module', $this->getUrl(0),'config', 'itemsperCol']), 'selected' => $this->getData(['module', $this->getUrl(0),'config', 'itemsperCol'])
'help' => 'Nombre de colonnes par page'
]); ?> ]); ?>
</div> </div>
<div class="col4"> <div class="col4">
@ -53,9 +52,45 @@
</div> </div>
<div class="col4"> <div class="col4">
<?php echo template::select('newsConfigHeight', $module::$height, [ <?php echo template::select('newsConfigHeight', $module::$height, [
'label' => 'Hauteur', 'label' => 'Abrégé de l\'article',
'selected' => $this->getData(['module', $this->getUrl(0),'config', 'height']), 'selected' => $this->getData(['module', $this->getUrl(0),'config', 'height'])
'help' => 'Limite la hauteur de l\'article, cette option est utile lorsque la pagination en colonnes est activée.' ]); ?>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col12">
<div class="block">
<h4>Thème du module</h4>
<div class="row">
<div class="col3">
<?php echo template::select('newsThemeBorderStyle', $module::$borderStyle, [
'label' => 'Bordure',
'selected' => $this->getData(['module', $this->getUrl(0),'theme', 'borderStyle'])
]); ?>
</div>
<div class="col3">
<?php echo template::select('newsThemeBorderWidth', $module::$borderWidth, [
'label' => 'Epaisseur',
'selected' => $this->getData(['module', $this->getUrl(0),'theme', 'borderWidth'])
]); ?>
</div>
<div class="col3">
<?php echo template::text('newsThemeBorderColor', [
'class' => 'colorPicker',
'help' => 'Couleur visible en l\'absence d\'une image.<br />Le curseur horizontal règle le niveau de transparence.',
'label' => 'Couleur de la bordure',
'value' => $this->getData(['module', $this->getUrl(0),'theme', 'borderColor'])
]); ?>
</div>
<div class="col3">
<?php echo template::text('newsThemeBackgroundColor', [
'class' => 'colorPicker',
'help' => 'Couleur visible en l\'absence d\'une image.<br />Le curseur horizontal règle le niveau de transparence.',
'label' => 'Couleur du fond',
'value' => $this->getData(['module', $this->getUrl(0),'theme', 'backgroundColor'])
]); ?> ]); ?>
</div> </div>
</div> </div>

View File

@ -51,27 +51,5 @@
display: inline; display: inline;
vertical-align: top; vertical-align: top;
} }
/*
@media (min-width: 769px)
{
.col2 {width: 20%;}
.col3 {width: 24%;}
.col4 {width: 32%;}
.col6 {width: 49%;}
.col12 {width: 100%;}
}
@media (max-width: 768px)
{
.col2 {width: 49%;}
.col3 {width: 49%;}
.col4 {width: 49%;}
}
@media (max-width: 480px)
{
.col2 {width: 100%;}
.col3 {width: 100%;}
.col4 {width: 100%;}
}
*/

View File

@ -1,7 +1,7 @@
<?php if($module::$news): ?> <?php if($module::$news): ?>
<div class="row"> <div class="row">
<?php foreach($module::$news as $newsId => $news): ?> <?php foreach($module::$news as $newsId => $news): ?>
<div class="col<?php echo $module::$nbrCol ;?>" > <div class="newsFrame col<?php echo $module::$nbrCol ;?>" >
<h2 class="newsTitle" id="<?php echo $newsId;?>"> <h2 class="newsTitle" id="<?php echo $newsId;?>">
<?php echo '<a href="'. helper::baseUrl(true) . $this->getUrl(0) . '/' . $newsId . '">' . $news['title'] . '</a>'; ?> <?php echo '<a href="'. helper::baseUrl(true) . $this->getUrl(0) . '/' . $newsId . '">' . $news['title'] . '</a>'; ?>
</h2> </h2>