public
Last active

This script will save and reinstate form values for Twitter Bootstrap's customization page.

  • Download Gist
save-bootstrap-customize.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109
var STORAGE_KEY = 'http://twitter.github.com/bootstrap/customize.html::settings';
function findLabel(name) {
$.each($('label'), function (index, label) {
if(getName(label) === name) {
return name;
}
});
}
function isInput(element) {
return $(element).prop('nodeName') === 'INPUT';
}
function isInputText(element) {
return $(element).attr('type') === 'text';
}
function isInputCheckbox(element) {
return $(element).attr('type') === 'checkbox';
}
function isLabel(element) {
return $(element).prop('nodeName') === 'LABEL';
}
function getInput(label) {
label = $(label);
if(label.find('input').length === 1) {
return $(label.find('input')[0]);
}
if(isInput(label.next())) {
return label.next();
}
return null;
}
function getLabel(input) {
input = $(input);
if(isLabel(input.parent())) {
return input.parent();
}
if(isLabel(input.prev())) {
return input.prev();
}
return null;
}
function getLabelByName(name) {
var result;
$.each($('label'), function (index, label) {
if(getName(label) === name) {
result = label;
return false;
}
return true;
});
return result;
}
function getName(label) {
var input = getInput(label);
if (isInputCheckbox(input))
{
return 'checkbox::' + $(input).val();
}
return 'text::' + $.trim($(label).text());
}
function getValue(input) {
input = $(input);
if(isInputText(input)) {
return input.val();
}
if(isInputCheckbox(input)) {
return input.is(':checked');
}
return null;
}
function setValue(input, value) {
input = $(input);
if(isInputText(input)) {
input.val(value);
} else if(isInputCheckbox(input)) {
if(value) {
input.attr('checked', 'checked');
} else {
input.removeAttr('checked');
}
} else {
throw new Error('Cannot set value.');
}
}
function play(record) {
for(var name in record) {
try
{
setValue(getInput(getLabelByName(name)), record[name]);
}
catch (e)
{
console.error(e);
}
}
}
function record() {
var record = {
};
$('input').each(function (index, input) {
record[getName(getLabel(input))] = getValue(input);
});
return record;
}
function retrieve() {
play(JSON.parse(window.localStorage[STORAGE_KEY]));
}
function save() {
window.localStorage[STORAGE_KEY] = JSON.stringify(record());
}
  1. Go to http://twitter.github.com/bootstrap/customize.html
  2. Run this script in the JavaScript console.
  3. Fill out the customization form.
  4. You can record your settings into an object by running: var settings = record()
  5. You can grab those as JSON by running: JSON.stringify(settings)
  6. You can reinstate those settings later by running: play(settings)
  7. You can save your settings to local storage by running: save()
  8. You can retrieve your settings from local storage by running: retrieve()

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.