diff --git a/pages/projetos.md b/pages/projetos.md index 7354b9c7..8032862a 100755 --- a/pages/projetos.md +++ b/pages/projetos.md @@ -298,7 +298,11 @@ permalink: /projetos/
{% for tag in unique_insts_page %}{% if tag != "" %} - {{ tag | truncate: 18 }} + + {{ tag | truncate: 18 }} + {% endif %}{% endfor %}
@@ -312,11 +316,70 @@ permalink: /projetos/
{% for tag in page.tags.plugin %}{% if tag != "" %} - {{ tag | truncate: 18 }} + + {{ tag | truncate: 18 }} + {% endif %}{% endfor %}
{% endif %} + + {% if page.tags.bassline and page.tags.bassline.size > 0 %} +
+ +
🎹 BASSLINE
+ +
+
+ {% for tag in page.tags.bassline %}{% if tag != "" %} + + {{ tag | truncate: 18 }} + + {% endif %}{% endfor %} +
+
+ {% endif %} + + {% if page.tags.automation and page.tags.automation.size > 0 %} +
+ +
🎚️ AUTOMATION
+ +
+
+ {% for tag in page.tags.automation %}{% if tag != "" %} + + {{ tag | truncate: 18 }} + + {% endif %}{% endfor %} +
+
+ {% endif %} + + {% if page.tags.sample and page.tags.sample.size > 0 %} +
+ +
🎤 SAMPLES
+ +
+
+ {% for tag in page.tags.sample %}{% if tag != "" %} + + {{ tag | truncate: 18 }} + + {% endif %}{% endfor %} +
+
+ {% endif %} + @@ -388,6 +451,16 @@ permalink: /projetos/ .clickable-tag { font-size: 0.6rem; height: 1.5em; border: 1px solid #cfe8fc; text-decoration: none; padding: 0 6px; transition: all 0.2s ease; } .clickable-tag:hover { background-color: #3273dc !important; color: #fff !important; border-color: #3273dc !important; transform: translateY(-1px); } + /* TAG HIGHLIGHT */ + .clickable-tag.is-matched-tag { + background-color: #ffdd57 !important; /* Amarelo */ + color: #363636 !important; + border-color: #ffcc00 !important; + box-shadow: 0 0 5px rgba(255, 200, 0, 0.5); + font-weight: 700; + transform: scale(1.05); + } + .border-tag { border: 1px solid #dbdbdb; color: #555; } /* Botões de Limpar Grupo */ @@ -604,11 +677,27 @@ document.addEventListener('DOMContentLoaded', function () { applyGlobalFilters(); } + // --- MAIN FILTER LOGIC WITH HIGHLIGHTING --- function applyGlobalFilters() { let visibleCount = 0; let minBpm = parseInt(inputMin.value); let maxBpm = parseInt(inputMax.value); if(minBpm > maxBpm) { let t = minBpm; minBpm = maxBpm; maxBpm = t; } + + // Coleta todos os termos de busca para o highlight + // (Junta todos os filtros de texto ativos em um único set para performance) + const allActiveTags = new Set([ + ...activeSidebar.instruments, + ...activeSidebar.plugins, + ...activeSidebar.samples, + ...activeSidebar.bassline, + ...activeSidebar.automation, + ...activeSidebar.genres, + ...activeSidebar.keys + ].map(s => s.toLowerCase())); + + // Check if any filter (except stars/bpm) is active to trigger auto-open + const hasActiveTypeFilter = allActiveTags.size > 0 || (searchText.length > 2); document.querySelectorAll('.project-item').forEach(item => { // Leitura @@ -646,6 +735,38 @@ document.addEventListener('DOMContentLoaded', function () { if (matchInst && matchPlugin && matchSample && matchBassline && matchAuto && matchBpm && matchText && matchGenres && matchKeys && matchStars) { item.style.display = 'block'; visibleCount++; + + // --- HIGHLIGHT LOGIC --- + // 1. Reset highlights + const clickableTags = item.querySelectorAll('.clickable-tag'); + clickableTags.forEach(t => t.classList.remove('is-matched-tag')); + + // 2. Apply matches & Auto-open + if(hasActiveTypeFilter) { + // Close all details first to reduce noise (optional strategy) + item.querySelectorAll('details').forEach(d => d.open = false); + + clickableTags.forEach(tagEl => { + const tagVal = (tagEl.dataset.tagValue || "").trim().toLowerCase(); + // Check exact match from filters OR text search partial match + const isFilterMatch = allActiveTags.has(tagVal); + const isTextMatch = searchText.length > 2 && tagVal.includes(searchText); + + if (isFilterMatch || isTextMatch) { + tagEl.classList.add('is-matched-tag'); + const parentDetails = tagEl.closest('details'); + if(parentDetails) parentDetails.open = true; // Auto-open! + } + }); + } + // If no filters active, maybe leave default open state (usually instruments open) + else { + // Reset to default (Instruments open, others closed) + item.querySelectorAll('details').forEach(d => d.open = false); + const instDetail = item.querySelector('details:first-of-type'); // Assuming instruments is first + if(instDetail) instDetail.open = true; + } + } else { item.style.display = 'none'; }