nodebb-plugin-recent-cards-2 3.3.19

package/static/lib/main.js

@@ -0,0 +1,368 @@
+'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 = '';
+	}
+
+	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('-');
+	}
+
+	function loadFilter(storageKey, validCids) {
+		try {
+			const stored = JSON.parse(localStorage.getItem(storageKey));
+			if (!Array.isArray(stored)) return null;
+			const filtered = stored.filter(cid => validCids.includes(cid));
+			return filtered.length ? filtered : null;
+		} catch (e) {
+			return null;
+		}
+	}
+
+	function saveFilter(storageKey, selectedCids, allCids) {
+		if (!selectedCids || selectedCids.length === 0 || selectedCids.length === allCids.length) {
+			localStorage.removeItem(storageKey);
+		} else {
+			localStorage.setItem(storageKey, JSON.stringify(selectedCids));
+		}
+	}
+
+	function buildDropdown(pluginContainer, categories, selectedCids) {
+		const inner = pluginContainer.find('.rc-filter-dropdown-inner');
+		inner.empty();
+
+		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>');
+			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 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);
+		const label = btn.find('.rc-filter-label');
+		label.text(isFiltered ? 'Filtrele (' + selectedCids.length + ')' : 'Filtrele');
+	}
+
+	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;
+
+		// Step 1: Destroy slick if initialized
+		if (isSlickInitialized) {
+			try {
+				carouselContainer.slick('unslick');
+			} catch (e) {
+				// Slick was not properly initialized
+			}
+		}
+
+		// 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');
+		}
+
+		// 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);
+			}
+		});
+
+		if (toStashElements.length) {
+			const toStash = $(toStashElements).detach();
+			pluginContainer.data('rc-stashed-cards', toStash);
+		}
+
+		// Step 4: Handle empty state
+		const emptyState = pluginContainer.find('.rc-empty-state');
+		if (visibleCount === 0) {
+			emptyState.removeClass('d-none');
+			carouselContainer.addClass('d-none');
+		} else {
+			emptyState.addClass('d-none');
+			carouselContainer.removeClass('d-none');
+		}
+
+		// 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');
+		}
+
+		// Step 6: Update UI
+		updateChips(pluginContainer, selectedCids, categories);
+		updateFilterButton(pluginContainer, selectedCids, categories);
+	}
+
+	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);
+		const storageKey = getStorageKey(categories);
+		const savedFilter = loadFilter(storageKey, allCids);
+
+		buildDropdown(pluginContainer, categories, savedFilter);
+
+		// 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
+		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);
+		});
+
+		// 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
+		pluginContainer.on('click.rcFilter', '.rc-clear-all', function (e) {
+			e.stopPropagation();
+			pluginContainer.find('.rc-filter-option input').prop('checked', true);
+			saveFilter(storageKey, allCids, allCids);
+			applyFilter(pluginContainer, null, categories);
+		});
+
+		// Apply saved filter if exists
+		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'));
+		}
+	}
+
+	// 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;
+}