MiniGriSpip

Bonjour et bienvenue Vincent

Alors, plusieurs solutions sont possibles, elle nécessitent pour la plupart des modifications importantes, mais voici peut-être la plus simple à mettre en oeuvre, même si ce n'est pas forcément la plus "propre" en terme de rendu final, elle est sûrement une des plus simples à installer et utiliser.

Nous allons installer un nouveau filtre Spip sur la balise "#TEXTE" des boucles "ARTICLES", du fichier "article.html", et "BREVES", du fichier "breve.html".

Ce filtre Spip se chargera de mettre en place de nouvelles balises Html autour des liens d'appel des notes de bas de page, lesquelles afficheront, grâce à des styles Css, des info-bulles personnalisés avec tout le contenu du texte de chaque note.

Voici les étapes pour installer et utiliser cette solution :

1. Édite le fichier principal de styles du squelette et insère, tout à la fin, les codes suivants :

/** Info-bulles **/
span.infobulle span { display: none; }
span.infobulle:hover span { 
    display: block; 
    font-family: Verdana, sans-serif; 
    font-size: 11px; 
    color: black;
    text-align: left;
    padding: 4px 8px; 
    margin: -20px 0px 0px 0px; 
    width: 220px; 
    position: absolute; 
    left: 50%; 
    background-color: lightyellow; 
    border: 1px solid gray; 
    overflow: hidden;
}

2. Édite le fichier Php nommé "mes_fonctions.php" et place, tout au début, juste après la balise d'ouverture "<?php", le code suivant :

/**********************************************************************************************************/
/* Filtre "mgs_infobulle" 1.0 */
/* ---------------------------------------------------------------------------------------------------- */
/* Infos : GPL - 04/08 (c) FredoMkb */
/* Utilisation : #TEXTE*|mgs_infobulle|propre */
/* Usage : Insere des balises "span" qui s'affichent comme info-bulles lors de leur survol */
/* Voir styles Css "infobulle" associes */
/* ---------------------------------------------------------------------------------------------------- */
function mgs_infobulle($texteOrig) {
// Fonction pour creer des info-bulles dans le texte des articles et breves.
// La fonction verifie l'existence des balises ouvrantes "[[|" et fermantes "|]]"
// si c'est le cas, elle les remplace par une balise survolable affichant une info-bulle
// avec tout le contenu des balises, meme s'il est formate en Html.
    
    // Test de l'existence des info-bulles. 
    preg_match("#\\[\\[\\|(.*?)\\|\\]\\]#iU", $texteOrig, $testInfoBulle);
    
    // Si un des info-bulles existent, alors on genere les balises survolables.
    if ($testInfoBulle[1] != false) {

        // On exclu les textes des codes et cadres
        $texteOrigClean = preg_replace('#<cadre>(.*?)</cadre>#s','',$texteOrig); 
        $texteOrigClean = preg_replace('#<code>(.*?)</code>#s','',$texteOrigClean); 
    
        // Recuperation des toutes les info-bulles presentes dans le texte nettoye.
        preg_match_all('#\\[\\[\\|(.*?)\\|\\]\\]#iU', $texteOrigClean, $listeOrig);
                
        // On place le resultat dans une variable et on initialise les autres variables.
        $listeInfoBullesOrig = $listeOrig[1];
        $lienDebut = '<span class="infobulle">[[';
        $lienCentre = ']]<span>';
        $lienFin = '</span></span>';
        
        // Boucle sur chaque element de la liste des info-bulles recuperees.
        foreach ($listeInfoBullesOrig as $textInfoBulleOrig) {
            $textInfoBulleNew = $lienDebut.$textInfoBulleOrig.$lienCentre.$textInfoBulleOrig.$lienFin;
            $texteOrig = str_replace("[[|".$textInfoBulleOrig."|]]", $textInfoBulleNew, $texteOrig);
        };
    };
    // Retour du texte modifie.
    return $texteOrig;
}
/**********************************************************************************************************/

