search.mjs 2.31 KB
Newer Older
1
"use strict";
ransome1's avatar
ransome1 committed
2
3
import { translations, startBuilding, handleError, userData } from "../render.js";
import { addTodo } from "./todos.mjs";
4
5

const todoTableSearch = document.getElementById("todoTableSearch");
ransome1's avatar
ransome1 committed
6
7
const todoTableSearchAddTodo = document.getElementById("todoTableSearchAddTodo");
const todoTableSearchContainer = document.getElementById("todoTableSearchContainer");
8

ransome1's avatar
ransome1 committed
9
todoTableSearchLabel.innerHTML = translations.todoTxtSyntax;
10
11

todoTableSearch.addEventListener("input", debounce(function() {
ransome1's avatar
ransome1 committed
12
13
14
15
16
17
  if(this.value) {
    todoTableSearchAddTodo.classList.add("is-active");
  } else {
    todoTableSearchAddTodo.classList.remove("is-active");
  }
  startBuilding();
18
19
}, 250));

ransome1's avatar
ransome1 committed
20
21
22
23
24
25
26
27
28
29
30
31
32
todoTableSearch.onfocus = function() {
  if(this.value) {
    todoTableSearchAddTodo.classList.add("is-active");
  } else {
    todoTableSearchAddTodo.classList.remove("is-active");
  }
  todoTableSearchContainer.classList.add("is-focused");
}

todoTableSearch.onblur = function() {
  todoTableSearchContainer.classList.remove("is-focused");
}

33
34
35
36
37
38
39
// shortcuts for search input field
todoTableSearch.addEventListener("keyup", function () {
  if(event.key === "Escape") todoTableSearch.blur();
});

window.addEventListener("keyup", function () {
  // find todo
40
  if(event.key==="f" && !document.getElementById("modalForm").classList.contains("is-active") && (document.activeElement.id!="todoTableSearch" && document.activeElement.id!="filterContextInput" && document.activeElement.id!="modalFormInput")) {
41
42
43
44
    todoTableSearch.focus();
  }
});

ransome1's avatar
ransome1 committed
45
46
47
48
49
50
51
52
53
54
55
56
todoTableSearchAddTodo.onclick = function() {
  addTodo(todoTableSearch.value).then(response => {
    console.log(response);
    document.getElementById("todoTableSearch").value = null;
    document.getElementById("todoTableSearch").focus();
    // trigger matomo event
    if(userData.matomoEvents) _paq.push(["trackEvent", "Search", "Click on Add as new todo"]);
  }).catch(error => {
    handleError(error);
  });
}

57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
// https://davidwalsh.name/javascript-debounce-function
function debounce(func, wait, immediate) {
	let timeout;
	return function() {
		let
      context = this,
      args = arguments;
		let later = function() {
			timeout = null;
			if (!immediate) func.apply(context, args);
		};
		let callNow = immediate && !timeout;
		clearTimeout(timeout);
		timeout = setTimeout(later, wait);
		if (callNow) func.apply(context, args);
	};
}