Skip to content

Instantly share code, notes, and snippets.

@adrian-green
Last active November 19, 2020 10:17
Show Gist options
  • Save adrian-green/b7f6c01c9208572db576747f4566b31f to your computer and use it in GitHub Desktop.
Save adrian-green/b7f6c01c9208572db576747f4566b31f to your computer and use it in GitHub Desktop.
HTML
<form id="qrgenerate">
...
Additional Commands: <input type="text" id="addcmd" value="">
</form>
<div id="qrcode"></div>
GoPro QR Command: <b id="txt"></b>
<p>
<button onclick="myReloadFunction()">Reset page</button>
</p>
<p>Presets:</p>
<p>
<select id="presets" />
<button id="preset_add">Add</button>
<button id="preset_update">Update</button>
<button id="preset_remove">Remove</button>
</p>
The entire set of inputs is wrapped in a form
<form id="qrgenerate">
Javascript is added that allows the user to load, save, update and remove 'presets'. It uses local storage for the preset data.
var qrg = document.getElementById('qrgenerate');
$.fn.values = function (data) {
var inps = $(this).find(":input").get();
if (typeof data != "object") {
data = {};
$.each(inps, function () {
if(this.name === 'nav') {
return;
}
if (this.name && (this.checked
|| /select|textarea/i.test(this.nodeName)
|| /text|hidden|password/i.test(this.type))) {
data[this.name] = $(this).val();
} else if (!this.name && this.type === "checkbox") {
data[this.id] = this.checked;
} else if (this.id) {
data[this.id] = $(this).val();
}
});
return data;
} else {
$.each(inps, function () {
if(this.name === 'nav') {
return;
}
if (this.name && data[this.name]) {
if (this.type === "checkbox" || this.type === "radio") {
$(this).prop("checked", (data[this.name] === $(this).val()));
} else {
$(this).val(data[this.name]);
}
} else if (!this.name && this.type === "checkbox") {
$(this).prop("checked", data[this.id]);
} else if (this.id) {
$(this).val(data[this.id]);
}
});
return $(this);
}
};
var prefix = 'preset-';
var presets = [];
var presetSelect = $('#presets');
var presetAdd = $('#preset_add');
var presetUpdate = $('#preset_update');
var presetRemove = $('#preset_remove');
/**
* Rebuilds preset dropdown from scratch, optionally selecting one
* @param selected {string}
* @param load {boolean}
* @returns {*[]}
*/
var presentPresets = function (selected, load) {
presets = [];
var npresets = localStorage.length;
presetSelect.empty();
for (var p = 0; p < npresets; p++) {
var key = localStorage.key(p);
if (key.startsWith(prefix)) {
presets.push(key.replace(prefix, ''));
}
}
presets.sort();
presetSelect.append($('<option>', {
value: '',
text: 'Select Saved Preset'
}));
for (var n in presets) {
var name = presets[n];
presetSelect.append($('<option>', {
value: name,
text: name
}));
}
if (selected) {
presetSelect.val(selected);
if(load) {
presetSelect.change();
}
}
return presets;
};
presets = presentPresets("", false);
presetSelect.on('change', function (e) {
if ($(this).val()) {
$(qrg).values(JSON.parse(localStorage.getItem(prefix + $(this).val())));
}
});
presetAdd.on('click', function () {
var name = window.prompt('Enter Preset Name', '').trim();
if (name) {
if (-1 !== presets.indexOf(name)) {
window.alert(name + ' already exists, please choose another name');
$(this).click();
return;
}
localStorage.setItem(prefix + name, JSON.stringify($(qrg).values()));
presentPresets(name, false);
}
});
presetUpdate.on('click', function () {
var name = presetSelect.val();
if (name) {
localStorage.setItem(prefix + name, JSON.stringify($(qrg).values()));
}
});
presetRemove.on('click', function () {
var name = presetSelect.val();
if (!name) {
return;
}
if (window.confirm('Really Delete Preset?')) {
localStorage.removeItem(prefix + name);
presentPresets("", false);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment