From 66bb5e37bea48641a3e02c1b01dab74365a77b99 Mon Sep 17 00:00:00 2001 From: AntoniaBK Date: Wed, 8 May 2024 10:20:04 +0200 Subject: [PATCH 1/2] Chg: put all scripts of capture.html in capture.js --- website/web/static/capture.js | 201 +++++++++++++++++++++++++++-- website/web/templates/capture.html | 94 +------------- 2 files changed, 196 insertions(+), 99 deletions(-) diff --git a/website/web/static/capture.js b/website/web/static/capture.js index 218ab5f1..e632b168 100644 --- a/website/web/static/capture.js +++ b/website/web/static/capture.js @@ -1,6 +1,6 @@ -$("#os").change(function(){ - var os_name = $(this).find(":selected").val().replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g,"_"); - var first_browser_name = $("[id='" + os_name + "']").find('select option:first-child').val().replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g,"_"); +$("#os").change(function () { + var os_name = $(this).find(":selected").val().replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g, "_"); + var first_browser_name = $("[id='" + os_name + "']").find('select option:first-child').val().replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g, "_"); // Hide and disable everything $("#os > option").removeAttr('selected'); $(".style-sub-1").hide(); @@ -9,18 +9,58 @@ $("#os").change(function(){ $(".style-sub-2").hide(); $(".style-sub-2 > div > select").attr('disabled', true); $(".style-sub-2 > div > select").removeAttr('selected'); - + // Enable everything that makes sense $("[id='" + os_name + "']").show(); $("[id='" + os_name + "'] > div > select").removeAttr('disabled'); - $("[id='" + os_name + "'] > div > select option:first").prop('selected',true); + $("[id='" + os_name + "'] > div > select option:first").prop('selected', true); $("[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); + $("[id='" + os_name + '_' + first_browser_name + "'] > div > select option:first").prop('selected', true); }); -$('select[name="browser"]').change(function(){ - var browser_name = $(this).find(":selected").val().replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g,"_"); - var os_name = $(this).parent().parent().attr("id").replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g,"_"); +document.getElementById("os").addEventListener("change", function() { + let os_name = document.getElementById("os").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,"_"); + + // Hide and disable everything + document.querySelectorAll("#os option").forEach(function(option) { + option.removeAttribute('selected'); + }); + document.querySelectorAll(".style-sub-1").forEach(function(element) { + element.style.display = 'none'; + }); + document.querySelectorAll(".style-sub-1 > div > select").forEach(function(select) { + select.disabled = true; + select.querySelectorAll('option').forEach(function(option) { + option.removeAttribute('selected'); + }); + }); + document.querySelectorAll(".style-sub-2").forEach(function(element) { + element.style.display = 'none'; + }); + document.querySelectorAll(".style-sub-2 > div > select").forEach(function(select) { + select.disabled = true; + select.querySelectorAll('option').forEach(function(option) { + option.removeAttribute('selected'); + }); + }); + + // Re-enable and show what makes sense + document.querySelector("[id='" + os_name + "']").style.display = 'block'; + document.querySelectorAll("[id='" + os_name + "'] > div > select").forEach(function(select) { + select.disabled = false; + select.querySelector('option:first-child').selected = true; + }); + document.querySelector("[id='" + os_name + '_' + first_browser_name + "']").style.display = 'block'; + document.querySelectorAll("[id='" + os_name + '_' + first_browser_name + "'] > div > select").forEach(function(select) { + select.disabled = false; + select.querySelector('option:first-child').selected = true; + }); +}); + +$('select[name="browser"]').change(function () { + var browser_name = $(this).find(":selected").val().replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g, "_"); + var os_name = $(this).parent().parent().attr("id").replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g, "_"); // Hide what makes sense $(".style-sub-1 > div > select").removeAttr('selected'); @@ -31,3 +71,146 @@ $('select[name="browser"]').change(function(){ $("[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) { + option.removeAttribute('selected'); + }); + }); + document.querySelectorAll(".style-sub-2").forEach(function(element) { + element.style.display = 'none'; + }); + document.querySelectorAll(".style-sub-2 > div > select").forEach(function(select) { + select.disabled = true; + select.querySelectorAll('option').forEach(function(option) { + option.removeAttribute('selected'); + }); + }); + document.querySelector("[id='" + os_name + '_' + browser_name + "']").style.display = 'block'; + document.querySelectorAll("[id='" + os_name + '_' + browser_name + "'] > div > select").forEach(function(select) { + select.disabled = false; + 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... + $('#personal_ua_select').on('click', function(e) { + $('#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('freetext_ua').disabled = true; + 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){ + let os_type = document.getElementById('os-type'); + os_type.value = 'desktop'; + 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').disabled = false; + document.getElementById('personal_ua').disabled = true; + disablePredefinedUA() + }) + + const disablePredefinedUA = function() { + $('#device-name-mobile').prop("disabled", true); + $('#os').prop("disabled", true); + $('select[name="browser"]').prop("disabled", true); + $('select[name="user_agent"]').prop("disabled", true); + document.getElementById('os-type').disabled = true; + document.getElementById('device-name-mobile').disabled = true; + document.getElementById('os').disabled = true; + document.querySelector('select[name="browser"]').disabled = true; + document.querySelector('select[name="user_agent"]').disabled = true; + +}; + + + $('#os-type').on('change', function() { + $('#os-type').prop("disabled", false); + if ( this.value == "mobile") +{ + $("#mobiles-list").show(); + $('#device-name-mobile').prop("disabled", false); + + $("#desktops-list").hide(); + $('#os').prop("disabled", true); + $('select[name="browser"]').prop("disabled", true); + $('select[name="user_agent"]').prop("disabled", true); +} + else +{ + $("#desktops-list").show(); + $('#os').prop("disabled", false); + $('select[name="browser"]:visible').prop("disabled", false); + $('select[name="user_agent"]:visible').prop("disabled", false); + + $("#mobiles-list").hide(); + $('#device-name-mobile').prop("disabled", true); +} +}); diff --git a/website/web/templates/capture.html b/website/web/templates/capture.html index a4e6db27..b435e254 100644 --- a/website/web/templates/capture.html +++ b/website/web/templates/capture.html @@ -22,12 +22,12 @@ {% block content %}
-
+ Lookyloo -
+ {{ render_messages(container=True, dismissible=True) }}
@@ -356,7 +356,7 @@
-
+ {% if default_public %} By default, the capture is public. If you do not want that, untick the box at the top of the form. @@ -367,7 +367,7 @@

