website: add badge suggestions

Part of #252

try.html

@@ -41,6 +41,7 @@
   border-top: 15px solid #eaeaff;
   border-bottom: 15px solid #eaeaff;
 }
+#suggestButton { display: none; }
 table.badge > tbody > tr > td > img { cursor: pointer; }
 </style>
 
@@ -61,11 +62,15 @@
 
 When that is implemented, change the placeholder to 'search / project URL'
 -->
-<form action='javascript:void 0'>
-  <input name='projectSearch' id='projectSearch' autofocus placeholder='search'/>
+<form id='searchForm' action='javascript:void 0' autocomplete=off>
+  <input name='projectSearch' id='projectSearch' autofill=off autofocus placeholder='search / project URL'/>
+  <br>
+  <button id='suggestButton'> Suggest badges </button>
 </form>
 <a href='https://gratipay.com/Shields/' style='text-decoration:none;color:rgba(0,0,0,0.1)'>donate</a>
 
+<section id='suggestedBadges'></section>
+
 <h3> Build </h3>
 <table class='badge'><tbody>
   <tr><th> Travis: </th>
@@ -695,18 +700,63 @@ <h2> Contributors </h2>
 }
 function searchBadge(event) {
   var query = event.target.value;
-  var regex = new RegExp(query, 'i');
+  var regex = new RegExp(query, 'i');  // Case-insensitive
   for (var i = 0; i < searchBadgeDb.index.length; i++) {
     if (regex.test(searchBadgeDb.index[i])) {
       searchBadgeDb.tr[i].removeAttribute('style');
     } else {
       searchBadgeDb.tr[i].style.display = 'none';
     }
   }
+  // If it has the format of a url, show the suggest button.
+  if (isUrl(query)) { showSuggestButton();
+  } else { hideSuggestButton();
+  }
 }
 
 document.addEventListener('DOMContentLoaded', searchBadgeDbInit);
 
+// Suggested badges search
+function isUrl(url) {
+  var http = url.slice(0, 5) === 'http:';
+  var https = url.slice(0, 6) === 'https:';
+  return http || https;
+}
+function showSuggestButton() { suggestButton.style.display = 'inline'; }
+function hideSuggestButton() { suggestButton.style.display = 'none'; }
+function showSuggestedBadges(badges) {
+  var html = '<table class="badge"><tbody>';
+  for (var i = 0; i < badges.length; i++) {
+    var link = badges[i].link;
+    var badge = badges[i].badge;
+    var name = badges[i].name;
+    html += '<tr><th>' + name + '</th>' +
+      '<td><img src="' + badge + '"></td>' +
+      '<td><code>' + badge + '</code></td>' +
+      '</tr>';
+  }
+  html += '</tbody></table>';
+  suggestedBadges.innerHTML = html;
+  suggestedBadges.style.display = 'block';
+}
+function suggestBadges(event) {
+  var url = event.target.projectSearch.value;
+  if (isUrl(url)) {
+    ajax('suggest/v1', {url:url}, function(err, res) {
+      if (err != null) { return; }
+      showSuggestedBadges(res.badges);
+      suggestButton.disabled = false;
+    });
+    suggestButton.disabled = true;
+  }
+}
+function suggestBadgeInit() {
+  searchForm.addEventListener('submit', suggestBadges);
+}
+
+document.addEventListener('DOMContentLoaded', suggestBadgeInit);
+
+
 // Markup copier dialog
 function markupDialogInit() {
   var trs = document.querySelectorAll('table.badge tr');
@@ -794,4 +844,38 @@ <h2> Contributors </h2>
 function escapeField(s) {
   return encodeURIComponent(s.replace(/-/g, '--').replace(/_/g, '__'));
 }
+
+
+// Convert object literal to xhr-sendable.
+function toXhrSend(data) {
+  var str = '', start = true;
+  var jsondata = '';
+  for (var key in data) {
+    if (typeof (jsondata = JSON.stringify(data[key])) === 'string') {
+      str += (start? '': '&');
+      if (typeof data[key] === 'string') {
+        str += encodeURIComponent(key) + '=' + encodeURIComponent(data[key]);
+      } else {
+        str += encodeURIComponent(key) + '=' + encodeURIComponent(jsondata);
+      }
+      start = false;
+    }
+  }
+  return str;
+}
+function ajax(verb, adverbs, cb) {
+  var xhr = new XMLHttpRequest();
+  xhr.open("GET", "/$" + verb + '?' + toXhrSend(adverbs), true);
+  xhr.onload = function (e) {
+    if (xhr.readyState === 4) {
+      if (xhr.status === 200) {
+        try {
+          cb(null, JSON.parse(xhr.responseText));
+        } catch(e) {cb(e);}
+      }
+    }
+  };
+  xhr.onerror = function (e) { cb(Error(xhr.statusText)); };
+  xhr.send(null);
+}
 </script>