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

package/library.js

@@ -29,6 +29,7 @@ plugin.init = async function (params) {
 
 	router.get('/plugins/nodebb-plugin-recent-cards/render', renderExternal);
 	router.get('/plugins/nodebb-plugin-recent-cards/render/style.css', renderExternalStyle);
+	router.get('/plugins/nodebb-plugin-recent-cards/filter', renderFiltered);
 	router.get('/admin/plugins/nodebb-plugin-recent-cards/tests/external', testRenderExternal);
 
 	plugin.settings = new settings('recentcards', '1.0.0', defaultSettings);
@@ -97,12 +98,20 @@ plugin.renderWidget = async function (widget) {
 	});
 	const categories = Object.values(categoryMap);
 
+	const widgetConfig = {
+		sort: widget.data.sort || 'recent',
+		teaserPost: widget.data.teaserPost || 'first',
+		teaserParseType: widget.data.teaserParseType || 'default',
+		thumbnailStyle: widget.data.thumbnailStyle || 'background',
+	};
+
 	widget.html = await app.renderAsync('partials/nodebb-plugin-recent-cards/header', {
 		topics: topics,
 		config: widget.templateData.config,
 		title: widget.data.title || '',
 		carouselMode: plugin.settings.get('enableCarousel'),
 		categories: JSON.stringify(categories).replace(/</g, '\\u003c'),
+		widgetConfig: JSON.stringify(widgetConfig).replace(/</g, '\\u003c'),
 	});
 	return widget;
 };
@@ -266,7 +275,47 @@ async function renderExternal(req, res, next) {
 				relative_path: nconf.get('url'),
 			},
 			categories: JSON.stringify(Object.values(categoryMap)).replace(/</g, '\\u003c'),
