Solution to allow a supporter to click on groups in a signup page to subscribe and unclick on clicked groups to unsubscribe.

signup_unsubscribe.html

    <!-- BEGIN Solution to allow supporters to unsubscribe from optional groups without an unsub page. -->
    <?
    (function() {
        var supporter_KEY = Request.getParameter('supporter_KEY');
        if (supporter_KEY == null) return;
        var supporterGroups = DB.getObjects('supporter_groups', {
            conditions: [ new Condition('supporter_KEY', '=', supporter_KEY)],
            includes: ['groups_KEY']
        });
        var supporterGroupsMap = {};
        supporterGroups.forEach(function(sg) {
            supporterGroupsMap[sg.groups_KEY] = sg.supporter_groups_KEY;
        });
    ?>
    <script type="text/javascript">
        var supporterGroupsMap = <?= supporterGroupsMap.toJSON() ?>;
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hogan.js/3.0.2/hogan.min.js"></script>
    <!-- script src="https://action.environmentaldefence.ca/images/signup_unsubscribe.js"></script -->
    <script type="text/javascript">
        // Click radio buttons for subscribed groups.
        Object.keys(supporterGroupsMap).forEach(function(k) {
            var id = '#add_to_groups_KEY' + k + '_checkbox';
            $(id).click();
        });
        // Build the Hogan template for unsbscribing from a groupo.
        var unsubURLTemplate = '{{#data}}'
            + document.location.protocol + '//'
            + document.location.host
            + '/dia/deleteEntry.jsp'
            + '?table=supporter_groups'
            + '&key={{supporter_groups_KEY}}'
            + '&organization_KEY={{organization_KEY}},'
            + '{{/data}}';
        // On-submit that handles unsubscribed groups.  These are the ones that were
        // checked at the beginning of the process but are no longer checked.
        var pageGroups = $('input[id^=add_to_groups_KEY]:checked')
            .map(function() { return $(this).val(); })
            .get();
        $('.salsa form').submit(function() {
            var clickedGroups = $('input[id^=add_to_groups_KEY]:checked')
                .map(function() { return $(this).val(); })
                .get();
            var organizationKey = $('input[name="organization_KEY"]').val();
            var unsubscribedGroupsList = pageGroups
                .filter(function(k) { return clickedGroups.indexOf(k) == -1; })
                .filter(function(k) { return supporterGroupsMap.hasOwnProperty(k); })
                .map(function(k) { return {
                        groups_KEY: k,
                        supporter_groups_KEY: supporterGroupsMap[k],
                        organization_KEY: organizationKey
                    };
                });
            var promises = Hogan
                .compile(unsubURLTemplate)
                .render({ data: unsubscribedGroupsList })
                .split(',')
                .map(function(u) { return u.trim(); })
                .filter(function(u) { return u.length != 0; })
                .map(function (u) { makeRequest('GET', u); });
            Promise.all(promises)
                .then(unsubPromiseResolved, unsubPromiseRejected)
                .catch(unsubPromiseCatch);
        });
        // Function to submit the unsub request to the server.  See this link for more info.
        // https://stackoverflow.com/questions/30008114/how-do-i-promisify-native-xhr
        function makeRequest(method, url) {
            return new Promise(function (resolve, reject) {
                var xhr = new XMLHttpRequest();
                xhr.open(method, url);
                xhr.onload = function () {
                if (this.status >= 200 && this.status < 300) {
                    resolve(xhr.response);
                } else {
                    reject({
                    status: this.status,
                    statusText: xhr.statusText
                    });
                }
                };
                xhr.onerror = function () {
                reject({
                    status: this.status,
                    statusText: xhr.statusText
                });
                };
                xhr.send();
            });
        }
        function unsubPromiseResolved(data) { console.log("unsubPromise resolved: " + data); }
        function unsubPromiseRejected(data) { console.log("unsubPromise rejected: " + data); }
        function unsubPromiseCatch(error) { console.log("unsubPromise caught " + err); }

    </script>
<?
})();
?>
<!-- END Solution to allow supporters to unsubscribe from optional groups without an unsub page. -->

signup_unsubscribe.js

// Click radio buttons for subscribed groups.
Object.keys(supporterGroupsMap).forEach(function(k) {
    var id = '#add_to_groups_KEY' + k + '_checkbox';
    $(id).click();
});
// Build the Hogan template for unsbscribing from a groupo.
var unsubURLTemplate = '{{#data}}'
    + document.location.protocol + '//'
    + document.location.host
    + '/dia/deleteEntry.jsp'
    + '?table=supporter_groups'
    + '&key={{supporter_groups_KEY}}'
    + '&organization_KEY={{organization_KEY}},'
    + '{{/data}}';
$('.salsa form').submit(function() {
    var pageGroups = $('input[id^=add_to_groups_KEY]')
        .map(function() { return $(this).val(); })
        .get();
    var clickedGroups = $('input[id^=add_to_groups_KEY]:checked')
        .map(function() { return $(this).val(); })
        .get();
    var organizationKey = $('input[name="organization_KEY"]').val();
    var unsubscribedGroupsList = pageGroups
        .filter(function(k) { return clickedGroups.indexOf(k) == -1; })
        .filter(function(k) { return supporterGroupsMap.hasOwnProperty(k); })
        .map(function(k) { return {
                groups_KEY: k,
                supporter_groups_KEY: supporterGroupsMap[k],
                organization_KEY: organizationKey
            };
        });
    var promises = Hogan
        .compile(unsubURLTemplate)
        .render({ data: unsubscribedGroupsList })
        .split(',')
        .map(function(u) { return u.trim(); })
        .filter(function(u) { return u.length != 0; })
        .map(function (u) { makeRequest('GET', u); });
    Promise.all(promises)
        .then(unsubPromiseResolved, unsubPromiseRejected)
        .catch(unsubPromiseCatch);
});
// Function to submit the unsub request to the server.  See this link for more info.
// https://stackoverflow.com/questions/30008114/how-do-i-promisify-native-xhr
function makeRequest(method, url) {
    return new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.open(method, url);
        xhr.onload = function () {
        if (this.status >= 200 && this.status < 300) {
            resolve(xhr.response);
        } else {
            reject({
            status: this.status,
            statusText: xhr.statusText
            });
        }
        };
        xhr.onerror = function () {
        reject({
            status: this.status,
            statusText: xhr.statusText
        });
        };
        xhr.send();
    });
}
function unsubPromiseResolved(data) { console.log("unsubPromise resolved: " + data); }
function unsubPromiseRejected(data) { console.log("unsubPromise rejected: " + data); }
function unsubPromiseCatch(error) { console.log("unsubPromise caught " + err); }

signup_unsubscribe.txt

TL;DR Installation steps.

1. Upload 'signup_unsubscribe_script.js' to Salsa.  Save the URL.
2. Edit a template used by signup pages.
3. Copy 'signup_unsubscribe_full.html' and paste it just before the </body> tag.
4. find the script tag for 'signup_unsubscribe_script.js'.
5. Replace the value for 'src' with the URL from (1).
6. Save the template.
7. Test by checking/unchecking/ticking/unticking group options.