DGNum/kadenios
17
0
Fork 0
Code Issues 12 Pull requests Projects Wiki Activity

Update js

Browse source
This commit is contained in:
Tom Hubrecht 2021-08-20 18:34:03 +02:00
parent 78f2b66594
commit d8b0885772
3 changed files with 83 additions and 89 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
elections/templates/elections/election_admin.html
View file

@ -5,24 +5,20 @@
{% block extra_head %} {% block extra_head %}
<script> <script>
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
var $modalButtons = document.querySelectorAll('.modal-button') || []; let mbs = _$('.modal-button');
$modalButtons.forEach($el => { mbs.forEach(b => {
$el.addEventListener('click', () => { b.addEventListener('click', () => {
var $target = document.getElementById($el.dataset.target); let f = _$('form', _id(b.dataset.target), false);
var $target_form = $target.querySelector("form");
var modal_title = '';
$target_form.action = $el.dataset.post_url;
$target.querySelector('.modal-card-title').innerHTML = $el.dataset.title;
if ($el.classList.contains('question')) { if (b.dataset.type == 'question') {
$target_form.querySelector('#id_text_fr').value = $el.dataset.q_fr || ''; _$('[name="text_fr"]', f, false).value = b.dataset.q_fr || '';
$target_form.querySelector('#id_text_en').value = $el.dataset.q_en || ''; _$('[name="text_en"]', f, false).value = b.dataset.q_en || '';
$target_form.querySelector('#id_type').value = $el.dataset.type || 'assentiment'; _$('[name="type"]', f, false).value = b.dataset.q_type || 'assentiment';
} else if ($el.classList.contains('option')) { } else if (b.dataset.type == 'option') {
$target_form.querySelector('#id_text_fr').value = $el.dataset.o_fr || ''; _$('[name="text_fr"]', f, false).value = b.dataset.o_fr || '';
$target_form.querySelector('#id_text_en').value = $el.dataset.o_en || ''; _$('[name="text_en"]', f, false).value = b.dataset.o_en || '';
$target_form.querySelector('#id_abbreviation').value = $el.dataset.abbr || ''; _$('[name="abbreviation"]', f, false).value = b.dataset.abbr || '';
} }
}); });
}); });
@ -244,7 +240,7 @@
</span> </span>
</a> </a>
<a class="tag is-outlined is-light is-info ml-1 modal-button question" data-post_url="{% url 'election.mod-question' q.pk %}" data-target="modal-question" data-type="{{ q.type }}" data-q_en="{{ q.text_en }}" data-q_fr="{{ q.text_fr }}" data-title="{% trans "Modifier la question" %}"> <a class="tag is-outlined is-light is-info ml-1 modal-button" data-post_url="{% url 'election.mod-question' q.pk %}" data-target="modal-question" data-q_type="{{ q.type }}" data-q_en="{{ q.text_en }}" data-q_fr="{{ q.text_fr }}" data-title="{% trans "Modifier la question" %}" data-type="question">
<span class="icon-text"> <span class="icon-text">
<span class="icon"> <span class="icon">
<i class="fas fa-edit"></i> <i class="fas fa-edit"></i>
@ -273,7 +269,7 @@
</span> </span>
</a> </a>
<a class="tag is-info is-light is-outlined has-tooltip-primary mb-0 modal-button option" data-tooltip="{% trans "Modifier" %}" data-post_url="{% url 'election.mod-option' o.pk %}" data-target="modal-option" data-o_en="{{ o.text_en }}" data-o_fr="{{ o.text_fr }}" data-abbr="{{ o.abbreviation }}" data-title="{% trans "Modifier l'option" %}"> <a class="tag is-info is-light is-outlined has-tooltip-primary mb-0 modal-button" data-tooltip="{% trans "Modifier" %}" data-post_url="{% url 'election.mod-option' o.pk %}" data-target="modal-option" data-o_en="{{ o.text_en }}" data-o_fr="{{ o.text_fr }}" data-abbr="{{ o.abbreviation }}" data-title="{% trans "Modifier l'option" %}" data-type="option">
<span class="icon"> <span class="icon">
<i class="fas fa-edit"></i> <i class="fas fa-edit"></i>
</span> </span>

