help.html: implement "/" for making search box active.

[factor.git] / basis / help / html / html.factor

diff --git a/basis/help/html/html.factor b/basis/help/html/html.factor
index 156e97810a4e304a66e03a4c276bff05fd623168..4cd0f8c889da55ad40ea890a9f3b1dd952f45038 100644 (file)
--- a/basis/help/html/html.factor
+++ b/basis/help/html/html.factor
@@ -91,19 +91,38 @@ M: pathname url-of
         />
     XML] ;
 
+: help-script ( -- xml )
+    [XML
+        <script type="text/javascript">
+        document.addEventListener('keydown', function (event) {
+            if (event.code == 'Slash') {
+                let input = document.getElementById('search');
+                if (input !== document.activeElement) {
+                    setTimeout(function() {
+                        input.focus().select()
+                    }, 0);
+                }
+            }
+        });
+        </script>
+     XML] ;
+
+: help-header ( stylesheet -- xml )
+    help-stylesheet help-meta swap help-script 3append ;
+
 : help-nav ( -- xml )
     "conventions" >link topic>filename
     [XML
         <nav>
+            <form method="get" action="/search" style="float: right;">
+                <input placeholder="Search" id="search" name="search" type="text" tabindex="1" />
+                <input type="submit" value="Go" tabindex="1" />
+            </form>
             <a href="https://factorcode.org">
             <img src="favicon.ico" width="24" height="24" />
             </a>
             <a href="/">Handbook</a>
             <a href=<->>Glossary</a>
-            <form method="get" action="/search" style="float: right;">
-                <input placeholder="Search" name="search" type="text"/>
-                <input type="submit" value="Go"/>
-            </form>
         </nav>
      XML] ;
 
@@ -165,7 +184,7 @@ M: pathname url-of
         "padding: 10px;" "padding: 0px;" replace
         "background-color: #f4efd9;" "background-color: white;" replace
         "}" ?tail drop
-        " border-bottom: 1px dashed #ccc; width: 100%; padding-top: 15px; padding-bottom: 10px; }"
+        " border-bottom: 1px dashed #d5d5d5 width: 100%; padding-top: 15px; padding-bottom: 10px; }"
         append swap pick set-nth {
             ".a a { color: black; font-size: 24pt; line-height: 100%; }"
             ".a * a { color: #2a5db0; font-size: 12pt; }"
@@ -186,7 +205,7 @@ M: pathname url-of
                     >string H{
                         { "#000000;" "#bdc1c6;" }
                         { "#2a5db0;" "#8ab4f8;" }
-                        { "#333333;" "#cccccc;" }
+                        { "#333333;" "#d5d5d5;" }
                         { "#373e48;" "#ffffff;" }
                         { "#8b4500;" "orange;" }
                         { "#e3e2db;" "#444444;" }
@@ -250,7 +269,7 @@ M: pathname url-of
         [ print-topic ] with-html-writer
         css-styles-to-classes cache-images
         "resource:extra/websites/factorcode/favicon.ico" dup file-name ?copy-file
-        [ help-stylesheet help-meta prepend help-nav ] dip help-footer
+        [ help-header help-nav ] dip help-footer
         [XML <-><div class="page"><-><-></div> XML]
     ] bi simple-page ;