← 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-debug.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-debug.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
    Y.log('collapse host height: ' + transitionConfig.height, 'debug', 'navbar-autocomplete');
 
49
}
 
50
 
 
51
var navbars = Y.all('.ues-navbar');
 
52
 
 
53
if (navbars.size()) {
 
54
    navbars.each(function(node, i) {
 
55
 
 
56
        // the autocomplete wrapper
 
57
        var wrapper = node.one('.autocomplete');
 
58
        // input which has autocomplete plugin
 
59
        var input;
 
60
        // autocomplete boundingbox
 
61
        var autoCompleteBox;
 
62
 
 
63
        if(!wrapper) {
 
64
            Y.log('no AutoComplete wrapper in navbar #' + i, 'debug', 'navbar-autocomplete');
 
65
            return;
 
66
        }
 
67
 
 
68
        input = wrapper.one('input[type="search"]');
 
69
        if(!input) {
 
70
            throw new Error('autocomplete is missing input');
 
71
        }
 
72
 
 
73
        // plug autocomplete
 
74
        input.plug(Y.Plugin.AutoComplete, {
 
75
            resultTextLocator: 'text',
 
76
            resultHighlighter: 'phraseMatch',
 
77
            tabSelect: true
 
78
        });
 
79
 
 
80
        // whenever the autocomplete list node changes in height (or becomes invisible)
 
81
        // we need to change the height of the collapse
 
82
        input.ac.after(['clear', 'results', 'visibleChange'], afterAutoCompleteEvents, window, {
 
83
            collapse: wrapper.collapse,
 
84
            input: input
 
85
        });
 
86
 
 
87
        // store collapse height the first time the collapse opens
 
88
        wrapper.collapse.once('open', function (e) {
 
89
            baseCollapseHeight = e.target.get('host').get('scrollHeight');
 
90
            Y.log('baseCollapseHeight: ' + baseCollapseHeight, 'debug', 'navbar-autocomplete');
 
91
        });
 
92
 
 
93
        // add ues classes
 
94
        autoCompleteBox = input.ac.get('boundingBox');
 
95
        autoCompleteBox.addClass('ues-autocomplete').addClass('ues-dropdown');
 
96
        autoCompleteBox.one('ul').addClass('ues-dropdown-menu');
 
97
 
 
98
        // make ac control the visibility of the ues-dropdown
 
99
        input.ac.before('visibleChange', function (e) {
 
100
            autoCompleteBox.toggleClass('open', e.newVal);
 
101
        });
 
102
 
 
103
    });
 
104
}
 
105
 
 
106
})();
 
107
 
 
108
 
 
109
}, '0.0.1', {"requires": ["node", "autocomplete", "autocomplete-highlighters"]});