← Back to branch summary

~ubuntu-branches/ubuntu/quantal/maas/quantal-updates

« back to all changes in this revision

Viewing changes to src/maasserver/static/jslibs/yui/3.4.1/tests/autocomplete/tests/manual/autocomplete.html

  • Committer: Package Import Robot
  • Author(s): Andres Rodriguez
  • Date: 2012-07-03 17:42:37 UTC
  • mfrom: (1.1.13)
  • Revision ID: package-import@ubuntu.com-20120703174237-p8l0keuuznfg721k
Tags: 0.1+bzr709+dfsg-0ubuntu1
* New Upstream release
* debian/control:
  - Depends on python-celery, python-tempita, libjs-yui3-{full,min},
    libjs-raphael
* debian/maas.install:
  - Install apiclient, celeryconfig.py, maas-import-pxe-files, preseeds_v2.
  - Update to install various files from chroot, rather tha manually copy
    them from the source.
* debian/maas.links: symlink celeryconfig.py
* debian/maas.maas-celery.upstart: Add job.
* debian/rules:
  - Install celery upstart job.
  - Do not install jslibs as packages are now used.
  - Drop copying of maas_local_settings_sample.py as source now ships
    a maas_local_settings.py
* debian/patches:
  - 04-maas-http-fix.patch: Drop. Merged upstream.
  - 01-fix-database-settings.patch: Refreshed.
  - 99_enums_js.patch: Added until creation of enum.js / build process
    is fixed.
* debian/maas.postinst: Update bzr version to correctly handle upgrades.

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/maasserver/static/jslibs/yui/3.4.1/tests/autocomplete/tests/manual/autocomplete.html
1
 
<!DOCTYPE html>
2
 
<html>
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>AutoComplete manual test</title>
6
 
    <!-- <link rel="stylesheet" href="../../../../build/cssreset/reset-min.css">
7
 
    <link rel="stylesheet" href="../../../../build/cssbase/base-min.css"> -->
8
 
    <link rel="stylesheet" href="../assets/test-console.css">
9
 
    <!-- for design iteration -->
10
 
    <!-- <link rel="stylesheet" href="../../assets/autocomplete-list-core.css">
11
 
    <link rel="stylesheet" href="../../assets/skins/sam/autocomplete-list-skin.css"> -->
12
 
    <style>
13
 
    html {
14
 
        background: #fff;
15
 
        color: #333;
16
 
        font-family: Helvetica, sans-serif;
17
 
        font-size: 13px;
18
 
    }
19
 
 
20
 
    body { width: 60%; }
21
 
 
22
 
    fieldset {
23
 
        border: 1px solid #afafaf;
24
 
        margin-top: 1em;
25
 
    }
26
 
 
27
 
    fieldset label { margin-right: 0.5em; }
28
 
 
29
 
    #ac-input {
30
 
        margin: 5px 0 10px;
31
 
        width: 300px;
32
 
    }
33
 
 
34
 
    #log { margin-top: 4em; }
35
 
 
36
 
    .flickr {
37
 
        height: 32px;
38
 
        overflow: hidden;
39
 
        padding: 2px;
40
 
        text-decoration: none;
41
 
    }
42
 
 
43
 
    .flickr img {
44
 
        float: left;
45
 
        height: 32px;
46
 
        margin: 0 4px;
47
 
        width: 32px;
48
 
    }
49
 
 
50
 
    .twitter {
51
 
        clear: both;
52
 
        margin: 4px 0;
53
 
        padding: 2px 0;
54
 
    }
55
 
 
56
 
    .twitter .hd {
57
 
        float: left;
58
 
    }
59
 
 
60
 
    .twitter .bd,
61
 
    .twitter .ft {
62
 
        margin-left: 52px;
63
 
    }
64
 
 
65
 
    .twitter .ft {
66
 
        color: #cfcfcf;
67
 
        font-size: 11px;
68
 
    }
69
 
 
70
 
    .twitter .photo {
71
 
        height: 48px;
72
 
        margin-top: 3px;
73
 
        width: 48px;
74
 
    }
75
 
 
76
 
    .twitter .user { margin-right: 6px; }
77
 
 
78
 
    </style>
79
 
</head>
80
 
<body class="yui3-skin-sam">
81
 
 
82
 
<h1>AutoComplete manual test</h1>
83
 
 
84
 
<form id="ac-form">
85
 
    <div id="ac">
86
 
        <label for="ac-input">Type things here! Try the name of a US state.</label><br>
87
 
        <input type="text" id="ac-input">
88
 
    </div>
89
 
 
90
 
    <fieldset>
91
 
        <legend>Source</legend>
92
 
        <div>
93
 
            <select id="source">
94
 
                <option value="none">None</option>
95
 
                <option value="local" selected>Local (Array)</option>
96
 
                <option value="function">Local (Function)</option>
97
 
                <option value="flickr">Remote (Flickr)</option>
98
 
                <option value="search">Remote (Y! Search)</option>
99
 
                <option value="twitter">Remote (Twitter Search)</option>
100
 
                <option value="xhr">Remote (XHR)</option>
101
 
            </select>
102
 
        </div>
103
 
    </fieldset>
104
 
 
105
 
    <fieldset id="filters">
106
 
        <legend>Result Filters</legend>
107
 
        <div></div>
108
 
    </fieldset>
109
 
 
110
 
    <fieldset id="highlighters">
111
 
        <legend>Result Highlighters</legend>
112
 
        <div>
113
 
            <input type="radio" class="highlighter" name="highlighter" id="highlighter_none" value="none" checked="checked">
114
 
            <label for="highlighter_none">None</label>
115
 
        </div>
116
 
    </fieldset>
117
 
 
118
 
    <fieldset id="other">
119
 
        <legend>Other Settings</legend>
120
 
        <div>
121
 
            <label for="delimiter">Query delimiter:</label>
122
 
            <input type="text" id="delimiter">
123
 
        </div>
124
 
    </fieldset>
125
 
</form>
126
 
 
127
 
<div id="log"></div>
128
 
 
129
 
<script src="../assets/test-data.js"></script>
130
 
<script src="../../../../build/yui/yui.js"></script>
131
 
<script>
132
 
