Wombat 1.1.0
Ce plugin est inclus et déjà installé sur le Blank Theme.
Ce script permet d'installer une visionneuse de profils sur vos forums.
Avant l'installation
Activer les profils simples
Wombat ne fonctionne pas avec l’affichage des profils avancés de ForumActif, tout simplement parce que leur template ne sont pas accessibles.
Pour les désactiver, il faudra passer par votre panneau d’administration et naviguer jusqu’aux options générales des profils : Utilisateurs & Groupes > Profils > Options générales et désactiver le profil avancé.
Installation
L’installation de Wombat nécessite de modifier les templates général/overall_footer_end et profil/profile_view_body, et aussi d'ajouter quelques lignes de CSS.
Templates
Nous commencerons par ajouter le script dans le template général/overall_footer_end, juste avant la fermeture de la balise </body>.
<!-- Wombat.js -->
<script src="https://cdn.jsdelivr.net/gh/caezd/wombat/dist/wombat.min.js"></script>
<!-- Script qui permet d'initialiser le plugin -->
<script>
(function() {
new Wombat();
})();
</script>Puis, dans le template profil/profile_view_body, ajoutez id="wombat" comme ceci :
<div class="userProfile" id="wombat">
contenu du profil
...
</div>Tout ce qui sera compris dans la balise avec l’ID wombat sera affiché dans la visionneuse de profile.
Customisation du HTML
Pour le Blank Theme, le profil est affiché tel quel sous forme de pop-up. Il est tout à fait possible de customiser la visionneuse et avoir une apparence différente entre l’affichage rapide et la page de profil dédiée.
Pour une apparence totalement unique, vous pouvez doubler le code dans votre template et gérez ainsi deux apparences. Pour caché le code en double, il suffit d’ajouter l’attribut hidden.
<!-- Profil dans une page seule -->
<div class="userProfile">
contenu du profil
...
</div>
<!-- Profil wombat -->
<div class="userProfile-wombat" id="wombat" hidden="">
contenu du profil dans la visionneuse
...
</div>Seulement la deuxième partie sera affichée dans la visionneuse.
CSS
Le CSS est relativement simple et se compose d’une class de fond (pour atténuer le fond) et d’une class pour le pop-up. A vous de l’adapter à vos besoins.
/* Fond atténué */
.wombat-overlay {
position: fixed;
z-index: 990;
inset: 0;
opacity: 0;
visibility: hidden;
width: 100%;
height: 100%;
transition: 0.2s opacity ease;
background: var(--neutral);
}
/* effet de transition du fond atténué */
.wombat-overlay.open {
opacity: .5;
visibility: visible;
}
/* Fenêtre du popup */
.wombat-aside {
position: fixed;
inset: 0;
margin: auto;
z-index: 999;
transition: 0.2s all ease;
visibility: hidden;
opacity: 0;
width: 90%;
max-width: 800px;
box-shadow: var(--shadowBox);
border-radius: 10px;
height: max-content;
transform: translateX(-20%);
}
/* effet de transition pour la fenêtre */
.wombat-aside.open {
opacity: 1;
transform: translateX(0);
visibility: visible;
}Options
Wombat vient avec quelques options qui vous permettent un contrôle un peu plus pointu. Elles doivent être déclarée avec l’initialisation du script qu’on a déplacé dans le template général/overall_footer_end, comme ceci :
new Wombat({
option: valeur
});displayOnLoad
Permet d’appliquer un style display particulier sur le profil une fois qu’il sera chargé dans le volet.
string| Par défaut "block".
afterLoad
Cette fonction sera appelée en callback une fois le profil chargé dans le volet, vous permettant ainsi d’appliquer un script supplémentaire pour, par exemple, modifier la structure des champs de profils, appliquer une couleur de groupe quelque part, etc. Le premier argument de la fonction est un HTMLElement ciblant le volet dans lequel le profil est ajouté. Le deuxième argument cible directement l’obfuscateur (.wombat-overlay) derrière, au besoin.
function|(aside, overlay)
/* exemple */
new Wombat({
afterLoad: function(aside, overlay) {
var color = aside.querySelector('#rang').style.color;
aside.querySelector('.rank-header').style.backgroundColor = color;
}
});