PluXml.org

Blog ou CMS à l'Xml

Vous n'êtes pas identifié(e).

#1 28/11/2017 20:48:10

SieurVLD
Membre
Inscription : 23/01/2016
Messages : 13

API pour afficher le gestionnaire de médias dans une fenêtre popup

Bonjour,

y a t il une doc pour cette API ?

API pour afficher le gestionnaire de médias dans une fenêtre popup et récuperer l'image sélectionnée dans la fenêtre appelante.

Hors ligne

#2 28/11/2017 21:50:33

Stéphane
Responsable du projet
Lieu : pas loin de Metz
Inscription : 07/08/2007
Messages : 6 218
Site Web

Re : API pour afficher le gestionnaire de médias dans une fenêtre popup

Bonjour

Non, mais je te vais te faire ça.


Mes articles et tutoriels pour PluXml
Pluxopolis mon site sur PluXml, mais pas seulement...
Twitter: @pluxopolis

Hors ligne

#3 29/11/2017 00:56:55

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 830
Site Web

Re : API pour afficher le gestionnaire de médias dans une fenêtre popup

Certains bloquent les fenêtres popup avec leurs navigateurs.
Je préfère utiliser un iframe à la place comme dans le plugin TinyMCE.
Avec Javascript on peut détecter si on est dans un iframe pour cacher la sidebar et modifier les liens.

Hors ligne

#4 29/11/2017 10:12:19

Stéphane
Responsable du projet
Lieu : pas loin de Metz
Inscription : 07/08/2007
Messages : 6 218
Site Web

Re : API pour afficher le gestionnaire de médias dans une fenêtre popup

Bonjour

Alors voilà :-)
Dis moi si c'est suffisament clair, j'en ferai un fiche tuto pour sortir tout ça de forum et lui donner une meilleure visibilité pour que ça resserve.

API pour afficher le gestionnaire de médias dans une fenêtre popup

L'ouverture du gestionnaire de médias se fait par un événement onclick sur un lien hypertexte ou un bouton (balise <a> ou <button>)

<a id="#mngr" onclick="mediasManager.openPopup()">Manager</a>

L'appel et l'ouverture du gestionnaire de médias peut se faire également sans passer par un événement onclick mais par jquery.
Ici la méthode click() de jquery est associé à #mngr c'est à dire l'id de la balise <a>

<a id="mngr">Manager</a>
<script>
$(document).ready(function() {
    $("#mngr").click(function() {
		mediasManager.openPopup();
	})
})
</script>

Pour récupérer et envoyer le chemin d'un fichier sélectionné à partir du gestionnaire de médias dans un champ input ou un textarea, il faut préciser l'id du champ qui recevra le chemin dans le 1er paramètre d'appel de la fonction mediasManager.openPopup();
Ici le champ <input> a pour id: id_fld

<a id="mngr">Manager</a>
<input type="text" id="id_fld">
<script>
$(document).ready(function() {
    $("#mngr").click(function() {
		mediasManager.openPopup('id_fld');
	})
})
</script>

Si le champ input contient déjà une valeur, le nom du fichier est alors rajouté au début

<a id="mngr">Manager</a>
<input type="text" id="id_fld" size="50" value="XXX">
<script>
$(document).ready(function() {
    $("#mngr").click(function() {
		mediasManager.openPopup('id_fld');
	})
})
</script>

Ici le champ <input> contient à sa création la valeur XXX. Après avoir sélectionné un fichier on aura dans le champ par exemple

data/medias/monimage.jpgXXX

Pour un annule et remplace de ce qui est dans le champ, on précise la valeur false dans le 2ième paramètre d'appel de mediasManager.openPopup()

<a id="mngr">Manager</a>
<input type="text" id="id_fld" size="50" value="XXX">
<script>
$(document).ready(function() {
    $("#mngr").click(function() {
		mediasManager.openPopup('id_fld', false);
	})
})
</script>

XXX sera alors remplacé par exemple par: data/medias/monimage.jpg

Un 3ième paramètre existe dans l'appel de mediasManager.openPopup().
C'est le nom d'une fonction javascript qui sera appelée après avoir sélectionné un fichier dans le gestionnaire de médias.

<a id="mngr">Manager</a>
<input type="text" id="id_fld" size="50">
<script>
$(document).ready(function() {
    $("#mngr").click(function() {
		mediasManager.openPopup('id_fld', false, 'fct_callback');
	})
	fct_callback = function(cible, text) {
		alert(cible + ' | ' + text);
	}
});
</script>

