Remove shorten dependency and add an alpine macro instead

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

Hide file tree

Showing 6 changed files with 23 additions and 30 deletions.
diff --git a/core/templates/core/macros.jinja b/core/templates/core/macros.jinja
@@ -328,3 +328,22 @@
     </div>
   </div>
 {% endmacro %}
+
+{% macro read_more(text, max_size, tag, tag_attrs) %}
+  {% set tag = tag|default('p') %}
+  {% set tag_attrs = tag_attrs|default('tag_attrs') %}
+  <div
+    x-data="{ open: false, fullText: '', slicedText: '', maxSize: {{ max_size }} }"
+    x-init="fullText = $el.firstElementChild.textContent.trim(); slicedText = fullText.slice(0, maxSize)"
+  >
+    <{{ tag }} x-cloak {{ tag_attrs|safe }} x-text="open ? fullText : slicedText" x-transition>
+    {{ text }}
+  </{{ tag }}>
+  <br>
+  <a
+    @click.prevent="open = ! open"
+    x-show="fullText.length > maxSize"
+    x-text="open ? '{% trans %}Show less{% endtrans %}' : '{% trans %}Show more{% endtrans %}'"
+  ></a>
+  </div>
+{% endmacro %}
diff --git a/election/static/election/css/election.scss b/election/static/election/css/election.scss
@@ -106,7 +106,7 @@ $min_col_width: 100px;
             margin: 0;
           }
 
-          >p {
+          .role_description {
             flex-grow: 1;
             margin-top: .5em;
             text-wrap: auto;

diff --git a/election/templates/election/election_detail.jinja b/election/templates/election/election_detail.jinja
@@ -1,4 +1,5 @@
 {% extends "core/base.jinja" %}
+{% from 'core/macros.jinja' import read_more %}
 
 {% block title %}
   {{ object.title }}
@@ -8,10 +9,6 @@
   <link rel="stylesheet" href="{{ static('election/css/election.scss') }}">
 {% endblock %}
 
-{% block additional_js %}
-  <script src="{{ static('bundled/vendored/jquery.shorten.min.js') }}"></script>
-{% endblock %}
-
 {% block content %}
   <h3 class="election__title">{{ election.title }}</h3>
   <p class="election__description">{{ election.description }}</p>
@@ -68,7 +65,7 @@
               <td class="role_title">
                 <div class="role_text">
                   <h4>{{ role.title }}</h4>
-                  <p class="role_description">{{ role.description }}</p>
+                  {{ read_more(role.description, 300, "p", "class='role_description'") }}
                   {%- 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 +136,7 @@
                           <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>
+                              {{ read_more(candidature.program|markdown or '', 200, "q", "class='candidate_program'") }}
                             {%- endif %}
                           </figcaption>
                           {%- if user.can_edit(candidature) -%}
@@ -198,18 +195,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/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -56,7 +56,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,
-          },
         ],
       }),
     ],