*/
var refreshSearch = function(themename) {
var componentStr = $('[data-field="component"]').val();
- var searchStr = $('[data-field="search"]').val();
+ var searchStr = $('[data-region="list-templates"] [data-region="input"]').val();
+ if (searchStr !== '') {
+ $('[data-region="list-templates"] [data-action="clearsearch"]').removeClass('d-none');
+ } else {
+ $('[data-region="list-templates"] [data-action="clearsearch"]').addClass('d-none');
+ }
// Trigger the search.
document.location.hash = searchStr;
};
// Add change handlers to refresh the list.
$('[data-region="list-templates"]').on('change', '[data-field="component"]', changeHandler);
- $('[data-region="list-templates"]').on('input', '[data-field="search"]', changeHandler);
+ $('[data-region="list-templates"]').on('input', '[data-region="input"]', changeHandler);
+ $('[data-action="clearsearch"]').on('click', function() {
+ $('[data-region="input"]').val('');
+ refreshSearch(config.theme);
+ $(this).addClass('d-none');
+ });
- $('[data-field="search"]').val(document.location.hash.replace('#', ''));
+ $('[data-region="input"]').val(document.location.hash.replace('#', ''));
refreshSearch(config.theme);
return {};
});
Context variables required for this template:
* allcomponents - array of components containing templates. Each component has a name and a component attribute.
+}}
+{{!
+ This file is part of Moodle - http://moodle.org/
+
+ Moodle is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ Moodle is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with Moodle. If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+ @template tool_templatelibrary/list_templates_page
+
+ Moodle template to the template library
+
+ The purpose of this template is build the entire page for the template library (by including smaller templates).
+
+ Classes required for JS:
+ * none
+
+ Data attributes required for JS:
+ * data-region, data-field
+
+ Context variables required for this template:
+ * allcomponents - array of components containing templates. Each component has a name and a component attribute.
+
}}
<div data-region="list-templates">
<form class="form-horizontal">
- <div class="control-group">
- <label for="selectcomponent" class="control-label">{{#str}}component, tool_templatelibrary{{/str}}</label>
- <div class="controls">
- <select id="selectcomponent" data-field="component">
- <option value="">{{#str}}all, tool_templatelibrary{{/str}}</option>
- {{#allcomponents}}
- <option value="{{component}}">{{name}}</option>
- {{/allcomponents}}
- </select>
- </div>
- </div>
- <div class="control-group">
- <label for="search" class="control-label">{{#str}}search, tool_templatelibrary{{/str}}</label>
- <div class="controls">
- <input type="text" id="search" data-field="search"/>
- </div>
- </div>
+ {{< core_form/element-template }}
+ {{$label}}
+ <div class="col-form-label">{{#str}}component, tool_templatelibrary{{/str}}</div>
+ {{/label}}
+
+ {{$element}}
+ <select id="selectcomponent" class="form-control" data-field="component">
+ <option value="">{{#str}}all, tool_templatelibrary{{/str}}</option>
+ {{#allcomponents}}
+ <option value="{{component}}">{{name}}</option>
+ {{/allcomponents}}
+ </select>
+ {{/element}}
+ {{/ core_form/element-template }}
+
+ {{< core_form/element-template }}
+ {{$element}}
+ {{< core/search_input_auto }}
+ {{$label}}{{{ searchstring }}}{{/label}}
+ {{$placeholder}}{{#str}}
+ search, core
+ {{/str}}{{/placeholder}}
+ {{/ core/search_input_auto }}
+ {{/element}}
+ {{/ core_form/element-template }}
</form>
<hr/>
{{> tool_templatelibrary/search_results }}
--- /dev/null
+{{!
+ This file is part of Moodle - http://moodle.org/
+
+ Moodle is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ Moodle is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with Moodle. If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+ @template core/search_input_auto
+
+ Search input that auto searches.
+
+ Example context (json):
+ {
+ "action": "https://moodle.local/admin/search.php",
+ "extraclasses": "my-2",
+ "inputname": "search",
+ "searchstring": "Search settings",
+ "sesskey": "sesskey",
+ "value": "policy",
+ "btnclass": "primary",
+ "hiddenfields": [
+ {
+ "name": "course",
+ "value": "11"
+ }
+ ]
+ }
+}}
+<div id="searchform-auto-{{uniqid}}" class="form-inline simplesearchform">
+ <div class="input-group searchbar" role="search">
+ <label for="searchinput">
+ <span class="sr-only">{{$label}}{{#str}} search, core {{/str}}{{/label}}</span>
+ </label>
+ <input
+ type="text"
+ data-region="input"
+ data-action="search"
+ id="searchinput"
+ class="form-control withclear"
+ placeholder="{{$placeholder}}{{#str}} search, core {{/str}}{{/placeholder}}"
+ name="search"
+ autocomplete="off"
+ >
+ <button
+ class="btn btn-clear d-none"
+ data-action="clearsearch"
+ type="button"
+ >
+ {{#pix}} e/cancel, core {{/pix}}
+ <span class="sr-only">{{#str}} clearsearch, core {{/str}}</span>
+ </button>
+ </div>
+</div>
