imacat/mia-accounting-django
1
0
Fork 0
Code Issues Pull Requests Projects Releases 4 Wiki Activity

Replaced parsing the HTML element ID with the HTML custom data attributes in the JavaScripts.

Browse Source
This commit is contained in:
依瑪貓
2020-08-07 22:31:08 +08:00
parent d6e68717fd
commit 09c1f453f4
10 changed files with 81 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
mia_core/static/mia_core/js/period-chooser.js
View File

@ -25,7 +25,7 @@
$(function () {
$(".period-tab")
.on("click", function () {
switchPeriodTab(this);
switchPeriodTab($(this));
});
$("#button-period-day")
.on("click", function () {
@ -86,24 +86,13 @@ function monthPickerChanged(newDate) {
/**
* Switch the period chooser to tab.
*
* @param {HTMLElement} tab the navigation tab corresponding to a type
* of period
* @param {jQuery} tab the navigation tab corresponding to a type
* of period
* @private
*/
function switchPeriodTab(tab) {
const tabName = tab.id.substr("period-tab-".length);
$(".period-content").each(function () {
if (this.id === "period-content-" + tabName) {
this.classList.remove("d-none");
} else {
this.classList.add("d-none");
}
});
$(".period-tab").each(function () {
if (this.id === tab.id) {
this.classList.add("active");
} else {
this.classList.remove("active");
}
});
$(".period-content").addClass("d-none");
$("#period-content-" + tab.data("tab")).removeClass("d-none");
$(".period-tab").removeClass("active");
tab.addClass("active");
}

8
mia_core/templates/mia_core/include/period-chooser.html
View File

@ -42,16 +42,16 @@ First written: 2020/7/10
<!-- Modal body -->
<ul class="nav nav-tabs">
<li class="nav-item">
<span id="period-tab-month" class="period-tab nav-link active">{{ _("Month")|force_escape }}</span>
<span class="period-tab nav-link active" data-tab="month">{{ _("Month")|force_escape }}</span>
</li>
<li class="nav-item">
<span id="period-tab-year" class="period-tab nav-link">{{ _("Year")|force_escape }}</span>
<span class="period-tab nav-link" data-tab="year">{{ _("Year")|force_escape }}</span>
</li>
<li class="nav-item">
<span id="period-tab-day" class="period-tab nav-link">{{ _("Day")|force_escape }}</span>
<span class="period-tab nav-link" data-tab="day">{{ _("Day")|force_escape }}</span>
</li>
<li class="nav-item">
<span id="period-tab-custom" class="period-tab nav-link">{{ _("Custom")|force_escape }}</span>
<span class="period-tab nav-link" data-tab="custom">{{ _("Custom")|force_escape }}</span>
</li>
</ul>
<div id="period-content-month" class="period-content modal-body">