plugin does not provide default integration of the "My Followed Pages" and "My Subscriptions" services, nor of the Notification Center.
It does, however, provide a number of JS helpers for integrating them into your graphic charter.
Follow a page
A JS helper lets you insert a button on your pages to subscribe or unsubscribe to a page.
To do this, you need to import the following JS file
<script type="text/javascript" src="{$uri-prefix}/plugins/page-subscription/resources/js/AmetysFront/UserPageSubscriptions.{ametys:lang()}.js"/>The methods AmetysFront.UserPageSubscriptions.subscribePage and AmetysFront.UserPageSubscriptions.unsubscribePage of this helper allows you to subscribe or unsubscribe to a page.
It takes as arguments the page identifier and a callback function (optional)
For the helper to function correctly, the HTML element containing the register/unregister buttons must carry the attribute data-ametys-subscription-page with the page identifier.
When calling #subscribePage:
- the element carrying the data-ametys-subscription-page-role="subscribe" will be hidden
- the element carrying the data-ametys-subscription-page-role="unsubscribe" will be displayed
- the element carrying the data-ametys-subscription-page-role="nb-subscribers" will (if it exists) be updated before the number of subscribers to the page
Example of integration
<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>Modify page subscription preferences
To modify page subscription preferences in the "My followed pages" service, the following JS helper must be imported
<script type="text/javascript" src="{$uri-prefix}/plugins/page-subscription/resources/js/AmetysFront/UserPageSubscriptions.{ametys:lang()}.js"/>2 methods can be used
Unsubscribe
The method AmetysFront.UserPageSubscriptions.unsubscribe(uniqueId, subscriptionId, callback, skipConfirm) to unsubscribe from a page.
The arguments are:
- uniqueId: unique identifier used to identify the HTML element containing all page subscriptions
- subscriptionId: subscription identifier
- callback (optional): return function to call after unsubscription
- skipConfirm (option): true to avoid displaying a confirmation message before deletion
At the end of the call, if an element HTML with the attribute data-ametys-subscription-id="[subscriptionId]" exists, it will be deleted.
Modify notification preferences
The method AmetysFront.UserPageSubscriptions.editSubscription(uniqueId, subscriptionId, frequency, broadcastChannels, callback) allows you to modify the preferences of a page subscription.
The arguments are:
- uniqueId: unique identifier used to identify the HTML element containing all page subscriptions
- subscriptionId: subscription identifier
- frequency: subscription frequency (DAILY, WEEKLY or MONTHLY)
- broadcastChannels: broadcast channels (EMAIL, INTRANET )
- callback (optional): return function to call after modification
At the end of the call, if an element HTML with the attribute data-ametys-subscription-id="[subscriptionId]" exists:
- if a sub-element with data-ametys-subscription-page-role="frequency" exists, it will be updated with the new frequency label (e.g. "once a week").
- if a sub-element with data-ametys-subscription-page-role="smart-frequency" exists, it will be updated with the full wording of the new frequency (e.g. "Weekly, every Monday at 10 a.m.)
Example
<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>Retrieve unread pages
Unread pages are pages followed by the current user, which have been updated and not consulted by the subscriber since their last update.
To retrieve unread pages (and mark them with a red dot, for example), you'll need the same helper
<script type="text/javascript" src="{$uri-prefix}/plugins/page-subscription/resources/js/AmetysFront/UserPageSubscriptions.{ametys:lang()}.js"/>The method AmetysFront.UserPageSubscriptions.getUnreadPages(selector, callback) retrieves unread pages
The arguments are:
- selector: jquery selector used to identify the HTML element containing the list of tracked pages.
- callback: (optional) return function to call. The function receives an array of unread pages, each with identifier, title, author of update and date of last update.
At the end of the call, each element HTML with the attribute data-ametys-page-notification-id corresponds to the identifier of an unread page will be displayed and updated with it:
- if a sub-element with data-ametys-page-notification-role="date" exists, it will be updated with the last update date.
- if a sub-element with data-ametys-page-notification-role="author-name" exists, it will be updated with the name of the author of the update
- if an element <img data-ametys-page-notification-role="author-img"/> exists, its "src" attribute will be updated with theurl avatar of the author of the update.
Example of automatic page notification update
<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>Mark a page as read
TODO
Back to top