view.mjs 6.21 KB
Newer Older
1
"use strict";
2
import { userData, setUserData, handleError, startBuilding, translations, resetModal } from "../render.js";
3
import { _paq } from "./matomo.mjs";
4
5

const html = document.getElementById("html");
6
const body = document.getElementById("body");
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const showCompleted = document.getElementById("showCompleted");
const showDueIsFuture = document.getElementById("showDueIsFuture");
const showDueIsPast = document.getElementById("showDueIsPast");
const showDueIsToday = document.getElementById("showDueIsToday");
const showHidden = document.getElementById("showHidden");
const sortBy = document.getElementById("sortBy");
const sortByContexts = document.getElementById("sortByContexts");
const sortByDueDate = document.getElementById("sortByDueDate");
const sortByPriority = document.getElementById("sortByPriority");
const sortByProjects = document.getElementById("sortByProjects");
const sortCompletedLast = document.getElementById("sortCompletedLast");
const toggleTray = document.getElementById("toggleTray");
const viewHeadlineAppView = document.getElementById("viewHeadlineAppView");
const viewHeadlineTodoList = document.getElementById("viewHeadlineTodoList");
21
const viewHeadlineFilterList = document.getElementById("viewHeadlineFilterList");
22
23
24
25
26
27
28
29
30
const viewSelectSortBy = document.getElementById("viewSelectSortBy");
const viewToggleCompactView = document.getElementById("viewToggleCompactView");
const viewToggleDueIsFuture = document.getElementById("viewToggleDueIsFuture");
const viewToggleDueIsPast = document.getElementById("viewToggleDueIsPast");
const viewToggleDueIsToday = document.getElementById("viewToggleDueIsToday");
const viewToggles = document.querySelectorAll('.viewToggle');
const viewToggleShowCompleted = document.getElementById("viewToggleShowCompleted");
const viewToggleShowHidden = document.getElementById("viewToggleShowHidden");
const viewToggleSortCompletedLast = document.getElementById("viewToggleSortCompletedLast");
31
const viewToggleZoom = document.getElementById("viewToggleZoom");
32
33
const zoomRangePicker = document.getElementById("zoomRangePicker");
const zoomUndo = document.getElementById("zoomUndo");
34
35
36
37
const showEmptyFilters = document.getElementById("showEmptyFilters");
const viewToggleShowEmptyFilters = document.getElementById("viewToggleShowEmptyFilters");
const compactView = document.getElementById("compactView");

38
39
40
41
42
43
44
sortBy.innerHTML = translations.sortBy;
sortByContexts.innerHTML = translations.contexts;
sortByDueDate.innerHTML = translations.dueDate;
sortByPriority.innerHTML = translations.priority;
sortByProjects.innerHTML = translations.projects;
viewHeadlineAppView.innerHTML = translations.viewHeadlineAppView;
viewHeadlineTodoList.innerHTML = translations.viewHeadlineTodoList;
45
viewHeadlineFilterList.innerHTML = translations.viewHeadlineFilterList;
46
47
48
49
50
51
52
viewToggleDueIsFuture.innerHTML = translations.dueFuture;
viewToggleDueIsPast.innerHTML = translations.duePast;
viewToggleDueIsToday.innerHTML = translations.dueToday;
viewToggleShowCompleted.innerHTML = translations.completedTodos;
viewToggleShowHidden.innerHTML = translations.hiddenTodos;
viewToggleSortCompletedLast.innerHTML = translations.sortCompletedLast;
viewToggleCompactView.innerHTML = translations.compactView;
53
54
55
zoomRangePicker.innerHTML = translations.zoomRangePicker;
viewToggleZoom.innerHTML = translations.viewToggleZoom;
viewToggleShowEmptyFilters.innerHTML = translations.viewToggleShowEmptyFilters;
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

viewSelectSortBy.onchange = async function() {
  if(this.value) {
    await setUserData("sortBy", this.value);
    startBuilding();
    resetModal().then(function(result) {
      console.log(result);
    }).catch(function(error) {
      handleError(error);
    });
    // trigger matomo event
    if(userData.matomoEvents) _paq.push(["trackEvent", "View-Drawer", "Sort by setting changed to: " + this.value]);
  }
}
zoomRangePicker.onchange = function() {
71
72
  const value = this.value;
  zoom(value).then(response => {
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
    console.log(response);
    // trigger matomo event
    if(userData.matomoEvents) _paq.push(["trackEvent", "View-Drawer", "Zoom ranger dragged"]);
  }).catch(error => {
    handleError(error);
  });
}
zoomUndo.onclick = function() {
  zoom(100).then(response => {
    console.log(response);
    // trigger matomo event
    if(userData.matomoEvents) _paq.push(["trackEvent", "View-Drawer", "Click on zoom undo"]);
  }).catch(error => {
    handleError(error);
  });
};
viewToggles.forEach(function(viewToggle) {
  viewToggle.onclick = function() {
    toggle(this.id).then(response => {
      console.log(response);
      // trigger matomo event
      if(userData.matomoEvents) _paq.push(["trackEvent", "View-Drawer", "Toggle " + this.id + " set to: " + this.value]);
    }).catch(error => {
      handleError(error);
    });
  }
});

101
102
103
104
105
106
107
108
109
110
111
// set the toggles in view sidebar
showCompleted.checked = userData.showCompleted;
sortCompletedLast.checked = userData.sortCompletedLast;
showHidden.checked = userData.showHidden;
showDueIsToday.checked = userData.showDueIsToday;
showDueIsFuture.checked = userData.showDueIsFuture;
showDueIsPast.checked = userData.showDueIsPast;
toggleTray.checked = userData.tray;
compactView.checked = userData.compactView;
showEmptyFilters.checked = userData.showEmptyFilters;

112
113
function zoom(zoom) {
  try {
114
115
    html.style.zoom = zoom + "%";
    document.getElementById("zoomStatus").innerHTML = zoom + "%";
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
    zoomRangePicker.value = zoom;
    // persist zoom setting
    setUserData("zoom", zoom);
    return Promise.resolve("Info: Zoom set to " + zoom + "%");
  } catch (error) {
    error.functionName = zoom.name;
    return Promise.reject(error);
  }
}
function toggle(toggleName, variable) {
  try {
    const toggle = document.getElementById(toggleName);
    if(userData[toggle.id]==false || variable) {
      userData[toggle.id] = true;
    } else {
      userData[toggle.id] = false;
    }
    if(toggle.id==="compactView" && userData[toggle.id]) {
      body.classList.add("compact");
    } else if(toggle.id==="compactView" && !userData[toggle.id]) {
      body.classList.remove("compact");
    } else {
      startBuilding();
    }
    setUserData(toggle.id, userData[toggle.id]);
141
    return Promise.resolve("Success: " + toggle.id + " set to: " + userData[toggle.id]);
142
143
144
145
146
147
  } catch(error) {
    error.functionName = toggle.name;
    return Promise.reject(error);
  }
}
export { toggle };