Lava Shortcode - Follow Icon

Description

Add a clickable icon that allows users to follow any entity.

Documentation

Basic Usage:

{[ followicon entitytypeguid:'GUID' entityguid:'GUID' purposekey:'like' isfollowed:'true' ]}
    <div class="followitem">
        <i class="followicon"></i>
    </div>
{[ endfollowicon ]}

Shortcode Options

• entitytypeguid – The Guid of the Entity Type.
• entityguid – The Guid of the Entity.
• purposekey – An optional purpose key.
• isfollowed (false) – A boolean to define if the entity is followed by the current person.
• suppresswarnings (false) – Optionally, set to true to hide alerts when security and other errors are triggered.

Output

The output of the shortcode is a followicon div with a class of isfollowed that is added when the entity is followed.

<div class="followicon js-followicon" data-entitytype="{{entitytypeguid}}" data-entity="{{entityguid}}" data-followed="{{isfollowed}}">
    <!-- Content -->
</div>

Security Configuration

To use this shortcode, some security changes are required to allow all authenticated users to follow entities.

1. Go to Admin Tools > Security > REST Controllers
2. Locate the row "Followings", and open the REST Controller Actions detail page.
3. From this screen locate the following methods, and allow "All Authenticated Users" for the edit verb on the following methods:
   • DELETE api/Followings/{entityTypeGuid}/{entityGuid}?purposeKey={purposeKey}
   • POST api/Followings/{entityTypeGuid}/{entityGuid}?purposeKey={purposeKey}

No other security changes are recommended.

Markup

{% if CurrentPerson %}
    {% assign entitytypeguid = entitytypeguid | Trim %}
    {% assign entityguid = entityguid | Trim %}
    {% assign entitytypeid = entitytypeid | Trim %}
    {% assign entityid = entityid | Trim %}
    {% if entitytypeguid != '' and entityguid != '' %}
    {% assign entitytype = entitytypeguid %}
    {% assign entity = entityguid %}
    {% else %}
    {% assign entitytype = entitytypeid %}
    {% assign entity = entityid %}
    {% endif %}
    {% assign purposekey = purposekey | Trim %}
    {% assign suppresswarnings = suppresswarnings | AsBoolean %}
    {% assign isfollowed = isfollowed | AsBoolean %}
    
    {% if entitytype != '' and entity != '' %}
        <div class="followicon js-followicon {% if isfollowed %}isfollowed{% endif %}" data-entitytype="{{ entitytype }}" data-entity="{{ entity }}" {% if purposekey != '' %}data-purpose-key="{{ purposekey }}"{% endif %} data-followed="{{ isfollowed }}">
            {{ blockContent }}
        </div>
    
        {% javascript id:'followicon' disableanonymousfunction:'true'%}
            $(document).ready(function() {
                // Use event delegation to bind the click event
                $(document).on('click', '.js-followicon', function(e) {
                    e.preventDefault();

                    var icon = $(this);
                    var entityType = icon.data('entitytype');
                    var entity = icon.data('entity');
                    var purpose = icon.data('purpose-key');
        
                    if (purpose) {
                        purpose = '?purposeKey=' + purpose;
                    } else {
                        purpose = '';
                    }
        
                    icon.toggleClass('isfollowed');
        
                    var actionType = icon.hasClass('isfollowed') ? 'POST' : 'DELETE';
        
                    $.ajax({
                        url: '/api/Followings/' + entityType + '/' + entity + purpose,
                        type: actionType,
                        statusCode: {
                            201: function() {
                                icon.attr('data-followed', 'true');
                            },
                            204: function() {
                                icon.attr('data-followed', 'false');
                            },
                            500: function() {
                                {% unless suppresswarnings %}
                                alert('Error: Check your Rock security settings and try again.');
                                {% endunless %}
                            }
                        },
                        error: function() {
                            icon.toggleClass('isfollowed');
                        }
                    });
                });
            });
        {% endjavascript %}
    {% else %}
        <!-- Follow Icon Shortcode is missing entitytype and/or entity. Note: Guids or Ids must be provided  -->
    {% endif %}
{% endif %}