Skip to content

Commit

Permalink
jquery replaced with vanilla js
Browse files Browse the repository at this point in the history 
Signed-off-by: Jurj-Bogdan <[email protected]>
  • Loading branch information
@Jurj-Bogdan
Jurj-Bogdan committed Dec 13, 2024
1 parent 0325362 commit 3b467e2
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 96 deletions.
168 changes: 78 additions & 90 deletions bootstrap/js/_ecosystem.js
View file
Original file line number Diff line number Diff line change
@@ -1,114 +1,102 @@
'use strict';

$(document).ready(function () {
$('.package-button').click(function (e) {
e.preventDefault();

const url = new URL(window.location.href);
const params = new URLSearchParams(url.search);
const entry = $(this).data('value');

if ($(this).hasClass('keyword')) {
if (! params.has("keywords[]", entry)) {
params.append("keywords[]", entry);
url.search = params.toString();

window.location.replace(url.toString());
}
document.querySelectorAll('.package-button.type, .package-button.category, .package-button.usage').forEach(button => {
button.addEventListener('click', handleFilters);
})

document.querySelectorAll('.package-button.keyword').forEach(button => {
button.addEventListener('click', handleKeywords);
})

document.querySelectorAll('.ecosystem-filter').forEach(button => {
button.addEventListener('click', removeKeyword);
})

document.querySelectorAll('#ecosystem-pagination a').forEach(a => {
const url = new URL(a.href)
for (let [k,v] of new URLSearchParams(window.location.search).entries()) {
if (k === 'keywords[]' || k === 'q' || k === 'type' || k === 'category' || k === 'usage') {
url.searchParams.set(k,v);
}
}
a.href = url.toString();
})

if ($(this).hasClass('type')) {
if (! params.has("type", entry)) {
url.searchParams.set('type', entry);

window.location.replace(url.toString());
} else if (params.get("type") === entry) {
url.searchParams.delete("type");
document.querySelector('#clear-filters-button')?.addEventListener('click', function () {
const url = new URL(window.location.href);

window.location.replace(url.toString());
}
for (let [k,v] of new URLSearchParams(window.location.search).entries()) {
if (k !== 'page') {
url.searchParams.delete(k);
}
}

if ($(this).hasClass('category')) {
if (! params.has("category", entry)) {
url.searchParams.set('category', entry);

window.location.replace(url.toString());
} else if (params.get("category") === entry) {
url.searchParams.delete("category");

window.location.replace(url.toString());
}
}
window.location.replace(url.toString());
});

if ($(this).hasClass('usage')) {
if (! params.has("usage", entry)) {
url.searchParams.set('usage', entry);
document.querySelector('#ecosystem-search-btn').addEventListener('click', function () {
setSearchQuery(document.querySelector('#ecosystem-search').value);
});

window.location.replace(url.toString());
} else if (params.get("usage") === entry) {
url.searchParams.delete("usage");
document.querySelector('#ecosystem-search').addEventListener('keypress', function (e) {
const search = this.value;
if (e.which === 13) {
setSearchQuery(search);
}
})

window.location.replace(url.toString());
}
function handleFilters() {
for (const filter of ['type', 'category', 'usage']) {
if (this.classList.contains(filter)) {
handleParams(filter, this.dataset.value);
}
});

$('.ecosystem-filter').click(function (e) {
e.preventDefault();
}
}

const url = new URL(window.location.href);
const params = new URLSearchParams(url.search);
const entry = $(this).data('value');
function handleParams(filterKey, filterValue) {
const url = new URL(window.location.href);
const params = new URLSearchParams(url.search);

if ($(this).hasClass('keyword')) {
if (params.has("keywords[]", entry)) {
params.delete("keywords[]", entry);
url.search = params.toString();
if (! params.has(filterKey, filterValue)) {
url.searchParams.set(filterKey, filterValue);

window.location.replace(url.toString());
}
}
});

[...$('#ecosystem-pagination a')].forEach(a => {
const url = new URL(a.href)
for (let [k,v] of new URLSearchParams(window.location.search).entries()) {
if (k === 'keywords[]' || k === 'q' || k === 'type' || k === 'category' || k === 'usage') {
url.searchParams.set(k,v)
}
}
a.href = url.toString();
})
window.location.replace(url.toString());
} else if (params.get(filterKey) === filterValue) {
url.searchParams.delete(filterKey);

$('#ecosystem-search').keypress(function (e) {
const search = $(this).val();
if (e.which === 13) {
setSearchQuery(search);
}
});
window.location.replace(url.toString());
}
}

$('#ecosystem-search-btn').click(function (e) {
const search = $('#ecosystem-search').val();
setSearchQuery(search);
});
function handleKeywords() {
const url = new URL(window.location.href);
const params = new URLSearchParams(url.search);
const keyword = this.dataset.value;

function setSearchQuery(search) {
const url = new URL(window.location.href);
if (! params.has("keywords[]", keyword)) {
params.append("keywords[]", keyword);
url.search = params.toString();

url.searchParams.set('q', search);
window.location.replace(url.toString());
}
}

$('#clear-filters-button').click(function (e) {
const url = new URL(window.location.href);
function removeKeyword() {
const url = new URL(window.location.href);
const params = new URLSearchParams(url.search);
const keyword = this.dataset.value;

for (let [k,v] of new URLSearchParams(window.location.search).entries()) {
if (k === 'type' || k === 'category' || k === 'usage') {
url.searchParams.delete(k)
}
}
if (params.has("keywords[]", keyword)) {
params.delete("keywords[]", keyword);
url.search = params.toString();

window.location.replace(url.toString());
});
});
}
}

function setSearchQuery(search) {
const url = new URL(window.location.href);

url.searchParams.set('q', search);
window.location.replace(url.toString());
}
2 changes: 1 addition & 1 deletion bootstrap/scss/_custom-styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -541,4 +541,4 @@ article {
gap: .5em;
align-items: baseline;
}
}
}
15 changes: 10 additions & 5 deletions src/Ecosystem/templates/list.phtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,11 @@ $this->layout('layout::default', ['title' => 'Laminas Ecosystem']);
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#packageNavbarToggle" aria-controls="packageNavbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<input id="ecosystem-search" class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" value="<?= $search ?>">
<button id="ecosystem-search-btn" class="btn btn-outline-success my-2 my-sm-0" type="button"><i class="bi bi-search"></i></button>

<div class="input-group">
<input type="text" id="ecosystem-search" class="form-control mr-sm-2" aria-label="Search" aria-describedby="ecosystem-search-btn" value="<?= $search ?>">
<button id="ecosystem-search-btn" class="btn btn-outline-success my-2 my-sm-0" type="button"><i class="bi bi-search"></i></button>
</div>
</div>
<div class="collapse navbar-collapse" id="packageNavbarToggle">
<div class="btn-group">
Expand Down Expand Up @@ -84,9 +87,11 @@ $this->layout('layout::default', ['title' => 'Laminas Ecosystem']);
</ul>
</div>

<div class="btn-group">
<button id="clear-filters-button" type="button" class="btn btn-outline-danger">Clear filters <i class="bi bi-x-circle"></i></button>
</div>
<?php if ($type || $usage || $category || $search) : ?>
<div class="btn-group">
<button id="clear-filters-button" type="button" class="btn btn-outline-danger">Clear filters <i class="bi bi-x-circle"></i></button>
</div>
<?php endif; ?>
</div>
</div>
</nav>
Expand Down

0 comments on commit 3b467e2

Please sign in to comment.