1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
<tal:root
xmlns:tal="http://xml.zope.org/namespaces/tal"
xmlns:metal="http://xml.zope.org/namespaces/metal"
omit-tag="">
<metal:form-picker define-macro="form-picker">
<tal:input replace="structure view/inputField" />
<tal:search_results condition="not: view/hasValidInput"
define="suggestion_id string:${view/name}-suggestions">
<select tal:condition="view/matches"
tal:attributes="id string:${suggestion_id}">
<option value="">Did you mean...</option>
<option
tal:repeat="match view/matches"
tal:attributes="value match/token;
selected python:path('match/token') == path('view/formToken');"
tal:content="string:${match/title} (${match/token})"
/>
</select>
<script type="text/javascript" tal:content="string:
LPS.use('node', 'lp.app.picker', function(Y) {
var text_input = Y.DOM.byId('${view/name}');
var select_menu = Y.DOM.byId('${suggestion_id}');
Y.lp.app.picker.connect_select_menu(
select_menu, text_input);
});">
</script>
</tal:search_results>
<tal:chooseLink replace="structure view/chooseLink" />
<script tal:content="structure string:
LPS.use('node', 'lp.app.picker', 'plugin', function(Y) {
if (Y.UA.ie) {
return;
}
// The vocabulary picker, created when used for the first time.
function make_picker() {
var config = {
header: ${view/header_text},
step_title: ${view/step_title_text},
extra_no_results_message: ${view/extra_no_results_message},
picker_type: '${view/picker_type}'
};
if (config.picker_type == 'person') {
config.show_assign_me_button = ${view/show_assign_me_button}
config.show_remove_button = ${view/show_remove_button}
}
var picker = Y.lp.app.picker.create('${view/vocabulary_name}', config);
if (config.extra_no_results_message !== null) {
picker.before('resultsChange', function (e) {
var new_results = e.details[0].newVal;
if (new_results.length === 0) {
picker.set('footer_slot',
Y.Node.create(config.extra_no_results_message));
}
else {
picker.set('footer_slot', null);
}
});
}
picker.plug(Y.lazr.picker.TextFieldPickerPlugin,
{input_element: '[id=\x22${view/input_id}\x22]'});
return picker;
}
var picker = null;
Y.on('domready', function(e) {
// Sort out the Choose... link.
var show_widget_node = Y.one('#${view/show_widget_id}');
show_widget_node.set('innerHTML', 'Choose…');
show_widget_node.addClass('js-action');
show_widget_node.get('parentNode').removeClass('unseen');
show_widget_node.on('click', function (e) {
if (picker === null) {
picker = make_picker();
}
picker.show();
e.preventDefault();
});
});
});
"/>
</metal:form-picker>
</tal:root>
|