Chg: capture.js vanilla js

pull/914/head
AntoniaBK 2024-05-13 09:29:48 +02:00
parent 66bb5e37be
commit 984c77b0f3
1 changed files with 99 additions and 134 deletions

View File

@ -1,25 +1,52 @@
$("#os").change(function () {
var os_name = $(this).find(":selected").val().replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g, "_"); // scripts for chosing what should be captured
var first_browser_name = $("[id='" + os_name + "']").find('select option:first-child').val().replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g, "_");
// Hide and disable everything document.getElementById('nav-url-tab').addEventListener('click', function(e) {
$("#os > option").removeAttr('selected'); // switch to tab for capture of URL(s)
$(".style-sub-1").hide();
$(".style-sub-1 > div > select").attr('disabled', true); // default: single capture field
$(".style-sub-1 > div > select").removeAttr('selected'); document.getElementById("singleCaptureField").required = true;
$(".style-sub-2").hide(); document.getElementById("singleCaptureField").classList.remove("d-none");
$(".style-sub-2 > div > select").attr('disabled', true); // hide multiple captures field
$(".style-sub-2 > div > select").removeAttr('selected'); document.getElementById('multipleCaptures').checked = false;
// Enable everything that makes sense document.getElementById("multipleCapturesField").required = false;
$("[id='" + os_name + "']").show(); document.getElementById("multipleCapturesField").classList.add("d-none");
$("[id='" + os_name + "'] > div > select").removeAttr('disabled');
$("[id='" + os_name + "'] > div > select option:first").prop('selected', true); document.getElementById("document").required = false;
$("[id='" + os_name + '_' + first_browser_name + "']").show();
$("[id='" + os_name + '_' + first_browser_name + "'] > div > select").removeAttr('disabled');
$("[id='" + os_name + '_' + first_browser_name + "'] > div > select option:first").prop('selected', true);
}); });
document.getElementById('nav-doc-tab').addEventListener('click', function(e) {
// switch to tab for capture of document
document.getElementById("document").required = true;
document.getElementById("multipleCapturesField").required = false;
document.getElementById("singleCaptureField").required = false;
});
document.getElementById('multipleCaptures').addEventListener('click', function(e) {
// switch input-fields between multiple and single capture
if (document.getElementById('multipleCaptures').checked === true) {
// enable multiple captures
document.getElementById('singleCaptureField').value = '';
document.getElementById("singleCaptureField").classList.add("d-none");
document.getElementById("singleCaptureField").required = false;
document.getElementById("multipleCapturesField").classList.remove("d-none");
document.getElementById("multipleCapturesField").required = true;
} else {
// disable multiple captures
document.getElementById('multipleCapturesField').value = '';
document.getElementById("multipleCapturesField").classList.add("d-none");
document.getElementById("multipleCapturesField").required = false;
document.getElementById("singleCaptureField").classList.remove("d-none");
document.getElementById("singleCaptureField").required = true;
}
});
// scripts for browser configuration of the capture
document.getElementById("os").addEventListener("change", function() { document.getElementById("os").addEventListener("change", function() {
let os_name = document.getElementById("os").options[osSelect.selectedIndex].value.replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g,"_"); let osSelect = document.getElementById("os");
let os_name = osSelect.options[osSelect.selectedIndex].value.replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g,"_");
let first_browser_name = document.querySelector("[id='" + os_name + "'] select option:first-child").value.replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g,"_"); let first_browser_name = document.querySelector("[id='" + os_name + "'] select option:first-child").value.replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g,"_");
// Hide and disable everything // Hide and disable everything
@ -58,26 +85,12 @@ document.getElementById("os").addEventListener("change", function() {
}); });
}); });
$('select[name="browser"]').change(function () { document.querySelector('select[name="browser"]').addEventListener('click', function(e) {
var browser_name = $(this).find(":selected").val().replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g, "_"); let browser_name = document.querySelector('select[name="browser"]').options[osSelect.selectedIndex].value.replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g,"_");
var os_name = $(this).parent().parent().attr("id").replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g, "_"); let os_name = document.querySelector('select[name="browser"]').parentNode.parentNode.getAttribute("id").replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g, "_");
// Hide what makes sense // Hide what makes sense
$(".style-sub-1 > div > select").removeAttr('selected'); document.querySelectorAll(".style-sub-1 > div > select").forEach(function(select) {
$(".style-sub-2").hide();
$(".style-sub-2 > div > select").attr('disabled', true);
$(".style-sub-2 > div > select").removeAttr('selected');
$("[id='" + os_name + '_' + browser_name + "']").show();
$("[id='" + os_name + '_' + browser_name + "'] > div > select").removeAttr('disabled');
});
document.querySelector('select[name="browser"]').addEventListener('click', function(e) {
let browser_name = document.querySelector('select[name="browser"]').options[osSelect.selectedIndex].value.replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g,"_");
let os_name = document.querySelector('select[name="browser"]').parentNode.parentNode.getAttribute("id").replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g, "_");
// Hide what makes sense
// Why does it make sense???
document.querySelectorAll(".style-sub-1 > div > select").forEach(function(select) {
select.querySelectorAll('option').forEach(function(option) { select.querySelectorAll('option').forEach(function(option) {
option.removeAttribute('selected'); option.removeAttribute('selected');
}); });
@ -92,125 +105,77 @@ $('select[name="browser"]').change(function () {
}); });
}); });
document.querySelector("[id='" + os_name + '_' + browser_name + "']").style.display = 'block'; document.querySelector("[id='" + os_name + '_' + browser_name + "']").style.display = 'block';
document.querySelectorAll("[id='" + os_name + '_' + browser_name + "'] > div > select").forEach(function(select) { document.querySelectorAll("[id='" + os_name + '_' + browser_name + "'] > div > select").forEach(function(select) {
select.disabled = false; select.disabled = false;
select.querySelector('option:first-child').selected = true; select.querySelector('option:first-child').selected = true;
}); });
});
//switch between tabs for entering url or upload a web enabled document
// multipleCaptures != multipleCaptureField
$('#nav-url-tab').on('click', function(e) {
document.getElementById("singleCaptureField").required = true;
document.getElementById("document").required = false;
$("#singleCaptureField").removeClass("d-none");
document.getElementById('multipleCaptures').checked = false;
$("#multipleCapturesField").addClass("d-none");
}); });
$('#nav-doc-tab').on('click', function(e) {
document.getElementById("document").required = true;
document.getElementById("multipleCapturesField").required = false;
document.getElementById("singleCaptureField").required = false;
});
//switch input-fields between multiple and single Capture
$('#multipleCaptures').on('click', function(e) {
if (document.getElementById('multipleCaptures').checked == true) {
document.getElementById('singleCaptureField').value = '';
$("#singleCaptureField").addClass("d-none");
document.getElementById("singleCaptureField").required = false;
$("#multipleCapturesField").removeClass("d-none");
document.getElementById("multipleCapturesField").required = true;
}
else {
document.getElementById('multipleCapturesField').value = '';
$("#singleCaptureField").removeClass("d-none");
document.getElementById("singleCaptureField").required = true;
$("#multipleCapturesField").addClass("d-none");
document.getElementById("multipleCapturesField").required = false;
}
})
//disable select fields when personal useragent (ua) selected etc... document.getElementById('personal_ua_select').addEventListener('click', function(e) {
$('#personal_ua_select').on('click', function(e) { //disable select fields when personal useragent (ua) selected etc...
$('#personal_ua').prop("disabled", false);
$('#freetext_ua').prop("disabled", true);
disablePredefinedUA();
});
// Enable free user-agent input
document.getElementById('personal_ua_select').addEventListener('click', function(e){
document.getElementById('personal_ua').disabled = false; document.getElementById('personal_ua').disabled = false;
document.getElementById('freetext_ua').disabled = true; document.getElementById('freetext_ua').disabled = true;
disablePredefinedUA(); disablePredefinedUA();
})
$('#predefined_ua_select').on('click', function(e) {
$('#os-type').val('desktop').trigger('change');
$('#freetext_ua').prop("disabled", true);
$('#personal_ua').prop("disabled", true);
}); });
// Enable predefinded user-agent
document.getElementById('predefined_ua_select').addEventListener('click', function (e){ document.getElementById('predefined_ua_select').addEventListener('click', function(e) {
document.getElementById('os-type').value = 'desktop';
document.getElementById('os-type').dispatchEvent(new Event('change'));
document.getElementById('freetext_ua').disabled = true;
document.getElementById('personal_ua').disabled = true;
// Enable predefinded user-agent
let os_type = document.getElementById('os-type'); let os_type = document.getElementById('os-type');
os_type.value = 'desktop'; os_type.value = 'desktop';
os_type.dispatchEvent(new Event('change')) os_type.dispatchEvent(new Event('change'))
document.getElementById('freetext_ua').disabled = true;
document.getElementById('personal_ua').disabled = true;
})
$('#freetext_ua_select').on('click', function(e) {
$('#freetext_ua').prop("disabled", false);
$('#personal_ua').prop("disabled", true);
disablePredefinedUA();
}); });
// Enable freetext user-agent document.getElementById('freetext_ua_select').addEventListener('click', function (e){
document.getElementById('freetext_ua_select').addEventListener('click', function (e){ // Enable freetext user-agent
document.getElementById('freetext_ua').disabled = false; document.getElementById('freetext_ua').disabled = false;
document.getElementById('personal_ua').disabled = true; document.getElementById('personal_ua').disabled = true;
disablePredefinedUA() disablePredefinedUA()
}) })
const disablePredefinedUA = function() { const disablePredefinedUA = function() {
$('#device-name-mobile').prop("disabled", true); document.getElementById('os-type').disabled = true;
$('#os').prop("disabled", true); document.getElementById('device-name-mobile').disabled = true;
$('select[name="browser"]').prop("disabled", true); document.getElementById('os').disabled = true;
$('select[name="user_agent"]').prop("disabled", true); document.querySelectorAll('select[name="browser"]').forEach(function(element){
document.getElementById('os-type').disabled = true; element.disabled = true;
document.getElementById('device-name-mobile').disabled = true; });
document.getElementById('os').disabled = true; document.querySelectorAll('select[name="user_agent"]').forEach(function(element){
document.querySelector('select[name="browser"]').disabled = true; element.disabled = true;
document.querySelector('select[name="user_agent"]').disabled = true; });
}; };
document.getElementById('os-type').addEventListener('change', function() {
document.getElementById('os-type').disabled = false;
if ( this.value === "mobile") {
document.getElementById("mobiles-list").style.display = 'block';
document.getElementById('device-name-mobile').disabled = false;
$('#os-type').on('change', function() { document.getElementById("desktops-list").style.display = 'none';
$('#os-type').prop("disabled", false); document.getElementById('os').disabled = true;
if ( this.value == "mobile") document.querySelectorAll('select[name="browser"]').forEach(function(element){
{ element.disabled = true;
$("#mobiles-list").show(); });
$('#device-name-mobile').prop("disabled", false); document.querySelectorAll('select[name="user_agent"]').forEach(function(element){
element.disabled = true;
$("#desktops-list").hide(); });
$('#os').prop("disabled", true); } else { // os-type is desktop
$('select[name="browser"]').prop("disabled", true); document.getElementById("desktops-list").style.display = 'block';
$('select[name="user_agent"]').prop("disabled", true); document.getElementById('os').disabled = false;
} document.querySelectorAll('select[name="browser"]:not([hidden])').forEach(function(element){
else element.disabled = false;
{ });
$("#desktops-list").show(); document.querySelectorAll('select[name="user_agent"]:not([hidden])').forEach(function(element){
$('#os').prop("disabled", false); element.disabled = false;
$('select[name="browser"]:visible').prop("disabled", false); });
$('select[name="user_agent"]:visible').prop("disabled", false); document.getElementById("mobiles-list").style.display = 'none';
document.getElementById('device-name-mobile').disabled = true;
$("#mobiles-list").hide(); }
$('#device-name-mobile').prop("disabled", true);
}
}); });