Merge pull request #201 from daizutabi/198-add-show-class-buttons

Add toggle buttons to show/hide class names
daizutabi · Sep 19, 2024 · f7c736e · f7c736e
2 parents 8659764 + 2cfd5ae
commit f7c736e
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 9 deletions.
diff --git a/docs/usage/object.md b/docs/usage/object.md
@@ -207,8 +207,10 @@ by its qualified name.
 The heading of a method's documentation
 contains a tooltip displaying the full name of the method
 along with the class to which the method belongs.
-You can also click the prefix *method* to display the
-qualified names of all methods on the current page.
+You can also click the
+<i class="fa-solid fa-square-plus"></i>
+button to display the qualified names of all methods
+on the current page.
 
 ## Source Code
 

diff --git a/src/mkapi/css/mkapi-common.css b/src/mkapi/css/mkapi-common.css
@@ -139,15 +139,12 @@ ul.mkapi-item-list {
 }
 
 .mkapi-document-toggle,
+.mkapi-parent-toggle,
 .mkapi-section-toggle {
   cursor: pointer;
   color: var(--mkapi-punctuation-color);
 }
 
-.mkapi-parent-toggle {
-  cursor: pointer;
-}
-
 .mkapi-page-object {
   margin-block-end: 0px;
   border-bottom: 1px solid var(--mkapi-object-border-color);

diff --git a/src/mkapi/javascript/mkapi.js b/src/mkapi/javascript/mkapi.js
@@ -40,5 +40,15 @@ parentButtons.forEach((button) => {
     elements.forEach((element) => {
       element.style.display = isVisible ? "none" : "inline";
     });
+
+    const buttons = document.querySelectorAll(".mkapi-parent-toggle");
+    buttons.forEach((button) => {
+      const icon = button.querySelector("i");
+      if (icon) {
+        icon.className = isVisible
+          ? "fa-solid fa-square-plus"
+          : "fa-solid fa-square-xmark";
+      }
+    });
   });
 });
diff --git a/src/mkapi/templates/object.jinja2 b/src/mkapi/templates/object.jinja2
@@ -1,14 +1,17 @@
 <p class="mkapi-object mkapi-page-{{ namespace }}" id="{{ id }}" markdown="1">
 <span class="mkapi-object-link">
+{% if parent -%}
+<span class="mkapi-parent-toggle" title="Toggle class names">
+<i class="fa-solid fa-square-plus"></i>
+</span>
+{%- endif %}
 [{{ namespace }}][__mkapi__.__{{ namespace }}__.{{ obj_id }}]
 <span class="mkapi-document-toggle" title="Toggle all docs">
 <i class="fa-regular fa-square-minus"></i>
 </span>
 </span>
 {%- if kind  -%}
-<span class="mkapi-object-kind{% if parent %} mkapi-parent-toggle{% endif %}"
-{%- if parent %} title="Toggle class names"{% endif -%}
->{{ kind }}</span>
+<span class="mkapi-object-kind">{{ kind }}</span>
 {%- endif %}
 {% if parent -%}
 <span class="mkapi-object-parent">