Système de sujets favoris

Un petit système de favoris à afficher, par exemple, dans votre barre de gauche (si votre forum en possède une) ou à l'emplacement de votre choix. À savoir que le CSS de base fourni est plutôt adapté à un emplacement sur la barre de gauche.

Méthode A: les favoris de ForumActif

Les plus:
- Utilisation d'une fonctionnalité native, qui requiert moins de code (de javascript en l'occurrence)
- Est lié à votre compte forum, les favoris s'afficheront donc peu importe l'appareil ou le navigateur que vous utilisez (si vous changez entre-temps)

Les moins:
- L'utilisateur doit passer par le menu Plus! du sujet voulu et cliquer sur "Ajouter dans ses favoris"; du moins, par défaut
- Je n'ai pas essayé de voir ce qui se passerait si le nombre de sujets favoris devait faire apparaître une deuxième page dans les favoris; dans ce cas-là, je pense que la première page seulement s'affichera

modernBB :

Comme spécifié ci-dessus, placez le code suivant où vous le souhaitez: il contiendra la liste des favoris:

Code:

<div class="leftbar">
  <div class="leftbar_placeholder"></div>
  
  <div class="favorites">
    <div class="favorites_title"><a href="/search?search_id=favouritesearch">Mes favoris</a> <span class="mdi mdi-information-variant-circle"></span></div>
    <div class="favorites_list"></div>
  </div>
</div>
  
<script type="text/javascript">
$('.favorites_list').load('/search?search_id=favouritesearch form[action="/search?search_id=favouritesearch"] table.table1 tbody tr:lt(10)');
</script>

Dans le template overall_header, ajouter dans le < head > la ligne suivante (sert à 'installer' Material Design Icons):

Code:

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.2.96/css/materialdesignicons.min.css" rel="stylesheet" />

Ajouter le CSS suivant à votre feuille de style:

Code:

/* le root contient les deux couleurs principales du code, modifiables à souhait */
:root {
    --main-color: #242424;
    --secondary-color: #8a8a8a;
}

/* la div englobant le tout */
.favorites {
    padding: 4% 8%;
}

/* le titre "Mes favoris" */
.favorites_title {
    margin-top: 5%;
    margin-bottom: 3%;
    text-align: center;
    font-size: 12pt;
    font-weight: 500;
    color: var(--main-color);
}

/* l'icône d'info */
.favorites_title span {
    color: var(--secondary-color);
    position: relative;
}

/* l'infobulle qui s'affiche au hover de l'icône d'info pour informer du fonctionnement de l'ajout de favoris */
.favorites_title span:hover::after {
    content: 'Pour ajouter un sujet dans vos favoris, allez sur le sujet en question, cliquez sur "Plus!" puis sur "Ajouter à ses favoris"';
    position: absolute;
    width: 200px;
    background-color: var(--main-color);
    color: white;
    padding: 10px;
    border-radius: 4px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 10pt;
    left: 20px;
    text-align: justify;
}

/* la div de la liste des favoris */
.favorites_list {
    max-height: 45vh;
    overflow-y: auto;
}

/* modification de la scrollbar qui apparaîtra si la liste des favoris est (trop) longue */
.favorites_list::-webkit-scrollbar {
  width: 3px;
}

.favorites_list::-webkit-scrollbar-thumb {
  background-color: #dadada;
}

.favorites_list:hover::-webkit-scrollbar-thumb {
  background-color: darkgrey;
}

/* on affiche un pitit texte s'il n'y a aucun favoris */
.favorites_list:empty::before {
    content: "Vous n'avez actuellement aucun sujet en favoris.";
    text-align: center;
    display: block;
    font-size: 10pt;
    color: #8F8F8F;
    font-weight: 400;
}

/* je recommande vivement de ne pas toucher au code ci-dessous pour le bon affichage du code - n'y toucher que si vous savez ce que vous faites, sinon ça risque de rendre bizarre */
.favorites_list tr {
    display: block;
    background-color: transparent;
    margin: 3% 2%;
}

