Create a new better script for showing more/less

ae-utbm · Jan 8, 2025 · 0c34e11 · 0c34e11
1 parent cca486f
commit 0c34e11
Show file tree

Hide file tree

Showing 9 changed files with 115 additions and 44 deletions.
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+@jsr:registry=https://npm.jsr.io
diff --git a/core/static/bundled/core/read-more-index.ts b/core/static/bundled/core/read-more-index.ts
@@ -0,0 +1,71 @@
+import clip from "@arendjr/text-clipper";
+
+/*
+	This script adds a way to have a 'show more / show less' button
+	on some text content.
+
+	The usage is very simple, you just have to add the class `show-more`
+	to the element you want to add the button to.
+
+	Then, you can control the desired size by adding the attribute `show-size`
+	to your element.
+
+	This script does html matching and is able to properly cut rendered markdown.
+
+	Example usage:
+		<p class="show-more" show-size=20>
+			My very long text will be cut by this script
+		</p>
+*/
+
+function showMore(element: HTMLElement) {
+  if (!element.hasAttribute("show-size")) {
+    return;
+  }
+  const fullContent = element.innerHTML;
+  const clippedContent = clip(
+    element.innerHTML,
+    Number.parseInt(element.getAttribute("show-size") as string),
+    {
+      html: true,
+    },
+  );
+
+  // If already at the desired size, we don't do anything
+  if (clippedContent === fullContent) {
+    return;
+  }
+
+  const actionLink = document.createElement("a");
+
+  let opened = false;
+
+  const setText = () => {
+    if (opened) {
+      element.innerHTML = fullContent;
+      actionLink.innerText = gettext("Show less");
+    } else {
+      element.innerHTML = clippedContent;
+      actionLink.innerText = gettext("Show more");
+    }
+    element.appendChild(document.createElement("br"));
+    element.appendChild(actionLink);
+  };
+
+  const toggle = () => {
+    opened = !opened;
+    setText();
+  };
+
+  setText();
+  actionLink.addEventListener("click", (event) => {
+    event.preventDefault();
+    toggle();
+  });
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  for (const elem of document.getElementsByClassName("show-more")) {
+    showMore(elem as HTMLElement);
+  }
+});
diff --git a/election/static/election/css/election.scss b/election/static/election/css/election.scss
@@ -106,11 +106,17 @@ $min_col_width: 100px;
             margin: 0;
           }
 
-          >p {
+          .role_description {
             flex-grow: 1;
             margin-top: .5em;
             text-wrap: auto;
             text-align: left;
+
+            // Show more/less element
+            a {
+              text-align: center;
+              display: block;
+            }
           }
         }
 

diff --git a/election/templates/election/election_detail.jinja b/election/templates/election/election_detail.jinja
@@ -4,12 +4,12 @@
   {{ object.title }}
 {% endblock %}
 
-{% block additional_css %}
-  <link rel="stylesheet" href="{{ static('election/css/election.scss') }}">
+{% block additional_js %}
+  <script type="module" src="{{ static('bundled/core/read-more-index.ts') }}"></script>
 {% endblock %}
 
-{% block additional_js %}
-  <script src="{{ static('bundled/vendored/jquery.shorten.min.js') }}"></script>
+{% block additional_css %}
+  <link rel="stylesheet" href="{{ static('election/css/election.scss') }}">
 {% endblock %}
 
 {% block content %}
@@ -68,7 +68,7 @@
               <td class="role_title">
                 <div class="role_text">
                   <h4>{{ role.title }}</h4>
-                  <p class="role_description">{{ role.description }}</p>
+                  <p class="role_description show-more" show-size="300">{{ role.description }}</p>
                   {%- if role.max_choice > 1 and not election.has_voted(user) and election.can_vote(user) %}
                     <strong>{% trans %}You may choose up to{% endtrans %} {{ role.max_choice }} {% trans %}people.{% endtrans %}</strong>
                   {%- endif %}
@@ -139,7 +139,9 @@
                           <figcaption class="candidate__details">
                             <h5>{{ candidature.user.first_name }} <em>{{candidature.user.nick_name or ''}} </em>{{ candidature.user.last_name }}</h5>
                             {%- if not election.is_vote_finished %}
-                              <q class="candidate_program">{{ candidature.program | markdown or '' }}</q>
+                              <q class="candidate_program show-more" show-size="200">
+                                {{ candidature.program|markdown or '' }}
+                              </q>
                             {%- endif %}
                           </figcaption>
                           {%- if user.can_edit(candidature) -%}
@@ -198,18 +200,6 @@
 
 {% block script %}
   {{ super() }}
-  <script type="text/javascript">
-    $('.role_description').shorten({
-      moreText: "{% trans %}Show more{% endtrans %}",
-      lessText: "{% trans %}Show less{% endtrans %}",
-      showChars: 300
-    });
-    $('.candidate_program').shorten({
-      moreText: "{% trans %}Show more{% endtrans %}",
-      lessText: "{% trans %}Show less{% endtrans %}",
-      showChars: 200
-    });
-  </script>
   <script type="text/javascript">
     document.querySelectorAll('.role__multiple-choices').forEach(setupRestrictions);
 

