#POPUP : une popup propre pour SPIP

Gestionnaire de spip-popup

Il est clair que les fameuses fenêtres popup ne sont pas recommandables...
Mais on en a souvent besoin tout de même, pour renvoyer vers des conditions d’utilisation, une définition de mot etc, sans quitter la page courante.

Ce plugin propose la gestion d’une fenêtre popup unique, accessible et « bien gérée » pour SPIP.

Une page de démonstration est disponible : http://demo-spip3.ateliers-pierrot.....

Installation

  1. Téléchargez l’archive ’zip’ de cette page vers le dossier de plugins de votre SPIP
  2. Installez le plugin depuis votre espace privé comme expliqué ici : https://www.spip.net/fr_article3396.html
  3. Si vous avez CFG, accédez à la page du plugin via le bouton de l’onglet ’Configuration’ de l’espace privé (réservé aux webmestres du site).

A noter qu’il existe une version du plugin sous forme de lame pour le Le Couteau Suisse compatible SPIP 3. Voyez la note en fin d’article pour plus d’information.

Utilisation de la balise

En activant ce plugin, vous pourrez utiliser la balise #POPUP comme ceci :

<a href="#POPUP{objet SPIP,squelette,width,height,titre}">texte du lien</a>

avec les options suivantes :
-  objet SPIP : le type et l’identifiant de l’objet SPIP à afficher dans la fenêtre, par exemple : ’article1’ ou ’id_article=1’,
ou URL distante : une URL complète vers un site distant,
-  squelette : le squelette utilisé pour la popup (optionnel) ; le panneau de configuration du plugin permet de définir un squelette général (un squelette par défaut est proposé avec le plugin, cf. plus bas),
-  width : la largeur de la fenêtre (en pixels - optionnel) ; le panneau de configuration du plugin permet de définir une largeur par défaut,
-  height : la hauteur de la fenêtre (en pixels - optionnel) ; le panneau de configuration du plugin permet de définir une hauteur par défaut,
-  titre : le titre (bulle d’aide au passage de la souris) ajouté au lien.

Depuis la révision SVN 45840 (version 1.1 du 24/03/2011), la balise accepte en premier argument une URL complète d’un site distant. Dans ce cas, et même si le second argument est précisé, le lien renvoyé ouvrira l’URL en question sans tenir compte d’un quelconque squelette puisqu’on part alors du principe qu’il ne s’agit pas d’un site SPIP. Cela autorise donc à ouvrir un site distant en fenêtre popup. Attention cependant : la popup générée par ce plugin est unique (deux liens successifs s’ouvriront dans la même fenêtre).

La balise renvoie le lien nécessaire pour ouvrir la popup, sous forme de fonction javascript comme argument « onclick » ajouté au lien (cf. plus bas), de sorte que le lien reste accessible pour les personnes n’ayant pas javascript sur leur navigateur (cf. Accessibilité).

Utilisation dans les articles

Vous pouvez également intégrer des liens popup dans les textes de vos articles (ou de tout objet SPIP) en utilisant les modèles ’popup’ et ’popup_img’ [1].

Pour les utiliser, écrivez dans vos textes :

<popup
	|texte=le texte du lien ou URL (necessaire)
	|lien=objet SPIP pour le lien (necessaire)
	|skel=squelette (option)
	|width=XX (option)
	|height=XX (option)
	|titre=mon titre (option)
>
OU
<popup_img
	|doc=le numero du document (necessaire)
	|lien=objet SPIP pour le lien (necessaire)
	|skel=squelette (option)
	|width=XX (option)
	|height=XX (option)
	|titre=mon titre (option)
>

Ces appels seront automatiquement transformés en lien ouvrant une popup si les deux premiers arguments sont présents (à défaut, le modèle ne renverra rien).

Le modèle ’popup_img’ génère un aperçu classique d’un document SPIP (de type image de préférence) ouvrant une popup au même titre qu’un lien [2].

MAJ du 15/05/2012 - La plugin ajoute maintenant un bouton à la barre d’édition de SPIP pour vous aider à créer des liens popup, sous le bouton de création des liens classiques [3].

Squelette par défaut

Un squelette SPIP est proposé avec le plugin présentant le contenu de tout objet éditorial passé en argument d’URL. Vous pouvez ainsi présenter le contenu d’un article, d’une brève, d’un auteur, d’un mot ou d’un site référencé.

Le squelette proposé est une adaptation des squelettes de la distribution simplifiée au maximum :
-  reprise d’un en-tête de page simpliste présentant le logo et le nom du site ainsi qu’un lien ’fermer’ (pour qu’il soit disponible de suite pour l’internaute),
-  un pied de page réduit aux seuls liens utiles pour la popup (’imprimer’, ’retour en haut’ et ’fermer’),
-  une zone de contenu sans colonne de navigation ni exta, présentant sur toute sa largeur le contenu de l’obet SPIP.

