Merge pull request #14 from yohman/main

search box add
IDREsandbox · Jul 3, 2024 · f82ea79 · f82ea79
2 parents 927124c + 64be410
commit f82ea79
Show file tree

Hide file tree

Showing 9 changed files with 98 additions and 2 deletions.
diff --git a/docs/css/style.css b/docs/css/style.css
@@ -6,6 +6,11 @@ body, html {
     /*overflow: hidden; /* Remove comment to hide overflow */
 }
 
+.search {
+    border: 1px solid #aaa;
+    padding: 5px;
+}
+
 .md-header__button.md-logo img, .md-header__button.md-logo svg {
     height: 2.5rem;
 }

diff --git a/docs/index.html b/docs/index.html
@@ -37,7 +37,7 @@
 			width: 320px;
 			height: 400px;
 			background-color: red;
-			/* cursor: pointer; */
+			cursor: pointer;
 		}
 
 		.door::before {

diff --git a/docs/learn/index.md b/docs/learn/index.md
@@ -5,6 +5,10 @@ hide:
 ---
 
 <h1 id="title">Learn</h1>
+
+<!-- add a search box -->
+<input type="text" id="search" class="search" onkeyup="search()" placeholder="Search for projects..">
+
 <!-- two buttons to toggle between gallery view and tag view -->
 <span class="btn btn-on" onclick="window.location.href = '../'">
 	gallery view
@@ -50,6 +54,24 @@ function init(){
 		});
 	}
 
+	// create the search function
+	window.search = function() {
+		let input, filter, ul, li, a, i, txtValue;
+		input = document.getElementById('search');
+		filter = input.value.toUpperCase();
+		li = document.querySelectorAll('.gallery-container');
+		for (i = 0; i < li.length; i++) {
+			a = li[i].getElementsByTagName('a')[0];
+			txtValue = a.textContent || a.innerText;
+			if (txtValue.toUpperCase().indexOf(filter) > -1) {
+				li[i].style.display = '';
+			} else {
+				li[i].style.display = 'none';
+			}
+		}
+	}	
+
+
 }
 
 </script>
diff --git a/docs/work/index.md b/docs/work/index.md
@@ -4,6 +4,10 @@ hide:
 ---
 
 <h1 id="title">Work</h1>
+
+<!-- add a search box -->
+<input type="text" id="search" class="search" onkeyup="search()" placeholder="Search for projects..">
+
 <!-- two buttons to toggle between gallery view and tag view -->
 <span class="btn btn-on" onclick="window.location.href = '../'">
 	gallery view
@@ -49,6 +53,24 @@ function init(){
 		});
 	}
 
+	// create the search function
+	window.search = function() {
+		let input, filter, ul, li, a, i, txtValue;
+		input = document.getElementById('search');
+		filter = input.value.toUpperCase();
+		li = document.querySelectorAll('.gallery-container');
+		for (i = 0; i < li.length; i++) {
+			a = li[i].getElementsByTagName('a')[0];
+			txtValue = a.textContent || a.innerText;
+			if (txtValue.toUpperCase().indexOf(filter) > -1) {
+				li[i].style.display = '';
+			} else {
+				li[i].style.display = 'none';
+			}
+		}
+	}	
+
+
 }
 
 </script>
diff --git a/site/css/style.css b/site/css/style.css
@@ -6,6 +6,11 @@ body, html {
     /*overflow: hidden; /* Remove comment to hide overflow */
 }
 
+.search {
+    border: 1px solid #aaa;
+    padding: 5px;
+}
+
 .md-header__button.md-logo img, .md-header__button.md-logo svg {
     height: 2.5rem;
 }

diff --git a/site/index.html b/site/index.html
@@ -37,7 +37,7 @@
 			width: 320px;
 			height: 400px;
 			background-color: red;
-			/* cursor: pointer; */
+			cursor: pointer;
 		}
 
 		.door::before {

diff --git a/site/learn/index.html b/site/learn/index.html
@@ -454,6 +454,9 @@
 
 
 <h1 id="title">Learn</h1>
+
+<!-- add a search box -->
+<p><input type="text" id="search" class="search" onkeyup="search()" placeholder="Search for projects.."></p>
 <!-- two buttons to toggle between gallery view and tag view -->
 <p><span class="btn btn-on" onclick="window.location.href = '../'">
     gallery view
@@ -498,6 +501,24 @@ <h1 id="title">Learn</h1>
         });
     }
 
+    // create the search function
+    window.search = function() {
+        let input, filter, ul, li, a, i, txtValue;
+        input = document.getElementById('search');
+        filter = input.value.toUpperCase();
+        li = document.querySelectorAll('.gallery-container');
+        for (i = 0; i < li.length; i++) {
+            a = li[i].getElementsByTagName('a')[0];
+            txtValue = a.textContent || a.innerText;
+            if (txtValue.toUpperCase().indexOf(filter) > -1) {
+                li[i].style.display = '';
+            } else {
+                li[i].style.display = 'none';
+            }
+        }
+    }   
+
+
 }
 
 </script>

diff --git a/site/sitemap.xml.gz b/site/sitemap.xml.gz
diff --git a/site/work/index.html b/site/work/index.html
@@ -452,6 +452,9 @@
 
 
 <h1 id="title">Work</h1>
+
+<!-- add a search box -->
+<p><input type="text" id="search" class="search" onkeyup="search()" placeholder="Search for projects.."></p>
 <!-- two buttons to toggle between gallery view and tag view -->
 <p><span class="btn btn-on" onclick="window.location.href = '../'">
     gallery view
@@ -496,6 +499,24 @@ <h1 id="title">Work</h1>
         });
     }
 
+    // create the search function
+    window.search = function() {
+        let input, filter, ul, li, a, i, txtValue;
+        input = document.getElementById('search');
+        filter = input.value.toUpperCase();
+        li = document.querySelectorAll('.gallery-container');
+        for (i = 0; i < li.length; i++) {
+            a = li[i].getElementsByTagName('a')[0];
+            txtValue = a.textContent || a.innerText;
+            if (txtValue.toUpperCase().indexOf(filter) > -1) {
+                li[i].style.display = '';
+            } else {
+                li[i].style.display = 'none';
+            }
+        }
+    }   
+
+
 }
 
 </script>