+			widgetConfig: '{}',
+		});
+	} catch (err) {
+		next(err);
+	}
+}
+
+async function renderFiltered(req, res, next) {
+	try {
+		const cids = String(req.query.cids || '');
+		const sort = String(req.query.sort || 'recent');
+		const teaserPost = String(req.query.teaserPost || 'first');
+		const teaserParseType = String(req.query.teaserParseType || 'default');
+		const thumbnailStyle = String(req.query.thumbnailStyle || 'background');
+
+		const allowedSorts = ['recent', 'create', 'votes', 'posts'];
+		const allowedTeasers = ['first', 'last-post'];
+		const allowedParseTypes = ['default', 'plaintext'];
+		const allowedThumbs = ['background', 'inline'];
+
+		const filteredTopics = await getTopics({
+			uid: req.uid,
+			data: {
+				topicsFromCid: cids,
+				sort: allowedSorts.includes(sort) ? sort : 'recent',
+				teaserPost: allowedTeasers.includes(teaserPost) ? teaserPost : 'first',
+				teaserParseType: allowedParseTypes.includes(teaserParseType) ? teaserParseType : 'default',
+				thumbnailStyle: allowedThumbs.includes(thumbnailStyle) ? thumbnailStyle : 'background',
+			},
+			templateData: {},
+		});
+
+		const html = await app.renderAsync('partials/nodebb-plugin-recent-cards/header', {
+			topics: filteredTopics,
+			config: { relative_path: nconf.get('relative_path') },
+			carouselMode: plugin.settings.get('enableCarousel'),
+			categories: '[]',
+			widgetConfig: '{}',
 		});
+
+		res.json({ html: html });
 	} catch (err) {
 		next(err);
 	}

package/package.json

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

package/static/lib/main.js

@@ -93,18 +93,6 @@ $(document).ready(function () {
 		document.body.style.overflow = '';
 	}
 
-	function isLightColor(hex) {
-		if (!hex) return true;
-		hex = hex.replace('#', '');
-		if (hex.length === 3) {
-			hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
-		}
-		const r = parseInt(hex.substr(0, 2), 16);
-		const g = parseInt(hex.substr(2, 2), 16);
-		const b = parseInt(hex.substr(4, 2), 16);
-		return (r * 299 + g * 587 + b * 114) / 1000 > 128;
-	}
-
 	function getStorageKey(categories) {
 		const sortedCids = categories.map(c => c.cid).sort((a, b) => a - b);
 		return 'rc-filter-' + sortedCids.join('-');
@@ -133,6 +121,12 @@ $(document).ready(function () {
 		const inner = pluginContainer.find('.rc-filter-dropdown-inner');
 		inner.empty();
 
+		// Header with reset link
+		const header = $('<div class="rc-filter-header d-flex align-items-center justify-content-between px-3 py-2"></div>');
+		header.append($('<span class="text-muted text-xs fw-semibold text-uppercase"></span>').text('Kategoriler'));
+		header.append($('<button type="button" class="btn btn-link btn-sm rc-clear-all text-decoration-none p-0 text-xs"></button>').text('Temizle'));
+		inner.append(header);
+
 		categories.forEach(function (cat) {
 			const isChecked = !selectedCids || selectedCids.includes(cat.cid);
 			const item = $('<label class="rc-filter-option d-flex align-items-center gap-2 px-3 py-2"></label>');
@@ -153,104 +147,119 @@ $(document).ready(function () {
 		});
 	}
 
-	function updateChips(pluginContainer, selectedCids, categories) {
-		const chipsContainer = pluginContainer.find('.rc-filter-chips');
-		chipsContainer.empty();
-
-		if (!selectedCids || selectedCids.length === 0 || selectedCids.length === categories.length) {
-			return;
-		}
-
-		selectedCids.forEach(function (cid) {
-			const cat = categories.find(c => c.cid === cid);
-			if (!cat) return;
-			const chip = $('<span class="rc-filter-chip badge d-flex align-items-center gap-1"></span>')
-				.attr('data-cid', cid)
-				.css({ backgroundColor: cat.bgColor || '#6c757d', color: cat.color || '#fff' });
-			chip.append($('<span></span>').text(cat.name));
-			const closeBtn = $('<button type="button" class="btn-close rc-chip-remove" aria-label="Remove"></button>');
-			if (!isLightColor(cat.bgColor)) {
-				closeBtn.addClass('btn-close-white');
-			}
-			chip.append(closeBtn);
-			chipsContainer.append(chip);
-		});
-
-		chipsContainer.append(
-			$('<button type="button" class="btn btn-link btn-sm rc-clear-all text-decoration-none p-0 ms-1"></button>')
-				.text('Temizle')
-		);
-	}
-
 	function updateFilterButton(pluginContainer, selectedCids, categories) {
 		const btn = pluginContainer.find('.rc-filter-btn');
 		const isFiltered = selectedCids && selectedCids.length > 0 && selectedCids.length < categories.length;
-		btn.toggleClass('btn-outline-secondary', !isFiltered);
-		btn.toggleClass('btn-primary', isFiltered);
+		btn.toggleClass('rc-filter-active', isFiltered);
 		const label = btn.find('.rc-filter-label');
 		label.text(isFiltered ? 'Filtrele (' + selectedCids.length + ')' : 'Filtrele');
 	}
 
+	function parseWidgetConfig(pluginContainer) {
+		const scriptTag = pluginContainer.find('script.rc-widget-config');
+		if (!scriptTag.length) return {};
+		try {
+			return JSON.parse(scriptTag.text()) || {};
+		} catch (e) {
+			return {};
+		}
+	}
+
 	function applyFilter(pluginContainer, selectedCids, categories) {
 		const carouselContainer = pluginContainer.find('.recent-cards');
-		const isSlickInitialized = carouselContainer.hasClass('slick-initialized');
 		const isCarouselMode = config.recentCards && config.recentCards.enableCarousel;
 		const showAll = !selectedCids || selectedCids.length === 0 || selectedCids.length === categories.length;
+		const emptyState = pluginContainer.find('.rc-empty-state');
+		const widgetCfg = parseWidgetConfig(pluginContainer);
 
-		// Step 1: Destroy slick if initialized
-		if (isSlickInitialized) {
-			try {
-				carouselContainer.slick('unslick');
-			} catch (e) {
-				// Slick was not properly initialized
+		// Update button immediately
+		updateFilterButton(pluginContainer, selectedCids, categories);
+
+		// 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');
 			}
+			return;
 		}
 
-		// Step 2: Restore any previously detached cards back into the container
-		const stash = pluginContainer.data('rc-stashed-cards');
-		if (stash && stash.length) {
-			carouselContainer.append(stash);
-			pluginContainer.removeData('rc-stashed-cards');
+		if (showAll) {
+			return; // nothing to filter, initial load handles it
 		}
 
-		// Step 3: Detach cards that don't match the filter (not just hide — Slick counts hidden children)
-		const toStashElements = [];
-		let visibleCount = 0;
-		carouselContainer.find('.recent-card-container').each(function () {
-			const cardCid = parseInt($(this).attr('data-cid'), 10);
-			if (showAll || selectedCids.includes(cardCid)) {
-				visibleCount++;
-			} else {
-				toStashElements.push(this);
-			}
-		});
+		// Stash original cards on first filter
+		if (!pluginContainer.data('rc-original-cards')) {
+			pluginContainer.data('rc-original-cards', carouselContainer.html());
+		}
+
+		// Show loading state
+		destroySlick(carouselContainer);
+		carouselContainer.addClass('overflow-hidden invisible');
 
-		if (toStashElements.length) {
-			const toStash = $(toStashElements).detach();
-			pluginContainer.data('rc-stashed-cards', toStash);
+		// Cancel any in-flight request to prevent race conditions
+		const prevXhr = pluginContainer.data('rc-xhr');
+		if (prevXhr && prevXhr.readyState !== 4) {
+			prevXhr.abort();
 		}
 
-		// Step 4: Handle empty state
-		const emptyState = pluginContainer.find('.rc-empty-state');
-		if (visibleCount === 0) {
-			emptyState.removeClass('d-none');
-			carouselContainer.addClass('d-none');
-		} else {
+		// Fetch filtered topics from server
+		const params = $.param({
+			cids: selectedCids.join(','),
+			sort: widgetCfg.sort || 'recent',
+			teaserPost: widgetCfg.teaserPost || 'first',
+			teaserParseType: widgetCfg.teaserParseType || 'default',
+			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;
+			}
+
 			emptyState.addClass('d-none');
-			carouselContainer.removeClass('d-none');
-		}
+			carouselContainer.removeClass('d-none').html(newCards);
 
-		// Step 5: Reinitialize slick with only the cards still in the DOM
-		if (isCarouselMode && visibleCount > 0) {
-			carouselContainer.addClass('overflow-hidden invisible');
-			initSlick(carouselContainer);
-		} else if (!isCarouselMode) {
-			carouselContainer.removeClass('carousel-mode invisible');
-		}
+			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);
+			}
+		});
 
-		// Step 6: Update UI
-		updateChips(pluginContainer, selectedCids, categories);
-		updateFilterButton(pluginContainer, selectedCids, categories);
+		pluginContainer.data('rc-xhr', xhr);
+	}
+
+	function destroySlick(container) {
+		if (container.hasClass('slick-initialized')) {
+			try {
+				container.slick('unslick');
+			} catch (e) {
+				// Slick was not properly initialized
+			}
+		}
 	}
 
 	function parseCategories(pluginContainer) {
@@ -303,16 +312,7 @@ $(document).ready(function () {
 			applyFilter(pluginContainer, selected, categories);
 		});
 
-		// Chip remove
-		pluginContainer.on('click.rcFilter', '.rc-chip-remove', function (e) {
-			e.stopPropagation();
-			const chip = $(this).closest('.rc-filter-chip');
-			const cidToRemove = parseInt(chip.attr('data-cid'), 10);
-			pluginContainer.find('.rc-filter-option input[data-cid="' + cidToRemove + '"]')
-				.prop('checked', false).trigger('change');
-		});
-
-		// Clear all
+		// Clear all (from dropdown header)
 		pluginContainer.on('click.rcFilter', '.rc-clear-all', function (e) {
 			e.stopPropagation();
 			pluginContainer.find('.rc-filter-option input').prop('checked', true);
@@ -320,20 +320,17 @@ $(document).ready(function () {
 			applyFilter(pluginContainer, null, categories);
 		});
 
-		// Apply saved filter if exists
+		// Always init slick first with whatever cards are on the page
+		initSlick(pluginContainer.find('.recent-cards'));
+
+		// Then apply saved filter if exists (triggers AJAX fetch)
 		if (savedFilter) {
 			applyFilter(pluginContainer, savedFilter, categories);
-			return true; // filter was applied (slick handled inside applyFilter)
 		}
-
-		return false; // no filter applied, caller should init slick
 	}
 
 	function setupWidget(pluginContainer) {
-		const filterApplied = initFilter(pluginContainer);
-		if (!filterApplied) {
-			initSlick(pluginContainer.find('.recent-cards'));
-		}
+		initFilter(pluginContainer);
 	}
 
 	// Close dropdown on outside click & Escape

package/static/style.scss

@@ -33,9 +33,24 @@
 	.rc-filter-btn {
 		white-space: nowrap;
 		font-size: 0.85rem;
-		border-radius: var(--bs-border-radius);
+		border-radius: var(--bs-border-radius-pill);
+		color: var(--bs-body-color);
+		background-color: var(--bs-tertiary-bg);
+		border: 1px solid var(--bs-border-color);
+		padding: 0.35rem 0.85rem;
+		transition: all 0.15s ease;
+		&:hover {
+			background-color: var(--bs-secondary-bg);
+			border-color: var(--bs-secondary-bg);
+		}
+		&.rc-filter-active {
+			background-color: var(--bs-secondary-bg);
+			border-color: var(--bs-secondary-bg);
+			font-weight: 600;
+		}
 		.rc-caret {
 			transition: transform 0.2s;
+			opacity: 0.6;
 		}
 		&[aria-expanded="true"] .rc-caret {
 			transform: rotate(180deg);
@@ -44,8 +59,9 @@
 
 	.rc-filter-dropdown {
 		top: 100%;
-		left: 0;
-		min-width: min(14rem, 90vw);
+		right: 0;
+		left: auto;
+		min-width: min(16rem, 90vw);
 		max-height: clamp(10rem, 40vh, 20rem);
 		overflow-y: auto;
 		z-index: 1050;
@@ -54,8 +70,8 @@
 		margin-top: 0.25rem;
 
 		[data-dir="rtl"] & {
-			left: auto;
-			right: 0;
+			right: auto;
+			left: 0;
 		}
 	}
 
@@ -83,32 +99,8 @@
 		-webkit-tap-highlight-color: transparent;
 	}
 
-	.rc-filter-chips {
-		overflow-x: auto;
-		scrollbar-width: thin;
-		&::-webkit-scrollbar {
-			height: 3px;
-		}
-	}
-
-	.rc-filter-chip {
-		font-size: 0.75rem;
-		line-height: 1.5;
-		padding: 0.25rem 0.5rem;
-		border-radius: var(--bs-border-radius-pill);
-		white-space: nowrap;
-		.rc-chip-remove {
-			width: 1rem;
-			height: 1rem;
-			padding: 0.25rem;
-			margin-left: 0.125rem;
-			opacity: 0.7;
-			background-size: 0.5rem;
-			box-sizing: content-box;
-			&:hover {
-				opacity: 1;
-			}
-		}
+	.rc-filter-header {
+		border-bottom: 1px solid var(--bs-border-color);
 	}
 
 	.rc-empty-state {

package/static/templates/partials/nodebb-plugin-recent-cards/header.tpl

@@ -1,17 +1,20 @@
 {{{ if topics.length }}}
 <div class="recent-cards-plugin preventSlideout">
 	<script type="application/json" class="rc-categories-data">{categories}</script>
-	{{{ if title }}}
-	<h5>{title}</h5>
-	{{{ end }}}
+	<script type="application/json" class="rc-widget-config">{widgetConfig}</script>
 
-	<div class="rc-filter-bar d-flex align-items-center flex-wrap gap-2 mb-2">
-		<div class="rc-filter-wrapper position-relative">
-			<button class="rc-filter-btn btn btn-sm btn-outline-secondary d-flex align-items-center gap-1"
+	<div class="rc-filter-bar d-flex align-items-center justify-content-between mb-2">
+		{{{ if title }}}
+		<h5 class="mb-0 flex-grow-1">{title}</h5>
+		{{{ else }}}
+		<div class="flex-grow-1"></div>
+		{{{ end }}}
+		<div class="rc-filter-wrapper position-relative flex-shrink-0">
+			<button class="rc-filter-btn btn btn-sm d-flex align-items-center gap-1"
 					type="button"
 					aria-haspopup="listbox"
 					aria-expanded="false">
-				<i class="fa fa-filter fa-xs"></i>
+				<i class="fa fa-sliders fa-xs"></i>
 				<span class="rc-filter-label">Filtrele</span>
 				<i class="fa fa-caret-down fa-xs rc-caret"></i>
 			</button>
@@ -19,7 +22,6 @@
 				<div class="rc-filter-dropdown-inner"></div>
 			</div>
 		</div>
-		<div class="rc-filter-chips d-flex align-items-center flex-wrap gap-1"></div>
 	</div>
 
 	<div class="{{{ if !carouselMode }}}row{{{ else }}}d-flex gap-3{{{ end }}} recent-cards carousel-mode overflow-hidden invisible" itemscope itemtype="http://www.schema.org/ItemList" {{{ if carouselMode }}}style=""{{{ end }}}>