Merge pull request #1105 from ae-utbm/accordions

Remove jquery-ui accordions

core/static/bundled/core/accordion-index.ts

@@ -0,0 +1,25 @@
+const setMaxHeight = (element: HTMLDetailsElement) => {
+  element.setAttribute("style", `max-height: ${element.scrollHeight}px`);
+};
+
+// Initialize max-height at load
+window.addEventListener("DOMContentLoaded", () => {
+  for (const el of document.querySelectorAll("details.accordion")) {
+    setMaxHeight(el as HTMLDetailsElement);
+  }
+});
+
+// Accordion opened
+new MutationObserver((mutations: MutationRecord[]) => {
+  for (const mutation of mutations) {
+    const target = mutation.target as HTMLDetailsElement;
+    if (target.tagName !== "DETAILS" || !target.classList.contains("accordion")) {
+      continue;
+    }
+    setMaxHeight(target);
+  }
+}).observe(document.body, {
+  attributes: true,
+  attributeFilter: ["open"],
+  subtree: true,
+});

core/static/core/accordion.scss

@@ -0,0 +1,55 @@
+details.accordion>summary {
+  margin: 2px 0 0 0;
+  padding: .5em .5em .5em .7em;
+  cursor: pointer;
+  user-select: none;
+  display: block;
+
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+
+details[open].accordion>summary {
+  border: 1px solid #003eff;
+  background: #007fff;
+  color: #ffffff;
+}
+
+
+details:not([open]).accordion>summary {
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+
+  border: 1px solid #c5c5c5;
+  background: #f6f6f6;
+  color: #454545;
+}
+
+details.accordion>summary::before {
+  font-family: FontAwesome;
+  content: '\f0da';
+  margin-right: 5px;
+  transition: 700ms;
+  font-size: 0.8em;
+}
+
+details[open]>summary::before {
+  font-family: FontAwesome;
+  content: '\f0d7';
+}
+
+// ::details-content isn't available on firefox yet
+// we use .accordion-content as a workaround
+details.accordion>.accordion-content {
+  background: #ffffff;
+  color: #333333;
+  padding: 1em 2.2em;
+  overflow: auto;
+  border: 1px solid #dddddd;
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+
+details.accordion {
+  transition: max-height 300ms ease-in-out;
+}

core/templates/core/base.jinja

@@ -12,6 +12,7 @@
       <link rel="stylesheet" href="{{ static('core/header.scss') }}">
       <link rel="stylesheet" href="{{ static('core/navbar.scss') }}">
       <link rel="stylesheet" href="{{ static('core/pagination.scss') }}">
+      <link rel="stylesheet" href="{{ static('core/accordion.scss') }}">
 
       {% block jquery_css %}
         {# Thile file is quite heavy (around 250kb), so declaring it in a block allows easy removal #}
@@ -26,6 +27,7 @@
       <script type="module" src="{{ static('bundled/htmx-index.js') }}"></script>
       <script type="module" src="{{ static('bundled/country-flags-index.ts') }}"></script>
       <script type="module" src="{{ static('bundled/core/tooltips-index.ts') }}"></script>
+      <script type="module" src="{{ static('bundled/core/accordion-index.ts') }}"></script>
 
       <!-- Jquery declared here to be accessible in every django widgets -->
       <script src="{{ static('bundled/vendored/jquery.min.js') }}"></script>

core/templates/core/user_account.jinja

@@ -1,7 +1,7 @@
 {% extends "core/base.jinja" %}
 
 {% macro monthly(objects) %}
-  <div>
+  <div class="accordion-content">
     <table>
       <thead>
         <tr>
@@ -37,22 +37,28 @@
   {% if customer %}
     <h3>{% trans %}User account{% endtrans %}</h3>
     <p>{% trans %}Amount: {% endtrans %}{{ customer.amount }} €</p>
-    <div id="drop">
-      {% if buyings_month %}
-        <h5>{% trans %}Account purchases{% endtrans %}</h5>
+    {% if buyings_month %}
+      <details class="accordion" name="account" open>
+        <summary>{% trans %}Account purchases{% endtrans %}</summary>
         {{ monthly(buyings_month) }}
-      {% endif %}
-      {% if refilling_month %}
-        <h5>{% trans %}Reloads{% endtrans %}</h5>
+      </details>
+    {% endif %}
+    {% if refilling_month %}
+      <details class="accordion" name="account">
+        <summary>{% trans %}Reloads{% endtrans %}</summary>
         {{ monthly(refilling_month) }}
-      {% endif %}
-      {% if invoices_month %}
-        <h5>{% trans %}Eboutic invoices{% endtrans %}</h5>
+      </details>
+    {% endif %}
+    {% if invoices_month %}
+      <details class="accordion" name="account">
+        <summary>{% trans %}Eboutic invoices{% endtrans %}</summary>
         {{ monthly(invoices_month) }}
-      {% endif %}
-      {% if etickets %}
-        <h4>{% trans %}Etickets{% endtrans %}</h4>
-        <div>
+      </details>
+    {% endif %}
+    {% if etickets %}
+      <details class="accordion" name="account">
+        <summary>{% trans %}Etickets{% endtrans %}</summary>
+        <div class="accordion-content">
           <ul>
             {% for s in etickets %}
               <li>
@@ -63,22 +69,9 @@
             {% endfor %}
           </ul>
         </div>
-      {% endif %}
-    </div>
+      </details>
+    {% endif %}
   {% else %}
     <p>{% trans %}User has no account{% endtrans %}</p>
   {% endif %}
 {% endblock %}
-
-{% block script %}
-  {{ super() }}
-  <script>
-    $(function(){
-      $("#drop").accordion({
-        heightStyle: "content"
-      });
-    });
-  </script>
-{% endblock %}
-
-

core/templates/core/user_detail.jinja

@@ -254,13 +254,5 @@
         keys.shift();
       }
     });
-
-    $(function () {
-      $("#drop_gifts").accordion({
-        heightStyle: "content",
-        collapsible: true,
-        active: false
-      });
-    });
   </script>
 {% endblock %}