23
elections/templates/elections/election_voters.html
View file

@ -2,27 +2,6 @@
{% load i18n markdown %} {% load i18n markdown %}
{% block extra_head %}
<script>
document.addEventListener('DOMContentLoaded', () => {
const $del_modal = document.getElementById('modal-delete');
const $del_title = $del_modal.querySelector('.modal-card-title');
const $del_form = $del_modal.querySelector('form');
$del_buttons = document.querySelectorAll('.modal-button.delete-vote')
$del_buttons.forEach($del => {
$del.addEventListener('click', () => {
$del_form.action = $del.dataset.post_url;
$del_title.innerHTML = $del.dataset.tooltip;
});
});
});
</script>
{% endblock %}
{% block content %} {% block content %}
<div class="level"> <div class="level">
@ -111,7 +90,7 @@
{% if can_delete %} {% if can_delete %}
<td class="has-text-centered"> <td class="has-text-centered">
{% blocktrans with v_name=v.full_name asvar v_delete %}Supprimer le vote de {{ v_name }}{% endblocktrans %} {% blocktrans with v_name=v.full_name asvar v_delete %}Supprimer le vote de {{ v_name }}{% endblocktrans %}
<a class="tag is-danger has-tooltip-primary modal-button delete-vote" data-target="modal-delete" data-tooltip="{{ v_delete }}" data-post_url="{% url 'election.delete-vote' election.pk v.pk forloop.counter %}"> <a class="tag is-danger has-tooltip-primary modal-button delete-vote" data-target="modal-delete" data-tooltip="{{ v_delete }}" data-post_url="{% url 'election.delete-vote' election.pk v.pk forloop.counter %}" data-title="{{ v_delete }}">
<span class="icon"> <span class="icon">
<i class="fas fa-user-minus"></i> <i class="fas fa-user-minus"></i>
</span> </span>

117
shared/templates/base.html
View file

