← Back to branch summary

~ubuntuone-pqm-team/online-services-common-js/stable

« back to all changes in this revision

Viewing changes to src/navbar/js/navbar-autocomplete.js

  • Committer: jonas-drange
  • Date: 2014-04-23 09:48:21 UTC
  • mfrom: (30.1.12 navbar-autocomplete)
  • Revision ID: jonas.drange@canonical.com-20140423094821-kgahgu2z4p9xnws1
[r=stephen-stewart] navbar-autocomplete:
Plugs Y.AutoComplete into an input element.
Manipulates the collapse element so that the autocomplete list is shown.

plugin-collapse:
Publish open, close and toggle events and fire them when appropriate.

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/navbar/js/navbar-autocomplete.js
 
1
(function() {
 
2
 
 
3
// store height of collapse once opened
 
4
var baseCollapseHeight;
 
5
 
 
6
// whever something happens with re: to the autocomplete,
 
7
// we need to change the height of the collapse to match the
 
8
// length of the list
 
9
function afterAutoCompleteEvents (e, args) {
 
10
 
 
11
    // transition config of collapse
 
12
    var transitionConfig;
 
13
    // height of autocomplete list node
 
14
    var acListHeight;
 
15
    // collapse itself
 
16
    var collapse = args.collapse;
 
17
    // input which has autocomplete plugin
 
18
    var input = args.input;
 
19
 
 
20
    // only calculate new height if autocomplete collapse is expanded
 
21
    if(!collapse.get('state')) {
 
22
        return;
 
23
    }
 
24
 
 
25
    // would only happen if collapse did not open properly
 
26
    if(!baseCollapseHeight) {
 
27
        throw new Error('baseCollapseHeight was falsy or 0');
 
28
    }
 
29
 
 
30
    // list was made invisible
 
31
    if(e.type === 'autocompleteListPlugin:visibleChange' && !e.newVal) {
 
32
        acListHeight = 0;
 
33
    } else {
 
34
        acListHeight = input.ac.get('listNode').get('scrollHeight');
 
35
    }
 
36
 
 
37
    // config from collapse
 
38
    transitionConfig = collapse.getAttrs(['duration', 'easing']);
 
39
    // add height to config, using base value and the current autocomplete list node height
 
40
    transitionConfig.height = baseCollapseHeight + acListHeight + 'px';
 
41
 
 
42
    // transition using created config
 
43
    collapse.get('host').transition(transitionConfig);
 
44
 
 
45
    Y.log('collapse host height: ' + transitionConfig.height, 'debug', 'navbar-autocomplete');
 
46
}
 
47
 
 
48
var navbars = Y.all('.ues-navbar');
 
49
 
 
50
if (navbars.size()) {
 
51
    navbars.each(function(node, i) {
 
52
 
 
53
        // the autocomplete wrapper
 
54
        var wrapper = node.one('.autocomplete');
 
55
        // input which has autocomplete plugin
 
56
        var input;
 
57
        // autocomplete boundingbox
 
58
        var autoCompleteBox;
 
59
 
 
60
        if(!wrapper) {
 
61
            Y.log('no AutoComplete wrapper in navbar #' + i, 'debug', 'navbar-autocomplete');
 
62
            return;
 
63
        }
 
64
 
 
65
        input = wrapper.one('input[type="search"]');
 
66
        if(!input) {
 
67
            throw new Error('autocomplete is missing input');
 
68
        }
 
69
 
 
70
        // plug autocomplete
 
71
        input.plug(Y.Plugin.AutoComplete, {
 
72
            resultTextLocator: 'text',
 
73
            resultHighlighter: 'phraseMatch',
 
74
            tabSelect: true
 
75
        });
 
76
 
 
77
        // whenever the autocomplete list node changes in height (or becomes invisible)
 
78
        // we need to change the height of the collapse
 
79
        input.ac.after(['clear', 'results', 'visibleChange'], afterAutoCompleteEvents, window, {
 
80
            collapse: wrapper.collapse,
 
81
            input: input
 
82
        });
 
83
 
 
84
        // store collapse height the first time the collapse opens
 
85
        wrapper.collapse.once('open', function (e) {
 
86
            baseCollapseHeight = e.target.get('host').get('scrollHeight');
 
87
            Y.log('baseCollapseHeight: ' + baseCollapseHeight, 'debug', 'navbar-autocomplete');
 
88
        });
 
89
 
 
90
        // add ues classes
 
91
        autoCompleteBox = input.ac.get('boundingBox');
 
92
        autoCompleteBox.addClass('ues-autocomplete').addClass('ues-dropdown');
 
93
        autoCompleteBox.one('ul').addClass('ues-dropdown-menu');
 
94
 
 
95
        // make ac control the visibility of the ues-dropdown
 
96
        input.ac.before('visibleChange', function (e) {
 
97
            autoCompleteBox.toggleClass('open', e.newVal);
 
98
        });
 
99
 
 
100
    });
 
101
}
 
102
 
 
103
})();