💄 wizards: automatic scroll on field when navigating with TAB key

6 files changed, 55 insertions, 15 deletions

diff --git a/changelog/en/changelog_2022-06-15.md b/changelog/en/changelog_2022-06-15.md
index 4eeaed36e..946e3614c 100644
--- a/changelog/en/changelog_2022-06-15.md
+++ b/changelog/en/changelog_2022-06-15.md
@@ -1,3 +1,10 @@
+v4.0.54 - 2099-12-31
+--------------------
+
+### Features/improvements ###
+- wizards: automatic scroll on field when navigating with TAB key
+
+
 v4.0.53 - 2023-07-06
 --------------------
 
diff --git a/changelog/fr/changelog_2023-01-25.md b/changelog/fr/changelog_2023-01-25.md
index cb6f63bd9..e804e85d1 100644
--- a/changelog/fr/changelog_2023-01-25.md
+++ b/changelog/fr/changelog_2023-01-25.md
@@ -1,3 +1,9 @@
+v4.0.54 - 2099-12-31
+--------------------
+
+### Fonctionnalités/améliorations ###
+- `wizards` : défilement automatique sur le champ lorsque l'on navigue avec la touche TAB
+
 v4.0.53 - 2023-07-06
 --------------------
 
diff --git a/ishtar_common/static/js/ishtar.js b/ishtar_common/static/js/ishtar.js
index 97fdaf13a..8da971dbd 100644
--- a/ishtar_common/static/js/ishtar.js
+++ b/ishtar_common/static/js/ishtar.js
@@ -84,6 +84,7 @@ var default_search_vector;
 var pin_search_url;
 var static_path = '/static/';
 var autofocus_field;
+var form_changed = false;
 
 var datatables_default = {
     "processing": true,
@@ -115,6 +116,7 @@ var activate_own_search_msg = "Searches in the shortcut menu deals with only you
 var added_message = " items added.";
 var select_only_one_msg = "Select only one item.";
 var search_pinned_msg = "";
+var form_changed_msg = "The form has changed. If you don't validate it, all your changes will be lost.";
 
 var advanced_menu = false;
 var shortcut_menu_hide = false;
@@ -1578,6 +1580,42 @@ var search_get_query_data = function(query_vars, table_name){
     return data;
 };
 
+var register_wizard_form = function(){
+    $('form :input').focus(function(){
+      let item_bottom = $(this).offset().top + $(this).height();
+      let footer_top = $("#footer").offset().top;
+      if (item_bottom > footer_top) {
+        $('html, body').animate({
+          scrollTop: $(document).scrollTop() + (item_bottom - footer_top) + 25
+        }, 800);
+      }
+      let label_margin = 30;
+      if ($(document).scrollTop() > ($(this).offset().top - label_margin)){
+        $('html, body').animate({
+          scrollTop: $(this).offset().top - label_margin
+        }, 800);
+      }
+    });
+
+    $('form :input').change(function(){form_changed=true;});
+
+    $('.change_step').click(function(){
+        if(!form_changed ||
+            confirm(form_changed_msg)){
+            return true;
+        }
+        return false;
+    });
+
+    if ($("[autofocus]").length > 0) autofocus_field = "#" + $($("[autofocus]")[0]).attr('id');
+
+    $(".wizard-form").keydown(function(e){
+      if (e.ctrlKey && e.keyCode == 13) {
+        $("#submit_form").click();
+      }
+    });
+}
+
 var registered_stats = false;
 var extra_list = new Array();
 var sources = new Array();
diff --git a/ishtar_common/static/media/styles.css b/ishtar_common/static/media/styles.css
index 00b11fb07..837f5d752 100644
--- a/ishtar_common/static/media/styles.css
+++ b/ishtar_common/static/media/styles.css
@@ -10,7 +10,6 @@
 html{
     background-image: url('images/ishtar-bg.png');
     background-repeat: no-repeat;
-    height: 100%;
     background-position: right 30px top 150px;
 }
 
diff --git a/ishtar_common/templates/ishtar/settings.js b/ishtar_common/templates/ishtar/settings.js
index b0fea20fc..169722c77 100644
--- a/ishtar_common/templates/ishtar/settings.js
+++ b/ishtar_common/templates/ishtar/settings.js
@@ -43,4 +43,5 @@ var limit_map_help_msg = "{% trans "Unchecking this limit on a poorly performing
 var displayed_map_msg = "{% trans "{0} items displayed on the map" %}";
 var non_displayed_map_msg = "{% trans "{0} items not displayed" %}";
 var non_displayed_map_link_msg = "{% trans "(list)" %}";
+var form_changed_msg = "{% trans "The form has changed. If you don't validate it, all your changes will be lost." %}";
 {% endlocalize %}
\ No newline at end of file
diff --git a/ishtar_common/templates/ishtar/wizard/default_wizard.html b/ishtar_common/templates/ishtar/wizard/default_wizard.html
index fcc020816..c4a304111 100644
--- a/ishtar_common/templates/ishtar/wizard/default_wizard.html
+++ b/ishtar_common/templates/ishtar/wizard/default_wizard.html
@@ -54,23 +54,12 @@ var form_changed = false;
 {% block "js_extra_generic" %}
 {% endblock %}
 $(document).ready(function(){
-    $('form :input').change(function(){form_changed=true;});
-    $('.change_step').click(function(){
-        if(!form_changed ||
-           confirm("{% trans "The form has changed. If you don't validate it, all your changes will be lost." %}")){
-            return true;
-        }
-        return false;
-    });
+{% if not form.SEARCH_AND_SELECT %}
+    register_wizard_form();
+{% endif %}
     {% if open_url %}load_window("{{open_url}}");{% endif %}
     {% block "js_extra_ready" %}
     {% endblock %}
-    if ($("[autofocus]").length > 0) autofocus_field = "#" + $($("[autofocus]")[0]).attr('id');
-    $(".wizard-form").keydown(function(e){
-      if (e.ctrlKey && e.keyCode == 13) {
-        $("#submit_form").click();
-      }
-    });
 });
 {% endlocalize %}</script>
 {% endblock %}