@ -17,108 +17,124 @@
<link rel="stylesheet" href="{% static 'vendor/font-awesome/css/font-awesome.min.css' %}"> <link rel="stylesheet" href="{% static 'vendor/font-awesome/css/font-awesome.min.css' %}">
<link rel="stylesheet" href="{% static 'vendor/font-awesome/css/solid.min.css' %}"> <link rel="stylesheet" href="{% static 'vendor/font-awesome/css/solid.min.css' %}">
{% block extra_head %}{% endblock extra_head %}
<script> <script>
const _$ = (s, e = document, a = true) => {
let r = e.querySelectorAll(s) || [];
if (!a) {
return r.item(0);
}
return r;
};
const _id = s => document.getElementById(s);
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
// Delete notifications // Delete notifications
(document.querySelectorAll('.notification .delete') || []).forEach(($delete) => { _$('.notification .delete').forEach(d => {
var $notification = $delete.parentNode; let n = d.parentNode;
$delete.addEventListener('click', () => { d.addEventListener('click', () => {
$notification.parentNode.removeChild($notification); n.parentNode.removeChild(n);
}); });
}); });
// Interact with dropdowns // Interact with dropdowns
var $dropdowns = document.querySelectorAll('.dropdown:not(.is-hoverable)') || []; let ds = _$('.dropdown:not(.is-hoverable)');
$dropdowns.forEach(($dropdown) => { ds.forEach(d => {
$dropdown.addEventListener('click', (event) => { d.addEventListener('click', e => {
event.stopPropagation(); e.stopPropagation();
$dropdown.classList.toggle('is-active'); d.classList.toggle('is-active');
}); });
}); });
document.addEventListener('click', () => { document.addEventListener('click', () => {
$dropdowns.forEach(($dropdown) => { ds.forEach(d => {
$dropdown.classList.remove('is-active'); d.classList.remove('is-active');
}); });
}); });
// Interact with modals // Interact with modals
var $modals = document.querySelectorAll('.modal') || []; let ms = _$('.modal');
var $modalButtons = document.querySelectorAll('.modal-button') || []; let mbs = _$('.modal-button');
var $modalCloses = document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button-close') || []; let mcs = _$('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button-close');
mbs.forEach(b => {
b.addEventListener('click', () => {
let m = _id(b.dataset.target);
if ('post_url' in b.dataset) {
_$('form', m, false).action = b.dataset.post_url;
};
if ('title' in b.dataset) {
_$('.modal-card-title', m, false).innerHTML = b.dataset.title;
};
$modalButtons.forEach(function($el) {
$el.addEventListener('click', function() {
var target = $el.dataset.target;
var $target = document.getElementById(target);
document.documentElement.classList.add('is-clipped'); document.documentElement.classList.add('is-clipped');
$target.classList.add('is-active'); m.classList.add('is-active');
}); });
}); });
$modalCloses.forEach(function($el) { mcs.forEach(d => {
$el.addEventListener('click', (event) => { d.addEventListener('click', () => {
document.documentElement.classList.remove('is-clipped'); document.documentElement.classList.remove('is-clipped');
$modals.forEach(function($el) { ms.forEach(m => {
$el.classList.remove('is-active'); m.classList.remove('is-active');
}); });
}); });
}); });
document.addEventListener('keydown', (event) => { document.addEventListener('keydown', ev => {
var e = event || window.event; var e = ev || window.event;
if (e.keyCode === 27) { if (e.keyCode === 27) {
$dropdowns.forEach(($dropdown) => { ds.forEach(d => {
$dropdown.classList.remove('is-active'); d.classList.remove('is-active');
}); });
document.documentElement.classList.remove('is-clipped'); document.documentElement.classList.remove('is-clipped');
$modals.forEach(function($el) {
$el.classList.remove('is-active'); ms.forEach(m => {
m.classList.remove('is-active');
}); });
} }
}); });
// Language selection // Language selection
var $langs = document.querySelectorAll('.dropdown-item.lang-selector') || []; let ls = _$('.dropdown-item.lang-selector');
$langs.forEach($lang => { ls.forEach(l => {
$lang.addEventListener('click', () => { l.addEventListener('click', () => {
document.getElementById('lang-input').value = $lang.dataset.lang; _id('lang-input').value = l.dataset.lang;
document.getElementById('lang-form').submit(); _id('lang-form').submit();
}); });
}); });
// Disable button after form submission // Disable button after form submission
var $forms = document.querySelectorAll('form'); _$('form').forEach(f => {
f.addEventListener('submit', () => {
$forms.forEach($form => { _$('button[type=submit]', f).forEach(b => {
const $submit = $form.querySelector('button[type=submit]'); b.classList.add('is-loading');
setTimeout(() => {
$form.addEventListener('submit', () => { b.classList.remove('is-loading');
$submit.classList.add('is-loading'); }, 1000);
});
}); });
}); });
// Scroll to top button // Scroll to top button
$up_btn = document.getElementById('scroll-button'); let up = _id('scroll-button');
if (document.documentElement.scrollTop >= 100) { if (document.documentElement.scrollTop >= 100) {
$up_btn.classList.remove('is-hidden'); up.classList.remove('is-hidden');
} }
window.onscroll = () => { window.onscroll = () => {
if (document.documentElement.scrollTop >= 100) { if (document.documentElement.scrollTop >= 100) {
$up_btn.classList.remove('is-hidden'); up.classList.remove('is-hidden');
} else { } else {
$up_btn.classList.add('is-hidden'); up.classList.add('is-hidden');
} }
} }
$up_btn.addEventListener('click', () => { up.addEventListener('click', () => {
window.scrollTo({ window.scrollTo({
top: 0, top: 0,
behavior: 'smooth', behavior: 'smooth',
@ -128,6 +144,9 @@
}); });
</script> </script>
{% block extra_head %}{% endblock extra_head %}
</head> </head>
<body> <body>