mmpSearch/pages/bassline.md

layout, title, permalink

layout	title	permalink
default	Projetos com a tag Bassline	/bassline/

{% include sidebar.html %}

Projetos que possuem a tag bassline:

Limpar filtro

<!-- Projetos -->
<div id="project-list" class="columns is-multiline">
  {% for projeto in site.data.all %} {% if projeto.tags.TAG contains
  "bassline" %}
  <div
    class="column is-6 project-item"
    data-bassline="{{ projeto.tags.bassline | join: ',' }}"
  >
    <div class="box">
      <!-- Botão do projeto -->
      {% assign file_url = projeto.file | downcase | replace: ' ', '-' |
      replace: 'ç', 'c' | replace: 'ã', 'a' | replace: 'á', 'a' | replace:
      'â', 'a' | replace: 'é', 'e' | replace: 'ê', 'e' | replace: 'í', 'i' |
      replace: 'ó', 'o' | replace: 'ô', 'o' | replace: 'õ', 'o' | replace:
      'ú', 'u' %}

      <a
        href="../mmp_pages/{{ file_url }}.html"
        class="button is-link is-fullwidth"
      >
        {{ projeto.file }}
      </a>

      <!-- Lista de Basslines clicáveis -->
      {% if projeto.tags.bassline and projeto.tags.bassline.size > 0 %}
      <div style="margin-top: 1rem">
        <p><strong>Bassline:</strong></p>
        <ul style="list-style-type: disc; padding-left: 1.25rem">
          {% for bassline in projeto.tags.bassline %} {% if bassline != ""
          %}
          <li>
            <a href="#" class="bassline-item" data-bassline="{{ bassline }}"
              >{{ bassline }}</a
            >
          </li>
          {% endif %} {% endfor %}
        </ul>
      </div>
      {% endif %}
    </div>
  </div>
  {% endif %} {% endfor %}
</div>

<script> document.addEventListener("DOMContentLoaded", function () { const projects = document.querySelectorAll(".project-item"); // Função para aplicar filtro por bassline function filterByBassline(basslineName) { projects.forEach((project) => { const projectBasslines = project .getAttribute("data-bassline") .split(","); if (projectBasslines.includes(basslineName)) { project.style.display = "block"; } else { project.style.display = "none"; } }); } // Lê o parâmetro bassline da URL (se houver) const urlParams = new URLSearchParams(window.location.search); let basslineFromUrl = urlParams.get("bassline"); // Substituir "+" por " " (espaços) if (basslineFromUrl) { basslineFromUrl = basslineFromUrl.replace(/\+/g, " "); filterByBassline(basslineFromUrl); } // Ao clicar numa bassline na lista const basslineItems = document.querySelectorAll(".bassline-item"); if (basslineItems.length > 0) { basslineItems.forEach((item) => { item.addEventListener("click", function (event) { event.preventDefault(); const selectedBassline = item.getAttribute("data-bassline"); // Substitui espaços por "+" const basslineForUrl = selectedBassline.replace(/ /g, "+"); filterByBassline(selectedBassline); // Atualiza a URL sem recarregar a página const newUrl = new URL(window.location.href); newUrl.searchParams.set("bassline", basslineForUrl); window.history.replaceState({}, "", newUrl); }); }); } // Botão para limpar filtro const clearFilterButton = document.querySelector("#clearFilterButton"); if (clearFilterButton) { clearFilterButton.addEventListener("click", function () { projects.forEach((project) => { project.style.display = "block"; }); // Remove o parâmetro bassline da URL const newUrl = new URL(window.location.href); newUrl.searchParams.delete("bassline"); window.history.replaceState({}, "", newUrl); }); } }); </script>