diff options
| author | Javier Sánchez Parra <jsanchez@soleta.eu> | 2021-11-25 16:28:48 +0100 |
|---|---|---|
| committer | Javier Sánchez Parra <jsanchez@soleta.eu> | 2021-11-26 12:43:53 +0100 |
| commit | f70d90ba32a66a67dfe6f19dd23de007bacb1a8d (patch) | |
| tree | 1ce93c150128b1febb66700d826713f9526b963b /ogcp | |
| parent | 792e4ed3ddcc0812fb97ff31560ec8b1fa39abc3 (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')
| -rw-r--r-- | ogcp/templates/macros.html | 10 |
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> |