diff --git a/locale/fr/LC_MESSAGES/django.po b/locale/fr/LC_MESSAGES/django.po
@@ -6,7 +6,7 @@
 msgid ""
 msgstr ""
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2025-01-05 16:39+0100\n"
+"POT-Creation-Date: 2025-01-08 12:23+0100\n"
 "PO-Revision-Date: 2016-07-18\n"
 "Last-Translator: Maréchal <[email protected]\n"
 "Language-Team: AE info <[email protected]>\n"
@@ -935,6 +935,12 @@ msgstr "rôle"
 msgid "description"
 msgstr "description"
 
+#: club/models.py
+#, fuzzy
+#| msgid "Board member"
+msgid "past member"
+msgstr "Membre du bureau"
+
 #: club/models.py
 msgid "Email address"
 msgstr "Adresse email"
@@ -3328,8 +3334,8 @@ msgstr "Nom d'utilisateur, email, ou numéro de compte AE"
 
 #: core/views/forms.py
 msgid ""
-"Profile: you need to be visible on the picture, in order to be recognized (e."
-"g. by the barmen)"
+"Profile: you need to be visible on the picture, in order to be recognized "
+"(e.g. by the barmen)"
 msgstr ""
 "Photo de profil: vous devez être visible sur la photo afin d'être reconnu "
 "(par exemple par les barmen)"
@@ -3935,8 +3941,8 @@ msgstr ""
 #: counter/templates/counter/mails/account_dump.jinja
 msgid "If you think this was a mistake, please mail us at [email protected]."
 msgstr ""
-"Si vous pensez qu'il s'agit d'une erreur, veuillez envoyer un mail à ae@utbm."
-"fr."
+"Si vous pensez qu'il s'agit d'une erreur, veuillez envoyer un mail à "
+"ae@utbm.fr."
 
 #: counter/templates/counter/mails/account_dump.jinja
 msgid ""
@@ -4456,14 +4462,6 @@ msgstr "Ajouter un nouveau rôle"
 msgid "Submit the vote !"
 msgstr "Envoyer le vote !"
 
-#: election/templates/election/election_detail.jinja
-msgid "Show more"
-msgstr "Montrer plus"
-
-#: election/templates/election/election_detail.jinja
-msgid "Show less"
-msgstr "Montrer moins"
-
 #: election/templates/election/election_list.jinja
 msgid "Election list"
 msgstr "Liste des élections"

diff --git a/locale/fr/LC_MESSAGES/djangojs.po b/locale/fr/LC_MESSAGES/djangojs.po
@@ -7,7 +7,7 @@
 msgid ""
 msgstr ""
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2025-01-04 23:07+0100\n"
+"POT-Creation-Date: 2025-01-08 12:23+0100\n"
 "PO-Revision-Date: 2024-09-17 11:54+0200\n"
 "Last-Translator: Sli <[email protected]>\n"
 "Language-Team: AE info <[email protected]>\n"
@@ -113,6 +113,14 @@ msgstr "Guide markdown"
 msgid "Unsupported NFC card"
 msgstr "Carte NFC non supportée"
 
+#: core/static/bundled/core/read-more-index.ts
+msgid "Show less"
+msgstr "Montrer moins"
+
+#: core/static/bundled/core/read-more-index.ts
+msgid "Show more"
+msgstr "Montrer plus"
+
 #: core/static/bundled/user/family-graph-index.js
 msgid "family_tree.%(extension)s"
 msgstr "arbre_genealogique.%(extension)s"

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "@alpinejs/sort": "^3.14.7",
+    "@arendjr/text-clipper": "npm:@jsr/arendjr__text-clipper@^3.0.0",
     "@fortawesome/fontawesome-free": "^6.6.0",
     "@fullcalendar/core": "^6.1.15",
     "@fullcalendar/daygrid": "^6.1.15",
@@ -56,7 +57,6 @@
     "htmx.org": "^2.0.3",
     "jquery": "^3.7.1",
     "jquery-ui": "^1.14.0",
-    "jquery.shorten": "^1.0.0",
     "native-file-system-adapter": "^3.0.1",
     "three": "^0.169.0",
     "three-spritetext": "^1.9.0",

diff --git a/vite.config.mts b/vite.config.mts
@@ -97,10 +97,6 @@ export default defineConfig((config: UserConfig) => {
             src: resolve(nodeModules, "jquery-ui/dist/jquery-ui.min.js"),
             dest: vendored,
           },
-          {
-            src: resolve(nodeModules, "jquery.shorten/src/jquery.shorten.min.js"),
-            dest: vendored,
-          },
         ],
       }),
     ],