Merge pull request #366 from melexis/collapse-selected

Always show the traceability information of selected item

README.md

@@ -4,7 +4,6 @@
 [![Documentation](https://img.shields.io/badge/Documentation-published-brightgreen.svg)](https://melexis.github.io/sphinx-traceability-extension/)
 [![Code Coverage](https://codecov.io/gh/melexis/sphinx-traceability-extension/coverage.svg)](https://codecov.io/gh/melexis/sphinx-traceability-extension)
 [![Code Climate Status](https://codeclimate.com/github/melexis/sphinx-traceability-extension/badges/gpa.svg)](https://codeclimate.com/github/melexis/sphinx-traceability-extension)
-[![Requirements Status](https://requires.io/github/melexis/sphinx-traceability-extension/requirements.svg?branch=master)](https://requires.io/github/melexis/sphinx-traceability-extension/requirements/?branch=master)
 [![Contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/melexis/sphinx-traceability-extension/issues)
 
 

doc/configuration.rst

@@ -168,8 +168,8 @@ Ability to collapse the list of relationships and attributes per documentation o
 A button is added to each documentation object that has rendered relationships and/or attributes to be able to show and
 hide these traceability links. The *boolean* configuration variable *traceability_collapse_links* allows selecting
 between hiding and showing the list of links for all items on page load: setting its value to ``True`` results in the
-list of links being hidden (collapsed) on page load, while a value of ``False`` results in the list being shown
-(uncollapsed)(the default).
+list of links being hidden (collapsed) on page load, while the default value of ``False`` results in the list being
+shown (uncollapsed). When an item is selected, its list will always be shown.
 
 Example configuration of hiding the traceability links on page load:
 

mlx/traceability/assets/traceability.js

@@ -5,8 +5,9 @@ jQuery(function () {
 });
 
 $(document).ready(function () {
+    const anchorId = location.hash.slice(1);
     $('div.collapsible_links div.admonition.item').each(function (i) {
-        $(this).siblings('dl').first().addCollapseButton($(this));
+        $(this).siblings('dl').first().addCollapseButton($(this), anchorId);
         $(this).css('clear', 'left');  // sphinx-rtd-theme==0.5.0 sets `clear: both` which pushes button out of bar
     });
 
@@ -60,8 +61,7 @@ $(document).ready(function () {
     });
 
     // if an item was selected, ensure it's displayed at the top of the viewport
-    if (location.hash) {
-        const anchorId = location.hash.slice(1);
+    if (anchorId) {
         const element = document.getElementById(anchorId);
         if (element) {
             element.scrollIntoView(true, { block: "start", inline: "nearest" });
@@ -71,11 +71,12 @@ $(document).ready(function () {
 
 // item
 jQuery.fn.extend({
-    addCollapseButton: function (admonition) {
+    addCollapseButton: function (admonition, anchorId) {
         var relations = $(this);
 
         if (relations.children().length > 0) {
-            if (admonition.parent().hasClass('collapse')) {
+            const itemDiv = admonition.parent()
+            if (itemDiv.hasClass('collapse') && (itemDiv.attr('id') != anchorId)) {
                 // collapse relations and attributes list for each item on page load
                 relations.toggle();
                 arrowDirection = 'down';
@@ -94,7 +95,8 @@ jQuery.fn.extend({
                     'font-size': '135%',
                     'color': linkColor,
                     'float': 'right',
-                    'padding': '1px ' + paddingX
+                    'padding': '1px ' + paddingX,
+                    'cursor': 'pointer',
                 },
                 click: function () {
                     relations.toggle('fold');
@@ -111,3 +113,19 @@ jQuery.fn.extend({
         $(this).children('em').first().css("font-style", admonition.css("font-style"));
     }
 });
+
+window.addEventListener(
+    "hashchange",
+    () => {
+        const anchorId = location.hash.slice(1);
+        const element = document.getElementById(anchorId);
+        if (element.classList.contains('collapse')) {
+            for (const child of element.children) {
+                if ((child.localName == 'i') && child.classList.contains('fa-angle-down')) {
+                    child.click();
+                    break;
+                }
+            }
+        }
+    },
+);