.favorites_list tr > td:nth-child(1), .favorites_list tr > td:nth-child(3), .favorites_list tr > td:nth-child(4), .favorites_list tr > td:nth-child(6), .favorites_list tr > td:nth-child(7), .favorites_list tr > td:nth-child(8) {
    display: none !important;
}

.favorites_list tr > td.mobile-hidden:not(.posts) {
    display: block;
}

.favorites_list tr > td.mobile-hidden:not(.posts) a {
    font-weight: 400;
    font-size: 10pt;
    color: var(--main-color);
}

.favorites_list tr > td.posts.mobile-hidden * {
    font-size: 9pt;
    font-weight: 500;
    letter-spacing: .25pt;
}

.favorites_list tr > td.posts.mobile-hidden > span::before {
    content: "Auteur: ";
    font-weight: 400;
    text-transform: uppercase;
    font-size: 8pt;
    color: var(--secondary-color);
}

Méthode B: les favoris en localStorage

Les plus:
- Plus personnalisable
- Aucune limite d'affichage (par rapport à la méthode A)
- Un simple click sur l'icône de cœur près des titres des sujets suffit à ajouter ou supprimer un favoris, sans passer par la fonctionnalité de FA

Les moins:
- La fonctionnalité est strictement liée au navigateur utilisé: le tout disparaîtra si vous utilisez un autre navigateur et/ou un autre appareil
- Code légèrement plus gourmand (notamment en javascript)

modernBB :

Comme spécifié plus haut, insérez le code suivant là où vous le souhaitez:

Code:

<div class="leftbar">
  <div class="leftbar_placeholder"></div>
  
  <div class="favorites">
    <div class="favorites_title"><a>Mes favoris</a> <span class="mdi mdi-information-variant-circle"></span></div>
    <div class="favorites_list"></div>
  </div>
</div>

Maintenant, direction la Gestion des codes JavaScript dans votre panel admin. Créez un nouveau script:
Titre: Favorites - 1
Placement: Sur toutes les pages
Code Javascript:

Code:

$(function() {
  var $favs = localStorage.getItem("favs");
  $('.favorites_list').html($favs);
  
  $('#addtofav').on('click', function() {
    var $tlink = $('.sub-header-info h1.page-title a').attr('href');
    var $tname = $('.sub-header-info h1.page-title a').text();

    if(!$('.favrow[data-link="' + $tlink + '"]').length) {
        $('.favorites_list').append('<div class="favrow" data-link="' + $tlink + '"><a href="' + $tlink + '">' + $tname + '</a><span class="favremove mdi mdi-close-thick"></span></div>');
        var $div = $('.favorites_list').html();
        localStorage.setItem("favs", $div);
        $.getScript( "XXX" );
    } else {
    $('.favrow[data-link="' + $tlink + '"]').remove();
    var $div = $('.favorites_list').html();
    localStorage.setItem("favs", $div);
    }
  });
});

Enregistrez. Créons désormais un deuxième code JavaScript:
Titre: Favorites - 2
Placement: Sur toutes les pages
Code Javascript:

Code:

$(function() {
  $('.favremove').on('click', function() {
    $(this).parent().remove();
    var $div = $('.favorites_list').html();
    localStorage.setItem("favs", $div);
  });
});

Enregistrez également. Rendez-vous sur la page Gestion des codes JavaScript à nouveau, celle qui présente la liste de vos codes JS de votre forum. Trouvez le script Favorites - 2 que l'on vient de créer, puis dans la colonne URL, copiez la partie se trouvant après le slash (/). Dans mon cas, il s'agit de 11080.js. Allons maintenant modifier le code JavaScript crée au début: Favorites - 1. Remplacez la partie XXX dans la ligne $.getScript( "XXX" ); par ce que vous venez de copier. Dans mon cas, cela donne: $.getScript( "11080.js" );.