Certains styles CSS sont prédéfinis (notamment pour les liens d’en-tête et de pied de popup). Vous pouvez personnaliser ces styles en éditant le fichier « popup_spip_styles.html ».

NOTE
Une fonction est définie pour rediriger automatiquement les liens des objets SPIP vers la fenêtre principale et fermer la popup (cf. Documentation technique).

Configuration

Une page de configuration du plugin est disponible si vous utilisez le plugin CFG (mais ce n’est pas obligatoire [4]).

Le panneau de configuration du plugin propose quatre réglages généraux :
-  le squelette utilisé par défaut pour la popup (le squelette « popup_defaut.html » initialement, mais vous pouvez bien évidemment indiquer un autre squelette, cf. plus bas),
-  le nom javascript qui sera donné à la fenêtre (par défaut « popup ») qui peut vous permettre d’échanger des informations entre la fenêtre principale et la fenêtre popup dans vos scripts javascript,
-  la largeur et la hauteur de la fenêtre, que vous pouvez modifier à chaque appel de la balise (3em et 4em arguments).

Squelette(s) personnalisé(s)

Vous pouvez bien entendu, c’est même conseillé, créer votre propre squelette de popup. Vous pouvez même créer un set de squelettes, en précisant à chaque appel de la balise le squelette choisi en 2d argument (cela peut permettre de créer un squelette par objet SPIP).

Quelques conseils

Pour rester dans une pratique web respectueuse de l’internaute, il est recommandé de conserver les liens d’en-tête et de pied définis dans le squelette par défaut : ’Fermer’ et ’Retour en haut’. Le lien permettant de fermer la fenêtre est notamment vivement conseillé !

Documentation technique

Ce plugin nécessite que vos squelettes utilisent la balise #INSERT_HEAD [5] !

La balise retourne un code complet. Par exemple :

<a href="
	#POPUP{objet SPIP,squelette,width,height,mon titre}
">texte du lien</a>

renverra :

<a href="
	http://url" 
	onclick="_popup_set('URL',width,height);return false;" 
	title="mon titre [nouvelle fenêtre]
">texte du lien</a>

Attention à ne pas cumuler de balises « onclick » ou « title » lorsque vous utilisez la balise !

Le plugin charge en en-tête de page le fichier de fonctions javascripts « javascript/spipopup.js ». Ces fonctions sont en charge de gérer l’ouverture de la nouvelle fenêtre, sa fermeture, les liens de retour vers la fenêtre principale etc [6]. En cas de conflit, nous vous renvoyons au code de ce fichier où chaque fonction est commentée (autant que possible). Chaque nouveau clic sur un lien popup s’ouvrira dans la même fenêtre externe (si elle est déjà ouverte).

Un filtre est défini dans le plugin pour rediriger automatiquement les liens des objets SPIP vers la fenêtre principale et fermer la popup : la fonction « popup_liens_retour() ». Ce filtre renvoie le lien vers la fenêtre principale et ferme la popup lorsqu’il s’agit d’une URL absolue, mais charge les liens vers les objets SPIP dans la popup (en utilisant le même squelette que la page courante).
Pour l’utiliser sur un texte d’article par exemple, notez dans votre boucle :

