mirror of
https://github.com/ae-utbm/sith.git
synced 2025-01-11 09:31:12 +00:00
Create a new better script for showing more/less
This commit is contained in:
parent
cca486f2b9
commit
a2dc4f1964
73
core/static/bundled/core/read-more-index.ts
Normal file
73
core/static/bundled/core/read-more-index.ts
Normal file
@ -0,0 +1,73 @@
|
||||
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 attribute `show-more`
|
||||
with the desired max size to the element you want to add the button to.
|
||||
This script does html matching and is able to properly cut rendered markdown.
|
||||
|
||||
Example usage:
|
||||
<p show-more="20">
|
||||
My very long text will be cut by this script
|
||||
</p>
|
||||
*/
|
||||
|
||||
function showMore(element: HTMLElement) {
|
||||
if (!element.hasAttribute("show-more")) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Mark element as loaded so we can hide unloaded
|
||||
// tags with css and avoid blinking text
|
||||
element.setAttribute("show-more-loaded", "");
|
||||
|
||||
const fullContent = element.innerHTML;
|
||||
const clippedContent = clip(
|
||||
element.innerHTML,
|
||||
Number.parseInt(element.getAttribute("show-more") as string),
|
||||
{
|
||||
html: true,
|
||||
},
|
||||
);
|
||||
|
||||
// If already at the desired size, we don't do anything
|
||||
if (clippedContent === fullContent) {
|
||||
return;
|
||||
}
|
||||
|
||||
const actionLink = document.createElement("a");
|
||||
actionLink.setAttribute("class", "show-more-link");
|
||||
|
||||
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.querySelectorAll("[show-more]")) {
|
||||
showMore(elem as HTMLElement);
|
||||
}
|
||||
});
|
||||
@ -131,6 +131,10 @@ body {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
[show-more]:not([show-more-loaded]) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/*--------------------------------HEADER-------------------------------*/
|
||||
|
||||
#popupheader {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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="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="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);
|
||||
|
||||
|
||||
@ -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 <thomas.girod@utbm.fr\n"
|
||||
"Language-Team: AE info <ae.info@utbm.fr>\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 ae@utbm.fr."
|
||||
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"
|
||||
|
||||
@ -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 <antoine@bartuccio.fr>\n"
|
||||
"Language-Team: AE info <ae.info@utbm.fr>\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"
|
||||
|
||||
13
package-lock.json
generated
13
package-lock.json
generated
@ -10,6 +10,7 @@
|
||||
"license": "GPL-3.0-only",
|
||||
"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",
|
||||
@ -30,7 +31,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",
|
||||
@ -85,6 +85,12 @@
|
||||
"url": "https://github.com/sponsors/philsturgeon"
|
||||
}
|
||||
},
|
||||
"node_modules/@arendjr/text-clipper": {
|
||||
"name": "@jsr/arendjr__text-clipper",
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://npm.jsr.io/~/11/@jsr/arendjr__text-clipper/3.0.0.tgz",
|
||||
"integrity": "sha512-Uu3CYSvFrNdDkYKEaEKHAk0decaxVFlSSqf50Okte/9vJjO2rESzPF1ngQjS9H1aX45RIXRGMYOXJ/LPDFwUdQ=="
|
||||
},
|
||||
"node_modules/@babel/code-frame": {
|
||||
"version": "7.24.7",
|
||||
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.7.tgz",
|
||||
@ -4392,11 +4398,6 @@
|
||||
"jquery": ">=1.12.0 <5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/jquery.shorten": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jquery.shorten/-/jquery.shorten-1.0.0.tgz",
|
||||
"integrity": "sha512-49rJlpcyVI/Y2eQRwSexyz6l+fwTKfurO0XttXK4XnG9eQxIuE2Fb4rwNqnsnzStJ8M7ynlhH31fWE9P70B9rg=="
|
||||
},
|
||||
"node_modules/js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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,
|
||||
},
|
||||
],
|
||||
}),
|
||||
],
|
||||
|
||||
Loading…
Reference in New Issue
Block a user