Chg: put all scripts of capture.html in capture.js

pull/914/head
AntoniaBK 2024-05-08 10:20:04 +02:00
parent 86474274f7
commit 66bb5e37be
2 changed files with 196 additions and 99 deletions

View File

@ -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);
}
});

View File

@ -22,12 +22,12 @@
{% block content %}
<div class="container">
<center>
<a href="{{ url_for('index') }}" title="Go back to index">
<img src="{{ url_for('static', filename='lookyloo.jpeg') }}"
alt="Lookyloo" width="25%">
</a>
</center>
{{ render_messages(container=True, dismissible=True) }}
<form role="form" action="{{ url_for('capture_web') }}" method=post enctype=multipart/form-data>
<div class="row mb-3">
@ -356,7 +356,7 @@
<hr>
<center>
<b>
{% 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 @@
</br>
</br>
<button type="submit" class="new-capture-button btn btn-primary" id="btn-looking">Start looking!</button>
</center>
</form>
</div>
{% endblock %}
@ -377,92 +377,6 @@
<script src='{{ url_for('static', filename='capture.js') }}'
{{get_sri('static', 'capture.js')}}
crossorigin="anonymous"></script>
<script>
$('#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;
});
</script>
<script>
$('#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;
}
})
</script>
<script>
$('#personal_ua_select').on('click', function(e) {
$('#personal_ua').prop("disabled", false);
$('#freetext_ua').prop("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);
});
$('#freetext_ua_select').on('click', function(e) {
$('#freetext_ua').prop("disabled", false);
$('#personal_ua').prop("disabled", true);
disablePredefinedUA();
});
const disablePredefinedUA = function() {
$('#os-type').prop("disabled", true);
$('#device-name-mobile').prop("disabled", true);
$('#os').prop("disabled", true);
$('select[name="browser"]').prop("disabled", true);
$('select[name="user_agent"]').prop("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);
}
});
</script>
{% endblock %}