From f70d90ba32a66a67dfe6f19dd23de007bacb1a8d Mon Sep 17 00:00:00 2001
From: Javier Sánchez Parra <jsanchez@soleta.eu>
Date: Thu, 25 Nov 2021 16:28:48 +0100
Subject: Ensure unique HTML ids for scope elements

Otherwise, undesired collapse/expand events may occur when users click
an element of the scope.

Old id format example: level3-2

New id format example: id_1-1_2-4_3-2

Explanation:

	* "id" -> Prefix needed because html ids must start with an
	  alphabetic character.

	* "_" -> Separator.

	* "1-1" -> Values pair separated by "-". The first value is the
	  level of the node. The second value is its position with
	  respect to its siblings. This is always 1-1 because is the
	  root node.

	* "_" -> Separator.

	* "2-4" -> Child node of the previous node. In this example,
	  this node its in level 2 and has the fourth position.

	* "_" -> Separator.

	* "3-2" -> Child of node "2-4" in level 3 and in the second
	  position. This is the final node in this example.

In other cases ogcp may draws deeper nodes, so it creates longer ids.
For example: id_1-1_2-1_3-2_4-1_5-1_6-1
---
 ogcp/templates/macros.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'ogcp')

diff --git a/ogcp/templates/macros.html b/ogcp/templates/macros.html
index 3e8074e..f7ebf2f 100644
--- a/ogcp/templates/macros.html
+++ b/ogcp/templates/macros.html
@@ -21,7 +21,7 @@
 {% macro scopes_tree_collapse(scopes) -%}
 
 <ul id="scopes" class="nav flex-column nav-pills">
-  {{ scopes_tree_collapse_level(scopes["scope"], 1) }}
+  {{ scopes_tree_collapse_level(scopes["scope"], 1, "") }}
 </ul>
 <script>
     // Launch the javascript on document ready, so all the global functions exists
@@ -35,7 +35,7 @@
 
 {% endmacro %}
 
-{% macro scopes_tree_collapse_level(scopes, i) -%}
+{% macro scopes_tree_collapse_level(scopes, i, parent_id) -%}
 {% for scope in scopes %}
   <li id="{{ scope["name"] }}_{{ scope["id"] }}" class="nav-item">
     {% if " ".join(scope["ip"]) %}
@@ -44,7 +44,7 @@
                {% if scope.get("selected", False) %}checked{% endif %}
                name="{{ scope["name"] }}_{{ scope["id"] }}" />
     {% endif %}
-    <a class="nav-link {% if not scope["scope"] %}disabled{% endif %}" href="#level{{i}}-{{loop.index}}"
+    <a class="nav-link {% if not scope["scope"] %}disabled{% endif %}" href="#id{{parent_id ~ "_" ~ i ~ "-" ~ loop.index}}"
                        {% if scope["scope"] %}data-toggle="collapse"{% endif %}>
       {% if "state" in scope %}
         <i class="nav-icon fa-circle
@@ -57,8 +57,8 @@
       {{ scope["name"] }}
     </a>
     {% if scope["scope"] %}
-      <ul class="nav flex-column collapse level{{i}}" id="level{{i}}-{{loop.index}}">
-          {{ scopes_tree_collapse_level(scope["scope"], i + 1) }}
+      <ul class="nav flex-column collapse level{{i}}" id="id{{parent_id ~ "_" ~ i ~ "-" ~ loop.index}}">
+          {{ scopes_tree_collapse_level(scope["scope"], i + 1, parent_id ~ "_" ~ i ~ "-" ~ loop.index) }}
       </ul>
     {% endif %}
   </li>
-- 
cgit v1.2.3-18-g5258