| 1 |
efrain |
1 |
{{!
|
|
|
2 |
@template core/url_select
|
|
|
3 |
|
|
|
4 |
Example context (json):
|
|
|
5 |
{
|
|
|
6 |
"id": "url_select_test",
|
|
|
7 |
"action": "https://example.com/post",
|
|
|
8 |
"formid": "url_select_form",
|
|
|
9 |
"sesskey": "sesskey",
|
|
|
10 |
"label": "core/url_select",
|
|
|
11 |
"helpicon": {
|
|
|
12 |
"title": "Help with something",
|
|
|
13 |
"text": "Help with something",
|
|
|
14 |
"url": "http://example.org/help",
|
|
|
15 |
"linktext": "",
|
|
|
16 |
"icon":{
|
|
|
17 |
"extraclasses": "iconhelp",
|
|
|
18 |
"attributes": [
|
|
|
19 |
{"name": "src", "value": "../../../pix/help.svg"},
|
|
|
20 |
{"name": "alt", "value": "Help icon"}
|
|
|
21 |
]
|
|
|
22 |
}
|
|
|
23 |
},
|
|
|
24 |
"showbutton": "Go",
|
|
|
25 |
"options": [{
|
|
|
26 |
"name": "Group 1", "isgroup": true, "options":
|
|
|
27 |
[
|
|
|
28 |
{"name": "Item 1", "isgroup": false, "value": "1"},
|
|
|
29 |
{"name": "Item 2", "isgroup": false, "value": "2"}
|
|
|
30 |
]},
|
|
|
31 |
{"name": "Group 2", "isgroup": true, "options":
|
|
|
32 |
[
|
|
|
33 |
{"name": "Item 3", "isgroup": false, "value": "3"},
|
|
|
34 |
{"name": "Item 4", "isgroup": false, "value": "4"}
|
|
|
35 |
]}],
|
|
|
36 |
"disabled": false,
|
|
|
37 |
"title": "Some cool title"
|
|
|
38 |
}
|
|
|
39 |
}}
|
|
|
40 |
<div class="{{classes}}">
|
|
|
41 |
<form method="post" action="{{action}}" class="form-inline" id="{{formid}}">
|
|
|
42 |
<input type="hidden" name="sesskey" value="{{sesskey}}">
|
|
|
43 |
{{#label}}
|
|
|
44 |
<label for="{{id}}"{{#labelattributes}} {{name}}="{{value}}"{{/labelattributes}}>
|
|
|
45 |
{{label}}
|
|
|
46 |
</label>
|
|
|
47 |
{{/label}}
|
|
|
48 |
{{#helpicon}}
|
|
|
49 |
{{>core/help_icon}}
|
|
|
50 |
{{/helpicon}}
|
|
|
51 |
<select {{#attributes}}{{name}}="{{value}}" {{/attributes}} id="{{id}}" class="custom-select custom-select-sm {{classes}}" name="jump"
|
|
|
52 |
{{#title}}title="{{.}}"{{/title}} {{#disabled}}disabled{{/disabled}}>
|
|
|
53 |
{{#options}}
|
|
|
54 |
{{#isgroup}}
|
|
|
55 |
<optgroup label="{{name}}">
|
|
|
56 |
{{#options}}
|
|
|
57 |
<option value="{{value}}" {{#selected}}selected{{/selected}}>{{{name}}}</option>
|
|
|
58 |
{{/options}}
|
|
|
59 |
</optgroup>
|
|
|
60 |
{{/isgroup}}
|
|
|
61 |
{{^isgroup}}
|
|
|
62 |
<option value="{{value}}" {{#selected}}selected{{/selected}}>{{{name}}}</option>
|
|
|
63 |
{{/isgroup}}
|
|
|
64 |
{{/options}}
|
|
|
65 |
</select>
|
|
|
66 |
{{#showbutton}}
|
|
|
67 |
<input type="submit" class="btn btn-sm btn-secondary ml-1" value="{{showbutton}}">
|
|
|
68 |
{{/showbutton}}
|
|
|
69 |
{{^showbutton}}
|
|
|
70 |
<noscript>
|
|
|
71 |
<input type="submit" class="btn btn-sm btn-secondary ml-1" value="{{#str}}go, core{{/str}}">
|
|
|
72 |
</noscript>
|
|
|
73 |
{{/showbutton}}
|
|
|
74 |
</form>
|
|
|
75 |
</div>
|
|
|
76 |
{{^showbutton}}
|
|
|
77 |
{{#js}}
|
|
|
78 |
require(['jquery', 'core/custom_interaction_events'], function($, CustomEvents) {
|
|
|
79 |
CustomEvents.define('#{{id}}', [CustomEvents.events.accessibleChange]);
|
|
|
80 |
$('#{{id}}').on(CustomEvents.events.accessibleChange, function() {
|
|
|
81 |
if (!$(this).val()) {
|
|
|
82 |
return false;
|
|
|
83 |
}
|
|
|
84 |
$('#{{formid}}').submit();
|
|
|
85 |
});
|
|
|
86 |
});
|
|
|
87 |
{{/js}}
|
|
|
88 |
{{/showbutton}}
|