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

SieurVLD · novembre 2017

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.

Stéphane · novembre 2017

Bonjour

Non, mais je te vais te faire ça.

bazooka07 · novembre 2017

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.

Stéphane · novembre 2017

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:
[list=*]
[*]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)[/*]
[/list]

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

SieurVLD · novembre 2017

Merci c'est vraiment nickel !

SieurVLD · novembre 2017

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>.

bazooka07 · novembre 2017

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

Stéphane · novembre 2017

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/master/core/lib/mediasManager.js

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

SieurVLD · novembre 2017

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

bazooka07 · novembre 2017

@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.

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

Réponses