drawer.mjs 3.93 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
import { getHandleElement, startDragging } from "./drawer_handle.mjs";
5

ransome1's avatar
ransome1 committed
6
7
8
const drawerContainer = document.getElementById("drawerContainer");
const navBtnFilter = document.getElementById("navBtnFilter");
const navBtnView = document.getElementById("navBtnView");
ransome1's avatar
ransome1 committed
9
const drawers = document.querySelectorAll("nav ul li a.drawerTrigger");
ransome1's avatar
ransome1 committed
10
11
12
13
14
15
16
17
18
19
20
21
22
23

if(userData.filterDrawer) {
  show(document.getElementById("navBtnFilter"), document.getElementById("navBtnFilter").getAttribute("data-drawer")).then(function(result) {
    console.log(result);
  }).catch(function(error) {
    handleError(error);
  });
} else if(userData.viewDrawer) {
  show(document.getElementById("navBtnView"), document.getElementById("navBtnView").getAttribute("data-drawer")).then(function(result) {
    console.log(result);
  }).catch(function(error) {
    handleError(error);
  });
}
24

25
document.getElementById("drawerClose").onclick = function() {
ransome1's avatar
ransome1 committed
26
  show(null, null, true).then(function(result) {
27
28
29
30
31
32
33
    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
34
35
document.getElementById("filterDrawer").addEventListener ("keydown", function () {
  if(event.key === "Escape") {
ransome1's avatar
ransome1 committed
36
    show(false, navBtnFilter.id, this.id).then(function(result) {
ransome1's avatar
ransome1 committed
37
38
39
40
41
42
43
44
      console.log(result);
    }).catch(function(error) {
      handleError(error);
    });
  }
});
document.getElementById("viewDrawer").addEventListener ("keydown", function () {
  if(event.key === "Escape") {
ransome1's avatar
ransome1 committed
45
    show(false, document.getElementById("navBtnView").id, this.id).then(function(result) {
ransome1's avatar
ransome1 committed
46
47
48
49
50
51
      console.log(result);
    }).catch(function(error) {
      handleError(error);
    });
  }
});
52
getHandleElement.addEventListener("mousedown", startDragging);
ransome1's avatar
ransome1 committed
53
navBtnFilter.onclick = function() {
ransome1's avatar
ransome1 committed
54
  show(this, this.getAttribute("data-drawer")).then(function(result) {
ransome1's avatar
ransome1 committed
55
56
57
58
59
60
61
62
    console.log(result);
  }).catch(function(error) {
    handleError(error);
  });
  // trigger matomo event
  if(userData.matomoEvents) _paq.push(["trackEvent", "Menu", "Click on filter"]);
}
navBtnView.onclick = function() {
ransome1's avatar
ransome1 committed
63
  show(this, this.getAttribute("data-drawer")).then(function(result) {
ransome1's avatar
ransome1 committed
64
65
66
67
68
69
70
    console.log(result);
  }).catch(function(error) {
    handleError(error);
  });
  // trigger matomo event
  if(userData.matomoEvents) _paq.push(["trackEvent", "Menu", "Click on view"]);
}
71

ransome1's avatar
ransome1 committed
72
export function show(button, drawer, close) {
73
74
75
76
77
  try {
    // close drawers and the container and persist it
    if(close) {
      drawers.forEach((item) => {
        item.classList.remove("is-highlighted");
ransome1's avatar
ransome1 committed
78
        drawerContainer.classList.remove("is-active");
79
80
81
        document.getElementById(item.getAttribute("data-drawer")).classList.remove("is-active");
        setUserData(item.getAttribute("data-drawer"), false);
      });
82
83
      return Promise.resolve("Success: Drawer closed");
    }
84
85
86
87
88
89
90
91
    // close open drawers, open the new one and persist it
    drawer = document.getElementById(drawer);
    if(drawer.classList.contains("is-active")) {
      drawerContainer.classList.remove("is-active");
      drawer.classList.remove("is-active");
      button.classList.remove("is-highlighted");
      setUserData(drawer.id, false);
      return Promise.resolve("Success: Drawer closed");
ransome1's avatar
ransome1 committed
92
    } else {
93
94
95
96
      drawerContainer.classList.add("is-active");
      drawers.forEach((item) => {
        item.classList.remove("is-highlighted");
        document.getElementById(item.getAttribute("data-drawer")).classList.remove("is-active");
ransome1's avatar
ransome1 committed
97
        setUserData(document.getElementById(item.getAttribute("data-drawer")).id, false);
98
99
100
101
102
      });
      drawer.classList.add("is-active");
      button.classList.add("is-highlighted");
      setUserData(drawer.id, true);
      return Promise.resolve("Success: Drawer opened");
ransome1's avatar
ransome1 committed
103
104
    }
  } catch(error) {
ransome1's avatar
ransome1 committed
105
    error.functionName = show.name;
ransome1's avatar
ransome1 committed
106
107
108
    return Promise.reject(error);
  }
}