- Filter JSON (edit + apply)
- Ctrl + Enter
+ Filters
-
-
-
Invalid JSON. Fix the syntax and try again.
+
+
+ Címke kötelezése
+
+
+
+
+
+
+
-
-
-
-
+
+
0 találat
- Elrendezés: —
+ 0 találat
+ Elrendezés: —
@@ -566,23 +108,26 @@
-
+
- Filter JSON (edit + apply)
- Ctrl + Enter
+ Részletes keresés
-
-
-
@@ -607,10 +152,10 @@
const filterBtn = document.getElementById("filterBtn");
const filterDrawer = document.getElementById("filterDrawer");
const drawerBackdrop = document.getElementById("drawerBackdrop");
-
- const filterJson = document.getElementById("filterJson");
- const jsonError = document.getElementById("jsonError");
- const filterLabel = document.getElementById("filterLabel");
+ const filterFTag = document.getElementById("pexpo-core-tag-toggle");
+
+ // Element for MultiSelect
+ const filterTagsSelect = document.getElementById("pexpo-core-tags");
const qInput = document.getElementById("q");
const masonry = document.getElementById("masonry");
@@ -620,9 +165,8 @@
const layoutMeta = document.getElementById("layoutMeta");
const sortSelect = document.getElementById("sortSelect");
- // ---------- Mock Data Generator (Restored & Adapted) ----------
- function makeResults(n, q = "") {
- const words = [
+ // ---------- Mock Data Source ----------
+ const DATA_WORDS = [
"apple","river","mountain","cloud","stone","forest","breeze","candle","mirror","shadow",
"sunrise","sunset","ocean","island","valley","thunder","lightning","rain","snow","frost",
"ember","flame","smoke","ash","spark","comet","star","planet","orbit","galaxy",
@@ -651,43 +195,37 @@
"mission","challenge","victory","legend"
];
+ function makeResults(n, q = "") {
const out = [];
for (let i = 1; i <= n; i++) {
const score = Math.round(Math.random() * 100);
const extra = " ".repeat(Math.floor(Math.random() * 3)).replace(/ /g, "—");
- // Generate a title containing query words if query exists (to simulate search hits)
let title = "";
if(q && Math.random() > 0.3) {
- title = `${q} ${words[Math.floor(Math.random() * words.length)]}`;
+ title = `${q} ${DATA_WORDS[Math.floor(Math.random() * DATA_WORDS.length)]}`;
} else {
title = Math.random() < 0.3
- ? `The ${words[Math.floor(Math.random() * words.length)]} of ${words[Math.floor(Math.random() * words.length)]}`
- : `${words[Math.floor(Math.random() * words.length)]} ${words[Math.floor(Math.random() * words.length)]}`;
+ ? `The ${DATA_WORDS[Math.floor(Math.random() * DATA_WORDS.length)]} of ${DATA_WORDS[Math.floor(Math.random() * DATA_WORDS.length)]}`
+ : `${DATA_WORDS[Math.floor(Math.random() * DATA_WORDS.length)]} ${DATA_WORDS[Math.floor(Math.random() * DATA_WORDS.length)]}`;
}
- // Format for New Prod Schema
out.push({
id: i,
title: title.charAt(0).toUpperCase() + title.slice(1),
url: "#",
- // Adapting tags to be an array for the new renderer
tag: (() => {
- const numberOfTags = Math.floor(Math.random() * 5) + 1; // 1-5 tags
- // Determine random selection
- return words.slice().sort(() => 0.5 - Math.random()).slice(0, numberOfTags);
+ const numberOfTags = Math.floor(Math.random() * 4) + 1;
+ return DATA_WORDS.slice().sort(() => 0.5 - Math.random()).slice(0, numberOfTags);
})(),
excerpt:
"Lorem ipsum dolor sit amet consectetur adipiscing elit. Consectetur adipiscing elit quisque faucibus ex sapien vitae." +
(score % 3 === 0 ? " Ex sapien vitae pellentesque sem placerat in id." : "") +
- (score % 5 === 0 ? " Placerat in id cursus mi pretium tellus duis. Pretium tellus duis convallis tempus leo eu aenean." : "") +
(extra ? "" : ""),
- score, // Internal use for sorting
+ score,
image: `https://placehold.co/600x400?text=${encodeURIComponent(title)}`,
- date: new Date(Date.now() - Math.random() * 1000 * 60 * 60 * 24 * 30)
- .toISOString()
- .slice(0, 10),
- relevance: 0 // Computed locally
+ date: new Date(Date.now() - Math.random() * 1000 * 60 * 60 * 24 * 30).toISOString().slice(0, 10),
+ relevance: 0
});
}
return out;
@@ -695,33 +233,55 @@
// ---------- State ----------
let filters = {
+ q: "",
sort: "relevance",
- status: ["active", "archived"],
- tags: ["ui", "mock"],
- maxResults: 20
+ tags: [], // Array of strings
+ force_tags: false, // AND vs OR logic
+ maxResults: 50
};
let activeSortKey = "relevance";
let results = [];
+ // ---------- Initialize MultiSelect Library ----------
+ // NOTE: This runs only if the library script is loaded
+ if (typeof MultiSelect !== 'undefined') {
+
+ // 1. Prepare Data for Lib ({value, text})
+ const multiSelectData = DATA_WORDS.sort().map(word => {
+ return {
+ value: word,
+ text: word.charAt(0).toUpperCase() + word.slice(1)
+ };
+ });
+
+ // 2. Init
+ new MultiSelect(filterTagsSelect, {
+ placeholder: 'Címkék kiválasztása',
+ max: 20,
+ search: true,
+ selectAll: true,
+ onSelect: function(value, text, element) {
+ if (!filters.tags.includes(value)) {
+ filters.tags.push(value);
+ }
+ console.log('Updated filters.tags:', filters.tags);
+ },
+ onUnselect: function(value, text, element) {
+ filters.tags = filters.tags.filter(tag => tag !== value);
+ console.log('Updated filters.tags:', filters.tags);
+ }
+ });
+ } else {
+ console.warn("MultiSelect library not found. Filters will not work without it.");
+ }
+
// ---------- Sort Definitions ----------
const SORTS = {
- relevance: {
- label: "Relevance",
- compare: (a, b) => (b.relevance - a.relevance) || (b.score - a.score)
- },
- score_desc: {
- label: "Score (high → low)",
- compare: (a, b) => (b.score - a.score)
- },
- date_desc: {
- label: "Date (new → old)",
- compare: (a, b) => new Date(b.date) - new Date(a.date)
- },
- title_asc: {
- label: "Title (A → Z)",
- compare: (a, b) => (a.title || "").localeCompare(b.title || "")
- }
+ relevance: { label: "Relevance", compare: (a, b) => (b.relevance - a.relevance) || (b.score - a.score) },
+ score_desc: { label: "Score (high → low)", compare: (a, b) => (b.score - a.score) },
+ date_desc: { label: "Date (new → old)", compare: (a, b) => new Date(b.date) - new Date(a.date) },
+ title_asc: { label: "Title (A → Z)", compare: (a, b) => (a.title || "").localeCompare(b.title || "") }
};
// ---------- Helpers ----------
@@ -731,15 +291,12 @@
}[s]));
}
- // NOTE: This uses the new Production HTML structure and Classes
function cardEl(r) {
const div = document.createElement("div");
div.className = "pexpo-core-card";
div.innerHTML = `
Invalid JSON. Fix the syntax and try again.
+
+
+ Címke kötelezése
+
+
+
+
+
+
+
+
+
- })
+
${escapeHtml(r.title)}
@@ -747,11 +304,7 @@
@@ -760,8 +313,6 @@
}
// ---------- Logic: Data Fetch & Relevance ----------
-
- // Local client-side relevance scorer (Restored from old version)
function computeRelevance(r, q) {
const query = (q || "").trim().toLowerCase();
if (!query) return r.score;
@@ -770,7 +321,6 @@
if (!terms.length) return r.score;
const title = (r.title || "").toLowerCase();
- // Check title, excerpt, and tags
const hay = `${r.title} ${r.excerpt} ${r.tag.join(' ')}`.toLowerCase();
let hits = 0;
@@ -779,8 +329,6 @@
if (hay.includes(t)) hits++;
if (title.includes(t)) titleHits++;
}
-
- // Weight formula
return (hits * 30) + (titleHits * 25) + (r.score * 0.35);
}
@@ -788,20 +336,26 @@
for (const r of results) r.relevance = computeRelevance(r, q);
}
- // Mock Fetcher
async function fetchData(query = "") {
- // 1. Simulate Loading
masonry.style.opacity = "0.5";
-
- // Simulate network delay (200ms) for realism
await new Promise(resolve => setTimeout(resolve, 200));
try {
- // 2. Generate Data locally instead of fetching from WP
- const count = Number(filters.maxResults) || 20;
- results = makeResults(Math.min(count, 100), query);
+ // 1. Generate Raw Data
+ const count = Number(filters.maxResults) || 50;
+ let generated = makeResults(Math.min(count, 100), query);
- // 3. Compute relevance locally
+ // 2. Apply Filters (Tags)
+ if (filters.tags && filters.tags.length > 0) {
+ generated = generated.filter(item => {
+ // Does the item have at least one of the selected tags?
+ return item.tag.some(t => filters.tags.includes(t));
+ });
+ }
+
+ results = generated;
+
+ // 3. Compute relevance
recomputeRelevance(query);
// 4. Trigger Layout
@@ -864,13 +418,11 @@
for (let c = 1; c < cols; c++) {
if (colHeights[c] < colHeights[bestCol]) bestCol = c;
}
-
const lookN = Math.min(K, queue.length);
let pick = 0;
for (let i = 1; i < lookN; i++) {
if (queue[i].h > queue[pick].h) pick = i;
}
-
const picked = queue.splice(pick, 1)[0];
placements.push({ item: picked, col: bestCol });
colHeights[bestCol] += picked.h + gap();
@@ -883,9 +435,12 @@
count.textContent = n;
masonry.innerHTML = "";
- const cols = getColumnCount();
+ if (n === 0) {
+ masonry.innerHTML = `
${escapeHtml(r.excerpt)}
- ${
- Array.isArray(r.tag)
- ? r.tag.map(element => `${escapeHtml(element)}`).join('')
- : ''
- }
+ ${Array.isArray(r.tag) ? r.tag.map(element => `${escapeHtml(element)}`).join('') : ''}
${escapeHtml(r.date)}
Nincs a szűrőnek megfelelő találat.
`;
+ return;
+ }
- // Create Columns
+ const cols = getColumnCount();
const colEls = [];
for (let c = 0; c < cols; c++) {
const col = document.createElement("div");
@@ -894,15 +449,11 @@
colEls.push(col);
}
- // 1. Sort Data
const sorter = SORTS[activeSortKey] || SORTS.relevance;
const sorted = results.slice().sort(sorter.compare);
-
- // 2. Measure & Pack
const { measured } = measureCardHeights(cols, sorted);
const placements = packRankAware(measured, cols, 6);
- // 3. Render
for (const p of placements) {
colEls[p.col].appendChild(cardEl(p.item.r));
}
@@ -920,17 +471,25 @@
sortSelect.value = activeSortKey;
sortSelect.addEventListener("change", () => {
activeSortKey = sortSelect.value;
- requestLayout(); // Just relayout, no need to re-fetch
+ filters.sort = activeSortKey;
+ requestLayout();
});
}
// Search
- qInput.addEventListener("keydown", (e) => {
+ qInput.addEventListener("keyup", (e) => { // Changed to keyup for live feeling, or keep Enter
if (e.key === "Enter") {
- fetchData(qInput.value.trim());
+ filters.q = qInput.value.trim();
+ fetchData(filters.q);
}
});
+ // Tag Toggle
+ filterFTag.addEventListener("change", () => {
+ filters.force_tags = filterFTag.checked;
+ console.log("Force tags:", filters.force_tags);
+ });
+
// Filter Drawer Logic
function syncTopbarHeight() {
const h = topbar.offsetHeight;
@@ -940,15 +499,11 @@
function setOpen(open) {
filterWrap.classList.toggle("pexpo-core-open", open);
filterBtn.setAttribute("aria-expanded", String(open));
-
filterDrawer.classList.toggle("pexpo-core-open", open);
filterDrawer.setAttribute("aria-hidden", String(!open));
-
drawerBackdrop.classList.toggle("pexpo-core-show", open);
shell.classList.toggle("pexpo-core-drawerOpen", open);
-
syncTopbarHeight();
- if (open) filterJson.focus();
}
filterBtn.addEventListener("click", () => setOpen(!filterDrawer.classList.contains("pexpo-core-open")));
@@ -957,29 +512,6 @@
if (e.key === "Escape" && filterDrawer.classList.contains("pexpo-core-open")) setOpen(false);
});
- // Apply JSON Filter
- function applyJson() {
- try {
- const parsed = JSON.parse(filterJson.value);
- jsonError.classList.remove("pexpo-core-show");
- filters = parsed;
- filterLabel.textContent = (filters.category || "Custom");
-
- // Trigger new search (generation) with new filters
- fetchData(qInput.value.trim());
-
- } catch (err) {
- jsonError.classList.add("pexpo-core-show");
- }
- }
-
- filterJson.addEventListener("keydown", (e) => {
- if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
- e.preventDefault();
- applyJson();
- }
- });
-
// Resize Observer
const ro = new ResizeObserver(() => {
syncTopbarHeight();
@@ -993,6 +525,6 @@
fetchData("");
});
-
+