nodebb-plugin-recent-cards-2 1.0.0

package/static/lib/main.js

@@ -0,0 +1,340 @@
+'use strict';
+
+$(document).ready(function () {
+	const rtl = $('html').attr('data-dir') === 'rtl';
+	const arrowClasses = 'link-secondary position-absolute top-50 translate-middle-y p-1 z-1';
+	const nextIcon = rtl ? 'fa-chevron-left' : 'fa-chevron-right';
+	const prevIcon = rtl ? 'fa-chevron-right' : 'fa-chevron-left';
+	const nextArrow = `<a href="#" class="${arrowClasses} slick-next" title="">
+			<i class="fa-solid fa-fw ${nextIcon} fa-lg"></i>
+		</a>`;
+	const prevArrow = `<a href="#" class="${arrowClasses} slick-prev" title="">
+			<i class="fa-solid fa-fw ${prevIcon} fa-lg"></i>
+		</a>`;
+
+	async function initSlick(container) {
+		if (!container.length || container.hasClass('slick-initialized')) {
+			return;
+		}
+
+		if (!config.recentCards || !config.recentCards.enableCarousel) {
+			container.removeClass('carousel-mode invisible');
+			return;
+		}
+
+		const slideCount = parseInt(config.recentCards.maxSlides, 10) || 4;
+		const slideMargin = 16;
+		const env = utils.findBootstrapEnvironment();
+		if (['xxl', 'xl', 'lg'].includes(env)) {
+			const cards = container.find('.recent-card-container .recent-card');
+			const cardCount = Math.min(cards.length, slideCount);
+			if (cardCount > 0) {
+				cards.css({
+					width: (container.width() - ((cardCount - 1) * slideMargin)) / cardCount,
+				});
+			}
+		}
+		container.slick({
+			infinite: false,
+			slidesToShow: slideCount,
+			slidesToScroll: slideCount,
+			rtl: rtl,
+			variableWidth: true,
+			dots: !!config.recentCards.enableCarouselPagination,
+			nextArrow: nextArrow,
+			prevArrow: prevArrow,
+			responsive: [{
+				breakpoint: 992, // md
+				settings: {
+					slidesToShow: 3,
+					slidesToScroll: 2,
+					infinite: false,
+				},
+			}, {
+				breakpoint: 768, // sm/xs
+				settings: {
+					slidesToShow: 2,
+					slidesToScroll: 1,
+					infinite: false,
+				},
+			}],
+		});
+
+		container.removeClass('overflow-hidden invisible');
+		container.find('.slick-prev').translateAttr('title', '[[global:pagination.previouspage]]');
+		container.find('.slick-next').translateAttr('title', '[[global:pagination.nextpage]]');
+	}
+
+	// --- Category Filter ---
+
+	const isMobile = () => window.innerWidth < 576;
+
+	function openDropdown(pluginContainer) {
+		const dropdown = pluginContainer.find('.rc-filter-dropdown');
+		const btn = pluginContainer.find('.rc-filter-btn');
+		dropdown.removeClass('d-none');
+		btn.attr('aria-expanded', 'true');
+
+		// On mobile: add backdrop and lock body scroll
+		if (isMobile()) {
+			const backdrop = $('<div class="rc-backdrop"></div>');
+			backdrop.on('click', function () {
+				closeAllDropdowns();
+			});
+			pluginContainer.find('.rc-filter-wrapper').append(backdrop);
+			document.body.style.overflow = 'hidden';
+		}
+	}
+
+	function closeAllDropdowns() {
+		$('.rc-filter-dropdown').addClass('d-none');
+		$('.rc-filter-btn').attr('aria-expanded', 'false');
+		$('.rc-backdrop').remove();
+		document.body.style.overflow = '';
+	}
+
+	// No localStorage — filter resets on page reload (F5)
+
+	function buildDropdown(pluginContainer, categories, selectedCids) {
+		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) : false;
+			const item = $('<label class="rc-filter-option d-flex align-items-center gap-2 px-3 py-2"></label>');
+			const checkbox = $('<input type="checkbox" class="form-check-input mt-0">')
+				.attr('data-cid', cat.cid)
+				.prop('checked', isChecked);
+
+			const nameSpan = $('<span class="badge"></span>')
+				.css({ backgroundColor: cat.bgColor || '#6c757d', color: cat.color || '#fff' })
+				.text(cat.name);
+
+			item.append(checkbox);
+			if (cat.icon) {
+				item.append($('<i></i>').addClass('fa').addClass(cat.icon).css('color', cat.bgColor || '#6c757d'));
+			}
+			item.append(nameSpan);
+			inner.append(item);
+		});
+	}
+
+	function updateFilterButton(pluginContainer, selectedCids, categories) {
+		const btn = pluginContainer.find('.rc-filter-btn');
+		const activeCount = selectedCids ? selectedCids.length : 0;
+		const isFiltered = activeCount > 0 && activeCount < categories.length;
+		btn.toggleClass('rc-filter-active', isFiltered);
+		const label = btn.find('.rc-filter-label');
+		label.text(isFiltered ? 'Filtrele (' + activeCount + ')' : '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 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);
+
+		// 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')) {
+			swapCards(carouselContainer, emptyState, pluginContainer.data('rc-original-cards'), isCarouselMode);
+			return;
+		}
+
+		if (showAll) {
+			return; // nothing to filter, initial load handles it
+		}
+
+		// Stash original cards on first filter
+		if (!pluginContainer.data('rc-original-cards')) {
+			pluginContainer.data('rc-original-cards', carouselContainer.html());
+		}
+
+		// Abort any in-flight request (safe to call on completed/null)
+		const prevXhr = pluginContainer.data('rc-xhr');
+		if (prevXhr) {
+			prevXhr.abort();
+			pluginContainer.removeData('rc-xhr');
+		}
+
+		// Keep old cards visible while loading — no blank flash
+		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)
+			.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');
+			});
+
+		pluginContainer.data('rc-xhr', xhr);
+	}
+
+	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();
+
+		if (isCarouselMode) {
+			carouselContainer.addClass('overflow-hidden invisible');
+			initSlick(carouselContainer);
+		} else {
+			carouselContainer.removeClass('carousel-mode invisible overflow-hidden');
+		}
+	}
+
+	function destroySlick(container) {
+		if (container.hasClass('slick-initialized')) {
+			try {
+				container.slick('unslick');
+			} catch (e) {
+				// Slick was not properly initialized
+			}
+		}
+	}
+
+	function parseCategories(pluginContainer) {
+		const scriptTag = pluginContainer.find('script.rc-categories-data');
+		if (!scriptTag.length) return [];
+		try {
+			const parsed = JSON.parse(scriptTag.text());
+			return Array.isArray(parsed) ? parsed : [];
+		} catch (e) {
+			return [];
+		}
+	}
+
+	function initFilter(pluginContainer) {
+		const categories = parseCategories(pluginContainer);
+		const filterBar = pluginContainer.find('.rc-filter-bar');
+
+		// Hide filter if fewer than 2 categories
+		if (categories.length < 2) {
+			filterBar.addClass('d-none');
+			return false;
+		}
+
+		const allCids = categories.map(c => c.cid);
+
+		buildDropdown(pluginContainer, categories, null);
+
+		// Bind events (use .off first to prevent duplicates from ajaxify)
+		pluginContainer.off('.rcFilter');
+
+		// Toggle dropdown
+		pluginContainer.on('click.rcFilter', '.rc-filter-btn', function (e) {
+			e.stopPropagation();
+			const isOpen = !pluginContainer.find('.rc-filter-dropdown').hasClass('d-none');
+			closeAllDropdowns();
+			if (!isOpen) {
+				openDropdown(pluginContainer);
+			}
+		});
+
+		// Checkbox change (debounced — user may click multiple checkboxes rapidly)
+		let filterTimeout;
+		pluginContainer.on('change.rcFilter', '.rc-filter-option input[type="checkbox"]', function () {
+			clearTimeout(filterTimeout);
+			filterTimeout = setTimeout(function () {
+				const selected = [];
+				pluginContainer.find('.rc-filter-option input:checked').each(function () {
+					selected.push(parseInt($(this).attr('data-cid'), 10));
+				});
+				applyFilter(pluginContainer, selected, categories);
+			}, 300);
+		});
+
+		// Clear all (from dropdown header) — uncheck everything = show all (last 20)
+		pluginContainer.on('click.rcFilter', '.rc-clear-all', function (e) {
+			e.stopPropagation();
+			pluginContainer.find('.rc-filter-option input').prop('checked', false);
+			applyFilter(pluginContainer, [], categories);
+		});
+
+		// Init slick with default cards (all categories, last 20)
+		initSlick(pluginContainer.find('.recent-cards'));
+	}
+
+	function setupWidget(pluginContainer) {
+		initFilter(pluginContainer);
+	}
+
+	// Close dropdown on outside click & Escape
+	function bindGlobalHandlers() {
+		$(document).off('.rcFilter');
+
+		$(document).on('click.rcFilter', function (e) {
+			if (!$(e.target).closest('.rc-filter-wrapper').length) {
+				closeAllDropdowns();
+			}
+		});
+
+		$(document).on('keydown.rcFilter', function (e) {
+			if (e.key === 'Escape') {
+				closeAllDropdowns();
+			}
+		});
+	}
+
+	// Initialize
+	bindGlobalHandlers();
+	$('.recent-cards-plugin').each(function () {
+		setupWidget($(this));
+	});
+
+	$(window).on('action:ajaxify.contentLoaded', function () {
+		bindGlobalHandlers();
+		$('.recent-cards-plugin').each(function () {
+			setupWidget($(this));
+		});
+	});
+});

