Browse Source

jumping to purple number

Juan 4 months ago
parent
commit
9b2104cca5
2 changed files with 71 additions and 3 deletions
  1. 38 0
      src/style.css
  2. 33 3
      src/templates/html.rs

+ 38 - 0
src/style.css

@@ -425,3 +425,41 @@ script {
     content: " [id ]";
     /* Additional styles for the :after element */
 }
+/* Dropdown container */
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+/* Dropdown content (hidden by default) */
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 110px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+}
+
+/* Links inside the dropdown */
+.dropdown-content a {
+    color: black;
+    text-decoration: none;
+    display: block;
+}
+
+/* Change color of dropdown links on hover */
+.dropdown-content a:hover {
+    background-color: #f1f1f1;
+}
+
+/* Show the dropdown menu on button click */
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
+/* Style for the Jump Item text field */
+#textfield {
+    width: 50px; /* Adjust the width as needed */
+}
+

+ 33 - 3
src/templates/html.rs

@@ -15,7 +15,7 @@ use kuchiki::NodeRef;
 
 fn header(title: &str, css_path: &str) -> String {
     format!(
-        r#"<!DOCTYPE html>
+        r##"<!DOCTYPE html>
         <html>
         <head>
         <title>{title}</title>
@@ -27,11 +27,25 @@ fn header(title: &str, css_path: &str) -> String {
         </head>
         <body>
         <div>
-            <b>sort by</b> [<a href='../../authors.html'>author</a>] [<a href='../../dates.html'>dates</a>] [<a href='../../subjects.html'>subjects</a>]
             <button onclick="window.location.href='../../index.html'">Home</button>
+             <input name="" type="button" value="Jump Item:">
+             <input type="text" name="textfield" id="textfield" />
+             <!--dropdown for options-->
+            <div class="dropdown">
+            <button>Options</button>
+                <div class="dropdown-content">
+                     <a href="#option1">Class 1</a>
+                    <a href="#option2">Class 2</a>
+                    <a href="#option3">Turbo Augment</a>
+                </div>
+            </div>
+        </div>
+
+        <div>
+            <b>sort by</b> [<a href='../../authors.html'>author</a>] [<a href='../../dates.html'>dates</a>] [<a href='../../subjects.html'>subjects</a>]
         </div>
         <hr>
-        "#
+        "##
     )
 }
 
@@ -93,6 +107,22 @@ const JS_SCRIPT_VIEWSPECS: &str = r#"
         
         window.scrollTo(0, 0);
     }
+
+    function jumpToItem() {
+            const id = document.getElementById('textfield').value;
+            if (id) {
+                window.location.href = `#${id}`;
+            }
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const textfield = document.getElementById('textfield');
+            textfield.addEventListener('keydown', function(event) {
+                if (event.key === 'Enter') {
+                    jumpToItem();
+                }
+            });
+        });
 </script>
 "#;