Skip to content

Instantly share code, notes, and snippets.

@xshyamx

xshyamx/Readme.md

Created April 9, 2013 08:40
Show Gist options
  • Save xshyamx/5344066 to your computer and use it in GitHub Desktop.
Save xshyamx/5344066 to your computer and use it in GitHub Desktop.
Download ZIP
Recipe 2: User Data/Preferences
Raw
Readme.md

Recipe 2: User Data/Preferences

Instead of the user scrolling through the entire list the most recently used items are promoted to the top, so the user can simply choose from his/her MRU list. We can attach a listener to the submit event of the form containing the combo box that requires the MRU functionality and store the values on each submit. When the form/page is reloaded the data stored in the HTML5 storage can be read back to construct an MRU list of items that can be appended to the top of the combo box.

Raw
combo.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>combo</title>
<meta name="Content-Type" content="text/html; charset=UTF-8" />
<script src="countries.js"></script>
<script src="combo.js"></script>
</head>
<body>
<fieldset>
<legend>Form 1</legend>
<form>
<label for="form1-country">Country</label>
<select id="form1-country" data-key="country">
</select>
<input type="submit" value="Submit">
</form>
</fieldset>
</body>
</html>
Raw
combo.js
window.onload = init;
storage = (function() {
'use strict';
var storage = {
get: get,
put: put
};
function get(k) {
var x = localStorage.getItem(k);
return x ? JSON.parse(x) : null;
}
function put(k,v) {
if ( typeof v == 'string' ) {
localStorage.setItem(k, v);
} else {
localStorage.setItem(k, JSON.stringify(v));
}
}
return storage;
})();
function clear(v) {
while ( v.firstChild ) {
v.removeChild(v.firstChild);
}
return v;
}
var country = {};
function init() {
country = storage.get('country') || {};
var selects = toArray(byName('select'));
selects.map(function(v) {
if ( v.dataset['key'] == 'country' ) {
clear(v);
metadata.countries.map(function(x) {
var d = dom(tag('option'), text(x[1]));
d.value = x[0];
v.appendChild(d);
return d;
});
var country = storage.get('country');
var ca = [];
for ( k in country ) {
ca.push([k, country[k]]);
}
ca.sort(function(a,b) {
return b[1] - a[1];
});
if ( ca.length > 0 ) {
var re = new RegExp(ca.map(function(v) {
return v[0];
}).join('|'));
var cmap = {};
metadata.countries.filter(function(x) {
return re.test(x[0]);
}).map(function(v) {
cmap[v[0]] = v[1];
});
var op = tag('optgroup');
op.label = 'Last selected';
ca.map(function(v) {
var opt = tag('option');
opt.value = v[0];
dom(op, opt, text(cmap[opt.value]));
});
v.insertBefore(op, v.firstChild);
}
}
});
var forms = toArray(byName('form'));
forms.map(function(v) {
v.addEventListener('submit', function(e) {
toArray(byName('select', this))
.map(function(x) {
if ( x.dataset['key'] == 'country' ) {
if ( ! country[x.value] ) {
country[x.value] = 1;
} else {
country[x.value]++;
}
}
});
var table = byId('table-body');
clear(table);
for ( k in country ) {
tr = tag('tr');
dom(tr, tag('td'), text(k));
dom(tr, tag('td'), text(country[k]));
dom(table, tr);
}
storage.put('country', country);
e.preventDefault();
return false;
}, false);
});
}
function byId(v) {
return document.getElementById(v);
}
function byName(t,p) {
return (p || document).getElementsByTagName(t);
}
function toArray(x) {
return [].map.call(x, function(v) { return v});
}
function tag(v) {
return document.createElement(v);
}
function text(v) {
return document.createTextNode(v);
}
function dom() {
var root = null, c = null;
for ( i = 0, l = arguments.length; i < l; i++ ) {
if ( c == null ) {
c = arguments[i];
root = c;
continue;
} else {
c.appendChild(arguments[i]);
c = arguments[i];
}
}
return root;
}
Raw
countries.js
var metadata = {};
metadata.countries = [
["", "Select"],
[ "AF", "Afghanistan" ],
[ "AX", "Åland Islands" ],
[ "AL", "Albania" ],
[ "DZ", "Algeria" ],
[ "AS", "American Samoa" ],
[ "AD", "Andorra" ],
[ "AO", "Angola" ],
[ "AI", "Anguilla" ],
[ "AQ", "Antarctica" ],
[ "AG", "Antigua and Barbuda" ],
[ "AR", "Argentina" ],
[ "AM", "Armenia" ],
[ "AW", "Aruba" ],
[ "AU", "Australia" ],
[ "AT", "Austria" ],
[ "AZ", "Azerbaijan" ],
[ "BS", "Bahamas" ],
[ "BH", "Bahrain" ],
[ "BD", "Bangladesh" ],
[ "BB", "Barbados" ],
[ "BY", "Belarus" ],
[ "BE", "Belgium" ],
[ "BZ", "Belize" ],
[ "BJ", "Benin" ],
[ "BM", "Bermuda" ],
[ "BT", "Bhutan" ],
[ "BO", "Bolivia, Plurinational State of" ],
[ "BQ", "Bonaire, Sint Eustatius and Saba" ],
[ "BA", "Bosnia and Herzegovina" ],
[ "BW", "Botswana" ],
[ "BV", "Bouvet Island" ],
[ "BR", "Brazil" ],
[ "IO", "British Indian Ocean Territory" ],
[ "BN", "Brunei Darussalam" ],
[ "BG", "Bulgaria" ],
[ "BF", "Burkina Faso" ],
[ "BI", "Burundi" ],
[ "KH", "Cambodia" ],
[ "CM", "Cameroon" ],
[ "CA", "Canada" ],
[ "CV", "Cape Verde" ],
[ "KY", "Cayman Islands" ],
[ "CF", "Central African Republic" ],
[ "TD", "Chad" ],
[ "CL", "Chile" ],
[ "CN", "China" ],
[ "CX", "Christmas Island" ],
[ "CC", "Cocos (Keeling) Islands" ],
[ "CO", "Colombia" ],
[ "KM", "Comoros" ],
[ "CG", "Congo" ],
[ "CD", "Congo, the Democratic Republic of the" ],
[ "CK", "Cook Islands" ],
[ "CR", "Costa Rica" ],
[ "CI", "Côte d'Ivoire" ],
[ "HR", "Croatia" ],
[ "CU", "Cuba" ],
[ "CW", "Curaçao" ],
[ "CY", "Cyprus" ],
[ "CZ", "Czech Republic" ],
[ "DK", "Denmark" ],
[ "DJ", "Djibouti" ],
[ "DM", "Dominica" ],
[ "DO", "Dominican Republic" ],
[ "EC", "Ecuador" ],
[ "EG", "Egypt" ],
[ "SV", "El Salvador" ],
[ "GQ", "Equatorial Guinea" ],
[ "ER", "Eritrea" ],
[ "EE", "Estonia" ],
[ "ET", "Ethiopia" ],
[ "FK", "Falkland Islands (Malvinas)" ],
[ "FO", "Faroe Islands" ],
[ "FJ", "Fiji" ],
[ "FI", "Finland" ],
[ "FR", "France" ],
[ "GF", "French Guiana" ],
[ "PF", "French Polynesia" ],
[ "TF", "French Southern Territories" ],
[ "GA", "Gabon" ],
[ "GM", "Gambia" ],
[ "GE", "Georgia" ],
[ "DE", "Germany" ],
[ "GH", "Ghana" ],
[ "GI", "Gibraltar" ],
[ "GR", "Greece" ],
[ "GL", "Greenland" ],
[ "GD", "Grenada" ],
[ "GP", "Guadeloupe" ],
[ "GU", "Guam" ],
[ "GT", "Guatemala" ],
[ "GG", "Guernsey" ],
[ "GN", "Guinea" ],
[ "GW", "Guinea-Bissau" ],
[ "GY", "Guyana" ],
[ "HT", "Haiti" ],
[ "HM", "Heard Island and McDonald Islands" ],
[ "VA", "Holy See (Vatican City State)" ],
[ "HN", "Honduras" ],
[ "HK", "Hong Kong" ],
[ "HU", "Hungary" ],
[ "IS", "Iceland" ],
[ "IN", "India" ],
[ "ID", "Indonesia" ],
[ "IR", "Iran, Islamic Republic of" ],
[ "IQ", "Iraq" ],
[ "IE", "Ireland" ],
[ "IM", "Isle of Man" ],
[ "IL", "Israel" ],
[ "IT", "Italy" ],
[ "JM", "Jamaica" ],
[ "JP", "Japan" ],
[ "JE", "Jersey" ],
[ "JO", "Jordan" ],
[ "KZ", "Kazakhstan" ],
[ "KE", "Kenya" ],
[ "KI", "Kiribati" ],
[ "KP", "Korea, Democratic People's Republic of" ],
[ "KR", "Korea, Republic of" ],
[ "KW", "Kuwait" ],
[ "KG", "Kyrgyzstan" ],
[ "LA", "Lao People's Democratic Republic" ],
[ "LV", "Latvia" ],
[ "LB", "Lebanon" ],
[ "LS", "Lesotho" ],
[ "LR", "Liberia" ],
[ "LY", "Libya" ],
[ "LI", "Liechtenstein" ],
[ "LT", "Lithuania" ],
[ "LU", "Luxembourg" ],
[ "MO", "Macao" ],
[ "MK", "Macedonia, The Former Yugoslav Republic of" ],
[ "MG", "Madagascar" ],
[ "MW", "Malawi" ],
[ "MY", "Malaysia" ],
[ "MV", "Maldives" ],
[ "ML", "Mali" ],
[ "MT", "Malta" ],
[ "MH", "Marshall Islands" ],
[ "MQ", "Martinique" ],
[ "MR", "Mauritania" ],
[ "MU", "Mauritius" ],
[ "YT", "Mayotte" ],
[ "MX", "Mexico" ],
[ "FM", "Micronesia, Federated States of" ],
[ "MD", "Moldova, Republic of" ],
[ "MC", "Monaco" ],
[ "MN", "Mongolia" ],
[ "ME", "Montenegro" ],
[ "MS", "Montserrat" ],
[ "MA", "Morocco" ],
[ "MZ", "Mozambique" ],
[ "MM", "Myanmar" ],
[ "NA", "Namibia" ],
[ "NR", "Nauru" ],
[ "NP", "Nepal" ],
[ "NL", "Netherlands" ],
[ "NC", "New Caledonia" ],
[ "NZ", "New Zealand" ],
[ "NI", "Nicaragua" ],
[ "NE", "Niger" ],
[ "NG", "Nigeria" ],
[ "NU", "Niue" ],
[ "NF", "Norfolk Island" ],
[ "MP", "Northern Mariana Islands" ],
[ "NO", "Norway" ],
[ "OM", "Oman" ],
[ "PK", "Pakistan" ],
[ "PW", "Palau" ],
[ "PS", "Palestinian Territory, Occupied" ],
[ "PA", "Panama" ],
[ "PG", "Papua New Guinea" ],
[ "PY", "Paraguay" ],
[ "PE", "Peru" ],
[ "PH", "Philippines" ],
[ "PN", "Pitcairn" ],
[ "PL", "Poland" ],
[ "PT", "Portugal" ],
[ "PR", "Puerto Rico" ],
[ "QA", "Qatar" ],
[ "RE", "Réunion" ],
[ "RO", "Romania" ],
[ "RU", "Russian Federation" ],
[ "RW", "Rwanda" ],
[ "BL", "Saint Barthélemy" ],
[ "SH", "Saint Helena, Ascension and Tristan da Cunha" ],
[ "KN", "Saint Kitts and Nevis" ],
[ "LC", "Saint Lucia" ],
[ "MF", "Saint Martin (French part)" ],
[ "PM", "Saint Pierre and Miquelon" ],
[ "VC", "Saint Vincent and the Grenadines" ],
[ "WS", "Samoa" ],
[ "SM", "San Marino" ],
[ "ST", "Sao Tome and Principe" ],
[ "SA", "Saudi Arabia" ],
[ "SN", "Senegal" ],
[ "RS", "Serbia" ],
[ "SC", "Seychelles" ],
[ "SL", "Sierra Leone" ],
[ "SG", "Singapore" ],
[ "SX", "Sint Maarten (Dutch part)" ],
[ "SK", "Slovakia" ],
[ "SI", "Slovenia" ],
[ "SB", "Solomon Islands" ],
[ "SO", "Somalia" ],
[ "ZA", "South Africa" ],
[ "GS", "South Georgia and the South Sandwich Islands" ],
[ "SS", "South Sudan" ],
[ "ES", "Spain" ],
[ "LK", "Sri Lanka" ],
[ "SD", "Sudan" ],
[ "SR", "Suriname" ],
[ "SJ", "Svalbard and Jan Mayen" ],
[ "SZ", "Swaziland" ],
[ "SE", "Sweden" ],
[ "CH", "Switzerland" ],
[ "SY", "Syrian Arab Republic" ],
[ "TW", "Taiwan, Province of China" ],
[ "TJ", "Tajikistan" ],
[ "TZ", "Tanzania, United Republic of" ],
[ "TH", "Thailand" ],
[ "TL", "Timor-Leste" ],
[ "TG", "Togo" ],
[ "TK", "Tokelau" ],
[ "TO", "Tonga" ],
[ "TT", "Trinidad and Tobago" ],
[ "TN", "Tunisia" ],
[ "TR", "Turkey" ],
[ "TM", "Turkmenistan" ],
[ "TC", "Turks and Caicos Islands" ],
[ "TV", "Tuvalu" ],
[ "UG", "Uganda" ],
[ "UA", "Ukraine" ],
[ "AE", "United Arab Emirates" ],
[ "GB", "United Kingdom" ],
[ "US", "United States" ],
[ "UM", "United States Minor Outlying Islands" ],
[ "UY", "Uruguay" ],
[ "UZ", "Uzbekistan" ],
[ "VU", "Vanuatu" ],
[ "VE", "Venezuela, Bolivarian Republic of" ],
[ "VN", "Viet Nam" ],
[ "VG", "Virgin Islands, British" ],
[ "VI", "Virgin Islands, U.S." ],
[ "WF", "Wallis and Futuna" ],
[ "EH", "Western Sahara" ],
[ "YE", "Yemen" ],
[ "ZM", "Zambia" ],
[ "ZW", "Zimbabwe" ]
];
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment