drawer.mjs 4.85 KB
Newer Older
ransome1's avatar
ransome1 committed
1
"use strict";
2
3
import { setUserData, userData, handleError } from "../render.js";
import { _paq } from "./matomo.mjs";
ransome1's avatar
ransome1 committed
4
5
import { navBtns } from "./navigation.mjs";
import { getHandleElement, startDragging } from "./drawer_handle.mjs";
6

ransome1's avatar
ransome1 committed
7
8
9
10
11
12
13
14
const viewDrawer = document.getElementById("viewDrawer");
const filterDrawer = document.getElementById("filterDrawer");
const drawerContainer = document.getElementById("drawerContainer");
const todoTable = document.getElementById("todoTable");
const todoTableSearchContainer = document.getElementById("todoTableSearchContainer");
const navBtnFilter = document.getElementById("navBtnFilter");
const navBtnView = document.getElementById("navBtnView");
const drawers = document.querySelectorAll(".drawer");
15

ransome1's avatar
ransome1 committed
16
17
18
19
20
21
22
23
24
25
26
document.querySelectorAll(".drawerClose").forEach(function(drawerClose) {
  drawerClose.onclick = function() {
    showDrawer(false).then(function(result) {
      console.log(result);
    }).catch(function(error) {
      handleError(error);
    });
    // trigger matomo event
    if(userData.matomoEvents) _paq.push(["trackEvent", "Drawer", "Click on close button"])
  }
})
ransome1's avatar
ransome1 committed
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
document.getElementById("filterDrawer").addEventListener ("keydown", function () {
  if(event.key === "Escape") {
    showDrawer(false, navBtnFilter.id, this.id).then(function(result) {
      console.log(result);
    }).catch(function(error) {
      handleError(error);
    });
  }
});
document.getElementById("viewDrawer").addEventListener ("keydown", function () {
  if(event.key === "Escape") {
    showDrawer(false, document.getElementById("navBtnView").id, this.id).then(function(result) {
      console.log(result);
    }).catch(function(error) {
      handleError(error);
    });
  }
});
45
getHandleElement.addEventListener("mousedown", startDragging);
ransome1's avatar
ransome1 committed
46
navBtnFilter.onclick = function() {
47
48
49
  let toggle = true;
  if(document.getElementById("drawerContainer").classList.contains("is-active")) toggle = false;
  showDrawer(toggle, "navBtnFilter", "filterDrawer").then(function(result) {
ransome1's avatar
ransome1 committed
50
51
52
53
54
55
56
57
    console.log(result);
  }).catch(function(error) {
    handleError(error);
  });
  // trigger matomo event
  if(userData.matomoEvents) _paq.push(["trackEvent", "Menu", "Click on filter"]);
}
navBtnView.onclick = function() {
58
59
60
  let toggle = true;
  if(document.getElementById("drawerContainer").classList.contains("is-active")) toggle = false;
  showDrawer(toggle, this.id, viewDrawer.id).then(function(result) {
ransome1's avatar
ransome1 committed
61
62
63
64
65
66
67
68
    console.log(result);
  }).catch(function(error) {
    handleError(error);
  });
  // trigger matomo event
  if(userData.matomoEvents) _paq.push(["trackEvent", "Menu", "Click on view"]);
}
// open filter drawer if it has been persisted
69
70
71
72
73
74
showDrawer(userData.filterDrawer, "navBtnFilter", "filterDrawer").then(function(result) {
  console.log(result);
}).catch(function(error) {
  handleError(error);
});
export function showDrawer(variable, buttonId, drawerId) {
ransome1's avatar
ransome1 committed
75
  try {
76
77
78
79
80
81
82
83
84
85

    if(!variable && !buttonId && !drawerId) {
      drawerContainer.classList.remove("is-active");
      filterDrawer.classList.remove("is-active");
      viewDrawer.classList.remove("is-active");
      navBtnFilter.classList.remove("is-highlighted");
      navBtnView.classList.remove("is-highlighted");
      setUserData("filterDrawer", false);
      return Promise.resolve("Success: Drawer closed");
    }
ransome1's avatar
ransome1 committed
86
87
    switch (drawerId) {
      case "viewDrawer":
88
        // highlight persisted selection in dropdown
ransome1's avatar
ransome1 committed
89
90
91
92
93
94
95
96
97
98
99
100
101
102
        Array.from(document.getElementById("viewSelectSortBy").options).forEach(function(item) {
          if(item.value===userData.sortBy) item.selected = true
        });
        break;
    }
    buttonId = document.getElementById(buttonId);
    drawerId = document.getElementById(drawerId);
    // always hide the drawer container first
    drawerContainer.classList.remove("is-active");
    // next show or hide the single drawers
    switch(variable) {
      case true:
        buttonId.classList.add("is-highlighted");
        drawerId.classList.add("is-active");
103
        drawerContainer.classList.add("is-active");
ransome1's avatar
ransome1 committed
104
105
106
107
108
109
110
111
112
113
114
      break;
      case false:
        drawers.forEach(function(drawer) {
          drawer.classList.remove("is-active");
        });
        navBtns.forEach(function(navBtn) {
          navBtn.classList.remove("is-highlighted");
        });
        drawerContainer.classList.remove("is-active");
      break;
    }
115
    setUserData(drawerId.id, variable);
ransome1's avatar
ransome1 committed
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
    // persist filter drawer state
    if(drawerId && drawerId.classList.contains("is-active")) {
      // if the drawer is open the table needs a fixed width to overlap the viewport
      todoTable.style.minWidth = "45em";
      todoTableSearchContainer.style.minWidth = "45em";
    } else {
      // undo what has been done
      todoTable.style.minWidth = "auto";
      todoTableSearchContainer.style.minWidth = "auto";
    }
    return Promise.resolve("Success: Drawer toggled");
  } catch(error) {
    error.functionName = showDrawer.name;
    return Promise.reject(error);
  }
}