nodebb-plugin-recent-cards-2 3.3.20 → 3.3.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-plugin-recent-cards-2",
-  "version": "3.3.20",
+  "version": "3.3.21",
   "description": "Add lavender-style cards of recent topics to Persona's category homepage",
   "main": "library.js",
   "repository": {

package/static/lib/main.js

@@ -177,16 +177,7 @@ $(document).ready(function () {
 
 		// If showing all, and we have the original cards stashed, restore them
 		if (showAll && pluginContainer.data('rc-original-cards')) {
-			destroySlick(carouselContainer);
-			carouselContainer.html(pluginContainer.data('rc-original-cards'));
-			emptyState.addClass('d-none');
-			carouselContainer.removeClass('d-none');
-			if (isCarouselMode) {
-				carouselContainer.addClass('overflow-hidden invisible');
-				initSlick(carouselContainer);
-			} else {
-				carouselContainer.removeClass('carousel-mode invisible');
-			}
+			swapCards(carouselContainer, emptyState, pluginContainer.data('rc-original-cards'), isCarouselMode);
 			return;
 		}
 
@@ -199,17 +190,14 @@ $(document).ready(function () {
 			pluginContainer.data('rc-original-cards', carouselContainer.html());
 		}
 
-		// Show loading state
-		destroySlick(carouselContainer);
-		carouselContainer.addClass('overflow-hidden invisible');
-
-		// Cancel any in-flight request to prevent race conditions
+		// Abort any in-flight request (safe to call on completed/null)
 		const prevXhr = pluginContainer.data('rc-xhr');
-		if (prevXhr && prevXhr.readyState !== 4) {
+		if (prevXhr) {
 			prevXhr.abort();
+			pluginContainer.removeData('rc-xhr');
 		}
 
-		// Fetch filtered topics from server
+		// Keep old cards visible while loading — no blank flash
 		const params = $.param({
 			cids: selectedCids.join(','),
 			sort: widgetCfg.sort || 'recent',
@@ -218,38 +206,51 @@ $(document).ready(function () {
 			thumbnailStyle: widgetCfg.thumbnailStyle || 'background',
 		});
 
-		const xhr = $.getJSON(config.relative_path + '/plugins/nodebb-plugin-recent-cards/filter?' + params, function (data) {
-			const parsed = $(data.html);
-			const newCards = parsed.find('.recent-cards').html();
-
-			if (!newCards || !newCards.trim()) {
-				emptyState.removeClass('d-none');
-				carouselContainer.addClass('d-none').removeClass('overflow-hidden invisible');
-				return;
-			}
+		const xhr = $.getJSON(config.relative_path + '/plugins/nodebb-plugin-recent-cards/filter?' + params)
+			.done(function (data) {
+				const parsed = $('<div>').html(data.html);
+				const newCards = parsed.find('.recent-cards').html();
+
+				if (!newCards || !newCards.trim()) {
+					destroySlick(carouselContainer);
+					emptyState.removeClass('d-none');
+					carouselContainer.addClass('d-none');
+					return;
+				}
+
+				// Translate, then do instant swap (destroy → replace → reinit in one tick)
+				require(['translator'], function (translator) {
+					translator.Translator.create().translate(newCards).then(function (translated) {
+						swapCards(carouselContainer, emptyState, translated, isCarouselMode);
+					}).catch(function () {
+						swapCards(carouselContainer, emptyState, newCards, isCarouselMode);
+					});
+				});
+			})
+			.fail(function (jqXHR, textStatus) {
+				if (textStatus === 'abort') return;
+				// On error, keep current cards as-is
+			})
+			.always(function () {
+				pluginContainer.removeData('rc-xhr');
+			});
 
-			emptyState.addClass('d-none');
-			carouselContainer.removeClass('d-none').html(newCards);
+		pluginContainer.data('rc-xhr', xhr);
+	}
 
-			if (isCarouselMode) {
-				carouselContainer.addClass('overflow-hidden invisible');
-				initSlick(carouselContainer);
-			} else {
-				carouselContainer.removeClass('carousel-mode invisible overflow-hidden');
-			}
-		}).fail(function (jqXHR, textStatus) {
-			if (textStatus === 'abort') return; // intentional cancel, ignore
-			// On error, restore original cards
-			if (pluginContainer.data('rc-original-cards')) {
-				carouselContainer.html(pluginContainer.data('rc-original-cards'));
-			}
-			carouselContainer.removeClass('overflow-hidden invisible');
-			if (isCarouselMode) {
-				initSlick(carouselContainer);
-			}
-		});
+	function swapCards(carouselContainer, emptyState, html, isCarouselMode) {
+		// Instant swap: destroy → replace → reinit in one synchronous block (no blank flash)
+		destroySlick(carouselContainer);
+		emptyState.addClass('d-none');
+		carouselContainer.removeClass('d-none').html(html);
+		carouselContainer.find('.timeago').timeago();
 
-		pluginContainer.data('rc-xhr', xhr);
+		if (isCarouselMode) {
+			carouselContainer.addClass('overflow-hidden invisible');
+			initSlick(carouselContainer);
+		} else {
+			carouselContainer.removeClass('carousel-mode invisible overflow-hidden');
+		}
 	}
 
 	function destroySlick(container) {
@@ -302,14 +303,18 @@ $(document).ready(function () {
 			}
 		});
 
-		// Checkbox change
+		// Checkbox change (debounced — user may click multiple checkboxes rapidly)
+		let filterTimeout;
 		pluginContainer.on('change.rcFilter', '.rc-filter-option input[type="checkbox"]', function () {
-			const selected = [];
-			pluginContainer.find('.rc-filter-option input:checked').each(function () {
-				selected.push(parseInt($(this).attr('data-cid'), 10));
-			});
-			saveFilter(storageKey, selected, allCids);
-			applyFilter(pluginContainer, selected, categories);
+			clearTimeout(filterTimeout);
+			filterTimeout = setTimeout(function () {
+				const selected = [];
+				pluginContainer.find('.rc-filter-option input:checked').each(function () {
+					selected.push(parseInt($(this).attr('data-cid'), 10));
+				});
+				saveFilter(storageKey, selected, allCids);
+				applyFilter(pluginContainer, selected, categories);
+			}, 300);
 		});
 
 		// Clear all (from dropdown header)