diff options
Diffstat (limited to 'bitbake/lib/toaster/toastergui/static/js/libtoaster.js')
-rw-r--r-- | bitbake/lib/toaster/toastergui/static/js/libtoaster.js | 124 |
1 files changed, 55 insertions, 69 deletions
diff --git a/bitbake/lib/toaster/toastergui/static/js/libtoaster.js b/bitbake/lib/toaster/toastergui/static/js/libtoaster.js index 0d1486b831..d48c7f787a 100644 --- a/bitbake/lib/toaster/toastergui/static/js/libtoaster.js +++ b/bitbake/lib/toaster/toastergui/static/js/libtoaster.js | |||
@@ -3,96 +3,82 @@ | |||
3 | * This object really just helps readability since we can then have | 3 | * This object really just helps readability since we can then have |
4 | * a traceable namespace. | 4 | * a traceable namespace. |
5 | */ | 5 | */ |
6 | var libtoaster = (function (){ | 6 | var libtoaster = (function () { |
7 | 7 | // prevent conflicts with Bootstrap 2's typeahead (required during | |
8 | /* makeTypeahead parameters | 8 | // transition from v2 to v3) |
9 | * elementSelector: JQuery elementSelector string | 9 | var typeahead = jQuery.fn.typeahead.noConflict(); |
10 | * xhrUrl: the url to get the JSON from expects JSON in the form: | 10 | jQuery.fn._typeahead = typeahead; |
11 | * { "list": [ { "name": "test", "detail" : "a test thing" }, .... ] } | 11 | |
12 | /* Make a typeahead from an input element | ||
13 | * | ||
14 | * _makeTypeahead parameters | ||
15 | * jQElement: input element as selected by $('selector') | ||
16 | * xhrUrl: the url to get the JSON from; this URL should return JSON in the | ||
17 | * format: | ||
18 | * { "results": [ { "name": "test", "detail" : "a test thing" }, ... ] } | ||
12 | * xhrParams: the data/parameters to pass to the getJSON url e.g. | 19 | * xhrParams: the data/parameters to pass to the getJSON url e.g. |
13 | * { 'type' : 'projects' } the text typed will be passed as 'search'. | 20 | * { 'type' : 'projects' }; the text typed will be passed as 'search'. |
14 | * selectedCB: function to call once an item has been selected one | 21 | * selectedCB: function to call once an item has been selected; has |
15 | * arg of the item. | 22 | * signature selectedCB(item), where item is an item in the format shown |
23 | * in the JSON list above, i.e. | ||
24 | * { "name": "name", "detail": "detail" }. | ||
16 | */ | 25 | */ |
17 | function _makeTypeahead (jQElement, xhrUrl, xhrParams, selectedCB) { | 26 | function _makeTypeahead(jQElement, xhrUrl, xhrParams, selectedCB) { |
18 | if (!xhrUrl || xhrUrl.length === 0) | 27 | if (!xhrUrl || xhrUrl.length === 0) { |
19 | throw("No url to typeahead supplied"); | 28 | throw("No url supplied for typeahead"); |
29 | } | ||
20 | 30 | ||
21 | var xhrReq; | 31 | var xhrReq; |
22 | 32 | ||
23 | jQElement.typeahead({ | 33 | jQElement._typeahead( |
24 | // each time the typeahead's choices change, a | 34 | { |
25 | // "typeahead-choices-change" event is fired with an object | 35 | highlight: true, |
26 | // containing the available choices in a "choices" property | 36 | classNames: { |
27 | source: function(query, process){ | 37 | open: "dropdown-menu", |
38 | cursor: "active" | ||
39 | } | ||
40 | }, | ||
41 | { | ||
42 | source: function (query, syncResults, asyncResults) { | ||
28 | xhrParams.search = query; | 43 | xhrParams.search = query; |
29 | 44 | ||
30 | /* If we have a request in progress don't fire off another one*/ | 45 | // if we have a request in progress, cancel it and start another |
31 | if (xhrReq) | 46 | if (xhrReq) { |
32 | xhrReq.abort(); | 47 | xhrReq.abort(); |
48 | } | ||
33 | 49 | ||
34 | xhrReq = $.getJSON(xhrUrl, this.options.xhrParams, function(data){ | 50 | xhrReq = $.getJSON(xhrUrl, xhrParams, function (data) { |
35 | if (data.error !== "ok") { | 51 | if (data.error !== "ok") { |
36 | console.log("Error getting data from server "+data.error); | 52 | console.error("Error getting data from server: " + data.error); |
37 | return; | 53 | return; |
38 | } | 54 | } |
39 | 55 | ||
40 | xhrReq = null; | 56 | xhrReq = null; |
41 | 57 | ||
42 | jQElement.trigger("typeahead-choices-change", {choices: data.results}); | 58 | asyncResults(data.results); |
43 | |||
44 | return process(data.results); | ||
45 | }); | 59 | }); |
46 | }, | 60 | }, |
47 | updater: function(item) { | ||
48 | var itemObj = this.$menu.find('.active').data('itemObject'); | ||
49 | selectedCB(itemObj); | ||
50 | return item; | ||
51 | }, | ||
52 | matcher: function(item) { | ||
53 | if (!item.hasOwnProperty('name')) { | ||
54 | console.log("Name property missing in data"); | ||
55 | return 0; | ||
56 | } | ||
57 | 61 | ||
58 | if (this.$element.val().length === 0) | 62 | // how the selected item is shown in the input |
59 | return 0; | 63 | display: function (item) { |
60 | 64 | return item.name; | |
61 | return 1; | ||
62 | }, | ||
63 | highlighter: function (item) { | ||
64 | /* Use jquery to escape the item name and detail */ | ||
65 | var current = $("<span></span>").text(item.name + ' '+item.detail); | ||
66 | current = current.html(); | ||
67 | |||
68 | var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&') | ||
69 | return current.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) { | ||
70 | return '<strong>' + match + '</strong>' | ||
71 | }) | ||
72 | }, | 65 | }, |
73 | sorter: function (items) { return items; }, | ||
74 | xhrUrl: xhrUrl, | ||
75 | xhrParams: xhrParams, | ||
76 | xhrReq: xhrReq, | ||
77 | }); | ||
78 | |||
79 | |||
80 | /* Copy of bootstrap's render func but sets selectedObject value */ | ||
81 | function customRenderFunc (items) { | ||
82 | var that = this; | ||
83 | |||
84 | items = $(items).map(function (i, item) { | ||
85 | i = $(that.options.item).attr('data-value', item.name).data('itemObject', item); | ||
86 | i.find('a').html(that.highlighter(item)); | ||
87 | return i[0]; | ||
88 | }); | ||
89 | 66 | ||
90 | items.first().addClass('active'); | 67 | templates: { |
91 | this.$menu.html(items); | 68 | // how the item is displayed in the dropdown |
92 | return this; | 69 | suggestion: function (item) { |
93 | } | 70 | var elt = document.createElement("div"); |
71 | elt.innerHTML = item.name + " " + item.detail; | ||
72 | return elt; | ||
73 | } | ||
74 | } | ||
75 | } | ||
76 | ); | ||
94 | 77 | ||
95 | jQElement.data('typeahead').render = customRenderFunc; | 78 | // when an item is selected using the typeahead, invoke the callback |
79 | jQElement.on("typeahead:select", function (event, item) { | ||
80 | selectedCB(item); | ||
81 | }); | ||
96 | } | 82 | } |
97 | 83 | ||
98 | /* startABuild: | 84 | /* startABuild: |