MDL-69454 core_search: consistent navbar search
[moodle.git] / lib / templates / search_input_navbar.mustache
1 {{!
2     This file is part of Moodle - http://moodle.org/
4     Moodle is free software: you can redistribute it and/or modify
5     it under the terms of the GNU General Public License as published by
6     the Free Software Foundation, either version 3 of the License, or
7     (at your option) any later version.
9     Moodle is distributed in the hope that it will be useful,
10     but WITHOUT ANY WARRANTY; without even the implied warranty of
11     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
12     GNU General Public License for more details.
14     You should have received a copy of the GNU General Public License
15     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
16 }}
17 {{!
18     @template core/search_input_navbar
20     Navbar search input template.
22     Example context (json):
23     {
24         "action": "https://moodle.local/admin/search.php",
25         "inputname": "search",
26         "searchstring": "Search",
27         "hiddenfields": [
28             {
29                 "name": "cmid",
30                 "value": "11"
31             }
32         ]
33     }
34 }}
35 <div id="searchinput-navbar-{{uniqid}}" class="simplesearchform">
36     <div class="collapse" id="searchform-navbar">
37         <form autocomplete="off" action="{{{ action }}}" method="get" accept-charset="utf-8" class="mform form-inline searchform-navbar">
38             {{#hiddenfields}}
39                 <input type="hidden" name="{{ name }}" value="{{ value }}">
40             {{/hiddenfields}}
41             <div class="input-group">
42                 <label for="searchinput-{{uniqid}}">
43                     <span class="sr-only">{{{ searchstring }}}</span>
44                 </label>
45                     <input type="text"
46                        id="searchinput-{{uniqid}}"
47                        class="form-control withclear"
48                        placeholder="{{{ searchstring }}}"
49                        aria-label="{{{ searchstring }}}"
50                        name="{{{ inputname }}}"
51                        data-region="input"
52                        autocomplete="off"
53                     >
54                     <a class="btn btn-close"
55                         data-action="closesearch"
56                         data-toggle="collapse"
57                         href="#searchform-navbar"
58                         role="button"
59                     >
60                         {{#pix}} e/cancel, core {{/pix}}
61                         <span class="sr-only">{{#str}} closebuttontitle {{/str}}</span>
62                     </a>
63                 <div class="input-group-append">
64                     <button type="submit" class="btn btn-submit" data-action="submit">
65                         {{#pix}} a/search, core {{/pix}}
66                         <span class="sr-only">{{{ searchstring }}}</span>
67                     </button>
68                 </div>
69             </div>
70         </form>
71     </div>
72     <a
73         class="btn btn-open"
74         data-toggle="collapse"
75         data-action="opensearch"
76         href="#searchform-navbar"
77         role="button"
78         aria-expanded="false"
79         aria-controls="searchform-navbar"
80     >
81         <i class="icon fa fa-search fa-fw " aria-hidden="true"></i>
82         <span class="sr-only">{{#str}} togglesearch {{/str}}</span>
83     </a>
84 </div>
86 {{#js}}
87 require(
88 [
89     'jquery',
90 ],
91 function(
92     $
93 ) {
94     var uniqid = "{{uniqid}}";
95     var container = $('#searchinput-navbar-' + uniqid);
96     var opensearch = container.find('[data-action="opensearch"]');
97     var input = container.find('[data-region="input"]');
98     var submit = container.find('[data-action="submit"');
100     submit.on('click', function(e) {
101         if (input.val() === '') {
102             e.preventDefault();
103         }
104     });
105     container.on('hidden.bs.collapse', function() {
106         opensearch.removeClass('d-none');
107         input.val('');
108     });
109     container.on('show.bs.collapse', function() {
110         opensearch.addClass('d-none');
111     });
112     container.on('shown.bs.collapse', function() {
113         input.focus();
114     });
115 });
116 {{/js}}