Je me décide enfin à diffuser une version modifiée par mes petites mains de piCal 0.87a. Le but de mes modifications était de rendre beaucoup plus souple l'intégration de ce module sur divers sites utilisant ou non plusieurs thèmes. Pour ce faire, j'ai dû me perdre dans les class de de ce module pour y extraire tout ce qui touchait à la mis en page, mais aussi pour améliorer quelques petites fonctions avec ajout de variables. Bref, voici donc ce que peut faire cette version que je considère comme version ALPHA :
-> On peut lié un thème à un skin, le chemin du skin varie en fonction du thème utilisé
-> Une amélioration de la fonction dédiée à l'injection de css avec la prise en charge de la famille du navigateur
-> Correction du gestionnaire de plug'in
-> Correction de mini calendrier "minical_ex" sous xoops 2.0.14
-> Correction du gestionnaire de bloc de piCal, prise en compte de xoops 2.0.14 et version antérieure.
-> Mise en place du choix du type d'éditeur, aucune modification à faire si vous utilisez cbb 3.x avec xoops 2.0.x.
-> Mise en place du mode CSS :
-------> Mode CSS OFF : fonctionnement standard
-------> Mode CSS ON : les pages générées utiliseront un fichier css. Avec trois modes de fonctionnement :
-------------> CSS présent dans le dossier skin
-------------> CSS présent dans le dossier du thème courant
-------------> CSS intégré dans celui du thème courant
Mais qu'est-ce que le mode CSS, comme je l'ai dit plus haut... ce fût le plus gros travail. C'est un mode de fonctionnement qui permet à piCal de générer des pages dépourvues de formatage donc les couleurs données dans les préférences du module sont toutes ignorés au profit d'une feuille de style dont l'emplacement peut varier selon votre bon vouloir. Prenons pour exemple les templates que gère ce module sous cette évolution :
-> En fonctionnement normal mode CSS inactif, on a le contenu classique du template pical_block_minical_ex.html (pical_minical_ex.html pour pical non modifié)
<table border="0" cellspacing="0" cellpadding="0" width="150" style="width:150px;line-height:normal;margin:0px;">
<tr>
<td width="150" class="calframe" style="<{$block.frame_css}>">
<table border="0" cellspacing="0" cellpadding="0" width="100%" style="border-collapse:collapse;margin:0px;">
<!-- header part -->
<tr>
<td nowrap="nowrap" colspan="7" style="background-color:<{$block.calhead_bgcolor}>;text-align:center;vertical-align:middle;padding:3px 1px;">
<a href="<{$block.root_url}>?caldate=<{$block.prev_month}><{$block.additional_get}>"><img src="<{$block.skinpath}>/miniarrowleft.gif" width="18" height="14" border="0" alt="<{$block.lang_prev_month}>" title="<{$block.lang_prev_month}>" /></a>
<font size="2"><span class="pical_head" style="color:<{$block.calhead_color}>"><b><{$block.year_month_title}></b></span></font>
<a href="<{$block.root_url}>?caldate=<{$block.next_month}><{$block.additional_get}>"><img src="<{$block.skinpath}>/miniarrowright.gif" width="18" height="14" border="0" alt="<{$block.lang_next_month}>" title="<{$block.lang_next_month}>" /></a>
</td>
</tr>
<tr>
<!-- day name loop -->
<{foreach from=$block.daynames item=dayname}>
<td class="pical_minidayname" style="text-align:center;padding:3px 1px;">
<span class="pical_minidayname" style="color:<{$dayname.color}>;"><{$dayname.dayname}></span>
</td>
<{/foreach}>
</tr>
<!-- weekly loop -->
<{foreach from=$block.weeks item=week}>
<tr>
<!-- daily loop -->
<{foreach from=$week item=day}>
<{if $day.type == 0 }>
<td class="pical_miniday">
<span class="pical_miniday"><img src="<{$block.skinpath}>/spacer.gif" alt="" width="20" height="20" /></span>
</td>
<{else}>
<td class="pical_miniday" style="background-color:<{$day.bgcolor}>;text-align:center;height:20px;">
<span class="pical_miniday" style="color:<{$day.color}>;"><{$day.date}></span><br />
<span class="pical_miniday">
<{foreach from=$day.ex item=ex}>
<a href="<{$ex.link}>"><img src="<{$block.skinpath}>/<{$ex.dotgif}>" alt="<{$ex.title}>" title="<{$ex.title}>" width="8" height="8" /></a>
<{foreachelse}>
<img src="<{$block.skinpath}>/spacer.gif" alt="" width="8" height="8" />
<{/foreach}>
</span>
</td>
<{/if}>
<{/foreach}>
</tr>
<{/foreach}>
</table>
<div align=right style="padding:3px;">
<{foreach from=$block.plugins item=plugin}>
<div style='float:right;height:1.5em;'><nobr>
<img src="<{$block.skinpath}>/<{$plugin.dotgif}>" alt="<{$plugin.pi_title}>" /> <{$plugin.pi_title}>
</nobr></div>
<{/foreach}>
</div>
</td>
</tr>
</table>
-> Avec le mode CSS actif, on utilise le template pical_block_minical_ex_css.html
<table id='minical_ex'>
<!-- header part -->
<tr>
<th nowrap="nowrap" colspan="7">
<a href="<{$block.root_url}>?caldate=<{$block.prev_month}><{$block.additional_get}>"><img src="<{$block.skinpath}>/miniarrowleft.gif" alt="<{$block.lang_prev_month}>" title="<{$block.lang_prev_month}>" /></a>
<{$block.year_month_title}>
<a href="<{$block.root_url}>?caldate=<{$block.next_month}><{$block.additional_get}>"><img src="<{$block.skinpath}>/miniarrowright.gif" alt="<{$block.lang_next_month}>" title="<{$block.lang_next_month}>" /></a>
</th>
</tr>
<tr>
<!-- day name loop -->
<{foreach from=$block.daynames item=dayname}>
<td class="minidayname<{$dayname.daytype}>"><{$dayname.dayname}></td>
<{/foreach}>
</tr>
<!-- weekly loop -->
<{foreach from=$block.weeks item=week}>
<tr>
<!-- daily loop -->
<{foreach from=$week item=day}>
<{if $day.type == 0 }>
<td class="miniday"><img src="<{$block.skinpath}>/spacer.gif" alt="" class="spacer_day" /></td>
<{else}>
<td class="miniday<{$day.daytype}>">
<{$day.date}><br />
<{foreach from=$day.ex item=ex}>
<a href="<{$ex.link}>"><img src="<{$block.skinpath}>/<{$ex.dotgif}>" alt="<{$ex.title}>" title="<{$ex.title}>" /></a>
<{foreachelse}>
<img src="<{$block.skinpath}>/spacer.gif" alt="" />
<{/foreach}>
</td>
<{/if}>
<{/foreach}>
</tr>
<{/foreach}>
<tr>
<td nowrap='nowrap' colspan='7' class='plugin_legend'>
<{foreach from=$block.plugins item=plugin}>
<span><img src="<{$block.skinpath}>/<{$plugin.dotgif}>" alt="<{$plugin.pi_title}>" /> <{$plugin.pi_title}> </span>
<{/foreach}>
</td>
</tr>
</table>
-> voici l'extrait du fichier block_pical.css associé à minical_ex
/******* MINI CALENDAR EX *******/
table#minical_ex {
width: 100%;
line-height: normal;
margin: auto;
border-collapse: collapse;
border: 1px solid green;
background-color: white;
}
table#minical_ex th {
padding:3px 1px;
vertical-align: middle;
text-align: center;
font-size: small;
color: #009900;
background-color:#CCFFCC;
}
table#minical_ex th img {
width: 18px;
height: 14px;
border: 0px;
vertical-align: top;
}
table#minical_ex td {
text-align: center;
font-size: small;
}
table#minical_ex td.minidayname {
padding:3px 1px;
color: #000066;
}
table#minical_ex td.minidayname_sunday {
padding:3px 1px;
color: #cc0000;
}
table#minical_ex td.minidayname_saturday {
padding:3px 1px;
color: #0000ff;
}
table#minical_ex td.miniday {
height: 20px;
text-align:center;
}
table#minical_ex td.miniday img.spacer_day {
width: 20px;
height: 20px;
}
table#minical_ex td.miniday, table#minical_ex td.miniday img {
width: 8px;
height: 8px;
background-color: #ffffff;
color: #000066;
}
table#minical_ex td.miniday_sunday, table#minical_ex td.miniday_sunday img {
width: 8px;
height: 8px;
background-color: #ffeeee;
color: #cc0000;
}
table#minical_ex td.miniday_saturday, table#minical_ex td.miniday_saturday img {
width: 8px;
height: 8px;
background-color: #eef7ff;
color: #0000ff;
}
table#minical_ex td.miniday_holiday, table#minical_ex td.miniday_holiday img {
width: 8px;
height: 8px;
background-color: #ffeeee;
color: #cc0000;
}
table#minical_ex td.plugin_legend {
text-align: right;
padding: 3px;
}
table#minical_ex td.plugin_legend span {
height:1.5em;
white-space:nowrap;
float: right;
}
Celà peut paraître complexe, mais pour les initiés aux feuilles de style et les courageux, ils y verront une grande opportunité à la customisation et une meilleure intégration du module sans passer par les templates (sans toucher à certaines parties des class de piCal et oui faud passer par là).
J'essaye de faire en sorte que le mode CSS soit conforme W3C en plus de fournir une apparence très très proche du mode de fonctionnement normal sous la version fournie.
Pour télécharger le module modifié :
Cliquez-ici !!!!L'installation et/ou la mise à jour vers cette version de piCal ce fait de manière normal. pensez juste à vider vos template dans le cas d'une maj
Remarque importante: pour que le mode CSS soit vraiment actif, il va falloir allez dans les préférences de piCal en passant par son propre menu (pas le menu flottant).
Voici les valeurs qui demanderont tôt ou tard à être traduite :
Citation :---- Variable à traduire présente dans le fichier modinfo.php (dossier language)
// Title of config items
define("_MI_SKINFOLDER", "Nom des chemins de skin");
define("_MI_DESCSKINFOLDER", "Mettre la valeur '{theme}' pour créer un lien avec le thème courant.");
define("_MI_SKINCSS", "Mode CSS");
define("_MI_DESCSKINCSS", "Le mode 'CSS OFF' est le fonctionnement classique du module. Le mode 'CSS ON' permet au module de s'appuyer sur une feuille de style pour faciliter son intégration sur divers sites.");
define ("_MI_PICAL_WYSIWYG", "Type d'éditeur");
define ("_MI_PICAL_WYSIWYGDESC", "Sélectionner le type d'éditeur que vous désirez utiliser. Attention : tout autre éditeur que XoopsEditor doit être installé sur votre site.");
// Options of each config items
define("_MI_OPT_CSSOFF", "CSS OFF (mode standard)");
define("_MI_OPT_CSSON_SKIN", "CSS ON (css présent dans le dossier skin)");
define("_MI_OPT_CSSON_THEME", "CSS ON (css présent dans le dossier du thème)");
define("_MI_OPT_CSSON_INCTHEME", "CSS ON (css intégré dans celui du thème courant)");
// Names of blocks for this module (Not all module has blocks)
define("_MI_PICAL_CSSMODEHOOK", "Bloc - Mode CSS");
define("_MI_PICAL_CSSMODEHOOK_DESC","Permets de mettre en en-tête les feuilles de style liées aux blocs, en fonction du mode sélectionné dans les préférences du module. Ce bloc reste invisible.");
// Template description type
define ("_MI_PICAL_TEMPLATE_CSSOFF1", "Template utilisé en fonctionnement normal, CSS OFF");
define ("_MI_PICAL_TEMPLATE_CSSOFF2", "Template du block utilisé en fonctionnement normal, CSS OFF");
define ("_MI_PICAL_TEMPLATE_CSSON1", "Template utilisé quand le mode CCS est activé");
define ("_MI_PICAL_TEMPLATE_CSSON2", "Template du block utilisé quand le mode CCS est activé");
A bientôt.