3. Édite le fichier Html nommé "article.html", puis cherche la balise Spip "#TEXTE", qui doit normalement se trouver après la balise "#CHAPO", puis place le filtre Spip "mgs_infobulle" de la manière suivante :

- Pour Mgs version 1.4.x :

[<div class="mgs_texte">(#TEXTE*|mgs_infobulle|propre|reduire_image{500,0})</div>]

- Pour Mgs version 1.60 :

[<div class="mgs_texte">(#TEXTE*|somm_table|filets_sep|mgs_infobulle|propre|reduire_image{470,0})</div>]

ATTENTION !
Il faut que la balise "#TEXTE" soit suivie d'un astérisque, et que le filtre "mgs_infobulle" soit suivi du filtre "propre" pour assurer un bon formatage du texte.

4. Il faut faire les mêmes modifications dans le fichier "breve.html", toujours sur la balise "#TEXTE" ;

5. Enregistre les modifications de tous ces fichiers, vide le cache de Spip (configuration -> vider le cache -> vider le cache), vide le cache du navigateur également.

6. Pour utiliser cette solution, rien de plus simple, lors de la rédaction des articles et/ou brèves, il faut utiliser les raccourcis "[[|" et "|]]" pour entourer les notes de bas de page longues, qu'on souhaite afficher en entier lors du survol de la souris sur le lien dans le texte, lien qui, par ailleurs, reste tout-à-fait opérationnel pour se rendre à la note de bas de page correspondante.

Le raccourcis de cette méthode se compose de deux crochets "[" et d'une barre verticale "|", qui s'obtient par la combinaison des touches "alt + shift + L" (sur Mac et pour un clavier Azerty, je ne sais pas pour les autres plate-formes ni claviers, à chercher si c'est ton cas...)

Tu peux évidemment continuer à utiliser les raccourcis originaux de Spip pour les notes de bas de page "normales" (deux crochets ouvrants et fermants), le filtre ne les converti pas, il s'occupe uniquement des raccourcis composés d'une barre verticale "|", donc tu as les deux possibilités selon la longueur du texte à afficher.

NOTE !
Le texte de la note s'affiche dans un bloc formaté comme une info-bulle à hauteur du lien de la note dans le texte, mais il se peut qu'il ne soit pas vraiment centré horizontalement dans la colonne, il faudra alors modifier les marges gauche ou droite, dans la feuille de style correspondante, pour régler l'affichage.

ATTENTION !
Cette solution n'inhibe pas l'info-bulle originale du lien, il s'affiche en même temps que notre info-bulle, parfois en la masquant suivant la position du texte, mais à la différence de notre méthode, qui reste affichée autant de temps que la souris survole le lien, l'info-bulle originale disparaît au bout de quelques secondes.

Voilô... c'est la solution la plus simple et rapide à intégrer que je peux te proposer, il y a bien-sûr d'autres pistes possibles, avec du JavaScript par exemple, mais c'est un peu plus complexe à mettre en oeuvre pour un résultat pas forcément bien meilleur.

Tiens-moi au courant Stp... à+

Re...

vincentf a écrit:

L'idéal serait désormais d'oter l'infobulle initiale qui ne sert plus à rien.
Si tu as une piste à ce sujet, n'hésite pas.

Avec un zeste de JavaScript ça pourrait fonctionner, voici une piste :

1. Édite le fichier Php "mes_fonctions.php" ;

2. Modifie le filtre "mgs_infobulle" en remplaçant la ligne de code suivante :

$lienDebut = '<span class="infobulle">[[';

Par celle-ci :

$lienDebut = '<span class="infobulle" onmouseover="this.childNodes[1].setAttribute(\'title\', \'\');">[[';

3. Enregistre les modifications, vide le cache de Spip, recharge les pages...

Voilô Vincent, maintenant, tous les visiteurs de ton site qui ont JavaScript activé sur leur navigateur, ne verront pas l'info-bulle originale...

Tiens-moi au courant Stp... à+ :-)