package/static/slick/slick-theme.css

@@ -0,0 +1,113 @@
+
+/* modified from https://gist.github.com/vivekkumawat/c8351e28412a194aac977bf996c4a6d8 */
+
+/* CSS For Slick Slider */
+/* Note: Don't use slick-theme.css file */
+
+/* Adding margin between slides */
+.slick-slide {
+    margin: 0 8px;
+}
+.slick-list {
+	margin: 0;
+}
+
+/* Arrows */
+.slick-prev.slick-disabled,
+.slick-next.slick-disabled
+{
+    opacity: .25;
+}
+
+/* rtlcss converts these to right/left:0px on RTL */
+.slick-prev { left: 0px; }
+.slick-next { right: 0px; }
+
+/* Dots */
+.slick-dotted.slick-slider
+{
+    margin-bottom: 30px;
+}
+
+.slick-dots
+{
+    position: absolute;
+    bottom: -25px;
+
+    display: block;
+
+    width: 100%;
+    padding: 0;
+    margin: 0;
+
+    list-style: none;
+
+    text-align: center;
+}
+.slick-dots li
+{
+    position: relative;
+
+    display: inline-block;
+
+    width: 20px;
+    height: 20px;
+    margin: 0 5px;
+    padding: 0;
+
+    cursor: pointer;
+}
+.slick-dots li button
+{
+    font-size: 0;
+    line-height: 0;
+
+    display: block;
+
+    width: 20px;
+    height: 20px;
+    padding: 5px;
+
+    cursor: pointer;
+
+    color: transparent;
+    border: 0;
+    outline: none;
+    background: transparent;
+}
+.slick-dots li button:hover,
+.slick-dots li button:focus
+{
+    outline: none;
+}
+.slick-dots li button:hover:before,
+.slick-dots li button:focus:before
+{
+    opacity: 1;
+}
+.slick-dots li button:before
+{
+    font-size: 8px;
+    line-height: 20px;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 20px;
+    height: 20px;
+
+    content: '•';
+    text-align: center;
+
+    opacity: .25;
+    color: black;
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+.slick-dots li.slick-active button:before
+{
+    opacity: .75;
+    color: black;
+}

package/static/slick/slick.css

@@ -0,0 +1,118 @@
+/* Slider */
+.slick-slider
+{
+    position: relative;
+
+    display: block;
+    box-sizing: border-box;
+
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+
+    -webkit-touch-callout: none;
+    -khtml-user-select: none;
+    -ms-touch-action: pan-y;
+        touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.slick-list
+{
+    position: relative;
+
+    display: block;
+    overflow: hidden;
+
+    margin: 0;
+    padding: 0;
+}
+.slick-list:focus
+{
+    outline: none;
+}
+.slick-list.dragging
+{
+    cursor: pointer;
+    cursor: hand;
+}
+
+.slick-slider .slick-track,
+.slick-slider .slick-list
+{
+    -webkit-transform: translate3d(0, 0, 0);
+       -moz-transform: translate3d(0, 0, 0);
+        -ms-transform: translate3d(0, 0, 0);
+         -o-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+}
+
+.slick-track
+{
+    position: relative;
+    top: 0;
+    left: 0;
+
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+.slick-track:before,
+.slick-track:after
+{
+    display: table;
+
+    content: '';
+}
+.slick-track:after
+{
+    clear: both;
+}
+.slick-loading .slick-track
+{
+    visibility: hidden;
+}
+
+.slick-slide
+{
+    display: none;
+    float: left;
+
+    height: 100%;
+    min-height: 1px;
+}
+[dir='rtl'] .slick-slide
+{
+    float: right;
+}
+.slick-slide.slick-loading img
+{
+    display: none;
+}
+.slick-slide .topic-title img {
+    display: inline-block
+}
+.slick-slide.dragging img
+{
+    pointer-events: none;
+}
+.slick-initialized .slick-slide
+{
+    display: block;
+}
+.slick-loading .slick-slide
+{
+    visibility: hidden;
+}
+.slick-vertical .slick-slide
+{
+    display: block;
+
+    height: auto;
+
+    border: 1px solid transparent;
+}
+.slick-arrow.slick-hidden {
+    display: none;
+}