Installation
- Téléchargez l’archive ’zip’ de cette page vers le dossier de plugins de votre SPIP
- Installez le plugin depuis votre espace privé comme expliqué ici : https://www.spip.net/fr_article3396.html
- 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
Discussions par date d’activité
19 discussions
Hello,
Newbee cherche pro ;)
En effet, j’ai intégré et activé ce plugin dans mon site Spip (v 2.1.11). Ma page article.html contient bien la balise #INSERT HEAD.
J’ai créé un lien dans un des articles (article13 en l’occurrence) sous la forme suivante :
<popup|texte=demande préalable de soutien|lien=http://127.0.0.1/www.fondationgelbert.ch/squelettes/demandepresoutien.html|width=850|>
La fenêtre popup s’ouvre bien (ouf). Le problème vient de la page depuis laquelle le lien est appelé (article13). En effet, au lieu de rester « statique » en arrière-plan (c’est à dire sous sa forme d’article Spip n° 13), elle affiche également la page demandepresoutien.html...
Une idée pour résoudre ça ?
Merci infiniment,
Stéphane
Salut Stéphane,
J’ai besoin de voir le code pour t’aider ... peux-tu mettre au moins la partie de squelette ou d’article avec le lien popup (code en partie publique et privée) ?
PW
Répondre à ce message
Bonjour,
j’aimerai enlever la barre de navigation du pop-up. J’ai rajouté dans le fichier spipopup.js ’menubar’:0, dans la variable var opt_set mais ça ne change rien. Avez-vous une idée ?
Merci d’avance.
Salut, je répond très tard (je n’avais pas vu ton message ...).
Si c’est toujours d’actualité, il y a maintenant une option en Config (avec le plugin CFG) qui permet d’ajouter toutes les options que tu veux ...
Si ça peut servir ;-)
PiWi
Répondre à ce message
Bonjour et bravo pour ce plugin qui permet de renouer avec de vieilles pratiques qui rendaient quand même bien service ;-)
Je le teste sur un serveur interne (MAMP) et je n’arrive pas à faire fonctionner la fonction « popup_liens_retour() »... Pour le lien de retour vers la page de départ, j’utilise pourtant une url absolue qui fonctionne parfaitement quand je l’utilise dans d’autres contextes. J’ai du rater un truc... Faut-il activer quelque chose pour bénéficier de cette fonction ?
Salut,
Il n’y a rien à activer pour utiliser la fonction « url_liens_retour() ».
Par contre, tu parles d’URL absolue ...
Ce n’est effectivement pas très clair dans ma doc, mais cette fonction :
- retourne les URL absolues vers la fenêtre principale (même les URL spip, toute URL du moment qu’elle a une racine http)
- ouvre les liens internes vers des objets SPIP (non absolus donc) dans la popup
Peut-être qu’un exemple de code ou de contenu me permettrait de t’aider un peu plus ;-)
++ P.
Salut et merci de la réactivité,
Le code ? Ce n’est pas très sorcier... Dans le texte d’un article, j’ai mis :
Ok, ça ouvre la page en popup.
Sur cette popup, j’ai mis, pour retourner à la page initiale :
[Retour à la page 50->http://machinspipmamp:8888/spip.php?article50]Et là, rien ne bouge. Je précise que cette url fonctionne parfaitement dans d’autres contextes. Si je mets en url
article50, l’article 50 s’ouvre dans la fenêtre popup et ce n’est évidemment pas ce qui est recherché.Je reviens sur cette fonction de retour vers la page de départ et je me demande si elle est bien utile...? En effet, il me semble que dans la plupart des cas, une fenêtre popup est bien plus petite que la fenêtre de départ et s’ouvre immanquablement par dessus celle-ci. On voit donc clairement qu’on est en présence d’une fenêtre popup. Par conséquent, un simple « Refermer cette page », bien en évidence, suffit à retourner à la page de départ.
Salut Béat,
D’abord, je suis d’accord avec toi sur le fait que l’action de la fonction « popup_liens_retour() » n’est pas très au point. On en avait parlé il y a longtemps sur la zone, sans trouver de solution convaincante, et j’avoue que je n’ai pas eu vraiment le temps de m’y pencher ...
Concernant tes remarques sur l’utilité javascript :
Non, pas forcément, cela dépend du navigateur et du nombre de fenêtres ouvertes pendant la session ...
Pas toujours, certains navigateurs redimensionnent obligatoirement les fenêtres, sauf si on le précise d’une certaine façon ...
Non. Encore une fois, pour une session qui aurait une dizaine de fenêtres de navigation ouvertes, il est nécessaire de préciser à laquelle donner le focus ...
Concernant l’erreur que tu rencontres, je ne la comprends pas bien (!!).
On pourrait avoir une piste avec une console Javascript, voir ce qui se passe ... As-tu essayé en dehors de MAMP ?
Ça m’intéresse d’avoir ton retour, ça me poussera à me pencher sur cette #*** ! de fonction ;-)
Courage et patience ...
++ PiWi
Répondre à ce message
Salut, et bravo pour ce plugin fort intéressant.
Voilà ma question (qui ressemble à celle de Martin, ci-dessous) : y a-t-il un moyen de faire un lien vers un site externe grâce à ce plugin ? J’ai bien essayé de bidouiller, mais rien n’y fait, je me retrouve systématiquement avec la racine du site en préfixe du lien externe. Des idées à me proposer ? Merci d’avance.
Salut,
effectivement, c’est une restriction souhaitée : le popup n’a vocation qu’à ouvrir une nouvelle fenêtre d’information du site courant, d’où les adresses forcément relatives. Sinon, le plugin ne pourrait pas se prétendre « propre » (cf. les utilisations responsables dans le web).
Je laisse ceux qui le souhaitent trouver un moyen de débrider le plugin par eux-mêmes ...
(un petit point de départ peut-être une plateforme SPIP qui redirige en HTTP ... par exemple)
;-)
Je complète ma réponse (et reviens sur ce qui a été dit)
La nouvelle version du plugin (1.01) autorise maintenant à passer une URL complète en premier argument de la balise ... mais attention :
« l’abus de popups est dangereux pour la santé !! »
Salut, et merci pour l’efficacité !
Pas de souci sur l’abus de popup, l’idée est bien de garder un site le plus respectueux possible des bonnes pratiques, d’où l’intérêt du plugin plutôt qu’une bidouille maison pas forcément au top... Merci encore.
PS : le plugin sera utilisé sur ce site : http://www.gorgesdutarn.net pour afficher un planning de dispos externe au site, pas plus !
Répondre à ce message
Bonjour,
Je tente de faire apparaitre un player shoutcast (ffmp3) dans une popup... Cela marche bien sur une page simple mais pas dans ma popup :(
J’ai installé ce plugin, j’arrive à faire apparaitre la popup avec un squelette perso.
J’ai posé les fichiers du player à la racine de auto/spipopup (ffmp3-config.swf, ffmp3-mcclean.xml et le sous répertoire de skin appelé par ffmp3-mcclean.xml).
Dans mon squelette j’ai ajouté le code :
Je pense qu’il y a un problème de chemin, mais je vois pas d’autre endroit où placer les fichiers du player...
Un petit coup de main serait pas de refus !
Suis-je beta ! Le chemin est relatif à la racine du site...
Désolé pour le dérangement.
Répondre à ce message
Helllo
Que je regarde ton site de démo ou les tests que je fais en local et que ce soit avec Firefox ou IE, je n’ai pas de popup mais un nouvel onglet qui s’ouvre.
Oups, désolé, un mauvais paramétrage de Firefox.
Répondre à ce message
Ce n’est pas « bien géré » si ton plugin retourne directement le code javascript que tu mentionnes. Il faut que l’URL soit vue et compréhensible par le visiteur, par exemple s’il souhaite faire « control+clic » pour ouvrir dans un nouvel onglet ou s’il n’a pas JS actif, afin de pouvoir accéder tout de même à ce contenu.
C’est entre autre ce que permet de faire le plugin « mediabox » et avec une classe CSS sur les liens, idéal avec ZPIP qui ne chargera dans la modale que le squelette « contenu/xx » et non toute la page dans ce cas là de mémoire.
C’est effectivement une vraie question ... « bien gérée » se voulait opposé aux nombreuses popups de pubs qu’on retrouve sur le web. Pour avoir utilisé #POPUP sur plusieurs sites, c’est en tout cas un bon moyen d’être ’sûr’ que la fenêtre s’ouvrira correctement et ne sera pas assaillante pour l’internaute. C’est aussi pour cette raison qu’une seule fenêtre s’ouvre (avec rechargement si nouveau lien popup cliqué).
Il faut trouver un moyen d’interdire la transformation des liens facilement par un autre plugin ou dans les squelettes. Effectivement, l’option javascript appliquée à une classe par exemple semble appropriée ...
C’est encore en développement ! Mais merci pour le retour.
Salut,
Idem que pour Goetsu (2 discussions plus haut) : j’ai revu et corrigé le plugin avec l’aide bienveillante de vos remarques ...
Ca te paraît « mieux géré » ?
Répondre à ce message
Bonjour,
A noter cette contrib n’est pas accessible car inutilisable lorsque javascript est désactivé et aucun signalement n’est fait à l’utilisateur de l’ouverture dans une nouvelle fenêtre.
Il faudrait utiliser une syntaxe js permettant l’ouverture dans un lien classique quand js est désactivé (cf article pop up accessible sur openweb) et mettre un title sur le lien =« intitulé - nouvelle fenêtre »
Cher maître Capello ...
j’ai tenu compte des remarques et commentaires et retravaillé les liens. C’est effectivement un problème auquel je ne suis pas assez sensibilisé (HONTE !!!!)
Peux-tu l’analyser de nouveau et me dire si c’est mieux ??
Merci pour les remarques et les pistes.
Répondre à ce message
Lien de démo HS un autre lien ?
(Fatal error : Call to undefined function session_get() in /homez.334/pierrecap/www/sites_spip/spip_pierowbmstr_fr/squelettes/outils/devdebug.php on line 15)
C’est rétabli ... on est en test
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 :
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.
Suivre les commentaires :
|
