Add a search bar to simplify looking for a bridge. (#494)
* Add a search bar to simplify looking for a bridge. * Fix phpcs line length. * Change the phpcs config.
This commit is contained in:
parent
2ac0469750
commit
1a4c3f4418
6 changed files with 78 additions and 7 deletions
|
@ -69,7 +69,7 @@ EOD;
|
||||||
<head>
|
<head>
|
||||||
<meta charset="{$charset}">
|
<meta charset="{$charset}">
|
||||||
<title>{$title}</title>
|
<title>{$title}</title>
|
||||||
<link href="css/HtmlFormat.css" rel="stylesheet">
|
<link href="static/HtmlFormat.css" rel="stylesheet">
|
||||||
<meta name="robots" content="noindex, follow">
|
<meta name="robots" content="noindex, follow">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
21
index.php
21
index.php
|
@ -198,10 +198,18 @@ $formats = Format::searchInformation();
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta name="description" content="Rss-bridge" />
|
<meta name="description" content="Rss-bridge" />
|
||||||
<title>RSS-Bridge</title>
|
<title>RSS-Bridge</title>
|
||||||
<link href="css/style.css" rel="stylesheet">
|
<link href="static/style.css" rel="stylesheet">
|
||||||
|
<script src="static/search.js"></script>
|
||||||
|
<noscript>
|
||||||
|
<style>
|
||||||
|
.searchbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</noscript>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body onload="search()">
|
||||||
<?php
|
<?php
|
||||||
$status = '';
|
$status = '';
|
||||||
if(defined('DEBUG') && DEBUG === true){
|
if(defined('DEBUG') && DEBUG === true){
|
||||||
|
@ -214,6 +222,13 @@ $formats = Format::searchInformation();
|
||||||
<h2>·Reconnecting the Web·</h2>
|
<h2>·Reconnecting the Web·</h2>
|
||||||
<p class="status">{$status}</p>
|
<p class="status">{$status}</p>
|
||||||
</header>
|
</header>
|
||||||
|
<section class="searchbar">
|
||||||
|
<h3>Search</h3>
|
||||||
|
<input type="text" name="searchfield"
|
||||||
|
id="searchfield" placeholder="Enter the bridge you want to search for"
|
||||||
|
onchange="search()" onkeyup="search()">
|
||||||
|
</section>
|
||||||
|
|
||||||
EOD;
|
EOD;
|
||||||
|
|
||||||
$activeFoundBridgeCount = 0;
|
$activeFoundBridgeCount = 0;
|
||||||
|
@ -231,7 +246,7 @@ EOD;
|
||||||
}
|
}
|
||||||
echo $inactiveBridges;
|
echo $inactiveBridges;
|
||||||
?>
|
?>
|
||||||
<section>
|
<section class="footer">
|
||||||
<a href="https://github.com/RSS-Bridge/rss-bridge">RSS-Bridge alpha 0.2 ~ Public Domain</a><br />
|
<a href="https://github.com/RSS-Bridge/rss-bridge">RSS-Bridge alpha 0.2 ~ Public Domain</a><br />
|
||||||
<?= $activeFoundBridgeCount; ?>/<?= count($bridgeList) ?> active bridges. <br />
|
<?= $activeFoundBridgeCount; ?>/<?= count($bridgeList) ?> active bridges. <br />
|
||||||
<?php
|
<?php
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<?xml version="1.0" encoding="UTF-8"?>
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
<ruleset name="RSS-Bridge Ruleset">
|
<ruleset name="RSS-Bridge Ruleset">
|
||||||
<description>Created with the PHP Coding Standard Generator. http://edorian.github.com/php-coding-standard-generator/</description>
|
<description>Created with the PHP Coding Standard Generator. http://edorian.github.com/php-coding-standard-generator/</description>
|
||||||
<exclude-pattern>./css</exclude-pattern>
|
<exclude-pattern>./static</exclude-pattern>
|
||||||
<exclude-pattern>./vendor</exclude-pattern>
|
<exclude-pattern>./vendor</exclude-pattern>
|
||||||
<!-- Duplicate class names are not allowed -->
|
<!-- Duplicate class names are not allowed -->
|
||||||
<rule ref="Generic.Classes.DuplicateClassName"/>
|
<rule ref="Generic.Classes.DuplicateClassName"/>
|
||||||
|
|
27
static/search.js
Normal file
27
static/search.js
Normal file
|
@ -0,0 +1,27 @@
|
||||||
|
function search() {
|
||||||
|
|
||||||
|
var searchTerm = document.getElementById('searchfield').value;
|
||||||
|
var searchableElements = document.getElementsByTagName('section');
|
||||||
|
|
||||||
|
var regexMatch = new RegExp(searchTerm, "i");
|
||||||
|
|
||||||
|
for(var i = 0; i < searchableElements.length; i++) {
|
||||||
|
|
||||||
|
var textValue = searchableElements[i].getAttribute('data-ref');
|
||||||
|
if(textValue != null) {
|
||||||
|
|
||||||
|
if(textValue.match(regexMatch) == null && searchableElements[i].style.display != "none") {
|
||||||
|
|
||||||
|
searchableElements[i].style.display = "none";
|
||||||
|
|
||||||
|
} else if(textValue.match(regexMatch) != null) {
|
||||||
|
|
||||||
|
searchableElements[i].style.display = "block";
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -52,6 +52,35 @@ header > p.status {
|
||||||
color: red;
|
color: red;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.searchbar {
|
||||||
|
|
||||||
|
width: 50%;
|
||||||
|
margin: auto;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchbar input[type="text"] {
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
margin: auto;
|
||||||
|
font-size: 1.4em;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchbar input[type="text"]::placeholder {
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchbar > h3 {
|
||||||
|
|
||||||
|
font-size: 150%;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #1182DB;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
section {
|
section {
|
||||||
|
|
||||||
background-color: #FFFFFF;
|
background-color: #FFFFFF;
|
||||||
|
@ -65,13 +94,13 @@ section {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
section:last-of-type {
|
section.footer {
|
||||||
|
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
section:last-of-type:hover {
|
section.footer:hover {
|
||||||
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
Loading…
Reference in a new issue