https://events.atarc.org/static/event/js/modules/module_read_more.d7eda7af8292.js

1const READ_MORE_ICON_DOWN = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>';
2const READ_MORE_ICON_UP = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M1.646 11.354a.5.5 0 0 0 .708 0L8 5.707l5.646 5.647a.5.5 0 1 0 .708-.708l-6-6a.5.5 0 0 0-.708 0l-6 6a.5.5 0 0 0 0 .708z"/></svg>';
3
4function initArrowButtons()
5{
6    $('.read-more-content-btn.show-arrows').each(function () {
7        $(this).html(READ_MORE_ICON_DOWN);
8    });
9
10    $('.read-more-content-btn.show-text-with-arrows').each(function () {
11        $(this).html('View details ' + READ_MORE_ICON_DOWN);
12    });
13}
14jQuery(document).ready(function ($) {
15
16    initArrowButtons();
17    $('body').on('click', '.read-more-content-btn', function (e) {
18        e.preventDefault();
19
20        let targetSelector = $(this).data('target');
21        let hiddenContent = $(targetSelector);
22
23        const readMoreText = $(this).data('read-more-text') ?? "";
24        const readLessText = $(this).data('read-less-text') ?? "";
25
26        const hideOnExpandDClass = $(this).data('hide-on-expand-div');
27        const hideOnExpandDiv = $("." + hideOnExpandDClass);
28
29        if (hiddenContent.is(':visible')) {
30            hiddenContent.slideUp();
31            hiddenContent.removeClass("expanded")
32            hideOnExpandDiv.show();
33
34            if ($(this).hasClass('show-arrows')) {
35                $(this).html(READ_MORE_ICON_DOWN);
36            } else if ($(this).hasClass('show-text-with-arrows')) {
37                $(this).html(readMoreText + READ_MORE_ICON_DOWN);
38            } else {
39                $(this).text(readMoreText);
40            }
41        } else {
42            hiddenContent.slideDown();
43            hiddenContent.addClass("expanded");
44            hideOnExpandDiv.hide();
45
46
47            if ($(this).hasClass('show-arrows')) {
48                $(this).html(READ_MORE_ICON_UP);
49            } else if ($(this).hasClass('show-text-with-arrows')) {
50                $(this).html(readLessText + READ_MORE_ICON_UP);
51            } else {
52                $(this).text(readLessText);
53            }
54        }
55    });
56});
57
58
59let expandedSessions = [];
60let activeNavLinks = [];
61
62// Before doing a htmx swap, collect all the paragraphs that have been expanded.
63document.body.addEventListener('htmx:beforeSwap', function (evt) {
64    expandedSessions = [];
65    activeNavLinks = [];
66    $('.hidden-content.expanded').each(function () {
67        expandedSessions.push($(this).data('key'));
68    });
69});
70
71// After the swap, use expandedSessions to expand the required paragraphs.
72document.body.addEventListener('htmx:afterSettle', function (evt) {
73
74    initArrowButtons();
75    expandedSessions.forEach(function (key) {
76
77
78        $('#hidden-content-' + key).show().addClass('expanded');
79
80        let $btns = $('[id="read-more-' + key + '"]');
81        
82        $btns.each(function() {
83            let $btn = $(this);
84
85            const readLessText = $btn.data('read-less-text') ?? "";
86
87            if ($btn.hasClass('show-arrows')) {
88                $btn.html(READ_MORE_ICON_UP);
89            } else if ($btn.hasClass('show-text-with-arrows')) {
90                $btn.html(readLessText + READ_MORE_ICON_UP);
91            } else {
92                $btn.text(readLessText);
93            }
94        });
95    });
96});