[SCRIPT] Afficher des fenêtres de même style que celles d'Eklablog

Pour utiliser Javascript, il faut au préalable demander aux responsables de l'activer sur vos blog, en passant par le formulaire de contact.

Attention : nous allons utiliser le système de fenêtres d'Eklablog : les codes ne fonctionnent donc que sur Eklablog, et seront éventuellement à adapter si Eklablog effectue des modifications.

Aujourd'hui on va afficher des fenêtres personnalisés.

Nous avons vu dans un article précédent (Mon premier code Javascript - afficher un message) qu'il était possible d'utiliser la fonction alert pour afficher un message simple.

Nous allons créer une fonction plus complète pour :

• afficher un titre dans la barre bleue en haut de la fenêtre ;
• pouvoir écrire du HTML dans le contenu (image, mis en forme...) ;
• modifier la taille de la fenêtre.

Cliquez sur le bouton ci-dessous pour afficher la fenêtre que l'on obtiendra :

Vous devriez voir ceci à l'écran :

On note la présence du titre et le contenu avec une image et du texte en gras.

Un bouton OK a été ajouté pour reproduire le comportement de la fenêtre simple affiché avec la fonction alert.

Ces fenêtres sont intéressantes car elle sont repositionnables et restent affichées lorsqu'on fait défiler la page.

Ce sont en fait les mêmes fenêtres qui sont utilisées par exemple pour les écrans d'édition d'articles, la plupart des fenêtres de configuration...

Voici le code minimal pour créer une fenêtre :

  Addons.load("Windows", function(){
    b=Windows.add();   // Nouvelle fenêtre
    b.setTitle("Test de fenêtre");  // Titre
    b.setContent("Bonjour à <strong>tous</strong> !");  // Contenu
    b.generate();  // Génère la fenêtre
  });

Pour pouvoir facilement créer une fenêtre, on peut créer une fonction réutilisable :

function EklaWindowDisplay(html,title,width,height)
{
  var b=null;
  Addons.load("Windows", function(){
    b=Windows.add();   // Nouvelle fenêtre
    b.setTitle((title==undefined) ? "" : title);  // Titre
    html=html.replace(new RegExp("\\[winid\\]",'ig'),b.id); // Remplace [windid] par l'id de fenêtre
    b.setContent(html);  // Contenu
    if (width!=undefined) {b.setWidth(width);}  // Largeur
    b.generate();  // Génère la fenêtre
    if (height!=undefined) {   // Si largeur définie
      b.setHeight(height)        // Modifie la largeur
      b.center();                // Centre la fenêtre
    }
  });
  return b; // Renvoit la fenêtre
}

Je vous invite à ranger cette fonction dans un module comme expliqué ici : Ranger ses fonctions Javascript dans un module masqué.

 Il suffit ensuite d'appeler cette fonction en passant en paramètre :

• le code HTML du contenu ;
• le titre ;
• la largeur en pixels ;
• la hauteur en pixels.

Les paramètres sont optionnels.
La hauteur s'adapte automatiquement au contenu.

Voici un exemple d'utilisation :

var html="<p style=\"text-align: center;\">" +
  "<img style=\"display: block; margin-left: auto; margin-right: auto;\" src=\"https://ekladata.com/gerer-mon-blog.eklablog.fr/perso/images/divers/avatar.jpg\" alt=\"\" width=\"48\" height=\"42\" />" +
  "&nbsp;Bonjour, ceci est une fen&ecirc;tre personnalis&eacute;e <strong>avec une image</strong> centrée.&nbsp;</p>";
myWin=EklaWindowDisplay(html, "Test de fenêtre",200);

Notez que le HTML est une chaîne de caractères entre guillemets (").
Pour y écrire des guillemets, il faut remplacer " par \"
On évite également les retours à la ligne (utilisez <br /> pour un retour à la ligne en HTML).

Pour faciliter la lecture, vous pouvez écrire une chaîne de caractères sur plusieurs lignes en concaténant plusieurs chaînes (chacune délimitée par des guillemets) avec le signe +.

Il manque un bouton OK, même si on peut fermer la fenêtre avec la croix en haut à droite.

Pour ajouter un bouton, il faut l'intégrer dans le code HTML.
Ce bouton aura pour action de supprimer la fenêtre avec la fonction del.
Voici comment l'ajouter :

var html="<p style=\"text-align: center;\">" +
  "<img style=\"display: block; margin-left: auto; margin-right: auto;\" src=\"https://ekladata.com/gerer-mon-blog.eklablog.fr/perso/images/divers/avatar.jpg\" alt=\"\" width=\"48\" height=\"42\" />" +
  "&nbsp;Bonjour, ceci est une fen&ecirc;tre personnalis&eacute;e <strong>avec une image</strong> centrée.&nbsp;</p>";
html=html+"<div style=\"text-align:center\">" + 
  "<input type=\"button\" value=\"OK\" onclick=\"Windows.del([winid]);\" style=\"width:100px;\"/>" +
  "</div>";
myWin=EklaWindowDisplay(html, "Test de fenêtre",200);

J'ai ajouté une ligne avec un input de type « button ».

Dans l'événement onclick de ce bouton on exécute : Windows.del([winid]);

Dans la fonction EklaWindowDisplay, on peut voir un remplacement de [winid] par l'identifiant de la fenêtre en cours de génération.

En effet, avant l'appel à la fonction, on ne connaît pas l'identifiant de la fenêtre.
Il suffit de mettre [winid] dans le html et il sera remplacé par l'identifiant réél.

Voilà pour une première fenêtre.

D'autres articles viendront certainement pour détailler d'autres possibilités.