Intégration du suivi de pages (version 2.15.0 et supérieures)

Le plugin n'apporte aucune intégration par défaut des services "Mes pages suivies" et "Mes abonnements" ni du centre de notifications.

Il fournit en revanche plusieurs helper JS permettant leur intégration de votre charte graphique.

  1. Suivre une page
  2. Modifier les préférences d'abonnement aux pages
    1. Se désabonner
    2. Modifier les préférences de notification
    3. Exemple
  3. Récupérer les pages non lues
  4. Marquer une page comme lue

Suivre une page

Un helper JS permet d'insérer un bouton sur vos pages pour s'abonner ou se désabonner à une page.

Vous devrez pour cela importer le fichier JS suivant

<script type="text/javascript" src="{$uri-prefix}/plugins/page-subscription/resources/js/AmetysFront/UserPageSubscriptions.{ametys:lang()}.js"/>

Les méthodes AmetysFront.UserPageSubscriptions.subscribePage et AmetysFront.UserPageSubscriptions.unsubscribePage de cet helper permet de respectivement s'abonner ou se désabonner à une page.
Elle prenne en arguments l'identifiant de la page et une fonction de callback (optionelle)

Pour le bon fonctionnement du helper, l'élément HTML contenant les boutons pour s'inscrire/désinscrire doit porter l'attribut data-ametys-subscription-page avec l'identifiant de la page.

Lors de l'appel à #subscribePage:

  • l'élément portant l'attribut data-ametys-subscription-page-role="subscribe" sera caché
  • l'élément portant l'attribut data-ametys-subscription-page-role="unsubscribe" sera affiché
  • l'élément portant l'attribut data-ametys-subscription-page-role="nb-subscribers" sera (si il existe) mis à jour avant le nombre d'abonné à la page

Exemple d'intégration

<div class="page-follow" data-ametys-subscription-page="{ametys:pageId()}">
            <button title="Suivre la page" onclick="AmetysFront.UserPageSubscriptions.subscribePage('{ametys:pageId()}', updateSubscriptionCb)"
                data-ametys-subscription-page-role="subscribe" type="button" class="unfollowed">
                <span class="text">Suivre la page</span>
                <span data-ametys-subscription-page-role="nb-subscribers" class="number"></span>
            </button>
            <button style="display: none;" title="Ne plus suivre la page"
                onclick="AmetysFront.UserPageSubscriptions.unsubscribePage('{ametys:pageId()}', updateSubscriptionCb)" data-ametys-subscription-page-role="unsubscribe" type="button"
                class="followed">
                <span class="text">Page suivie</span>
                <span class="number">
                    <span data-ametys-subscription-page-role="nb-subscribers"></span>
                </span>
            </button>
            
            <script>
            function updateSubscriptionCb(pageId, data)
            {
                let $wrapper = $j('[' + AmetysFront.UserPageSubscriptions.SUBSCRIPTION_PAGE_ATTR + '="' + pageId + '"]');
                if (data.nbSubscribers == 0)
                {
                    $wrapper.find(AmetysFront.UserPageSubscriptions.NB_SUBSCRIBERS_PAGE_SELECTOR).hide();
                }
                else
                {
                    $wrapper.find(AmetysFront.UserPageSubscriptions.NB_SUBSCRIBERS_PAGE_SELECTOR).show();
                }
            }
            
            $j(document).ready(function () {
                AmetysFront.UserPageSubscriptions.getSubscriptions("<xsl:value-of select="ametys:pageId()"/>", updateSubscriptionCb);
                
                // Mark as read
                AmetysFront.UserPageSubscriptions.markPageAsRead("<xsl:value-of select="ametys:pageId()"/>");
            });
            </script>
        </div>

Modifier les préférences d'abonnement aux pages

Pour modifier les préférences d'abonnements aux pages dans le service "Mes pages suivies",  le helper JS suivant doit être importé

<script type="text/javascript" src="{$uri-prefix}/plugins/page-subscription/resources/js/AmetysFront/UserPageSubscriptions.{ametys:lang()}.js"/>

2 méthodes peuvent être utilisée

Se désabonner

La méthode AmetysFront.UserPageSubscriptions.unsubscribe(uniqueId, subscriptionId, callback, skipConfirm) permet de supprimer l'abonnement à une page.

Les arguments sont:

  • uniqueId: identifiant unique permettant l’identifier l'élément HTML contenant l'ensemble des abonnements aux pages
  • subscriptionId: identifiant de l'abonnement
  • callback (optionnel): fonction de retour à appeler après la désinscription
  • skipConfirm (option): true pour ne pas afficher un message de confirmation avant la suppression

A la fin de l'appel, si un élément HTML avec l'attribut data-ametys-subscription-id="[subscriptionId]" existe il sera supprimé.

Modifier les préférences de notification

La méthode AmetysFront.UserPageSubscriptions.editSubscription(uniqueId, subscriptionId, frequency, broadcastChannels, callback) permet de modifier les préférences d'un abonnement de page.

