JotaChina/mmpSearch
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

melhorando build

Browse Source
This commit is contained in:
JotaChina committed 2026-04-04 13:54:18 -03:00
1 parent b14708e06c
commit fe6e9f7e24
3 files changed
+176 -224
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

pages/projetos.html
+83 -72
View File
@@ -4,11 +4,6 @@ title: MMPSearch - Projetos
permalink: /projetos/
---
{% assign list_plugins = "" %}{% assign list_instruments = "" %} {% for p in
site.data.all %}{% for item in p.tags.plugin %}{% assign list_plugins =
list_plugins | append: item | append: "|||" %}{% endfor %}{% endfor %} {% assign
unique_plugins = list_plugins | split: "|||" | uniq | sort %}
<div class="publication">
<div class="container is-fluid">
<br />
@@ -44,21 +39,25 @@ unique_plugins = list_plugins | split: "|||" | uniq | sort %}
<div class="columns">
<div class="column is-3">
<div class="box p-3" style="background: #fcfcfc">
<div
class="box p-3"
style="background: #fcfcfc; border: 1px solid #eee"
>
<div class="field mb-5">
<label class="label is-size-7">BUSCA TEXTUAL</label>
<label class="label is-size-7 has-text-grey">BUSCA TEXTUAL</label>
<div class="control has-icons-left">
<input
class="input is-small"
type="text"
id="search-input"
placeholder="Nome, plugin..."
/><span class="icon is-small is-left"
/>
<span class="icon is-small is-left"
><i class="fa-solid fa-magnifying-glass"></i
></span>
</div>
</div>
<hr />
<hr class="my-3" />
<details open>
<summary
class="menu-label has-text-weight-bold mb-2"
@@ -74,29 +73,14 @@ unique_plugins = list_plugins | split: "|||" | uniq | sort %}
flex-wrap: wrap;
justify-content: center;
"
>
${Array.from({length: 16}).map((_, i) => `
<div
class="search-step"
data-index="${i}"
style="
width: 22px;
height: 35px;
background: #eee;
border: 1px solid #ccc;
border-radius: 3px;
cursor: pointer;
"
></div>
`).join('')}
</div>
></div>
</details>
<hr />
<label class="label is-size-7">BPM RANGE</label>
<hr class="my-3" />
<label class="label is-size-7">FAIXA DE BPM</label>
<div class="columns is-mobile is-variable is-1">
<div class="column">
<input
class="input is-small"
class="input is-small has-text-centered"
type="number"
id="bpm-min"
value="0"
@@ -104,7 +88,7 @@ unique_plugins = list_plugins | split: "|||" | uniq | sort %}
</div>
<div class="column">
<input
class="input is-small"
class="input is-small has-text-centered"
type="number"
id="bpm-max"
value="300"
@@ -116,11 +100,16 @@ unique_plugins = list_plugins | split: "|||" | uniq | sort %}
<div class="column is-9">
<div class="notification is-info is-light mb-4" id="results-count-bar">
Encontrados <span id="visible-count">0</span> projetos.
Encontrados
<span id="visible-count" class="has-text-weight-bold">0</span>
projetos.
</div>
<div id="project-list" class="columns is-multiline"></div>
<div id="no-results" class="has-text-centered is-hidden mt-6">
<p class="subtitle has-text-grey">Nenhum projeto encontrado.</p>
<span class="icon is-large has-text-grey-light"
><i class="fa-solid fa-face-frown fa-3x"></i
></span>
<p class="subtitle mt-3 has-text-grey">Nenhum projeto encontrado.</p>
</div>
</div>
</div>
@@ -128,6 +117,15 @@ unique_plugins = list_plugins | split: "|||" | uniq | sort %}
</div>
<style>
.search-step {
width: 22px;
height: 35px;
background: #eee;
border: 1px solid #ccc;
border-radius: 3px;
cursor: pointer;
transition: 0.1s;
}
.search-step.is-active {
background-color: #3273dc !important;
border-color: #205081 !important;
@@ -164,15 +162,20 @@ unique_plugins = list_plugins | split: "|||" | uniq | sort %}
document.addEventListener("DOMContentLoaded", function () {
const projectList = document.getElementById("project-list");
const searchInput = document.getElementById("search-input");
const bpmMin = document.getElementById("bpm-min");
const bpmMax = document.getElementById("bpm-max");
const bpmMinInput = document.getElementById("bpm-min");
const bpmMaxInput = document.getElementById("bpm-max");
const countSpan = document.getElementById("visible-count");
const searchSteps = document.querySelectorAll(".search-step");
const patternBox = document.getElementById("pattern-search-box");
let allData = [];
let activePatternChunks = [];
// 1. Carregar Dados
// Cria os 16 quadradinhos do filtro de ritmo
patternBox.innerHTML = Array.from({ length: 16 })
.map((_, i) => `<div class="search-step" data-index="${i}"></div>`)
.join("");
const searchSteps = document.querySelectorAll(".search-step");
fetch(
'{{ "src_mmpSearch/saida_analises/db_final_completo.json" | relative_url }}',
)
@@ -183,49 +186,54 @@ unique_plugins = list_plugins | split: "|||" | uniq | sort %}
applyFilters();
});
// 2. Função de Renderização de Cards
function renderCards(data) {
projectList.innerHTML = data
.map((p) => {
const fileName = p.file || p.arquivo || "projeto-sem-nome"; // Correção do Erro
const pBpm = p.bpm || 0;
// Extração de chunks para o filtro de pattern (lógica idêntica ao original)
let chunks = [];
p.tracks?.forEach((t) => {
(t.instruments || [t]).forEach((inst) => {
inst.patterns?.forEach((pat) => {
for (let i = 0; i < (pat.steps?.length || 0); i += 4) {
const chunk = pat.steps
.slice(i, i + 4)
.map((s) => (s ? "1" : "0"))
.join("");
if (chunk !== "0000" && !chunks.includes(chunk))
chunks.push(chunk);
if (p.tracks) {
p.tracks.forEach((t) => {
const instruments = t.instruments || [t];
instruments.forEach((inst) => {
if (inst.patterns) {
inst.patterns.forEach((pat) => {
if (pat.steps) {
for (let i = 0; i < pat.steps.length; i += 4) {
const chunk = pat.steps
.slice(i, i + 4)
.map((s) => (s ? "1" : "0"))
.join("");
if (chunk !== "0000" && !chunks.includes(chunk))
chunks.push(chunk);
}
}
});
}
});
});
});
}
return `
<div class="column is-4 project-item"
data-name="${p.file.toLowerCase()}"
<div class="column is-12-mobile is-6-tablet is-4-desktop project-item"
data-name="${fileName.toLowerCase()}"
data-bpm="${pBpm}"
data-patterns="${chunks.join(",")}">
<div class="card project-card" style="height: 100%; border-radius: 12px; border: 1px solid #cfe8fc; display: flex; flex-direction: column;">
<a href="{{ '/projeto/?id=' | relative_url }}${p.file}" style="text-decoration: none; flex: 1;">
<a href="{{ '/projeto/?id=' | relative_url }}${fileName}" style="text-decoration: none; flex: 1;">
<div class="card-content has-text-centered p-4">
<div style="width: 50px; height: 50px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px;">
<div style="width: 50px; height: 50px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
<span class="icon" style="color: #3273dc;"><i class="fa-solid fa-music fa-lg"></i></span>
</div>
<p class="title is-6 mb-2" style="color: #205081;">${p.file.replace(".html", "")}</p>
<div class="bpm-tag mb-3">
<span class="tag is-dark is-rounded is-light">🎵 ${pBpm} BPM</span>
</div>
<div class="patterns-preview" style="min-height: 20px;">
<p class="title is-6 mb-2" style="color: #205081;">${fileName.replace(".html", "")}</p>
<div class="mb-3"><span class="tag is-dark is-rounded is-light">🎵 ${pBpm} BPM</span></div>
<div class="patterns-preview">
${chunks
.slice(0, 5)
.slice(0, 4)
.map(
(c) => `
<div class="pattern-mini-grid">
<div class="pattern-mini-grid" title="Pattern: ${c}">
${c
.split("")
.map(
@@ -240,8 +248,8 @@ unique_plugins = list_plugins | split: "|||" | uniq | sort %}
</div>
</div>
</a>
<footer class="card-footer" style="border-top: 1px solid #cfe8fc;">
<a href="{{ '/projeto/?id=' | relative_url }}${p.file}" class="card-footer-item" style="font-size: 0.8rem; font-weight: 600;">Ver Detalhes</a>
<footer class="card-footer" style="border-top: 1px solid #cfe8fc; background: #fff; border-radius: 0 0 12px 12px;">
<a href="{{ '/projeto/?id=' | relative_url }}${fileName}" class="card-footer-item" style="color: #3273dc; font-size: 0.8rem; font-weight: 600;">Ver Detalhes</a>
</footer>
</div>
</div>`;
@@ -249,17 +257,18 @@ unique_plugins = list_plugins | split: "|||" | uniq | sort %}
.join("");
}
// 3. Lógica de Filtro
function applyFilters() {
const text = searchInput.value.toLowerCase();
const min = parseInt(bpmMin.value) || 0;
const max = parseInt(bpmMax.value) || 999;
const min = parseInt(bpmMinInput.value) || 0;
const max = parseInt(bpmMaxInput.value) || 999;
let count = 0;
document.querySelectorAll(".project-item").forEach((item) => {
const name = item.dataset.name;
const bpm = parseInt(item.dataset.bpm);
const pPatterns = item.dataset.patterns.split(",");
const name = item.dataset.name || "";
const bpm = parseInt(item.dataset.bpm) || 0;
const pPatterns = item.dataset.patterns
? item.dataset.patterns.split(",")
: [];
const matchText = name.includes(text);
const matchBpm = bpm >= min && bpm <= max;
@@ -275,12 +284,14 @@ unique_plugins = list_plugins | split: "|||" | uniq | sort %}
}
});
countSpan.textContent = count;
document
.getElementById("no-results")
.classList.toggle("is-hidden", count > 0);
}
// 4. Event Listeners
searchInput.addEventListener("input", applyFilters);
bpmMin.addEventListener("input", applyFilters);
bpmMax.addEventListener("input", applyFilters);
bpmMinInput.addEventListener("input", applyFilters);
bpmMaxInput.addEventListener("input", applyFilters);
searchSteps.forEach((step) => {
step.addEventListener("click", function () {
@@ -303,8 +314,8 @@ unique_plugins = list_plugins | split: "|||" | uniq | sort %}
.getElementById("reset-all-filters")
.addEventListener("click", () => {
searchInput.value = "";
bpmMin.value = 0;
bpmMax.value = 300;
bpmMinInput.value = 0;
bpmMaxInput.value = 300;
searchSteps.forEach((s) => s.classList.remove("is-active"));
activePatternChunks = [];
applyFilters();