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.
- Module News 3.4 :
- 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

View File

@ -49,24 +49,41 @@ class news extends common {
8 => '8 articles',
12 => '12 articles',
16 => '16 articles',
22 => '22 articles'
22 => '22 articles'
];
// Nombre de colone par page
public static $columns = [
12 => '1 Colonne',
6 => '2 Colonnes',
4 => '3 Colonnes',
2 => '4 Colonnes'
12 => '1 colonne',
6 => '2 colonnes',
4 => '3 colonnes',
3 => '4 colonnes'
];
public static $nbrCol = 1;
public static $height = [
200 => '200 caractères',
400 => '400 caractères',
600 => '600 caractères',
500 => '800 caractères',
-1 => 'Article complet',
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
@ -178,13 +195,12 @@ class news extends common {
// Soumission du formulaire
if($this->isPost()) {
// Générer la feuille de CSS
//$style = '.newsContent {height:' . $this->getInput('newsConfigItemsHeight',helper::FILTER_STRING_SHORT) . ';}';
//if ($this->getInput('newsConfigItemsBlur',helper::FILTER_STRING_SHORT) !== '100%') {
// $style = '.newsBlur {height: ' . $this->getInput('newsConfigItemsBlur',helper::FILTER_STRING_SHORT) . ';}';
//$style .= '.newsBlur {background: linear-gradient(' . $this->getData(['theme', 'text', 'textColor']) . ' ' . $this->getInput('newsConfigItemsBlur',helper::FILTER_STRING_SHORT) . ',rgba(255,255,255,0) );';
//$style .= ' background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;}';
//}
$style = '.newsFrame {';
$style .= 'border:' . $this->getInput('newsThemeBorderStyle',helper::FILTER_STRING_SHORT) . ' ' . $this->getInput('newsThemeBorderColor') . ' ' . $this->getInput('newsThemeBorderWidth',helper::FILTER_STRING_SHORT) . ';';
$style .= 'background-color:' . $this->getInput('newsThemeBackgroundColor') . ';';
$style .= '}';
// Dossier de l'instance
if (!is_dir(self::DATADIRECTORY . $this->getUrl(0))) {
@ -196,9 +212,11 @@ class news extends common {
// Fin feuille de style
$this->setData(['module', $this->getUrl(0), 'theme',[
'style' => $success ? self::DATADIRECTORY . $this->getUrl(0) . '/theme.css' : '',
//'itemsHeight' => $this->getInput('newsConfigItemsHeight',helper::FILTER_STRING_SHORT),
//'itemsBlur' => $this->getInput('newsConfigItemsBlur',helper::FILTER_STRING_SHORT)
'style' => $success ? self::DATADIRECTORY . $this->getUrl(0) . '/theme.css' : '',
'borderStyle' => $this->getInput('newsThemeBorderStyle',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',[
@ -209,6 +227,8 @@ class news extends common {
'height' => $this->getInput('newsConfigHeight', helper::FILTER_INT,true),
'versionData' => $this->getData(['module', $this->getUrl(0), 'config', 'versionData'])
]]);
// Valeurs en sortie
$this->addOutput([
'redirect' => helper::baseUrl() . $this->getUrl(0) . '/config',
@ -262,7 +282,10 @@ class news extends common {
// Valeurs en sortie
$this->addOutput([
'title' => 'Configuration du module',
'view' => 'config'
'view' => 'config',
'vendor' => [
'tinycolorpicker'
]
]);
}
}
@ -512,10 +535,11 @@ class news extends common {
}
// Mise à jour 3.4
if (version_compare($versionData, '3.4', '<') ) {
$this->deleteData(['module',$this->getUrl(0),'theme']);
if (is_dir(self::DATADIRECTORY . $this->getUrl(0) )) {
$this->removeDir(self::DATADIRECTORY . $this->getUrl(0));
}
// Effacer le style précédent
unlink(self::DATADIRECTORY . $this->getUrl(0) . '/theme.css');
$this->deleteData(['module', $this->getUrl(0), 'theme' ]);
// Le générer
$this->init();
// Mettre à jour la version
$this->setData(['module',$this->getUrl(0),'config', 'versionData', '3.4' ]);
}
@ -526,35 +550,36 @@ class news extends common {
*/
private function init() {
//$fileCSS = self::DATADIRECTORY . $this->getUrl(0) . '/theme.css';
$fileCSS = self::DATADIRECTORY . $this->getUrl(0) . '/theme.css';
// Données du module absentes
require_once('module/news/ressource/defaultdata.php');
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]);
}
if ($this->getData(['module', $this->getUrl(0), 'theme' ]) === null) {
// Données de thème
//$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', init::$defaultTheme]);
$this->setData(['module', $this->getUrl(0), 'theme', 'style', self::DATADIRECTORY . $this->getUrl(0) . '/theme.css' ]);
}
// Dossier de l'instance
//if (!is_dir(self::DATADIRECTORY . $this->getUrl(0) )) {
// mkdir (self::DATADIRECTORY . $this->getUrl(0) , 0777, true);
//}
if (!is_dir(self::DATADIRECTORY . $this->getUrl(0) )) {
mkdir (self::DATADIRECTORY . $this->getUrl(0) , 0777, true);
}
// 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
// Supprimé dans 3.4
// $style = '.newsContent {height: ' . $this->getData([ 'module', $this->getUrl(0), 'theme', 'itemsHeight' ]) .';}';
// Pas d'effet flou à l'initialisation
//$style .= '.newsBlur {background: linear-gradient(' . $this->getData(['theme', 'text', 'textColor']) . ' ' . $this->getData([ 'module', $this->getUrl(0), 'theme', 'itemsBlur' ]) . ',rgba(255,255,255,0) );';
//$style .= ' background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;}';
$style = '.newsFrame {';
$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' ]) . ';';
$style .= 'background-color:' . $this->getData(['module', $this->getUrl(0), 'theme', 'backgroundColor' ]) . ';';
$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
//$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' => '',
'itemsperPage' => 8,
'itemsperCol' => 12,
'height' => 1000,
'height' => -1,
'versionData' => '3.4'
];
/*
public static $defaultTheme = [
'itemsHeight' => 'auto',
'itemsBlur' => '0%'
'style' => '',
'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="col4">
<?php echo template::select('newsConfigItemsperCol', $module::$columns, [
'label' => 'Pagination',
'selected' => $this->getData(['module', $this->getUrl(0),'config', 'itemsperCol']),
'help' => 'Nombre de colonnes par page'
'label' => 'Nombre de colonnes',
'selected' => $this->getData(['module', $this->getUrl(0),'config', 'itemsperCol'])
]); ?>
</div>
<div class="col4">
@ -53,9 +52,45 @@
</div>
<div class="col4">
<?php echo template::select('newsConfigHeight', $module::$height, [
'label' => 'Hauteur',
'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.'
'label' => 'Abrégé de l\'article',
'selected' => $this->getData(['module', $this->getUrl(0),'config', 'height'])
]); ?>
</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>

View File

@ -51,27 +51,5 @@
display: inline;
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): ?>
<div class="row">
<?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;?>">
<?php echo '<a href="'. helper::baseUrl(true) . $this->getUrl(0) . '/' . $newsId . '">' . $news['title'] . '</a>'; ?>
</h2>