Messenger

Introduction à Forumactif Messenger

Forumactif Messenger est un plugin de messagerie instantanée, créé par AngeTuteur. Il retranscrit les messages postés sur le forum en temps réel dans une fenêtre conçue comme une application de conversation, à l’image de Discord ou Facebook Messenger.

En fonction des vos paramètres, il est possible de parcourir tout un forum dans FAM (Forumactif Messenger) et d’échanger avec les autres membres en direct sans avoir à rafraîchir votre page.
Ce plugin est intégré au Blank Theme.




Support
Aucun support n'est disponible pour ce plugin. N'ayant pas de contact avec l'auteur original et au vu de la complexité du plugin, je ne pense pas avoir le temps et les ressources nécessaires pour aider toutes les personnes une à une.

English documentation
Presentation
Installation
Configuration

N'oubliez pas de créditer AngeTuteur comme étant l'auteur de ce plugin. Le Blank Theme lui offre une version modernisée et déjà paramétrée.

Ce libre-service possède très peu d'indication et de commentaire par faute de temps. En contrepartie, j'ai tenté de le rendre le plus lisible possible.

Prérequis

FAM est un plugin incroyable mais relativement complexe dans sa forme. Sa modification nécessite des connaissances moyennes à avancées. C'est pourquoi il est intégré directement dans le Blank Theme avec un paramétrage que je (Kim) estime correcte.

Utiliser le Blank Theme est donc nécessaire pour avoir le moins à faire.

Le code de base, celui de AngeTuteur, et la version modernisée du Blank Theme sont tout de même en libre-service pour quiconque voudrait expérimenter!
Dans le cas d'un forum aux templates totalement customisés, il faudra très certainement faire des modifications des sélecteurs liés aux différents fonctionnalités (retrouver les messages, la date, les pseudos, etc...).

Installation

FAM est essentiellement contenu dans un script à installer dans la page de gestion des scripts.

Script
Dirigez-vous dans Panneau d'administration > Modules > HTML & JAVASCRIPT/Gestion des codes Javascript
Assurez-vous d'activer la gestion des codes Javascript avant de créer un nouveau Javascript.

Mettez un titre et cochez sur toutes les pages.

Copiez ce code et enregistrez.

Customisation
Le plugin a été modifié avec un bon nombre de variable CSS pour simplifier sa modification. Vous pouvez donc accorder le plugin à votre thème ainsi :

Code:

-FAM-pluginBackground: #fafbfc;
    --FAM-chatBackground: #f2f4f9;

    --FAM-textareaBackground: #fafbfc;
    --FAM-msgBackground: #dce3f4;
    --FAM-myMsgBackground: #fafbfc;
    --FAM-quoteBackground: #8a9fd236;

    --FAM-gradient: linear-gradient(-90deg, rgba(250, 251, 252,1) 20%, rgba(250, 251, 252,0) 100%);
    --FAM-gradientTop: linear-gradient(180deg, rgba(242, 244, 249,1) 20%, rgba(242, 244, 249,0) 100%);
    --FAM-gradientBot: linear-gradient(0deg, rgba(242, 244, 249,1) 20%, rgba(242, 244, 249,0) 100%);

    --FAM-border: 1px solid #dce3f4;
    --FAM--shadowBox: 0 0 20px var(--contrastLight);

    --FAM-accentClr: #4B57C5;
    --FAM-secondClr: #333c92;
    --FAM-fontClr: #232657;
    --FAM-fontLightClr: #484a65;
    --FAM-linkClr: #4B57C5;
    --FAM-titleColor: #171938;
    --FAM-buttonsClr: #171938;

    --FAM-fontSize: 14px;
    --FAM-titleFont: 'Open Sans';
    --FAM-titleSize: 24px;

    --FAM-light: white;
    --FAM-dark: black;

    --FAM-windowSize: 750px;

Version sombre du Blank Theme :

Code:

