melhorando build
This commit is contained in:
JotaChina committed
1 parent
21cc21c0e7
commit
556f2eecdb
2 files changed
+427
-176
No files matched your search
+273
-29
@@ -4,6 +4,11 @@ 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 />
|
||||
@@ -11,14 +16,109 @@ permalink: /projetos/
|
||||
{% include sidebar.html %}
|
||||
</div>
|
||||
|
||||
<div class="columns is-vcentered mb-4">
|
||||
<div class="column">
|
||||
<h1 class="title is-3 has-text-grey-dark">📁 Projetos Disponíveis</h1>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<div class="select is-small is-rounded">
|
||||
<select id="sort-select">
|
||||
<option value="default">Ordem Alfabética</option>
|
||||
<option value="bpm_desc">BPM (Rápido)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button
|
||||
id="reset-all-filters"
|
||||
class="button is-danger is-light is-small"
|
||||
>
|
||||
Limpar Tudo
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
<div class="box p-3" id="sidebar-filters"></div>
|
||||
<div class="box p-3" style="background: #fcfcfc">
|
||||
<div class="field mb-5">
|
||||
<label class="label is-size-7">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"
|
||||
><i class="fa-solid fa-magnifying-glass"></i
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<details open>
|
||||
<summary
|
||||
class="menu-label has-text-weight-bold mb-2"
|
||||
style="cursor: pointer"
|
||||
>
|
||||
🥁 Pattern Rítmico
|
||||
</summary>
|
||||
<div
|
||||
id="pattern-search-box"
|
||||
style="
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
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>
|
||||
</details>
|
||||
<hr />
|
||||
<label class="label is-size-7">BPM RANGE</label>
|
||||
<div class="columns is-mobile is-variable is-1">
|
||||
<div class="column">
|
||||
<input
|
||||
class="input is-small"
|
||||
type="number"
|
||||
id="bpm-min"
|
||||
value="0"
|
||||
/>
|
||||
</div>
|
||||
<div class="column">
|
||||
<input
|
||||
class="input is-small"
|
||||
type="number"
|
||||
id="bpm-max"
|
||||
value="300"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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.
|
||||
</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>
|
||||
</div>
|
||||
@@ -27,43 +127,187 @@ permalink: /projetos/
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.search-step.is-active {
|
||||
background-color: #3273dc !important;
|
||||
border-color: #205081 !important;
|
||||
}
|
||||
.project-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 20px rgba(50, 115, 220, 0.15);
|
||||
border-color: #3273dc !important;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.pattern-mini-grid {
|
||||
display: inline-flex;
|
||||
gap: 1px;
|
||||
padding: 2px;
|
||||
border: 1px solid #deeaf6;
|
||||
border-radius: 2px;
|
||||
background: #fff;
|
||||
margin-right: 2px;
|
||||
}
|
||||
.mini-step {
|
||||
width: 3px;
|
||||
height: 6px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.mini-step.active {
|
||||
background-color: #3273dc;
|
||||
}
|
||||
.mini-step.inactive {
|
||||
background-color: #eee;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const projectList = document.getElementById("project-list");
|
||||
const JSON_URL =
|
||||
'{{ "/mmpSearch/src_mmpSearch/saida_analises/db_final_completo.json" | relative_url }}';
|
||||
const searchInput = document.getElementById("search-input");
|
||||
const bpmMin = document.getElementById("bpm-min");
|
||||
const bpmMax = document.getElementById("bpm-max");
|
||||
const countSpan = document.getElementById("visible-count");
|
||||
const searchSteps = document.querySelectorAll(".search-step");
|
||||
|
||||
fetch(JSON_URL)
|
||||
let allData = [];
|
||||
let activePatternChunks = [];
|
||||
|
||||
// 1. Carregar Dados
|
||||
fetch(
|
||||
'{{ "/mmpSearch/src_mmpSearch/saida_analises/db_final_completo.json" | relative_url }}',
|
||||
)
|
||||
.then((r) => r.json())
|
||||
.then((data) => {
|
||||
renderAllCards(data);
|
||||
// Aqui você chama as suas funções de filtro originais (applyGlobalFilters)
|
||||
// que agora vão atuar sobre os elementos criados dinamicamente.
|
||||
allData = data;
|
||||
renderCards(allData);
|
||||
applyFilters();
|
||||
});
|
||||
|
||||
function renderAllCards(projects) {
|
||||
projectList.innerHTML = projects
|
||||
.map(
|
||||
(p) => `
|
||||
<div class="column is-4 project-item"
|
||||
data-name="${p.file.toLowerCase()}"
|
||||
data-bpm="${p.bpm || 0}">
|
||||
<div class="card project-card" style="height: 100%; border-radius: 12px; background-color: #f0f8ff;">
|
||||
<a href="{{ '/projeto/?id=' | relative_url }}${p.file}" style="text-decoration: none;">
|
||||
<div class="card-content has-text-centered">
|
||||
<div class="icon is-large has-text-info"><i class="fa-solid fa-music fa-2x"></i></div>
|
||||
<p class="title is-6 mt-3">${p.file.replace(".html", "")}</p>
|
||||
<span class="tag is-dark is-rounded">🎵 ${p.bpm || "N/A"} BPM</span>
|
||||
// 2. Função de Renderização de Cards
|
||||
function renderCards(data) {
|
||||
projectList.innerHTML = data
|
||||
.map((p) => {
|
||||
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);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
return `
|
||||
<div class="column is-4 project-item"
|
||||
data-name="${p.file.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;">
|
||||
<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;">
|
||||
<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;">
|
||||
${chunks
|
||||
.slice(0, 5)
|
||||
.map(
|
||||
(c) => `
|
||||
<div class="pattern-mini-grid">
|
||||
${c
|
||||
.split("")
|
||||
.map(
|
||||
(b) =>
|
||||
`<div class="mini-step ${b === "1" ? "active" : "inactive"}"></div>`,
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
`,
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<footer class="card-footer">
|
||||
<a href="{{ '/projeto/?id=' | relative_url }}${p.file}" class="card-footer-item">Ver Detalhes</a>
|
||||
</footer>
|
||||
</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>
|
||||
</div>
|
||||
</div>`;
|
||||
})
|
||||
.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;
|
||||
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 matchText = name.includes(text);
|
||||
const matchBpm = bpm >= min && bpm <= max;
|
||||
const matchPattern =
|
||||
activePatternChunks.length === 0 ||
|
||||
activePatternChunks.every((c) => pPatterns.includes(c));
|
||||
|
||||
if (matchText && matchBpm && matchPattern) {
|
||||
item.style.display = "block";
|
||||
count++;
|
||||
} else {
|
||||
item.style.display = "none";
|
||||
}
|
||||
});
|
||||
countSpan.textContent = count;
|
||||
}
|
||||
|
||||
// 4. Event Listeners
|
||||
searchInput.addEventListener("input", applyFilters);
|
||||
bpmMin.addEventListener("input", applyFilters);
|
||||
bpmMax.addEventListener("input", applyFilters);
|
||||
|
||||
searchSteps.forEach((step) => {
|
||||
step.addEventListener("click", function () {
|
||||
this.classList.toggle("is-active");
|
||||
updatePatternChunks();
|
||||
applyFilters();
|
||||
});
|
||||
});
|
||||
|
||||
function updatePatternChunks() {
|
||||
let full = Array.from(searchSteps)
|
||||
.map((s) => (s.classList.contains("is-active") ? "1" : "0"))
|
||||
.join("");
|
||||
activePatternChunks = (full.match(/.{1,4}/g) || []).filter(
|
||||
(c) => c !== "0000",
|
||||
);
|
||||
}
|
||||
|
||||
document
|
||||
.getElementById("reset-all-filters")
|
||||
.addEventListener("click", () => {
|
||||
searchInput.value = "";
|
||||
bpmMin.value = 0;
|
||||
bpmMax.value = 300;
|
||||
searchSteps.forEach((s) => s.classList.remove("is-active"));
|
||||
activePatternChunks = [];
|
||||
applyFilters();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
Reference in new issue
Block a user