48k.eu-mirror
/
ogcp
mirror of https://git.48k.eu/ogcp
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
multi-ogserver
Javier Sánchez Parra 2021-11-25 16:28:48 +01:00
parent 792e4ed3dd
commit f70d90ba32
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ogcp/templates/macros.html
View File

@ -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>