mmpSearch/plugin.html

126 lines
4.3 KiB
HTML

---
layout: default
title: Projetos com a tag Plugin
permalink: /plugin/
---
<meta charset="utf-8">
<main class="main-content">
<div class="publication">
{% include sidebar.html %}
</div>
<div class="container">
<div class="columns is-mobile is-vcentered" style="margin-bottom: 2rem;">
<!-- Título -->
<div class="column is-auto">
<h2 class="title is-4"><code>Projetos que possuem a tag plugin:</code></h2>
</div>
<!-- Botão Limpar Filtro -->
<div class="column is-auto">
<button id="clearFilterButton" class="button is-small is-light">
Limpar filtro
</button>
</div>
</div>
<!-- Projetos -->
<div id="project-list" class="columns is-multiline">
{% for projeto in site.data.all %}
{% if projeto.tags.TAG contains "plugin" %}
<div class="column is-6 project-item" data-plugins="{{ projeto.tags.plugin | 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 plugins clicáveis -->
{% if projeto.tags.plugin and projeto.tags.plugin.size > 0 %}
<div style="margin-top: 1rem;">
<p><strong>Plugins:</strong></p>
<ul style="list-style-type: disc; padding-left: 1.25rem;">
{% for plugin in projeto.tags.plugin %}
{% if plugin != "" %}
<li><a href="#" class="plugin-item" data-plugin="{{ plugin }}">{{ plugin }}</a></li>
{% endif %}
{% endfor %}
</ul>
</div>
{% endif %}
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</main>
<script>
document.addEventListener('DOMContentLoaded', function () {
const projects = document.querySelectorAll('.project-item');
// Função para aplicar filtro por plugin
function filterByPlugin(pluginName) {
projects.forEach(project => {
const projectPlugins = project.getAttribute('data-plugins').split(',');
if (projectPlugins.includes(pluginName)) {
project.style.display = 'block';
} else {
project.style.display = 'none';
}
});
}
// Lê o plugin da URL se houver
const urlParams = new URLSearchParams(window.location.search);
const pluginFromUrl = urlParams.get('plugin');
if (pluginFromUrl) {
filterByPlugin(pluginFromUrl);
}
// Ao clicar num plugin na lista
const pluginItems = document.querySelectorAll('.plugin-item');
pluginItems.forEach(item => {
item.addEventListener('click', function (event) {
event.preventDefault();
const selectedPlugin = item.getAttribute('data-plugin');
filterByPlugin(selectedPlugin);
// Atualiza a URL sem recarregar a página
const newUrl = new URL(window.location.href);
newUrl.searchParams.set('plugin', selectedPlugin);
window.history.replaceState({}, '', newUrl);
});
});
// Botão para limpar filtro
const clearFilterButton = document.querySelector('#clearFilterButton');
clearFilterButton.addEventListener('click', function () {
projects.forEach(project => {
project.style.display = 'block';
});
// Remove o filtro da URL
const newUrl = new URL(window.location.href);
newUrl.searchParams.delete('plugin');
window.history.replaceState({}, '', newUrl);
});
});
</script>