Add expansion of docstrings

2 files changed, 44 insertions, 1 deletions

diff --git a/doc-tool/resources/_layouts/api-page.html b/doc-tool/resources/_layouts/api-page.html
index f45a8bab4..49f01542e 100644
--- a/doc-tool/resources/_layouts/api-page.html
+++ b/doc-tool/resources/_layouts/api-page.html
@@ -33,6 +33,7 @@ extraCSS:
         {% for member in entity.members %}
         <div id="{{ member.signature }}" class="member {% if member.isPrivate %}private{% elsif member.isProtected %}protected{% endif %}">
             <div class="member-title">
+                <span class="expand-button" onclick="toggleMemberBody(this, '{{ member.signature }}');">[+]</span>
                 <span class="member-annotations">
                     {% for annot in member.annotations %}@{{ annot | split: '.' | last }} {% endfor %}
                 </span>
@@ -84,8 +85,24 @@ extraCSS:
             </div><!-- end member-title -->
 
             <div class="member-body">
-                {{ member.comment.short }}
+                <div class="member-body-short" id="short-body-{{ member.signature }}">
+                    {{ member.comment.short }}
+                </div>
+                <div class="member-body-long" id ="long-body-{{ member.signature }}">
+                    {{ member.comment.body }}
+                </div>
             </div>
+            <script>
+                function toggleMemberBody(span, sig) {
+                    var shortBody = document.getElementById("short-body-" + sig);
+                    var longBody = document.getElementById("long-body-" + sig);
+
+                    shortBody.classList.toggle("toggled")
+                    longBody.classList.toggle("toggled")
+
+                    span.innerHTML = (span.innerHTML == "[+]") ?  "[-]" : "[+]";
+                }
+            </script>
         </div><!-- end member -->
         {% endfor %}
     </div>
diff --git a/doc-tool/resources/css/api-page.css b/doc-tool/resources/css/api-page.css
index ab9f4fd5e..410e9978c 100644
--- a/doc-tool/resources/css/api-page.css
+++ b/doc-tool/resources/css/api-page.css
@@ -83,3 +83,29 @@ div#entity-members > div.member > div.member-title span.no-left {
 div#entity-members > div.member > div.member-title span.no-right {
     margin-right: -11px;
 }
+
+div#entity-members > div.member > div.member-title > span.expand-button {
+    color: rgba(167, 161, 161, 0.5);
+}
+
+div#entity-members > div.member > div.member-title > span.expand-button:hover {
+    color: rgb(167, 161, 161);
+    cursor: pointer;
+    user-select: none;
+}
+
+div#entity-members > div.member > div.member-body {
+    margin: 5px 0 0 39px;
+}
+
+div#entity-members > div.member > div.member-body > div.member-body-short.toggled {
+    display: none;
+}
+
+div#entity-members > div.member > div.member-body > div.member-body-long {
+    display: none;
+}
+
+div#entity-members > div.member > div.member-body > div.member-body-long.toggled {
+    display: block;
+}