--FAM-pluginBackground: #1e212a;
    --FAM-chatBackground: #181a21;
    --FAM-textareaBackground: #1e212a;
    --FAM-msgBackground: #0B0E17;
    --FAM-myMsgBackground: #1e212a;

    --FAM-quoteBackground: rgba(255,255,255,0.04);

    --FAM-gradient: linear-gradient(-90deg, rgba(30,33,42,1) 20%, rgba(30,33,42,0) 100%);
    --FAM-gradientTop: linear-gradient(180deg, rgba(24, 26, 33,1) 20%, rgba(24, 26, 33,0) 100%);
    --FAM-gradientBot: linear-gradient(0deg, rgba(24, 26, 33,1) 20%, rgba(24, 26, 33,0) 100%);

    --FAM-border: 1px solid #313543;
    --FAM-shadow: 0 0 20px var(--neutralDark);

    --FAM-accentClr: #7583ff;
    --FAM-secondClr: #333c92;
    --FAM-fontClr: #c7c5cd;
    --FAM-fontLightClr: #9a96a3;
    --FAM-linkClr: #7583ff;
    --FAM-titleClr: #f0f0f8;
    --FAM-buttonsClr: #E5E5E5;

CSS (facultatif)
Il est possible d'apporter des modifications plus poussées en accédant au CSS.
Le script donné ci-dessus contient déjà le CSS utile à l'affichage du plugin mais il est difficile d'accès car très condensé et illisible. Vous trouverez deux fichiers pour séparer Javascript et CSS :

Script sans CSS
CSS Messenger

Il est fortement conseillé d'utiliser un éditeur de code pour modifier le CSS du plugin (sublimeText pour débutant, VScode pour amateur et +).

Héberger CSS
Le CSS seul du plugin est trop lourd pour être mis dans la feuille CSS de Forumactif. Il faudra l'héberger sur une autre plateforme. Comment héberger du CSS extérieur ?

OPTIONS

AngeTuteur a mis en place un bon nombre de paramètre pour personnaliser son plugin. Toute la documentation de configuration est disponible ici.

Pour le Blank Theme, certaine options ont été retirés (redimensionnement de l'onglet, notification sonore, thème personnalisé, ...) car elles sont devenues obsolètes avec la nouvelle version modernisée.

Voici quelques une mise en avant :

chat_page
Détermine la page initiale chargée dans le plugin. Par défaut, laisser vide '' charge toutes les catégories du forum. Vous pouvez changer cette option en liant une catégorie, un forum, ou un sujet de la sorte :
chat_page : '/f15-plugins-and-stuff'

chat_permission
Autorise l'accès au plugin au staff 'staff', membre 'member' ou invité 'all'

main_title
Change le titre principale du plugin à son initialisation.

initial_tabs
Permet d'afficher plusieurs onglet à l'initialisation du plugin.

Code:

initial_tabs : [
  {
    url : 'http://fmdesign.forumotion.com/f1-general-discussion',
    title : 'General Discussion'
  }
],

Ajouter plusieurs onglet :

Code:

initial_tabs : [
  {
    url : '/f9-community',
    title : 'Community'
  },

  {
    url : '/f15-plugins-and-stuff',
    title : 'Plugins and stuff'
  },

  {
    url : '/f3-support-help',
    title : 'Support'
  }
],

Il est également possible de lier des page HTML custom!

Code:

{
  html : '<iframe id="FAM-chatbox" src="/h8-fr-structures"></iframe>',
  title : 'Chatbox'
},

language
Changer tout les textes du plugin selon vos envies est très simple. Les textes sont tous traduit en français.

Code:

lang : {
        loading : 'Chargement',
        idle : 'Forumactif Messenger est en veille.<br> Cliquez pour reprendre.',
        message_notif_singular : '$N nouveau message',
        message_notif_plural : '$N nouveau messages',
        new_messages : 'Nouveaux Messages',
...