Skip to content

Instantly share code, notes, and snippets.

@mtthwhggns
Last active August 29, 2015 14:18
Show Gist options
  • Save mtthwhggns/c33e5e38042f699fca29 to your computer and use it in GitHub Desktop.
Save mtthwhggns/c33e5e38042f699fca29 to your computer and use it in GitHub Desktop.
Bootstrap Length Field Replacement
// A hastily thrown-together tool which replaces a field, with the class 'length-field' with a field that allows the user to choose their own units (mm, cm, m, km, in, ft, yd, mi), while saving the result in mm.
// The input group relies on Bootstrap for the layout at present.
// I'd really like to return to this at some point and neaten things up a bit.
$('.length-field').each(function(){
var cur_unit = "mm";
var cur_multiplier = 1;
var original_units = {
"mm": 1,
"cm": 10,
"m": 1000,
"km": 1000000,
"dvdr": 0,
"in": 25.4,
"ft": 304.8,
"yd": 914.4,
"mi": 1609344
};
var field_id = $(this).attr("id");
var field_name = $(this).attr("name");
$(this).parent().append("<input type=\"hidden\" name=\""+field_name+"\" id=\"hidden-length-field-"+$(this).attr("id")+"\">");
var newfield = "<div class=\"input-group\"><input type=\"text\" class=\"form-control\" id=\"formatted-length\" /><div class=\"input-group-btn\"><button type=\"button\" class=\"btn btn-default dropdown-toggle\" data-toggle=\"dropdown\" aria-expanded=\"false\" id=\"cur-unit-value\">mm <span class=\"caret\"></span></button><ul class=\"dropdown-menu dropdown-menu-left\" role=\"menu\">";
if ($(this).data("units")) {
var allowed_units = $('.length-field').data("units").split(" ");
var units = {};
$.each(allowed_units, function (key, value) {
units[value] = original_units[value];
});
} else {
var units = original_units;
}
$.each(units, function (key, value) {
if (key === "dvdr") {
newfield += "<li class=\"divider\"></li>";
} else {
newfield += "<li><a href=\"#\" class=\"length-unit-option\" data-multiplier=\"" + value + "\">" + key + "</a></li>";
}
});
newfield += "</ul></div></div>";
$(this).parent().append(newfield);
$(this).remove();
$('#formatted-length').keyup(function () {
if ($(this).val() === "") {
formatted_val = 0;
} else {
formatted_val = parseFloat($(this).val());
}
mmvalue = formatted_val * cur_multiplier;
$("#hidden-length-field-"+field_id).val(Math.round(mmvalue));
$("#hidden-length-field-"+field_id).trigger("change");
});
$('.length-unit-option').click(function () {
event.preventDefault();
$('#cur-unit-value').html($(this).html() + "<span class=\"caret\"></span>");
cur_unit = $(this).html();
cur_multiplier = parseFloat($(this).data("multiplier"));
$('#formatted-length').trigger("keyup");
});
});
// In a similar ilk, today I'm working on the user experience of a "sound level" field, and thought that as we don't use decidels very often, it might be nice to add an example for the value typed.
var loudnessdata = [];
loudnessdata[0] = "a pin dropping";
loudnessdata[30] = "whispering in a library";
loudnessdata[60] = "a normal conversation";
loudnessdata[85] = "city traffic";
loudnessdata[98] = "a hand drill";
loudnessdata[102] = "a motorcycle";
loudnessdata[110] = "a power saw";
loudnessdata[115] = "a rock concert";
loudnessdata[140] = "a jet engine";
loudnessdata[165] = "a gunshot";
loudnessdata[194] = "the loudest sound possible";
$('.loudness-field').each(function(){
var field_id = $(this).attr("id");
newfield = "<div class=\"input-group\"><input type=\"number\" class=\""+$(this).attr("class")+"\" min=0 max=194 id=\""+$(this).attr("id")+"\" name=\""+$(this).attr("name")+"\" /><span class=\"input-group-addon\">dB</span></div><p class=\"help-block\" id=\""+field_id+"-help-block\"></p>";
$(this).parent().append(newfield);
$(this).remove();
$("body").on("change","#"+field_id, function(){
$(this).trigger("keyup");
});
$("body").on("keyup","#"+field_id, function(){
var new_sentence;
if(loudnessdata[$("#"+field_id).val()]){
new_sentence = "About as loud as "+loudnessdata[$("#"+field_id).val()];
}else{
var i = $("#"+field_id).val();
var ilower = i;
var ihigher = i;
var ilowersentence = undefined;
var ihighersentence = undefined;
do{
ilower--;
if(loudnessdata[ilower]){
ilowersentence = loudnessdata[ilower];
break;
}
}while(ilower > -1);
do{
ihigher++;
if(loudnessdata[ihigher]){
ihighersentence = loudnessdata[ihigher];
break;
}
}while(ihigher < 200);
new_sentence = "This is a sound somewhere between "+ilowersentence+" and "+ihighersentence;
}
$("#"+field_id+"-help-block").html(new_sentence);
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment