summaryrefslogtreecommitdiffstats
path: root/ogcp/templates/macros.html
diff options
context:
space:
mode:
authorJavier Sánchez Parra <jsanchez@soleta.eu>2021-11-25 16:28:48 +0100
committerJavier Sánchez Parra <jsanchez@soleta.eu>2021-11-26 12:43:53 +0100
commitf70d90ba32a66a67dfe6f19dd23de007bacb1a8d (patch)
tree1ce93c150128b1febb66700d826713f9526b963b /ogcp/templates/macros.html
parent792e4ed3ddcc0812fb97ff31560ec8b1fa39abc3 (diff)
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
Diffstat (limited to 'ogcp/templates/macros.html')
-rw-r--r--ogcp/templates/macros.html10
1 files changed, 5 insertions, 5 deletions
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>