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 : http://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 2nd 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
Plugin POPUP pour SPIP2
Vos commentaires
# Le 29 octobre 2011 à 19:51, par spipfactory
En réponse à : #POPUP : une popup propre pour SPIP
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
mais malheureusement je ne le trouve pas.
Comment tester ou faire fonctionner une popup sur un spip 3
merci
# Le 6 novembre 2011 à 18:12, par Pat
En réponse à : #POPUP : une popup propre pour SPIP
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).
# Le 6 novembre 2011 à 19:26, par PieroWbmstr
En réponse à : #POPUP : une popup propre pour SPIP
Salut,
Il faut effectivement modifier le « plugin.xml » comme ceci :
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
# Le 5 mai à 14:21, par PieroWbmstr
En réponse à : #POPUP : une popup propre pour SPIP
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...
# Le 5 mai à 14:27, par spipfactory
En réponse à : #POPUP : une popup propre pour SPIP
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
# Le 7 février à 18:31, par ?
En réponse à : #POPUP : une popup propre pour SPIP
Est ce qu’il possible d’inclure ce code dans un article par exemple ?
unibet
Répondre à ce message
# Le 16 décembre 2011 à 10:32, par Stéphane
En réponse à : #POPUP : une popup propre pour SPIP
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
# Le 21 décembre 2011 à 07:33, par PieroWbmstr
En réponse à : #POPUP : une popup propre pour SPIP
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
# Le 17 août 2011 à 11:32, par mrskater
En réponse à : #POPUP : une popup propre pour SPIP
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.
# Le 6 novembre 2011 à 19:29, par PieroWbmstr
En réponse à : #POPUP : une popup propre pour SPIP
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
# Le 31 mai 2011 à 18:07, par Béat
En réponse à : #POPUP : une popup propre pour SPIP
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 ?
# Le 31 mai 2011 à 21:48, par PieroWbmstr
En réponse à : #POPUP : une popup propre pour SPIP
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.
# Le 31 mai 2011 à 22:04, par Béat
En réponse à : #POPUP : une popup propre pour SPIP
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 :
<popup|texte=Voir d'autres exemples de ce modèle
|lien=article56
|titre=mon titre
>
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é.# Le 1er juin 2011 à 15:26, par Béat
En réponse à : #POPUP : une popup propre pour SPIP
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.
# Le 6 juin 2011 à 20:41, par PieroWbmstr
En réponse à : #POPUP : une popup propre pour SPIP
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
# Le 24 mars 2011 à 14:47, par Antho
En réponse à : #POPUP : une popup propre pour SPIP
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.
# Le 24 mars 2011 à 15:12, par PieroWbmstr
En réponse à : #POPUP : une popup propre pour SPIP
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)
;-)
# Le 24 mars 2011 à 18:46, par PieroWbmstr
En réponse à : #POPUP : une popup propre pour SPIP
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é !! »
# Le 25 mars 2011 à 09:40, par Antho
En réponse à : #POPUP : une popup propre pour SPIP
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
# Le 5 mars 2011 à 16:50, par Martin
En réponse à : #POPUP : une popup propre pour SPIP
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 !
# Le 5 mars 2011 à 17:00, par Martin
En réponse à : #POPUP : une popup propre pour SPIP
Suis-je beta ! Le chemin est relatif à la racine du site...
Désolé pour le dérangement.
Répondre à ce message
# Le 29 octobre 2010 à 15:12, par Jean Christophe Villeneuve
En réponse à : #POPUP : une popup propre pour SPIP
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.
# Le 29 octobre 2010 à 15:49, par Jean Christophe Villeneuve
En réponse à : #POPUP : une popup propre pour SPIP
Oups, désolé, un mauvais paramétrage de Firefox.
Répondre à ce message
# Le 13 septembre 2010 à 14:26, par marcimat
En réponse à : #POPUP : une popup propre pour SPIP
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.
# Le 13 septembre 2010 à 16:59, par PieroWbmstr
En réponse à : #POPUP : une popup propre pour SPIP
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.
# Le 16 septembre 2010 à 21:26, par PieroWbmstr
En réponse à : #POPUP : une popup propre pour SPIP
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
# Le 16 septembre 2010 à 16:19, par goetsu
En réponse à : #POPUP : une popup propre pour SPIP
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"
# Le 16 septembre 2010 à 21:20, par PieroWbmstr
En réponse à : #POPUP : une popup propre pour SPIP
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