-
+
{% endblock %} @@ -377,92 +377,6 @@ - - - {% endblock %} From 984c77b0f3f4809f16ee3390e002c910b72e055e Mon Sep 17 00:00:00 2001 From: AntoniaBK Date: Mon, 13 May 2024 09:29:48 +0200 Subject: [PATCH 2/2] Chg: capture.js vanilla js --- website/web/static/capture.js | 233 +++++++++++++++------------------- 1 file changed, 99 insertions(+), 134 deletions(-) diff --git a/website/web/static/capture.js b/website/web/static/capture.js index e632b168..c93b00ce 100644 --- a/website/web/static/capture.js +++ b/website/web/static/capture.js @@ -1,25 +1,52 @@ -$("#os").change(function () { - var os_name = $(this).find(":selected").val().replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g, "_"); - var first_browser_name = $("[id='" + os_name + "']").find('select option:first-child').val().replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g, "_"); - // Hide and disable everything - $("#os > option").removeAttr('selected'); - $(".style-sub-1").hide(); - $(".style-sub-1 > div > select").attr('disabled', true); - $(".style-sub-1 > div > select").removeAttr('selected'); - $(".style-sub-2").hide(); - $(".style-sub-2 > div > select").attr('disabled', true); - $(".style-sub-2 > div > select").removeAttr('selected'); - // Enable everything that makes sense - $("[id='" + os_name + "']").show(); - $("[id='" + os_name + "'] > div > select").removeAttr('disabled'); - $("[id='" + os_name + "'] > div > select option:first").prop('selected', true); - $("[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); + +// scripts for chosing what should be captured + +document.getElementById('nav-url-tab').addEventListener('click', function(e) { + // switch to tab for capture of URL(s) + + // default: single capture field + document.getElementById("singleCaptureField").required = true; + document.getElementById("singleCaptureField").classList.remove("d-none"); + // hide multiple captures field + document.getElementById('multipleCaptures').checked = false; + document.getElementById("multipleCapturesField").required = false; + document.getElementById("multipleCapturesField").classList.add("d-none"); + + document.getElementById("document").required = false; }); +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() { - 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,"_"); // Hide and disable everything @@ -58,26 +85,12 @@ document.getElementById("os").addEventListener("change", function() { }); }); -$('select[name="browser"]').change(function () { - var browser_name = $(this).find(":selected").val().replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g, "_"); - var os_name = $(this).parent().parent().attr("id").replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g, "_"); +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 - $(".style-sub-1 > div > select").removeAttr('selected'); - $(".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) { + // Hide what makes sense + document.querySelectorAll(".style-sub-1 > div > select").forEach(function(select) { select.querySelectorAll('option').forEach(function(option) { option.removeAttribute('selected'); }); @@ -92,125 +105,77 @@ $('select[name="browser"]').change(function () { }); }); 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.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... - $('#personal_ua_select').on('click', function(e) { - $('#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_select').addEventListener('click', function(e) { + //disable select fields when personal useragent (ua) selected etc... document.getElementById('personal_ua').disabled = false; document.getElementById('freetext_ua').disabled = true; 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'); os_type.value = 'desktop'; 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('personal_ua').disabled = true; disablePredefinedUA() - }) +}) - const disablePredefinedUA = function() { - $('#device-name-mobile').prop("disabled", true); - $('#os').prop("disabled", true); - $('select[name="browser"]').prop("disabled", true); - $('select[name="user_agent"]').prop("disabled", true); - document.getElementById('os-type').disabled = true; - document.getElementById('device-name-mobile').disabled = true; - document.getElementById('os').disabled = true; - document.querySelector('select[name="browser"]').disabled = true; - document.querySelector('select[name="user_agent"]').disabled = true; +const disablePredefinedUA = function() { + document.getElementById('os-type').disabled = true; + document.getElementById('device-name-mobile').disabled = true; + document.getElementById('os').disabled = true; + document.querySelectorAll('select[name="browser"]').forEach(function(element){ + element.disabled = true; + }); + document.querySelectorAll('select[name="user_agent"]').forEach(function(element){ + element.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() { - $('#os-type').prop("disabled", false); - if ( this.value == "mobile") -{ - $("#mobiles-list").show(); - $('#device-name-mobile').prop("disabled", false); - - $("#desktops-list").hide(); - $('#os').prop("disabled", true); - $('select[name="browser"]').prop("disabled", true); - $('select[name="user_agent"]').prop("disabled", true); -} - else -{ - $("#desktops-list").show(); - $('#os').prop("disabled", false); - $('select[name="browser"]:visible').prop("disabled", false); - $('select[name="user_agent"]:visible').prop("disabled", false); - - $("#mobiles-list").hide(); - $('#device-name-mobile').prop("disabled", true); -} + document.getElementById("desktops-list").style.display = 'none'; + document.getElementById('os').disabled = true; + document.querySelectorAll('select[name="browser"]').forEach(function(element){ + element.disabled = true; + }); + document.querySelectorAll('select[name="user_agent"]').forEach(function(element){ + element.disabled = true; + }); + } else { // os-type is desktop + document.getElementById("desktops-list").style.display = 'block'; + document.getElementById('os').disabled = false; + document.querySelectorAll('select[name="browser"]:not([hidden])').forEach(function(element){ + element.disabled = false; + }); + document.querySelectorAll('select[name="user_agent"]:not([hidden])').forEach(function(element){ + element.disabled = false; + }); + document.getElementById("mobiles-list").style.display = 'none'; + document.getElementById('device-name-mobile').disabled = true; + } });