From 04109640a8e72f778e82286f344403062d29973d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20=C3=85kre=20Solberg?= <andreas.solberg@uninett.no>
Date: Fri, 16 Sep 2011 10:32:26 +0000
Subject: [PATCH] Rewrite of the search input field. Adding support for hitting
the enter key to select the first entry...
git-svn-id: https://simplesamlphp.googlecode.com/svn/trunk@2903 44740490-163a-0410-bde0-09ae8108e29a
---
.../www/discojuice/discojuice.control.js | 115 ++++++++++++++++--
.../www/discojuice/discojuice.ui.js | 7 +-
2 files changed, 112 insertions(+), 10 deletions(-)
diff --git a/modules/discojuice/www/discojuice/discojuice.control.js b/modules/discojuice/www/discojuice/discojuice.control.js
index 4ec500c49..cc9d1551c 100644
--- a/modules/discojuice/www/discojuice/discojuice.control.js
+++ b/modules/discojuice/www/discojuice/discojuice.control.js
@@ -26,6 +26,8 @@ DiscoJuice.Control = {
"extensionResponse": null,
+ "quickEntry": null,
+
/*
* Fetching JSON Metadata using AJAX.
* Callback postLoad is called when data is returned.
@@ -303,6 +305,8 @@ DiscoJuice.Control = {
var term = this.getTerm();
var categories = this.getCategories();
+ this.quickEntry = null;
+
if (!this.data) return;
/*
@@ -329,6 +333,8 @@ DiscoJuice.Control = {
this.ui.clearItems();
+ var quickSelected = false;
+
hits = 0;
for(i = 0; i < this.data.length; i++) {
current = this.data[i];
@@ -373,7 +379,26 @@ DiscoJuice.Control = {
var descr = current.descr || null;
// addItem(item, {country, flag}, keywordmatch, distance)
- this.ui.addItem(current, countrydef, search, current.distance);
+
+ var quickSel = false;
+
+ if (!quickSelected) {
+ console.log('Term: ' + term);
+ console.log('Search: ' + search);
+ if (term && search !== false) {
+ quickSel = true;
+ quickSelected = true;
+ } else if (!term) {
+ quickSel = true;
+ quickSelected = true;
+ }
+ }
+
+ this.ui.addItem(current, countrydef, search, current.distance, quickSel);
+
+ if (quickSel) {
+ this.quickEntry = current;
+ }
}
@@ -381,6 +406,11 @@ DiscoJuice.Control = {
},
+ "hitEnter": function () {
+ console.log(this.quickEntry);
+ this.selectProvider(this.quickEntry.entityID, this.quickEntry.subID);
+ },
+
"selectProvider": function(entityID, subID) {
// console.log('entityid: ' + entityID);
@@ -529,17 +559,84 @@ DiscoJuice.Control = {
/*
Initialise the search box.
*/
+
+ var waiter = function (setCallback) {
+ var my = {};
-// this.parent.Utils.log(this.ui.popup.find("input.discojuice_search"));
- this.ui.popup.find("input.discojuice_search").autocomplete({
- minLength: 0,
- source: function( request, response ) {
- var term = request.term;
- if (term.length === 1) return;
-// that.resetCategories();
- that.prepareData();
+ // Number of milliseconds to wait for more events.
+ my.delay = 400;
+ my.counter = 0;
+
+ // Call back to fire, when the waiter is pinged, and waited for the timeout
+ // (without subsequent events).
+ my.callback = setCallback;
+
+ // Ping
+ function ping (event) {
+ my.counter++;
+ setTimeout(function() {
+ if (--my.counter === 0) {
+ my.callback(event);
+ }
+ }, my.delay);
}
+
+ my.ping = ping;
+ return my;
+ }
+
+ var performSearch = waiter(function(event) {
+
+ term = that.ui.popup.find("input.discojuice_search").val();
+ console.log(that.ui.popup.find("input.discojuice_search"));
+ console.log('Term ' + term);
+
+// if (term.length === 0) alert('Zero!');
+
+ // Will not perform a search when search term is only one character..
+ if (term.length === 1) return;
+ // that.resetCategories();
+ that.prepareData();
});
+
+// this.parent.Utils.log(this.ui.popup.find("input.discojuice_search"));
+ this.ui.popup.find("input.discojuice_search").keydown(function (event) {
+ var
+ charCode, term;
+
+ if (event && event.which){
+ charCode = event.which;
+ }else if(window.event){
+ event = window.event;
+ charCode = event.keyCode;
+ }
+
+ if(charCode == 13) {
+ that.hitEnter();
+ return;
+ }
+
+ performSearch.ping(event);
+ });
+ this.ui.popup.find("input.discojuice_search").change(function (event) {
+ performSearch.ping(event);
+ });
+ this.ui.popup.find("input.discojuice_search").mousedown(function (event) {
+ performSearch.ping(event);
+ });
+
+
+// this.ui.popup.find("input.discojuice_search").autocomplete({
+// minLength: 0,
+// source: function( request, response ) {
+// var term = request.term;
+//
+// if (term.length === 0) alert('0 entries');
+// if (term.length === 1) return;
+// // that.resetCategories();
+// that.prepareData();
+// }
+// });
},
"filterCountrySetup": function (choice) {
diff --git a/modules/discojuice/www/discojuice/discojuice.ui.js b/modules/discojuice/www/discojuice/discojuice.ui.js
index 81193d392..2e4aec46a 100644
--- a/modules/discojuice/www/discojuice/discojuice.ui.js
+++ b/modules/discojuice/www/discojuice/discojuice.ui.js
@@ -45,7 +45,7 @@ DiscoJuice.UI = {
// addItem(item, description, {country, flag}, keywordmatch, distance)
// addItem(current, current.descr ||Â null, countrydef, search, current.distance);
- "addItem": function(item, countrydef, search, distance) {
+ "addItem": function(item, countrydef, search, distance, quickentry) {
var textLink = '';
var classes = '';
if (item.weight < -50) classes += 'hothit';
@@ -63,6 +63,11 @@ DiscoJuice.UI = {
clear = true;
}
+ if (quickentry) {
+// textLink += '<span style="font-size: 80%; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: 1px solid #ccc; background: #eee; color: #777; padding: 3px 2px 0px 2px; margin: 3px; position: relative; top: -2px">↵</span>';
+ textLink += '<span style="font-size: 80%; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: 1px solid #ccc; background: #eee; color: #777; padding: 3px 2px 0px 2px; margin: 3px; float: left; left: -10px">↵</span>';
+ }
+
// Add title
textLink += '<span class="title">' + item.title + '</span>';
--
GitLab