feat(miniflux) distinct duration filters
This commit is contained in:
parent
792f01bf15
commit
6d2360fdd8
81
miniflux_scripts/entries_duration_filter.js
Normal file
81
miniflux_scripts/entries_duration_filter.js
Normal file
@ -0,0 +1,81 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
const SHORT_MAX = 2; // ≤ 2 minutes
|
||||
const LONG_MIN = 11; // ≥ 11 minutes
|
||||
|
||||
function parseMinutes(el) {
|
||||
if (!el) return null;
|
||||
const m = el.textContent.match(/(\d+)\s*minute/);
|
||||
return m ? parseInt(m[1], 10) : null;
|
||||
}
|
||||
|
||||
function stylize(entry, opts) {
|
||||
Object.assign(entry.style, {
|
||||
backgroundColor: opts.bg,
|
||||
border: `1px solid ${opts.border}`,
|
||||
borderRadius: '4px',
|
||||
padding: '5px',
|
||||
transition: 'border-color .5s ease, box-shadow .5s ease',
|
||||
});
|
||||
entry.addEventListener('mouseover', () => {
|
||||
entry.style.borderColor = opts.hoverBorder;
|
||||
entry.style.boxShadow = `0 0 10px ${opts.hoverGlow}`;
|
||||
});
|
||||
entry.addEventListener('mouseout', () => {
|
||||
entry.style.borderColor = opts.border;
|
||||
entry.style.boxShadow = 'none';
|
||||
});
|
||||
}
|
||||
|
||||
document.querySelectorAll('article.item.entry-item').forEach(entry => {
|
||||
const mins = parseMinutes(entry.querySelector('.item-meta-info-reading-time span'));
|
||||
if (mins !== null) {
|
||||
if (mins <= SHORT_MAX) {
|
||||
stylize(entry, {
|
||||
bg: 'rgb(37, 44, 39)',
|
||||
border: 'rgb(79, 194, 20)',
|
||||
hoverBorder: 'rgb(129, 255, 50)',
|
||||
hoverGlow: 'rgba(129, 255, 50, .8)',
|
||||
});
|
||||
entry.dataset.readCategory = 'short';
|
||||
} else if (mins >= LONG_MIN) {
|
||||
stylize(entry, {
|
||||
bg: 'rgb(44, 39, 37)',
|
||||
border: 'rgb(194, 79, 20)',
|
||||
hoverBorder: 'rgb(255, 129, 50)',
|
||||
hoverGlow: 'rgba(255, 129, 50, .8)',
|
||||
});
|
||||
entry.dataset.readCategory = 'long';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function addFilter(label, category) {
|
||||
const nav = document.querySelector('.page-header nav ul');
|
||||
if (!nav) return;
|
||||
const btn = document.createElement('button');
|
||||
btn.textContent = `Filter: ${label}`;
|
||||
Object.assign(btn.style, {
|
||||
marginLeft: '10px',
|
||||
padding: '5px 10px',
|
||||
border: '1px solid rgb(79, 194, 20)',
|
||||
borderRadius: '5px',
|
||||
backgroundColor: 'rgb(37, 44, 39)',
|
||||
color: '#fff',
|
||||
cursor: 'pointer',
|
||||
});
|
||||
btn.onclick = () => {
|
||||
document.querySelectorAll('article.item.entry-item').forEach(e => {
|
||||
e.style.display = (category === 'all' || e.dataset.readCategory === category) ? '' : 'none';
|
||||
});
|
||||
};
|
||||
nav.appendChild(btn);
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
addFilter('Short Reads', 'short');
|
||||
addFilter('Long Reads', 'long');
|
||||
addFilter('All', 'all');
|
||||
});
|
||||
})();
|
@ -1,59 +0,0 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// Style and animate short reading time entries
|
||||
document.querySelectorAll('article.item.entry-item').forEach(entry => {
|
||||
const readingTimeElement = entry.querySelector('.item-meta-info-reading-time span');
|
||||
if (readingTimeElement && (readingTimeElement.textContent.includes('1 minute') || readingTimeElement.textContent.includes('2 minutes'))) {
|
||||
entry.style.backgroundColor = 'rgb(37, 44, 39)'; // Base dark muted greenish-gray
|
||||
entry.style.border = '1px solid rgb(79, 194, 20)'; // Subtle green border
|
||||
entry.style.borderRadius = '4px'; // Rounded corners
|
||||
entry.style.padding = '5px'; // Comfortable padding
|
||||
entry.style.transition = 'border-color 0.5s ease, box-shadow 0.5s ease'; // Smooth animation for border & shadow
|
||||
|
||||
// Add hover effect for geeky animation
|
||||
entry.addEventListener('mouseover', () => {
|
||||
entry.style.borderColor = 'rgb(129, 255, 50)'; // Brighter green on hover
|
||||
entry.style.boxShadow = '0 0 10px rgba(129, 255, 50, 0.8)'; // Neon glow effect
|
||||
});
|
||||
|
||||
entry.addEventListener('mouseout', () => {
|
||||
entry.style.borderColor = 'rgb(79, 194, 20)'; // Reset border color
|
||||
entry.style.boxShadow = 'none'; // Remove glow
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Add a filter for short reading times
|
||||
function addShortReadingTimeFilter() {
|
||||
const pageHeader = document.querySelector('.page-header nav ul');
|
||||
if (!pageHeader) return;
|
||||
|
||||
const filterButton = document.createElement('button');
|
||||
filterButton.textContent = 'Filter: Short Reads';
|
||||
filterButton.style.marginLeft = '10px';
|
||||
filterButton.style.padding = '5px 10px';
|
||||
filterButton.style.border = '1px solid rgb(79, 194, 20)';
|
||||
filterButton.style.borderRadius = '5px';
|
||||
filterButton.style.backgroundColor = 'rgb(37, 44, 39)';
|
||||
filterButton.style.color = '#fff';
|
||||
filterButton.style.cursor = 'pointer';
|
||||
|
||||
filterButton.onclick = () => {
|
||||
document.querySelectorAll('article.item.entry-item').forEach(entry => {
|
||||
const readingTimeElement = entry.querySelector('.item-meta-info-reading-time span');
|
||||
if (readingTimeElement &&
|
||||
(readingTimeElement.textContent.includes('1 minute') || readingTimeElement.textContent.includes('2 minutes'))) {
|
||||
entry.style.display = ''; // Show entry
|
||||
} else {
|
||||
entry.style.display = 'none'; // Hide non-matching entries
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
pageHeader.appendChild(filterButton);
|
||||
}
|
||||
|
||||
// Add the filter button after DOM is fully loaded
|
||||
document.addEventListener('DOMContentLoaded', addShortReadingTimeFilter);
|
||||
})();
|
Loading…
x
Reference in New Issue
Block a user