| Index: trunk/mockups/lang-selector/index.html |
| — | — | @@ -0,0 +1,19 @@ |
| | 2 | +<!DOCTYPE html> |
| | 3 | +<html> |
| | 4 | + |
| | 5 | +<head> |
| | 6 | + <meta http-equiv="content-type" content="text/html; charset=utf-8"> |
| | 7 | + <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> |
| | 8 | + <title>Language selector test</title> |
| | 9 | + <script src="http://code.jquery.com/jquery-1.7.1.js"></script> |
| | 10 | + <script src="app.js"></script> |
| | 11 | + |
| | 12 | +<body> |
| | 13 | + <h1>Language select by typeahead</h1> |
| | 14 | + |
| | 15 | + <div> |
| | 16 | + <input type="text" id="input-lang"> |
| | 17 | + <ul id="suggestions"> |
| | 18 | + </ul> |
| | 19 | + </div> |
| | 20 | + |
| Property changes on: trunk/mockups/lang-selector/index.html |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 1 | 21 | + text/html |
| Index: trunk/mockups/lang-selector/app.js |
| — | — | @@ -0,0 +1,64 @@ |
| | 2 | +$(function() { |
| | 3 | + |
| | 4 | + var prefixSet = {}, |
| | 5 | + languageNames = {}; |
| | 6 | + |
| | 7 | + var baseURL = 'https://en.wikipedia.org', |
| | 8 | + src = baseURL + "/w/api.php?action=sitematrix&format=json"; |
| | 9 | + |
| | 10 | + function addPrefix(str, target) { |
| | 11 | + str = str.toLowerCase(); |
| | 12 | + prefixSet[str] = target; |
| | 13 | + } |
| | 14 | + |
| | 15 | + $.ajax({ |
| | 16 | + url: src, |
| | 17 | + dataType: 'jsonp' |
| | 18 | + }).error(function() { |
| | 19 | + alert('Failed to retrieve site/language list'); |
| | 20 | + }).success(function(data) { |
| | 21 | + $.each(data.sitematrix, function(i, item) { |
| | 22 | + if (typeof item == "object" && 'code' in item && 'name' in item && item.name) { |
| | 23 | + var name = item.code + ' - ' + item.name; |
| | 24 | + if (item.name !== item.localname) { |
| | 25 | + name += ' (' + item.localname + ')'; |
| | 26 | + } |
| | 27 | + languageNames[item.code] = name; |
| | 28 | + |
| | 29 | + addPrefix(item.code, item.code); |
| | 30 | + addPrefix(item.name, item.code); |
| | 31 | + if (item.localname && item.localname !== item.name) { |
| | 32 | + addPrefix(item.localname, item.code); |
| | 33 | + } |
| | 34 | + } |
| | 35 | + }); |
| | 36 | + |
| | 37 | + $('#input-lang').focus(); |
| | 38 | + }); |
| | 39 | + |
| | 40 | + $('#input-lang').bind('cut paste keydown change', function() { |
| | 41 | + setTimeout(function() { |
| | 42 | + ping($('#input-lang').val()); |
| | 43 | + }, 0); |
| | 44 | + }); |
| | 45 | + |
| | 46 | + function ping(str) { |
| | 47 | + // simple prefix matches |
| | 48 | + str = str.toLowerCase(); |
| | 49 | + $('#suggestions').empty(); |
| | 50 | + if (str.length == 0) { |
| | 51 | + // no-op |
| | 52 | + $('<li>').text('Start typing language name or code'); |
| | 53 | + } else { |
| | 54 | + var found = {}; |
| | 55 | + $.each(prefixSet, function(key, val) { |
| | 56 | + if (key.substr(0, str.length) === str && !(val in found)) { |
| | 57 | + found[val] = true; |
| | 58 | + $('<li>').text(languageNames[val]).appendTo('#suggestions'); |
| | 59 | + } |
| | 60 | + }); |
| | 61 | + } |
| | 62 | + } |
| | 63 | + |
| | 64 | +}); |
| | 65 | + |
| Property changes on: trunk/mockups/lang-selector/app.js |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 1 | 66 | + text/javascript |
| Added: svn:eol-style |
| 2 | 67 | + native |