Home Explore Help
Register Sign In
boyska
/
rss-bridge
forked from blallo/rss-bridge
1
0
Fork 0
Files
Browse Source

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.
Teromene 7 years ago
parent
2ac0469750
commit
1a4c3f4418
6 changed files with 78 additions and 7 deletions
Split View Show Diff Stats
  1. 1 1
      formats/HtmlFormat.php
  2. 18 3
      index.php
  3. 1 1
      phpcs.xml
  4. 0 0
      static/HtmlFormat.css
  5. 27 0
      static/search.js
  6. 31 2
      static/style.css

+ 1 - 1
formats/HtmlFormat.php
View File 

@@ -69,7 +69,7 @@ EOD;
 
 <head>
 
 	<meta charset="{$charset}">
 
 	<title>{$title}</title>
 
-	<link href="css/HtmlFormat.css" rel="stylesheet">
 
+	<link href="static/HtmlFormat.css" rel="stylesheet">
 
 	<meta name="robots" content="noindex, follow">
 
 </head>
 
 <body>

+ 18 - 3
index.php
View File 

@@ -198,10 +198,18 @@ $formats = Format::searchInformation();
 
 	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
 	<meta name="description" content="Rss-bridge" />
 
 	<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>
 
 
-<body>
 
+<body onload="search()">
 
 	<?php
 
 		$status = '';
 
 		if(defined('DEBUG') && DEBUG === true){
 
@@ -214,6 +222,13 @@ $formats = Format::searchInformation();
 
 		<h2>·Reconnecting the Web·</h2>
 
 		<p class="status">{$status}</p>
 
 	</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;
 
 
 		$activeFoundBridgeCount = 0;
 
@@ -231,7 +246,7 @@ EOD;
 
 		}
 
 		echo $inactiveBridges;
 
 	?>
 
-	<section>
 
+	<section class="footer">
 
 		<a href="https://github.com/RSS-Bridge/rss-bridge">RSS-Bridge alpha 0.2 ~ Public Domain</a><br />
 
 		<?= $activeFoundBridgeCount; ?>/<?= count($bridgeList) ?> active bridges. <br />
 
 		<?php

+ 1 - 1
phpcs.xml
View File 

@@ -1,7 +1,7 @@
 
 <?xml version="1.0" encoding="UTF-8"?>
 
 <ruleset name="RSS-Bridge Ruleset">
 
   <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>
 
   <!-- Duplicate class names are not allowed -->
 
   <rule ref="Generic.Classes.DuplicateClassName"/>

+ 0 - 0
css/HtmlFormat.css → static/HtmlFormat.css
View File


+ 27 - 0
static/search.js
View 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";
 
+
 
+			}
 
+
 
+		}
 
+
 
+	}
 
+
 
+}

+ 31 - 2
css/style.css → static/style.css
View File 

@@ -52,6 +52,35 @@ header > p.status {
 
 	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 {
 
 
 	background-color: #FFFFFF;
 
@@ -65,13 +94,13 @@ section {
 
 }
 
 
 
-section:last-of-type {
 
+section.footer {
 
 
 	opacity: 0.5;
 
 
 }
 
 
-section:last-of-type:hover {
 
+section.footer:hover {
 
 
 	opacity: 1;