[oe-commits] [bitbake] 04/44: toaster: migrate typeahead library
git at git.openembedded.org
git at git.openembedded.org
Mon Jun 13 21:10:52 UTC 2016
rpurdie pushed a commit to branch master-next
in repository bitbake.
commit 0748177b40188a6fb735fe1ba1c17294afa4a3d0
Author: Elliot Smith <elliot.smith at intel.com>
AuthorDate: Tue Apr 12 12:07:01 2016 +0100
toaster: migrate typeahead library
Migrate from Bootstrap 2's built-in typeahead to Twitter's
typeahead library.
This is to facilitate moving to Bootstrap 3, which doesn't have
a typeahead.
Signed-off-by: Elliot Smith <elliot.smith at intel.com>
Signed-off-by: Michael Wood <michael.g.wood at intel.com>
---
LICENSE | 2 +
lib/toaster/toastergui/static/css/default.css | 19 ++++
lib/toaster/toastergui/static/js/libtoaster.js | 124 +++++++++------------
.../toastergui/static/js/typeahead.jquery.min.js | 7 ++
lib/toaster/toastergui/templates/base.html | 2 +
5 files changed, 85 insertions(+), 69 deletions(-)
diff --git a/LICENSE b/LICENSE
index a57f9a4..4ceabf7 100644
--- a/LICENSE
+++ b/LICENSE
@@ -9,4 +9,6 @@ Foundation and individual contributors.
* jQuery is redistributed under the MIT license.
+* Twitter typeahead.js redistributed under the MIT license.
+
* QUnit is redistributed under the MIT license.
diff --git a/lib/toaster/toastergui/static/css/default.css b/lib/toaster/toastergui/static/css/default.css
index b024d96..d0e45b6 100644
--- a/lib/toaster/toastergui/static/css/default.css
+++ b/lib/toaster/toastergui/static/css/default.css
@@ -341,3 +341,22 @@ input.input-lg {
line-height: 1.33333;
padding: 10px 16px;
}
+
+/* styling for standalone typeahead library */
+.tt-menu {
+ margin-top: 2px;
+ border-radius: 4px;
+ width: 100%;
+}
+
+.tt-suggestion {
+ cursor: pointer;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+.tt-suggestion.active {
+ background-color: #0081c2;
+ color: white;
+}
diff --git a/lib/toaster/toastergui/static/js/libtoaster.js b/lib/toaster/toastergui/static/js/libtoaster.js
index 0d1486b..d48c7f7 100644
--- a/lib/toaster/toastergui/static/js/libtoaster.js
+++ b/lib/toaster/toastergui/static/js/libtoaster.js
@@ -3,96 +3,82 @@
* This object really just helps readability since we can then have
* a traceable namespace.
*/
-var libtoaster = (function (){
-
- /* makeTypeahead parameters
- * elementSelector: JQuery elementSelector string
- * xhrUrl: the url to get the JSON from expects JSON in the form:
- * { "list": [ { "name": "test", "detail" : "a test thing" }, .... ] }
+var libtoaster = (function () {
+ // prevent conflicts with Bootstrap 2's typeahead (required during
+ // transition from v2 to v3)
+ var typeahead = jQuery.fn.typeahead.noConflict();
+ jQuery.fn._typeahead = typeahead;
+
+ /* Make a typeahead from an input element
+ *
+ * _makeTypeahead parameters
+ * jQElement: input element as selected by $('selector')
+ * xhrUrl: the url to get the JSON from; this URL should return JSON in the
+ * format:
+ * { "results": [ { "name": "test", "detail" : "a test thing" }, ... ] }
* xhrParams: the data/parameters to pass to the getJSON url e.g.
- * { 'type' : 'projects' } the text typed will be passed as 'search'.
- * selectedCB: function to call once an item has been selected one
- * arg of the item.
+ * { 'type' : 'projects' }; the text typed will be passed as 'search'.
+ * selectedCB: function to call once an item has been selected; has
+ * signature selectedCB(item), where item is an item in the format shown
+ * in the JSON list above, i.e.
+ * { "name": "name", "detail": "detail" }.
*/
- function _makeTypeahead (jQElement, xhrUrl, xhrParams, selectedCB) {
- if (!xhrUrl || xhrUrl.length === 0)
- throw("No url to typeahead supplied");
+ function _makeTypeahead(jQElement, xhrUrl, xhrParams, selectedCB) {
+ if (!xhrUrl || xhrUrl.length === 0) {
+ throw("No url supplied for typeahead");
+ }
var xhrReq;
- jQElement.typeahead({
- // each time the typeahead's choices change, a
- // "typeahead-choices-change" event is fired with an object
- // containing the available choices in a "choices" property
- source: function(query, process){
+ jQElement._typeahead(
+ {
+ highlight: true,
+ classNames: {
+ open: "dropdown-menu",
+ cursor: "active"
+ }
+ },
+ {
+ source: function (query, syncResults, asyncResults) {
xhrParams.search = query;
- /* If we have a request in progress don't fire off another one*/
- if (xhrReq)
+ // if we have a request in progress, cancel it and start another
+ if (xhrReq) {
xhrReq.abort();
+ }
- xhrReq = $.getJSON(xhrUrl, this.options.xhrParams, function(data){
+ xhrReq = $.getJSON(xhrUrl, xhrParams, function (data) {
if (data.error !== "ok") {
- console.log("Error getting data from server "+data.error);
+ console.error("Error getting data from server: " + data.error);
return;
}
xhrReq = null;
- jQElement.trigger("typeahead-choices-change", {choices: data.results});
-
- return process(data.results);
+ asyncResults(data.results);
});
},
- updater: function(item) {
- var itemObj = this.$menu.find('.active').data('itemObject');
- selectedCB(itemObj);
- return item;
- },
- matcher: function(item) {
- if (!item.hasOwnProperty('name')) {
- console.log("Name property missing in data");
- return 0;
- }
- if (this.$element.val().length === 0)
- return 0;
-
- return 1;
- },
- highlighter: function (item) {
- /* Use jquery to escape the item name and detail */
- var current = $("<span></span>").text(item.name + ' '+item.detail);
- current = current.html();
-
- var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')
- return current.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
- return '<strong>' + match + '</strong>'
- })
+ // how the selected item is shown in the input
+ display: function (item) {
+ return item.name;
},
- sorter: function (items) { return items; },
- xhrUrl: xhrUrl,
- xhrParams: xhrParams,
- xhrReq: xhrReq,
- });
-
-
- /* Copy of bootstrap's render func but sets selectedObject value */
- function customRenderFunc (items) {
- var that = this;
-
- items = $(items).map(function (i, item) {
- i = $(that.options.item).attr('data-value', item.name).data('itemObject', item);
- i.find('a').html(that.highlighter(item));
- return i[0];
- });
- items.first().addClass('active');
- this.$menu.html(items);
- return this;
- }
+ templates: {
+ // how the item is displayed in the dropdown
+ suggestion: function (item) {
+ var elt = document.createElement("div");
+ elt.innerHTML = item.name + " " + item.detail;
+ return elt;
+ }
+ }
+ }
+ );
- jQElement.data('typeahead').render = customRenderFunc;
+ // when an item is selected using the typeahead, invoke the callback
+ jQElement.on("typeahead:select", function (event, item) {
+ selectedCB(item);
+ });
}
/* startABuild:
diff --git a/lib/toaster/toastergui/static/js/typeahead.jquery.min.js b/lib/toaster/toastergui/static/js/typeahead.jquery.min.js
new file mode 100644
index 0000000..962133a
--- /dev/null
+++ b/lib/toaster/toastergui/static/js/typeahead.jquery.min.js
@@ -0,0 +1,7 @@
+/*!
+ * typeahead.js 0.11.1
+ * https://github.com/twitter/typeahead.js
+ * Copyright 2013-2015 Twitter, Inc. and other contributors; Licensed MIT
+ */
+
+!function(a,b){"function"==typeof define&&define.amd?define("typeahead.js",["jquery"],function(a){return b(a)}):"object"==typeof exports?module.exports=b(require("jquery")):b(jQuery)}(this,function(a){var b=function(){"use strict";return{isMsie:function(){return/(msie|trident)/i.test(navigator.userAgent)?navigator.userAgent.match(/(msie |rv:)(\d+(.\d+)?)/i)[2]:!1},isBlankString:function(a){return!a||/^\s*$/.test(a)},escapeRegExChars:function(a){return a.replace(/[\-\[\]\/\{\}\(\)\*\+\?\. [...]
\ No newline at end of file
diff --git a/lib/toaster/toastergui/templates/base.html b/lib/toaster/toastergui/templates/base.html
index 210cf33..e26a429 100644
--- a/lib/toaster/toastergui/templates/base.html
+++ b/lib/toaster/toastergui/templates/base.html
@@ -21,6 +21,8 @@
</script>
<script src="{% static 'js/bootstrap.min.js' %}">
</script>
+ <script src="{% static 'js/typeahead.jquery.min.js' %}">
+ </script>
<script src="{% static 'js/prettify.js' %}">
</script>
<script src="{% static 'js/libtoaster.js' %}">
--
To stop receiving notification emails like this one, please contact
the administrator of this repository.
More information about the Openembedded-commits
mailing list