[<div class="texte">(#TEXTE|popup_liens_retour| ... autres filtres)</div>]

Accessibilité

L’ouverture de la fenêtre externe se fait grâce à un attribut « onclick » sur les liens concernés, ce qui permet de conserver la nature de l’attribut « href » (qui n’est pas du javascript) afin de pouvoir visualiser ou copier l’URL de destination. Cet attribut « href » contient l’URL classique vers l’objet SPIP demandé, dans son squelette normal. Cela autorise donc l’utilisateur qui n’aurait pas javascript sur son navigateur à visualiser le contenu de destination. De plus, une information du type « Nouvelle fenêtre » est ajoutée à l’attribut « title » des liens, pour informer les internautes qu’il s’agit d’une fenêtre externe.

Merci à goetsu (cf. son commentaire) et marcimat (cf. son commentaire) pour leurs brillantes remarques sur la question (la première version du plugin n’intégrait pas ces fonctionnalités) !

Lame pour le Couteau Suisse

Une version de ce plugin est proposée sous forme de lame pour Le Couteau Suisse. Ce plugin, compatible avec SPIP 3 (encore en développement à ce jour), permet donc d’utiliser la fonctionnalité proposée par #POPUP au sein de SPIP3.

La lame est disponible en téléchargement à l’adresse suivante : http://files.spip.org/spip-zone/pop....

Évolutions à venir (ou à faire ...)

  • trouver un moyen de permettre des liens popup dans les textes d’article (raccourci typo à créer),
  • travailler le squelette proposé (notamment fil d’ariane avec retour en fenêtre initiale),
  • permettre de régler la fermeture de la fenêtre dans la fonction ’popup_liens_retour()’
  • gérer des identifiants de fenêtres pour en autoriser plusieurs

Notes

[1Attention à ne pas abuser de l’utilisation des fenêtres popup. Ces fenêtres sont très déconseillées par le W3C et il y a lieu de les utiliser dans le respect des habitudes des internautes.

[2Merci à Natacha de Courcelles Design pour ce modèle.

[3Depuis la version 1.31.1 de la version pour SPIP2 et 1.4.1 de la version pour SPIP3.

[4Si vous n’utilisez pas le plugin CFG et que vous souhaitez tout de même modifier les valeurs par défaut, éditez le fichier ’spipopup_options.php’ à la racine du plugin et modifiez les valeurs définies en tête de fichier.

[5C’est le cas de la distribution standard de SPIP.

[6Une fonction renvoyant les dimensions et la position exacte de la nouvelle fenêtre peut être intéressante pour d’autres outils : « _window_size() ».

Discussion

19 discussions

  • 1

    Outil intéressant, mais quand on veut afficher directement une image extraite de la médiathèque (et donc y récupérer son titre) comment l’automatiser à partir du id_document déjà connu ?

    Merci

    PS on pourrait rajouter un (*) pour rappeler l’obligatoire sur les champs concernés
    (car le message affiché se met « entre » deux lignes de champs => pas explicite !

    • Ah !
      Avec popup_img, le <popup_img|doc=771|texte=#INFO_TITRE{document,771}|
      est cette fois bien interprété....

    Répondre à ce message

  • Bonjour,
    dans un squelette, j’essaye d’afficher un formulaire (du plugin Formidable) dans une pop-up, mais je cale sur la faisabilité, pourriez-vous préciser le code qu’il faudrait insérer pour que cela fonctionne ?
    En vous remerciant d’avance

    Répondre à ce message

  • Bonjour,
    Et merci à Piero pour ce plugin !
    Petit mot pour signaler qu’il semble sous SPIP 3.1 que le Couteau Suisse ne propose plus une lame POPUP (confirmation en tout cas pour le CS 1.9.10 et 1.9.12),
    Et plus anecdotiquement, la page de démonstration (demo-spip3.ateliers-pierrot) n’a pas l’air au mieux ;-)

    Répondre à ce message

  • 1
    Jaseur Boreal

    Bonjour, excellente année pour vous et tous vos projets

    2016 : année SPIP 3.1

    Sortie de la nouvelle version 3.1, et certains plugins sont signalés incompatibles par

    http://contrib.spip.net/Verifier-ses-plugins-pour-le-passage-a-SPIP-3-1 :

    « Balise #POPUP ( »>En savoir plus) [3.0.0 ;3.0.*]
    Le plugin actuellement installé est signalé comme incompatible ou à vérifier "


    Merci de votre mise à jour

    Répondre à ce message

  • 2

    Bonjour,
    J’utilise ce plugin pour mon site et j’aurai aimé savoir s’il est prévu une mise à jour pour spip 3.1.
    Merci !

    • J’ai modifié le fichier paquet.xml du plugin en remplaçant « [3.0.0 ;3.0.*] » par « [3.0.0 ;3.1.*] ». Après cette modif, le plugin fonctionne normalement pour moi sur un site en Spip 3.1.
      Cordialement,

    • Salut Vianney et merci, j’ai pas vraiment le temps de suivre mes plugins :(
      Mais je vais me remettre à SPIP ces prochains mois (avec plaisir !), du coup je vérifierai tous mes plugins ...
      Merci encore ;)

    Répondre à ce message

  • Bonjour
    Je découvre ce plugin que je trouve très bien et utile dans certaines circonstances...cependant j’ai des difficultés pour ouvrir la popup avec un lien sur une image
    En mettant ceci à partir du raccourci typo de la barre de rédaction : <popup|texte=img212|titre=Les soirées mensuelles|lien=art189>
    Après avoir enregistré ma page, dans l’article c’est le code de l’image : img212 qui s’affiche avec un lien actif vers la popup
    Comment faire pour que mon image apparaisse bien dans mon article de base et qu’elle serve pour la popup SVP ?
    Merci d’avance pour votre aide
    cordialement

    Répondre à ce message

  • 1
    viannzyb

    Bonjour,
    Depuis quelques jour, j’ai un problème avec ce plugin, qui fonctionnait bien jusque là.
    Dans une même page popup, les liens externes sont accessibles (si je clique dessus, mon lien s’ouvre), mais si c’est un lien vers une page de mon propre site, rien ne se passe.
    Exemple de page avec lien popup (en fin de texte) : http://villesaucarre.fr/spip.php?page=themes&id_groupe=22&var_mode=calcul
    Auriez-vous une solution pour résoudre ce problème ?
    Merci d’avance !

    • Bonjour,
      Problème résolu, je partage.
      La fenêtre popup n’accepte pas les liens relatifs internes, sans le nom de domaine : j’ai pris l’habitude de faire mes liens internes sans mentionner le nom de domaine (« /spip.php ?page=... ») mais au moment de l’enregistrement, le «  ? » après « php » disparait, rendant le lien invalide. Si je fais un lien propre ("www.nomdedomaine.com/spip.php?page=...") les liens dans les pages popup sont ok.

    Répondre à ce message

  • 1

    Salut,

    Je viens de constater une erreur dans le fichier balise/popup.php

    PHP m’affiche l’erreur suivante :

    [09-Feb-2014 18:35:34] PHP Warning:  preg_match() [<a href='function.preg-match'>function.preg-match</a>]: Unknown modifier 'R' in /home/villalemuguet/web/plugins/spipopup_s3/balise/popup.php on line 52

    Le code semble avoir perdu la constante RACCOURCI_URL, j’ai alors défini cette constante.

    52         define('_RACCOURCI_URL', '/^\s*(\w*?)\s*(\d+)(\?(.*?))?(#([^\s]*))?\s*$/S');
    53         if (preg_match(_RACCOURCI_URL, $param, $match)) {

    A voir si ça résiste avec le temps ;)

    — 
    ++

    cyp

    • Salut,

      Merci pour ce retour et cette étrange erreur ...
      J’ai commité une modif qui devrait faire l’affaire (prochaine mise à jour du plugin).

      @+

    Répondre à ce message

  • 2

    Hello,

    Je viens de nettoyer les fichiers XML du plugin.

    Pour les deux branches j’ai changé la catégorie en multimedia (comme mediabox).

    Pour la branche SPIP 3 j’ai changé le numéro de version de 1.4.1 à 2.0.0 car cela n’avait pas de sens vis-à-vis de la branche SPIP 2 qui était déjà en 1.31.1 (31 > 4).

    Enfin pour la branche SPIP 2 j’ai un doute sur :

    	<options>spipopup_options.php</options>
    	<options>spipopup_fonctions.php</options>

    En effet, la deuxième ligne devrait être une balise <fonctions> non ?

    • Bonjour,
      Le plugin s’affichait comme incompatible avec spip 3 jusqu’à je change certains crochets ouverts pour des fermés dans le fichier paquet.xml.

      ligne 6
      compatibilite="[3.0.0;3.0.*["
      en :
      compatibilite="[3.0.0;3.0.*]"

      ligne 25
      <necessite nom="porte_plume" compatibilite="[1.2.2;[" />
      en :
      <necessite nom="porte_plume" compatibilite="[1.2.2;]" />

    • Merci pour le signalement !

      Je viens commiter la modification pour la compatibilité SPIP 3. Par contre, pour le necessite je ne vois pas de souci par contre.

    Répondre à ce message

  • 4

    Bonjour ,

    désirant utilisé ce plugin sur un SPIP 3.0.0-beta SVN [18660] + Le Couteau Suisse ».
    Version locale : 1.8.44 - Révision : 48475

    je lit :
    Ce plugin n’est pas compatible avec cette version de SPIP

    je me suis dit je vais modifier le du plugin.xml

    mais malheureusement je ne le trouve pas.

    Comment tester ou faire fonctionner une popup sur un spip 3

    merci

    • Bonjour ce plugin est aussi disponible pour le Couteau Suisse. Il ne s’agit pas d’une lame native, car le développement ne semble peut-être pas encore mûr. Les remarques éventuelles sont donc les bienvenues.

      Il suffit pour cela de télécharger et installer le paquet zip suivant : http://files.spip.org/spip-zone/pop... (lire README.txt).

    • Salut,

      Il faut effectivement modifier le « plugin.xml » comme ceci :

      (ligne 35)
      	<necessite id='SPIP' version='[1.9.2;2.1.99]' />
      en :
      	<necessite id='SPIP' version='[1.9.2;]' />

      Je n’ai pas encore eu le temps de modifier le plugin ... je sais qu’il y a des erreurs dans les squelettes, mais la fonction popup fonctionne en SPIP 3.

      Un petit travail sur les squelettes est donc nécessaire ...
      N’hésite pas à poster ton travail d’ailleurs ... la communauté (moi le premier) t’en remerciera ;-)

      ++ PiWi

    • Salut, je sais que le message d’origine date un peu ... mais c’est juste pour signaler que je viens de mettre à jour une version pour SPIP3.

      Dispo dans quelques heures sur le fil, de suite sur la zone : http://zone.spip.org/trac/spip-zone...

    • vu et lu , d’ailleurs tes autres plugins migre en spip 3

      tu aura sans doute de mes nouvelles pour spipproprio également

      @micalement

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom