← Back to branch summary

~lutostag/ubuntu/utopic/maas/1.5.2

« 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-03-15 18:14:08 UTC
  • mfrom: (1.1.3)
  • Revision ID: package-import@ubuntu.com-20120315181408-zgl94hzo0x4n99an
Tags: 0.1+bzr295+dfsg-0ubuntu2
* debian/patches:
  - 01-fix-database-settings.patch: Update to set PSERV_URL.
  - 02-pserv-config.patch: Set port to 8001.
* debian/maas.postinst: Run maas-import-isos on install.
* debian/control: Depends on rabbitmq-server.

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>