Dès qu'une fonction de rappel (callback) est précisée dans le 3ième paramètre, le champ <input> n'est plus renseigné avec le chemin de l'image. C'est à gérer par le développeur dans la fonction de callback.

La fonction de rappel reçoit 2 paramètres d'entrée:

  • cible: le nom du champ spécifié dans le 1er paramètre dans l'appel de mediasManager.openPopup (ici 'id_fld')

  • text: le chemin absolu en http de l'image sélectionnée (exemple: http://monsite.com/data/medias/monimage.jpg)


NB: dans le cas d'utilisation d'une fonction de rappel, mettre le code javascript avant la balise </body>


Mes articles et tutoriels pour PluXml
Pluxopolis mon site sur PluXml, mais pas seulement...
Twitter: @pluxopolis

Hors ligne

#5 29/11/2017 19:26:49

SieurVLD
Membre
Inscription : 23/01/2016
Messages : 13

Re : API pour afficher le gestionnaire de médias dans une fenêtre popup

Merci c'est vraiment nickel !

Hors ligne

#6 30/11/2017 00:26:43

SieurVLD
Membre
Inscription : 23/01/2016
Messages : 13

Re : API pour afficher le gestionnaire de médias dans une fenêtre popup

juste un petit soucis avec le callback, j'arrive à le faire fonctionner sous chrome, Edge, Opera mais pas sous FF 57 !
j'ai bien mis le script dans le <head>.

Hors ligne

#7 30/11/2017 01:38:09

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 830
Site Web

Re : API pour afficher le gestionnaire de médias dans une fenêtre popup

Que dit la console log dans l'inspecteur Web ( touche F12 ) ?

Hors ligne

#8 30/11/2017 09:09:09

Stéphane
Responsable du projet
Lieu : pas loin de Metz
Inscription : 07/08/2007
Messages : 6 218
Site Web

Re : API pour afficher le gestionnaire de médias dans une fenêtre popup

Peux-tu remplacer le contenu du fichier /core/lib/mediasManager.js par celui que je vient de pousser sur github: https://github.com/pluxml/PluXml/blob/m … Manager.js

Effectivement avec FF57 ça ne marchait pas. Peux-tu stp tester avec la modif. Chez moi maintenant c'est ok sous FF Quantum


Mes articles et tutoriels pour PluXml
Pluxopolis mon site sur PluXml, mais pas seulement...
Twitter: @pluxopolis

Hors ligne

#9 30/11/2017 10:20:06

SieurVLD
Membre
Inscription : 23/01/2016
Messages : 13

Re : API pour afficher le gestionnaire de médias dans une fenêtre popup

Super tout fonctionne parfaitement.
Merci pour la réactivité !

Hors ligne

#10 30/11/2017 17:12:53

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 830
Site Web

Re : API pour afficher le gestionnaire de médias dans une fenêtre popup

@Stéphane,

A propos de mediasManager.js:

Attention aux effets de bord avec la variable popupCss et des interactions avec d'autres scripts js
Il serait préférable de l'encapsuler dans la déclaration de mediasManager.

Mais ce n'est pas encore la solution parfaite AMHA.
Pour modifier l'aspect de la page, je trouve préférable d'ajouter une class à la balise <body> et de regrouper les nouvelles règles CSS dans plucss.css et theme.css

[== mediasManager.js ==]
construct: function(options) {
		this.opts = options;
		if(window.name == this.opts.windowName) {
			// ajout d'une class à <body> pour masquer les parties inutiles du gestionnaire de médias
			document.body.classList.add('mediasManager');
                ....
[== theme.css ==]
body.mediasManager .aside {
       display: none;
}
body.mediasManager .section .action-bar {
       left: 0;
       right: 0;
       margin-right: 0;
       margin-left: 0;
}
[== plucss.css ==]
/* ------- MEDIASMANAGER ------ */
body.mediasManager main.grid {
       margin-left: 0;
}
@media (min-width: 48rem) {
       body.mediasManager .col.med-offset-3 {
           margin-left: 0;
       }
       body.mediasManager .col.med-9 {
           width: 100%;
       }
}
@media (min-width: 64rem) {
       body.mediasManager .col.lrg-offset-2 {
           margin-left: 0;
       }
       body.mediasManager .col.lrg-10 {
               width: 100%;
       }
}

Je t'envoie le pull request mediasManagerCSS

P.S.: Peux-tu régler ton éditeur pour qu'il efface les espaces en fins de ligne.

Dernière modification par bazooka07 (30/11/2017 17:21:35)

Hors ligne

Pied de page des forums

A propos Nous soutenir Contact Twitter Google+
Copyright © 2006-2017 PluXml.org, tous droits réservés