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

« back to all changes in this revision

Viewing changes to src/navbar/tests/manual/index.html

  • 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:
70
70
 
71
71
<p>Foo bar
72
72
 
 
73
<div class="ues-navbar" data-qa="navbar-search-autocomplete">
 
74
    <div class="ues-navbar-header"></div>
 
75
    <div class="ues-navbar-collapse search autocomplete collapse in">
 
76
        <div class="ues-navbar-secondary-nav">
 
77
            <div class="ues-navbar-search">
 
78
                <i class="ues-icon-search orange smaller"></i>
 
79
                <input class="ues-form-quicksearch" type="search" placeholder="Placeholder">
 
80
            </div>
 
81
        </div>
 
82
    </div>
 
83
</div>
 
84
 
 
85
<p>Bar baz
 
86
 
73
87
<script>
74
 
YUI().use('navbar', function(Y) {
 
88
 
 
89
YUI().use('navbar', 'navbar-autocomplete', function(Y) {
75
90
    var menu = Y.one('.ues-navbar-collapse');
 
91
    var search = Y.one('.ues-navbar-collapse.search');
76
92
 
77
93
    menu.collapse.on('collapse:stateChange', function(e) {
78
94
        console.log('plugin {state} attr change event');
79
95
    })
80
96
 
 
97
    var ac = Y.one('.ues-navbar-collapse.autocomplete');
 
98
    var acInput = ac.one('input[type="search"]');
 
99
 
 
100
    acInput.ac.set('source', [
 
101
        { text: 'Facebook' },
 
102
        { text: 'Google' }
 
103
    ]);
 
104
 
81
105
});
82
106
</script>