~launchpad-pqm/launchpad/devel

« back to all changes in this revision

Viewing changes to lib/lp/app/widgets/templates/form-picker-macros.pt

  • Committer: Launchpad Patch Queue Manager
  • Date: 2011-04-18 06:28:34 UTC
  • mfrom: (12828.4.4 refactor-picker-template)
  • Revision ID: launchpad@pqm.canonical.com-20110418062834-b9qfpev7kvv2iqaj
[r=bac][bug=761331] Fix the non ajax Find... link for pickers.

Show diffs side-by-side

added added

removed removed

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