var Y = YUI({
133
 
    filter: 'raw',
134
 
    filters: {
135
 
        'autocomplete': 'debug',
136
 
        'autocomplete-base': 'debug',
137
 
        'autocomplete-list': 'debug'
138
 
    },
139
 
 
140
 
    useBrowserConsole: false,
141
 
 
142
 
    // For design iteration.
143
 
    ignore: [
144
 
        // 'skin-sam-autocomplete',
145
 
        // 'skin-sam-autocomplete-list'
146
 
    ]
147
 
}).use(
148
 
    'autocomplete',
149
 
    'autocomplete-filters',
150
 
    'autocomplete-highlighters',
151
 
    'console-filters',
152
 
    'dump',
153
 
    'event-delegate',
154
 
function (Y) {
155
 
 
156
 
Y.one('#ac-form').reset();
157
 
 
158
 
// -- Console setup ------------------------------------------------------------
159
 
new Y.Console({
160
 
    height: '400px',
161
 
    width: '35%'
162
 
}).plug(Y.Plugin.ConsoleFilters, {}).render('#log');
163
 
 
164
 
// -- AutoComplete setup -------------------------------------------------------
165
 
var autoComplete = new Y.AutoComplete({inputNode: '#ac-input'});
166
 
 
167
 
// For easier debugging.
168
 
Y.ac = autoComplete;
169
 
 
170
 
// -- UI stuff -----------------------------------------------------------------
171
 
var filtersDiv      = Y.one('#filters>div'),
172
 
    highlightersDiv = Y.one('#highlighters>div');
173
 
 
174
 
// Create filter checkboxes.
175
 
Y.Object.each(Y.AutoCompleteFilters, function (filter, name) {
176
 
    if (name.indexOf('_') === 0) {
177
 
        return;
178
 
    }
179
 
 
180
 
    filtersDiv.append(
181
 
        '<input type="checkbox" class="filter" id="filter_' + name + '" value="' + name + '"' + (name === 'phraseMatch' ? ' checked="checked"' : '') + '>' +
182
 
        '<label for="filter_' + name + '">' + name + '</label>'
183
 
    );
184
 
});
185
 
 
186
 
// Create highlighter radio buttons.
187
 
Y.Object.each(Y.AutoCompleteHighlighters, function (highlighter, name) {
188
 
    if (name.indexOf('_') === 0) {
189
 
        return;
190
 
    }
191
 
 
192
 
    highlightersDiv.append(
193
 
        '<input type="radio" class="highlighter" name="highlighter" id="highlighter_' + name + '" value="' + name + '"' + (name === 'phraseMatch' ? ' checked="checked"' : '') + '>' +
194
 
        '<label for="highlighter_' + name + '">' + name + '</label>'
195
 
    );
196
 
});
197
 
 
198
 
// Handle clicks on datasource radio buttons.
199
 
Y.one('#source').on('change', function (e) {
200
 
    switch (e.target.get('value')) {
201
 
    case 'none':
202
 
        useNone();
203
 
        break;
204
 
 
205
 
    case 'local':
206
 
        useLocal();
207
 
        break;
208
 
 
209
 
    case 'function':
210
 
        useFunction();
211
 
        break;
212
 
 
213
 
    case 'flickr':
214
 
        useFlickr();
215
 
        break;
216
 
 
217
 
    case 'search':
218
 
        useSearch();
219
 
        break;
220
 
 
221
 
    case 'twitter':
222
 
        useTwitter();
223
 
        break;
224
 
 
225
 
    case 'xhr':
226
 
        useXHR();
227
 
        break;
228
 
    }
229
 
});
230
 
 
231
 
// Handle clicks on filters.
232
 
Y.delegate('click', setFilters, '#filters', 'input[type="checkbox"]');
233
 
 
234
 
// Handle clicks on highlighters.
235
 
Y.delegate('click', setHighlighter, '#highlighters', 'input[type="radio"]');
236
 
 
237
 
// Handle delimiter changes.
238
 
Y.on('change', setDelimiter, '#delimiter');
239
 
 
240
 
useLocal();
241
 
setFilters();
242
 
setHighlighter();
243
 
 
244
 
autoComplete.render();
245
 
autoComplete.get('inputNode').focus();
246
 
 
247
 
// -- UI functions -------------------------------------------------------------
248
 
function flickrFormatter(query, results) {
249
 
    return Y.Array.map(results, function (result) {
250
 
        var imgUrl = Y.Lang.sub('http://farm{farm}.static.flickr.com/{server}/{id}_{secret}_s.jpg', result.raw);
251
 
 
252
 
        return '<div class="flickr">' +
253
 
                 '<img src="' + imgUrl + '" alt="thumbnail">' +
254
 
                 '<span class="title">' + result.highlighted + '</span>' +
255
 
               '</div>';
256
 
    });
257
 
}
258
 
 
259
 
function twitterFormatter(query, results) {
260
 
    return Y.Array.map(results, function (result) {
261
 
        return Y.Lang.sub(
262
 
            '<div class="twitter" data-tweet-id="{id}">' +
263
 
              '<div class="hd">' +
264
 
                '<img src="{imgurl}" class="photo" alt="Profile photo for {user}">' +
265
 
              '</div>' +
266
 
              '<div class="bd">' +
267
 
                '<strong class="user">{user}</strong>' +
268
 
                '<span class="tweet-text">{text}</span>' +
269
 
              '</div>' +
270
 
              '<div class="ft">' +
271
 
                '{time}' +
272
 
              '</div>' +
273
 
            '</div>'
274
 
        , {
275
 
            id    : result.raw.id,
276
 
            imgurl: result.raw.profile_image_url,
277
 
            text  : result.highlighted,
278
 
            time  : result.raw.created_at,
279
 
            user  : result.raw.from_user
280
 
        });
281
 
    });
282
 
}
283
 
 
284
 
function setDelimiter(e) {
285
 
    autoComplete.set('queryDelimiter', e.target.get('value'));
286
 
}
287
 
 
288
 
function setFilters() {
289
 
    var filters     = [],
290
 
        filterNames = [];
291
 
 
292
 
    Y.all('#filters input.filter').each(function (input) {
293
 
        if (input.get('checked')) {
294
 
            filterNames.push(input.get('value'));
295
 
        }
296
 
    });
297
 
 
298
 
    Y.Array.each(filterNames, function (name) {
299
 
        filters.push(name);
300
 
    });
301
 
 
302
 
    autoComplete.set('resultFilters', filters);
303
 
}
304
 
 
305
 
function setHighlighter() {
306
 
    Y.all('#highlighters input.highlighter').some(function (input) {
307
 
        var name;
308
 
 
309
 
        if (input.get('checked')) {
310
 
            name = input.get('value');
311
 
            autoComplete.set('resultHighlighter', name === 'none' ? null : name);
312
 
            return true;
313
 
        }
314
 
    });
315
 
}
316
 
 
317
 
// -- DataSource functions -----------------------------------------------------
318
 
function useNone() {
319
 
    Y.log('using no source', 'info', 'autocomplete');
320
 
 
321
 
    autoComplete.detachAll('test|*');
322
 
 
323
 
    autoComplete.setAttrs({
324
 
        maxResults       : 0,
325
 
        resultFormatter  : null,
326
 
        resultListLocator: null,
327
 
        resultTextLocator: null,
328
 
        source           : null
329
 
    });
330
 
}
331
 
 
332
 
function useLocal() {
333
 
    Y.log('using local array source', 'info', 'autocomplete');
334
 
 
335
 
    autoComplete.detachAll('test|*');
336
 
 
337
 
    autoComplete.setAttrs({
338
 
        maxResults       : 0,
339
 
        resultFormatter  : null,
340
 
        resultListLocator: null,
341
 
        resultTextLocator: null,
342
 
        source           : ExampleData.arrayStates
343
 
    });
344
 
}
345
 
 
346
 
function useFunction() {
347
 
    Y.log('using local function source', 'info', 'autocomplete');
348
 
 
349
 
    autoComplete.detachAll('test|*');
350
 
 
351
 
    autoComplete.setAttrs({
352
 
        maxResults       : 0,
353
 
        resultFormatter  : null,
354
 
        resultListLocator: null,
355
 
        resultTextLocator: null,
356
 
        source           : function (query) { return ExampleData.arrayStates; }
357
 
    });
358
 
}
359
 
 
360
 
function useFlickr() {
361
 
    Y.log('using remote Flickr YQL source', 'info', 'autocomplete');
362
 
 
363
 
    autoComplete.detachAll('test|*');
364
 
 
365
 
    autoComplete.setAttrs({
366
 
        maxResults       : 0,
367
 
        resultFormatter  : flickrFormatter,
368
 
        resultListLocator: null,
369
 
        resultTextLocator: 'title',
370
 
        source           : 'select * from flickr.photos.search where tags="{query}"'
371
 
    });
372
 
}
373
 
 
374
 
function useSearch() {
375
 
    Y.log('using remote Y! Search YQL source', 'info', 'autocomplete');
376
 
 
377
 
    autoComplete.detachAll('test|*');
378
 
 
379
 
    autoComplete.setAttrs({
380
 
        maxResults       : 0,
381
 
        resultFormatter  : null,
382
 
        resultListLocator: null,
383
 
        resultTextLocator: null,
384
 
        source           : 'select * from search.suggest where query="{query}"',
385
 
        yqlEnv           : 'http://pieisgood.org/yql/tables.env'
386
 
    });
387
 
}
388
 
 
389
 
function useTwitter() {
390
 
    Y.log('using remote Twitter JSONP source', 'info', 'autocomplete');
391
 
 
392
 
    autoComplete.detachAll('test|*');
393
 
 
394
 
    autoComplete.setAttrs({
395
 
        maxResults       : 5,
396
 
        resultFormatter  : twitterFormatter,
397
 
        resultListLocator: 'results',
398
 
        resultTextLocator: 'text',
399
 
        source           : 'http://search.twitter.com/search.json?q={query}&callback={callback}&rpp={maxResults}&result_type=recent'
400
 
    });
401
 
}
402
 
 
403
 
function useXHR() {
404
 
    Y.log('using XHR source', 'info', 'autocomplete');
405
 
 
406
 
    autoComplete.detachAll('test|*');
407
 
 
408
 
    autoComplete.setAttrs({
409
 
        maxResults       : 5,
410
 
        resultFormatter  : null,
411
 
        resultListLocator: null,
412
 
        resultTextLocator: null,
413
 
        source           : '../assets/xhr-data.json?query={query}'
414
 
    });
415
 
}
416
 
 
417
 
});
418
 
</script>
419
 
 
420
 
</body>
421
 
</html>