~ubuntuone-hackers/online-services-common-js/trunk

« back to all changes in this revision

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

  • Committer: jonas-drange
  • Date: 2014-05-14 09:56:38 UTC
  • mfrom: (32.1.4 searchbar-as-module)
  • Revision ID: jonas.drange@canonical.com-20140514095638-kdlj966519ezk7y3
[r=stephen-stewart] - new module 'searchbar', which now builds only one module, 'searchbar-autocomplete'
- removing all search code in navbar
- bumping ulysses dep to 42

Show diffs side-by-side

added added

removed removed

Lines of Context:
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"]});