← Back to branch summary

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

« back to all changes in this revision

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