Skip to content

Facilitated Filter to Index Page as well #161

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
KhondokerIslam wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Facilitated Filter to Index Page as well #161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
94df5fc
filter button supplied in the index page
KhondokerIslam Mar 28, 2026
343397a
filter button supplied in the index page
KhondokerIslam Mar 28, 2026
95ffb20
font awesome stylesheet included
KhondokerIslam Mar 28, 2026
d3a7da7
icon and hover bug fixed
KhondokerIslam Mar 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
370 changes: 344 additions & 26 deletions application/modules/front/views/index/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,32 +19,70 @@
</div>

<div class="indexsearchcontainer">
<div id="indexsearch">
<form name="searchform" action="/search/" method=get id="searchform">
<input type="text" class="indexsearchquery" name=q placeholder="Search &#8230;" value="" />
<input type="submit" class="indexsearchsubmit" value="l" />
</form>
</div>
<a class="indexsearchtipslink">Search Tips</a>
<div id="indexsearchtips">
<b>Quotes</b> e.g. "pledge allegiance"<br>
Searches for the whole phrase instead of individual words
<p>
<b>Wildcards</b> e.g. test*<br>
Matches any set of one or more characters. For example test* would result in test, tester, testers, etc.
<p>
<b>Fuzzy Search</b> e.g. swore~<br>
Finds terms that are similar in spelling. For example swore~ would result in swore, snore, score, etc.
<p>
<b>Term Boosting</b> e.g. pledge^4 hijrah<br>
Boosts words with higher relevance. Here, the word <i>pledge</i> will have higher weight than <i>hijrah</i>
<p>
<b>Boolean Operators</b> e.g. ("pledge allegiance" OR "shelter) AND prayer<br>
Create complex phrase and word queries by using Boolean logic.
<p>
<a href="/searchtips">More ...</a>
</div>
<div class=clear></div>
<div id="indexsearch">
<form name="searchform" action="/search/" method=get id="searchform">
<input type="text" class="indexsearchquery" name=q placeholder="Search &#8230;" value="" />
<input type="submit" class="indexsearchsubmit" value="l" />
</form>
</div>

<a id="filterBtn" class="custom-btn filter-link">
<span class="custom-btn-content filter-icn">
<i class="fa-solid fa-sliders"></i> Filter
</span>
</a>

<!-- Modal for selecting collections -->
<div id="filterModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<h2 class="header">Select Collections</h2>

<div id="collectionChips">
<?php
if (isset($collections) && is_array($collections)) {
$totalCollections = count($collections);
$showLimit = 6;

foreach ($collections as $index => $collection) {
if (isset($collection['name']) && isset($collection['englishTitle'])) {
$toggleClass = ($index >= $showLimit) ? 'toggleable-chip hidden' : '';
echo '<div class="chip ' . $toggleClass . '" data-value="' . $collection['name'] . '">' . $collection['englishTitle'] . '</div>';
}
}

if ($totalCollections > $showLimit) {
echo '<div id="showMoreLessBtn" class="show-more-btn">Show More Collections</div>';
}
}
?>
</div>

<button id="applyFilterBtn" class="apply-btn">Apply</button>
</div>
</div>


<a class="indexsearchtipslink">Search Tips</a>
<div id="indexsearchtips">
<b>Quotes</b> e.g. "pledge allegiance"<br>
Searches for the whole phrase instead of individual words
<p>
<b>Wildcards</b> e.g. test*<br>
Matches any set of one or more characters. For example test* would result in test, tester, testers, etc.
<p>
<b>Fuzzy Search</b> e.g. swore~<br>
Finds terms that are similar in spelling. For example swore~ would result in swore, snore, score, etc.
<p>
<b>Term Boosting</b> e.g. pledge^4 hijrah<br>
Boosts words with higher relevance. Here, the word <i>pledge</i> will have higher weight than <i>hijrah</i>
<p>
<b>Boolean Operators</b> e.g. ("pledge allegiance" OR "shelter) AND prayer<br>
Create complex phrase and word queries by using Boolean logic.
<p>
<a href="/searchtips">More ...</a>
</div>
<div class=clear></div>
</div>

<!-- Primary Collections Section -->
Expand Down Expand Up @@ -131,3 +169,283 @@

<br>
<div align=center style="color: #75A1A1;">Supported languages: English, Arabic, Urdu, Bangla</div>


<!-- ToDo: The following code may have duplicacy with "views/layout/searchbpx.php" except with the div-id `indexsearchquery`; Move it to global -->
<script>
document.addEventListener("DOMContentLoaded", function () {
const filterBtn = document.getElementById("filterBtn");
const filterModal = document.getElementById("filterModal");
const closeModal = document.querySelector("#filterModal .close");
const applyFilterBtn = document.getElementById("applyFilterBtn");
const chipElements = document.querySelectorAll("#collectionChips .chip");
const searchForm = document.getElementById("searchform");
const filterIcon = document.getElementById("filterIcon");

// Parse URL parameters for collections (PHP style array params)
const urlParams = new URLSearchParams(window.location.search);
let selectedCollections = [];
let index = 0;
while (urlParams.has(`collection[${index}]`)) {
selectedCollections.push(urlParams.get(`collection[${index}]`));
index++;
}

// Initialize chip selection based on URL parameters
chipElements.forEach(chip => {
if (selectedCollections.includes(chip.dataset.value)) {
chip.classList.add("selected");
}
});

// Open modal
filterBtn.addEventListener("click", function () {
filterModal.style.display = "block";
});

// Close modal (x)
closeModal.addEventListener("click", function () {
filterModal.style.display = "none";
});

// Close modal if clicking outside
window.addEventListener("click", function (event) {
if (event.target === filterModal) {
filterModal.style.display = "none";
}
});

// Toggle chip selection
chipElements.forEach(chip => {
chip.addEventListener("click", function () {
const value = chip.dataset.value;
chip.classList.toggle("selected");

if (chip.classList.contains("selected")) {
selectedCollections.push(value);
} else {
selectedCollections = selectedCollections.filter(col => col !== value);
}
});
});

function submit() {
const queryInput = document.querySelector(".indexsearchquery").value;
let actionUrl = "/search/?q=" + encodeURIComponent(queryInput);

selectedCollections.forEach((col, index) => {
actionUrl += `&collection[${index}]=${encodeURIComponent(col)}`;
});

window.location.href = actionUrl;
}
// "Apply" button
applyFilterBtn.addEventListener("click", function (event) {
filterModal.style.display = "none";
submit()
event.preventDefault()
});

// Intercept search form to include selected collections
searchForm.addEventListener("submit", function (event) {
submit()
event.preventDefault();
});

const showMoreLessBtn = document.getElementById("showMoreLessBtn");
let isHidden = true;
if (showMoreLessBtn) {
showMoreLessBtn.addEventListener("click", function () {
$(".toggleable-chip").toggleClass("hidden");
isHidden = !isHidden
this.textContent = isHidden ? "Show More Collections" : "Show Less" ;
});
}
});
</script>


<style>
[data-theme="light"] {
--secondary-block-bg: #ebebeb;
--chip-bg: rgba(0, 0, 0, 0.075);
--chip-hover-bg: #dedede;
--chip-selected-bg: #3ba08f;
--border-color: rgba(0, 0, 0, 0.2);
--button-highlight-color: rgba(251, 250, 248, 0.2);
--search-icon-color: var(--chip-selected-bg);
}

[data-theme="dark"] {
--secondary-block-bg: #343A40;
--chip-bg: rgba(44, 48, 52, .7);
--chip-hover-bg: #3d4648;
--chip-selected-bg: #3ba08f;
--border-color: rgba(255, 255, 255, 0.2);
--button-highlight-color: #1c625d;
--search-icon-color: #ffffff;
}

[data-theme="light"] .header {
color: #3d9393;
}

.clear {
clear: both;
}

.custom-btn-content {
font-size: 12px;
margin-left: 10px;
padding-top: 5px;
cursor: pointer;
color: #5F9999;
float: left;
}

.custom-btn-content:hover {
color: #84B8B8;
}

.apply-btn {
padding: 1rem 2rem;
cursor: pointer;
background-color: var(--chip-selected-bg);
color: white;
border: none;
border-radius: 10px;
font-family: "Akzidenz Roman", Arial, sans-serif;
white-space: nowrap;
flex-shrink: 0;
align-self: flex-end;
}

.apply-btn:hover {
background-color: #1c625d;
}

/* Modal */
/* Duplicate Codes from Here */
.modal {
display: none;
position: fixed;
z-index: 999;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
display: flex;
flex-direction: column;
background-color: var(--secondary-block-bg);
color: var(--primary-text-color);
margin: 100px auto;
padding: 20px;
border: 1px solid var(--border-color);
width: 400px;
position: relative;
border-radius: 8px;
}

.modal-content .header {
padding: 0;
margin: 0;
}

.modal-content .close {
position: absolute;
top: 10px;
right: 10px;
color: var(--secondary-text-color);
font-size: 24px;
font-weight: bold;
cursor: pointer;
}

.modal-content .close:hover {
color: var(--primary-text-color);
}

#collectionChips {
margin: 20px 0;
flex: 1;
}

.chip {
display: inline-block;
padding: 8px 12px;
margin: 4px;
background-color: var(--chip-bg);
color: var(--primary-text-color);
border-radius: 16px;
cursor: pointer;
user-select: none;
font-size: 13px;
transition: background-color 0.2s ease;
}

.chip:hover {
background-color: var(--chip-hover-bg);
color: var(--primary-text-color);
}

.chip.selected {
background-color: var(--chip-selected-bg);
color: #fff;
display: inline-block !important;
}

/* Show More/Less Button */
.show-more-btn {
display: block;
padding: 4px 12px;
margin: 10px auto;
background-color: transparent;
color: var(--chip-selected-bg);
border: 1px solid var(--chip-selected-bg);
border-radius: 10px;
cursor: pointer;
user-select: none;
font-size: 13px;
transition: all 0.2s ease;
text-align: center;
width: fit-content;
}

.show-more-btn:hover {
background-color: rgba(59, 160, 143, 0.1);
}

.toggleable-chip {
display: inline-block;
}

.hidden {
display: none
}

/* Responsive Design */
@media screen and (max-width: 760px) {
.modal-content {
box-sizing: border-box;
width: 90vw;
margin: 80px auto;
}

.custom-btn {
padding: 6px 8px;
}

.filter-icn::after {
content: "";
}

.tips-icn::after {
content: "";
}
}
</style>
2 changes: 2 additions & 0 deletions application/modules/front/views/layouts/home.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@ function gtag(){dataLayer.push(arguments);}
<link rel="image_src" href="/images/fb_logo.png" />

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="/js/jquery.cookie.js"></script>
Expand Down