Add a search bar

Allow to find more easily an application.
parent ec21a212
......@@ -41,34 +41,45 @@ foreach($categories as $category) {
}
$apps = array_values(array_unique($apps)); # throw out dupes but get new keys
*/
foreach($categories as $category) {
?>
<div class="form-group">
<label for="search" class="sr-only">Search</label>
<input type="email" class="form-control" id="search" placeholder="Search...">
</div>
<?php
foreach($categories as $category) { ?>
<div class="category"> <?php
// category header
$icon = "icons/categories/".strtolower($category);
// special case unmaintained to an unmaintained icon
if ($category == 'unmaintained') {
$icon = "icons/org.kde.blogilo";
echo '<p id="app-additional-info-paragraph"></p>';
echo '<div id="app-additional-info">';
$icon = "icons/org.kde.blogilo"; ?>
<p id="app-additional-info-paragraph"></p>
<div id="app-additional-info">
<?php
}
echo "<h2 style='font-size: x-large; font-weight: bold;' class='mt-5 mb-1'><a href=\"".strtolower($category)."/\" >
<img style=\"margin-left: 1em; margin-right: 1em\" width=\"48\" height=\"48\" src=\"".$icon.".svg\" alt=\"".$category." icons\" title=\"".$category."\"/>";
echo ucfirst($category);
echo "</a></h2>\n";
echo '<div class="row">';
echo '<div class="row mb-5">';
// all the apps in the category
foreach($index[$category] as $application) {
$app = new AppData2($application);
echo "<div class=\"app mt-4 col-12 col-sm-6 col-md-4 col-lg-3\">
<a href=\"".strtolower($category)."/$application\" style='font-weight: normal'>
<img style=\"float: left; margin-right: 1em\" width=\"48\" height=\"48\" src=\"icons/".$app->icon()."\" alt=\"".$app->name()."\" title=\"".$app->name()."\" />
".$app->name()."
</a>
".$app->genericName()."</div>\n";
$app = new AppData2($application); ?>
<div class="app mt-4 col-12 col-sm-6 col-md-4 col-lg-3">
<a href="<?php echo strtolower($category).'/'.$application; ?>" style='font-weight: normal'>
<img style="float: left; margin-right: 1em" width="48" height="48" src="icons/<?php echo $app->icon(); ?>" alt="<?php echo $app->name(); ?> icon" title="<?php echo $app->name(); ?>" /><?php echo $app->name() ?>
</a>
<?php echo $app->genericName(); ?>
</div>
<?php
}
echo '</div>';
......@@ -76,7 +87,7 @@ foreach($categories as $category) {
echo '</div>';
echo '<script src="toggle.js" defer></script>';
}
echo '<div style="clear: left;"><br /></div>';
echo '</div>';
}
......@@ -120,8 +131,11 @@ if ($screenshotUrl) {
<img src="/images/screenshots/no_screenshot_available.png" alt="No screenshot available" />
</div>'; ///TODO: image size
}
*/
*/
?>
echo '<p style="float: right"><a style="color: grey;" href="https://community.kde.org/KDE.org/applications">Page Setup Info</a></p>.';
echo '</main>';
<p style="float: right"><a style="color: grey;" href="https://community.kde.org/KDE.org/applications">Page Setup Info</a></p>.
</main>
<script src="/applications/search.js" defer></script>
<?php
require(KDE_ORG . '/aether/footer.php');
const search = document.getElementById('search');
search.addEventListener('input', function(e) {
const apps = document.querySelectorAll('.app');
const regex = new RegExp(e.target.value, 'i');
apps.forEach(function(app) {
if (app.querySelector('img').title.search(regex) !== -1) {
// app name is in search
if (app.classList.contains('d-none')) {
app.classList.remove('d-none');
}
} else if (!app.classList.contains('d-none')) {
app.classList.add('d-none');
}
});
const categories = document.querySelectorAll('.category');
categories.forEach(function(category) {
if (category.querySelectorAll('.app:not(.d-none)').length > 0 && category.classList.contains('d-none')) {
category.classList.remove('d-none');
} else if (category.querySelectorAll('.app:not(.d-none)').length === 0 && !category.classList.contains('d-none')) {
category.classList.add('d-none');
}
});
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment