dekun
97 lines
3.0 KiB
JavaScript
97 lines
3.0 KiB
JavaScript
(function (global) {
|
|
"use strict";
|
|
|
|
var PERIODS = ["day", "week", "month"];
|
|
|
|
function statsSegmentSelect() {
|
|
return document.getElementById("stats-segment-select");
|
|
}
|
|
|
|
function activeSegmentPanel() {
|
|
var sel = statsSegmentSelect();
|
|
if (!sel) return null;
|
|
var key = sel.value;
|
|
return document.querySelector(
|
|
'.stats-segment-panel[data-stats-segment="' + key + '"]'
|
|
);
|
|
}
|
|
|
|
function replaceStatsUrl(params) {
|
|
var q = new URLSearchParams(global.location.search);
|
|
Object.keys(params).forEach(function (k) {
|
|
if (params[k] == null || params[k] === "") q.delete(k);
|
|
else q.set(k, params[k]);
|
|
});
|
|
var qs = q.toString();
|
|
global.history.replaceState(
|
|
null,
|
|
"",
|
|
qs ? global.location.pathname + "?" + qs : global.location.pathname
|
|
);
|
|
}
|
|
|
|
function switchStatsPeriod(periodKey) {
|
|
var panel = activeSegmentPanel();
|
|
if (!panel) return;
|
|
var key = PERIODS.indexOf(periodKey) >= 0 ? periodKey : "day";
|
|
panel.querySelectorAll(".stats-period-pane").forEach(function (pane) {
|
|
var match = pane.getAttribute("data-stats-period") === key;
|
|
if (match) pane.removeAttribute("hidden");
|
|
else pane.setAttribute("hidden", "");
|
|
});
|
|
panel.querySelectorAll(".stats-period-tab").forEach(function (btn) {
|
|
var on = btn.getAttribute("data-stats-period") === key;
|
|
btn.classList.toggle("active", on);
|
|
btn.setAttribute("aria-selected", on ? "true" : "false");
|
|
});
|
|
replaceStatsUrl({ stats_period: key });
|
|
}
|
|
|
|
function switchStatsSegment() {
|
|
var sel = statsSegmentSelect();
|
|
if (!sel) return;
|
|
var key = sel.value;
|
|
document.querySelectorAll(".stats-segment-panel").forEach(function (p) {
|
|
p.style.display =
|
|
p.getAttribute("data-stats-segment") === key ? "block" : "none";
|
|
});
|
|
replaceStatsUrl({ stats_segment: key });
|
|
var period =
|
|
new URLSearchParams(global.location.search).get("stats_period") || "day";
|
|
switchStatsPeriod(period);
|
|
}
|
|
|
|
function bindPeriodTabs() {
|
|
document.querySelectorAll(".stats-period-tab").forEach(function (btn) {
|
|
if (btn.getAttribute("data-stats-bound") === "1") return;
|
|
btn.setAttribute("data-stats-bound", "1");
|
|
btn.addEventListener("click", function () {
|
|
switchStatsPeriod(btn.getAttribute("data-stats-period") || "day");
|
|
});
|
|
});
|
|
}
|
|
|
|
function initStatsFromUrl() {
|
|
var sel = statsSegmentSelect();
|
|
if (!sel) return;
|
|
bindPeriodTabs();
|
|
var url = new URLSearchParams(global.location.search);
|
|
var segKey = url.get("stats_segment");
|
|
if (
|
|
segKey &&
|
|
sel.querySelector('option[value="' + segKey.replace(/"/g, "") + '"]')
|
|
) {
|
|
sel.value = segKey;
|
|
}
|
|
switchStatsSegment();
|
|
var period = url.get("stats_period") || "day";
|
|
if (PERIODS.indexOf(period) < 0) period = "day";
|
|
switchStatsPeriod(period);
|
|
}
|
|
|
|
global.switchStatsSegment = switchStatsSegment;
|
|
global.switchStatsPeriod = switchStatsPeriod;
|
|
global.initStatsFromUrl = initStatsFromUrl;
|
|
global.initStatsSegmentFromUrl = initStatsFromUrl;
|
|
})(window);
|