Les arguments sont:

  • uniqueId: identifiant unique permettant l’identifier l'élément HTML contenant l'ensemble des abonnements aux pages
  • subscriptionId: identifiant de l'abonnement
  • frequency: fréquence de l'abonnement (DAILY, WEEKLY ou MONTHLY)
  • broadcastChannels: canaux de diffusion (EMAIL, INTRANET)
  • callback (optionnel): fonction de retour à appeler après la modification

A la fin de l'appel, si un élément HTML avec l'attribut data-ametys-subscription-id="[subscriptionId]" existe:

  • si un sous-élément avec data-ametys-subscription-page-role="frequency" existe, il sera mis à jour avec le libellé de la nouvelle fréquence (ex: "une fois par semaine")
  • si un sous-élément avec data-ametys-subscription-page-role="smart-frequency" existe, il sera mis à jour avec le libellé complet de la nouvelle fréquence (ex: "Hebdomadaire, chaque lundi à 10h)

Exemple

<li data-ametys-subscription-id="{$subscriptionId}" class="abonnement-item">
            <div class="infos">
                <a href="{resolver:resolve('page', page/@id, false)}"><xsl:value-of select="page"/></a>
            </div>
            <div class="actions">
                <button onclick="openMenu" aria-label="Ouvrir le menu" aria-expanded="false" type="button">
                    <i class="far fa-chevron-down"></i>
                </button>
                <div class="action-modal" style="display: none;">
                    <ul>
                        <li>
                            <button
                                onclick="AmetysFront.UserPageSubscriptions.editSubscription('{$uniqueId}', '{$subscriptionId}', null, ['SITE'])"
                                type="button">
                                Aucune alerte mail
                            </button>
                        </li>
                        <li>
                            <button
                                onclick="AmetysFront.UserPageSubscriptions.editSubscription('{$uniqueId}', '{$subscriptionId}', 'DAILY', ['SITE', 'MAIL'])"
                                type="button">
                                Une fois par jour
                            </button>
                        </li>
                        <li>
                            <button
                                onclick="AmetysFront.UserPageSubscriptions.editSubscription('{$uniqueId}', '{$subscriptionId}', 'WEEKLY', ['SITE', 'MAIL'])"
                                type="button">
                                Une fois par semaine
                            </button>
                        </li>
                        <li>
                            <button
                                onclick="AmetysFront.UserPageSubscriptions.editSubscription('{$uniqueId}', '{$subscriptionId}', 'MONTHLY', ['SITE', 'MAIL'])"
                                type="button">
                                Une fois par mois
                            </button>
                        </li>
                        <li>
                            <button onclick="AmetysFront.UserPageSubscriptions.unsubscribe('{$uniqueId}', '{$subscriptionId}')" type="button">
                                Supprimer
                            </button>
                        </li>
                    </ul>
                </div>
               <span data-ametys-subscription-page-role="frequency">Une fois par jour</span>
            </div>
        </li>

Récupérer les pages non lues

Les pages non lues sont les pages suivies par l'utilisateur courant, ayant été mises à jour et non consultées par l'abonné depuis leur dernière mise à jour.

Pour récupérer les pages non lues (et les signaler par exemple par un point rouge), vous aurez besoin du même helper

<script type="text/javascript" src="{$uri-prefix}/plugins/page-subscription/resources/js/AmetysFront/UserPageSubscriptions.{ametys:lang()}.js"/>

La méthode AmetysFront.UserPageSubscriptions.getUnreadPages(selector, callback) permet de récupérer les pages non lues

Les arguments sont:

  • selector: sélecteur jquery permettant d'identifiant l'élément HTML contenant la liste des pages suivies
  • callback: (optionnel) function de retour à appeler. La fonction reçoit un tableau des pages non lues avec pour chacune d'elle l'identifiant, le titre, l'auteur de la mise à jour et la date de dernière mise à jour.

A la fin de l'appel, chaque l'élément HTML avec l'attribut data-ametys-page-notification-id correspond à l'identifiant d'une page non lue sera affiché et mis à jour avec:

  • si un sous-élément avec data-ametys-page-notification-role="date" existe, il sera mis à jour avec la date de dernière mise à jour
  • si un sous-élément avec data-ametys-page-notification-role="author-name" existe, il sera mis à jour avec le nom de l'auteur de la mise à jour
  • si un élément <img data-ametys-page-notification-role="author-img"/>  existe, son attribut "src" sera mis à jour avec l'url de l'avatar de l'auteur de la mise à jour

Exemple permettant la mise à jour automatique de notification de page

<div class="ametys-abonnement__circle" data-ametys-page-notification-id="{page/@id}" style="display: none">
            <div class="ametys-abonnement__last-edit">
                <span class="ametys-abonnement__last-edit__date" data-ametys-page-notification-role="date"></span>
                <div class="ametys-abonnement__last-edit__user">
                    <img alt="" data-ametys-page-notification-role="author-img"/>
                    <div class="ametys-abonnement__last-edit__user__info">
                        <span class="ametys-abonnement__last-edit__user__info__name" data-ametys-page-notification-role="author-name"></span>
                        <span class="ametys-abonnement__last-edit__user__info__action">
                            a modifié la page
                        </span>
                    </div>
                </div>
            </div>
        </div>

Marquer une page comme lue

TODO

Retour en haut

Page Subscription