Maintenant, rendez-vous dans le template viewtopic_body. Trouvez la partie suivante:

Code:

<!-- BEGIN switch_push_direct_send -->&nbsp;<span id="push-bell" style="color:goldenrod;" title="{switch_push_direct_send.L_PUSH_SEND}" class="ion-android-notifications"></span><!-- END switch_push_direct_send -->

Insérez juste après, le code suivant:

Code:

<span id="addtofav" class="mdi mdi-heart"></span>

Pour finir, le CSS facultatif à insérer dans votre feuille de style, si vous le souhaitez (pour avoir une petite base):

Code:

/* le root contient les deux couleurs principales du code, modifiables à souhait */

:root {
    --main-color: #242424;
    --secondary-color: #8a8a8a;
}

/* le coeur près des titres des sujets; utilisé pour ajouter (ou supprimer) un favoris */
span#addtofav {
    color: #d02f82;
    font-size: 17pt;
    vertical-align: middle;
    cursor: pointer;
}

/* la div englobant le tout */
.favorites {
    padding: 4% 8%;
}

/* le titre "Mes favoris" */
.favorites_title {
    margin-top: 5%;
    margin-bottom: 3%;
    text-align: center;
    font-size: 12pt;
    font-weight: 500;
    color: var(--main-color);
}

/* l'icône d'info */
.favorites_title span {
    color: var(--secondary-color);
    position: relative;
}

/* l'infobulle qui s'affiche au hover de l'icône d'info pour informer du fonctionnement de l'ajout de favoris */
.favorites_title span:hover::after {
    content: 'Pour ajouter un sujet dans vos favoris, allez sur le sujet en question puis cliquez sur le coeur près du titre du sujet.';
    position: absolute;
    width: 200px;
    background-color: var(--main-color);
    color: white;
    padding: 10px;
    border-radius: 4px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 10pt;
    left: 20px;
    text-align: justify;
}

/* modification de la scrollbar qui apparaîtra si la liste des favoris est (trop) longue */
.favorites_list::-webkit-scrollbar {
  width: 3px;
}

.favorites_list::-webkit-scrollbar-thumb {
  background-color: #dadada;
}

.favorites_list:hover::-webkit-scrollbar-thumb {
  background-color: darkgrey;
}

/* on affiche un pitit texte s'il n'y a aucun favoris */
.favorites_list:empty::before {
    content: "Vous n'avez actuellement aucun sujet en favoris.";
    text-align: center;
    display: block;
    font-size: 10pt;
    color: var(--secondary-color);
    font-weight: 400;
}

/* la div qui englobe chaque sujet des favoris, à l'unité */
.favrow {
    font-size: 10pt;
    max-width: 100%;
    position: relative;
    margin: 2% 0;
}

/* petite icône de cercle/point de taille moyenne précédant chaque sujet des favoris */
.favrow::before {
    content: "\F09DE";
    font-family: 'Material Design Icons';
    opacity: .66;
    display: inline-block;
    float: left;
}

/* css personnalisant l'apparence du lien de chaque sujet des favoris */
.favrow a {
    display: inline-block;
    width: 80%;
    color: var(--main-color);
}

/* ^ en hover */
.favrow a:hover {
    font-weight: 500;
}

/* la croix permettant de supprimer un sujet de vos favoris, à leur droite */
span.favremove {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    cursor: pointer;
    color: black;
    opacity: .33;
    transition: all .25s ease-in-out;
}

/* ^ en hover */
span.favremove:hover {
    opacity: 1;
}

/* ^^ infobulle s'affichant en hover de la croix */
span.favremove:hover::after {
    content: 'Supprimer le favoris';
    position: absolute;
    width: max-content;
    background-color: var(--main-color);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 9pt;
    left: 20px;
    text-align: justify;
    transform: translateY(-3px);
}

Merci de me créditer (Jei) quelque part sur le forum: footer, sujet dédié, PA ou autre.

modernBB