Restore autofocus to the searchbar in TPAC
authorDan Scott <dscott@laurentian.ca>
Mon, 5 Mar 2012 04:15:58 +0000 (23:15 -0500)
committerMike Rylander <mrylander@gmail.com>
Wed, 7 Mar 2012 19:12:08 +0000 (14:12 -0500)
The switch to autosuggest gave us great functionality, but we lost
autofocus for effortless initial searching. Restore it, with and without
Dojo. For the latter case, just use HTML5's autofocus attribute to begin
with; later on we can use something like Modernizr to detect browsers
that don't support this attribute and prop them up with additional
JavaScript, but let's not let that prevent us from getting a good bang
for our attribute buck in the short term.

Note the slightly painful workaround required to get the cursor to
position itself at the end of the input value of the Dojo autosuggest
widget on page load. This is what we get for stepping back into the
world of JavaScript :)

Signed-off-by: Dan Scott <dscott@laurentian.ca>
Signed-off-by: Mike Rylander <mrylander@gmail.com>
Open-ILS/src/templates/opac/parts/js.tt2
Open-ILS/src/templates/opac/parts/searchbar.tt2

index 8d00df5..a7bc567 100644 (file)
 [% IF use_autosuggest.enabled == "t"; %]
 <script type="text/javascript">
     dojo.require("openils.widget.AutoSuggest");
+
+    /* Set focus, and place the cursor at the end of the input string */
+    dojo.addOnLoad(function() {
+        dijit.byId('search_box').focus();
+
+        var sb_value = dijit.byId('search_box').value;
+        /* Dojo won't trigger a change if the value doesn't change */
+        if (sb_value) {
+            dijit.byId('search_box').setValue(sb_value + ' ');
+            dijit.byId('search_box').setValue(sb_value);
+        }
+    });
 </script>
 [% END; # use_autosuggest %]
 
index 80b55ee..3c12bd9 100644 (file)
@@ -24,7 +24,7 @@
                 store_args='{"org_unit_getter": function() { return [% ctx.search_ou %]; }}'
                 [%-     END # opac_visible -%]
                 [%- ELSE -%]
-                x-webkit-speech
+                autofocus x-webkit-speech
                 [%- END # autosuggest enabled %] />
         </span>
         [%- INCLUDE "opac/parts/qtype_selector.tt2" id="qtype";