https://www.longwood.edu/fileshare/2023homepage-scripts.js

1function decodeHtml(html) {
2	var txt = document.createElement("textarea");
3	txt.innerHTML = html;
4	return txt.value;
5}
6
7$(document).ready(function() {
8
9// HEADER
10
11	// ALERTS before HEADER
12	$('#alerts-container').insertBefore('header');
13
14	// video header
15
16	// if windo is vertical
17	if (window.innerHeight > window.innerWidth) {
18		// remove #videoPlayer
19		$('#videoPlayer').remove();
20	}
21
22	// SOCIAL SECTION
23
24	(function ($) {
25		function undoTextFit(selector) {
26			$(selector).each(function () {
27				var $this = $(this);
28				$this.find('.textFitted, .textFitAlignVert').contents().unwrap();
29				$this.removeAttr('style');
30			});
31		}
32
33		function refreshCardBackgrounds() {
34			$('.cards .card').each(function () {
35				const image = $(this).attr('data-image');
36				if (image) {
37					$(this).css({
38						backgroundImage: `url("${image}")`,
39						backgroundRepeat: 'no-repeat',
40						backgroundPosition: 'center center',
41						backgroundSize: 'cover'
42					});
43				}
44			});
45		}
46
47		function getBaseSlickSettings() {
48			return {
49				infinite: true,
50				swipeToSlide: true,
51				touchThreshold: 10,
52				arrows: true,
53				responsive: [
54					{
55						breakpoint: 800,
56						settings: {
57							slidesToShow: 1,
58							slidesToScroll: 1
59						}
60					}
61				]
62			};
63		}
64
65		function getDesktopSliderSettings(initialSlide) {
66			return $.extend(true, {}, getBaseSlickSettings(), {
67				centerMode: false,
68				slidesToShow: 4,
69				slidesToScroll: 1,
70				initialSlide: initialSlide || 0
71			});
72		}
73
74		function getModalSliderSettings(initialSlide) {
75			return $.extend(true, {}, getBaseSlickSettings(), {
76				centerMode: false,
77				slidesToShow: 1,
78				slidesToScroll: 1,
79				initialSlide: initialSlide || 0
80			});
81		}
82
83		function normalizeSlideIndex(rawIndex, slideCount) {
84			return ((rawIndex % slideCount) + slideCount) % slideCount;
85		}
86
87		function getClickedSlideIndex($card, $slider) {
88			const slick = $slider.slick('getSlick');
89			if (!slick) return 0;
90
91			const rawIndex = parseInt($card.closest('.slick-slide').attr('data-slick-index'), 10);
92			if (Number.isNaN(rawIndex)) {
93				return slick.currentSlide || 0;
94			}
95
96			return normalizeSlideIndex(rawIndex, slick.slideCount);
97		}
98
99		function openModalAt($slider, slideIndex) {
100			$slider.addClass('modalSize');
101			$slider.slick('unslick');
102			$slider.slick(getModalSliderSettings(slideIndex));
103
104			undoTextFit($('.longCaption p'));
105			textFit($('.longCaption p'), {
106				alignVert: true,
107				multiLine: true,
108				maxFontSize: 40
109			});
110
111			refreshCardBackgrounds();
112			$('.closeModal').show();
113		}
114
115		function restoreDesktopSlider($slider, slideIndex) {
116			$slider.removeClass('modalSize');
117			$slider.slick('unslick');
118			$slider.slick(getDesktopSliderSettings(slideIndex));
119
120			undoTextFit($('.longCaption p'));
121			refreshCardBackgrounds();
122			$('.closeModal').hide();
123		}
124
125		var maxCards = 24;
126		var $grid = $('.callout-slab.homepage .cards');
127		var preModalDesktopSlide = 0;
128
129		$.ajax({
130			url: 'https://api.flockler.com/v1/sites/22723/sections/65189/articles',
131			type: 'GET',
132			dataType: 'json',
133			success: function (data) {
134				var count = 0;
135
136				$.each(data.articles, function (index, article) {
137					if (count >= maxCards) {
138						return false;
139					}
140
141					var instagramItem = article.attachments && article.attachments.instagram_item;
142					var tweetItem = article.attachments && article.attachments.tweet;
143
144					if (!instagramItem && !tweetItem) {
145						return true;
146					}
147
148					var item = instagramItem || tweetItem;
149					var caption = item.caption || item.text || '';
150					var longCaption = caption;
151
152					if (longCaption.length > 400) {
153						longCaption = longCaption.substring(0, 400) + '...';
154					}
155					if (caption.length > 120) {
156						caption = caption.substring(0, 120) + '...';
157					}
158
159					const imageUrl = instagramItem ? article.cover_url : tweetItem.media_url;
160					const dataType = instagramItem ? 'instagram' : 'twitter';
161					const handle = item.username || item.screen_name || '';
162					const title = article.title || '';
163
164					if (!imageUrl) {
165						return true;
166					}
167
168					var $card = $(`
169						<div class="card" data-image="${imageUrl}" data-type="${dataType}" style="background-image:url('${imageUrl}'); background-repeat:no-repeat; background-position:center center; background-size:cover;">
170							<img src="${imageUrl}" alt="${title}">
171							<div class="author">@${handle}</div>
172							<div class="icon">
173								${dataType === 'instagram' ? `
174									<svg class="instagramIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg>
175								` : ''}
176								${dataType === 'twitter' ? `
177									<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" xml:space="preserve"><path class="st0" d="M14.1,10.3l8.2-9.5h-1.9L13.2,9L7.6,0.8H1l8.6,12.5L1,23.2h1.9l7.5-8.7l6,8.7H23L14.1,10.3L14.1,10.3L14.1,10.3z M11.4,13.4l-0.9-1.2L3.6,2.2h3m5.6,8l0.9,1.2l7.3,10.4h-3L11.4,13.4L11.4,13.4L11.4,13.4z"/></svg>
178								` : ''}
179							</div>
180							<div class="details">
181								<div class="caption">
182									<p>${caption}</p>
183								</div>
184								<div class="longCaption" style="display:none;">
185									<p>${longCaption}</p>
186								</div>
187							</div>
188						</div>
189					`);
190
191					$grid.append($card);
192					count++;
193
194					$card.find('img').on('error', function () {
195						$(this).closest('.card').hide();
196					});

197				});
198
199				$grid.slick(getDesktopSliderSettings(0));
200
201				$grid.on('setPosition', function () {
202					$('.slick-track', this).attr('aria-label', 'Social media posts carousel');
203				});
204
205				refreshCardBackgrounds();
206			},
207			error: function () {
208				console.log('Error in fetching data from Flockler API');
209			}
210		});
211
212		$(document).on('click', '.cards .card', function () {
213			const $slider = $('.cards');
214
215			if ($slider.hasClass('modalSize')) {
216				return;
217			}
218
219			const slick = $slider.slick('getSlick');
220			if (!slick) {
221				return;
222			}
223
224			preModalDesktopSlide = slick.currentSlide;
225			const clickedSlideIndex = getClickedSlideIndex($(this), $slider);
226
227			openModalAt($slider, clickedSlideIndex);
228		});
229
230		$(document).on('click', '.closeModal', function (e) {
231			e.preventDefault();
232
233			const $slider = $('.cards');
234			const slick = $slider.slick('getSlick');
235			if (!slick) {
236				return;
237			}
238
239			restoreDesktopSlider($slider, preModalDesktopSlide);
240		});
241	})(jQuery);
242});