]> BookStack Code Mirror - bookstack/blob - resources/assets/js/components/entity-selector.js
Corrected the keys for okta auth
[bookstack] / resources / assets / js / components / entity-selector.js
1
2 class EntitySelector {
3
4     constructor(elem) {
5         this.elem = elem;
6         this.search = '';
7         this.lastClick = 0;
8
9         let entityTypes = elem.hasAttribute('entity-types') ? elem.getAttribute('entity-types') : 'page,book,chapter';
10         this.searchUrl = window.baseUrl(`/ajax/search/entities?types=${encodeURIComponent(entityTypes)}`);
11
12         this.input = elem.querySelector('[entity-selector-input]');
13         this.searchInput = elem.querySelector('[entity-selector-search]');
14         this.loading = elem.querySelector('[entity-selector-loading]');
15         this.resultsContainer = elem.querySelector('[entity-selector-results]');
16
17         this.elem.addEventListener('click', this.onClick.bind(this));
18
19         let lastSearch = 0;
20         this.searchInput.addEventListener('input', event => {
21             lastSearch = Date.now();
22             this.showLoading();
23             setTimeout(() => {
24                 if (Date.now() - lastSearch < 199) return;
25                 this.searchEntities(this.searchInput.value);
26             }, 200);
27         });
28         this.searchInput.addEventListener('keydown', event => {
29             if (event.keyCode === 13) event.preventDefault();
30         });
31
32         this.showLoading();
33         this.initialLoad();
34     }
35
36     showLoading() {
37         this.loading.style.display = 'block';
38         this.resultsContainer.style.display = 'none';
39     }
40
41     hideLoading() {
42         this.loading.style.display = 'none';
43         this.resultsContainer.style.display = 'block';
44     }
45
46     initialLoad() {
47         window.$http.get(this.searchUrl).then(resp => {
48             this.resultsContainer.innerHTML = resp.data;
49             this.hideLoading();
50         })
51     }
52
53     searchEntities(searchTerm) {
54         this.input.value = '';
55         let url = this.searchUrl + `&term=${encodeURIComponent(searchTerm)}`;
56         window.$http.get(url).then(resp => {
57             this.resultsContainer.innerHTML = resp.data;
58             this.hideLoading();
59         });
60     }
61
62     isDoubleClick() {
63         let now = Date.now();
64         let answer = now - this.lastClick < 300;
65         this.lastClick = now;
66         return answer;
67     }
68
69     onClick(event) {
70         let t = event.target;
71         console.log('click', t);
72
73         if (t.matches('.entity-list-item  *')) {
74             event.preventDefault();
75             event.stopPropagation();
76             let item = t.closest('[data-entity-type]');
77             this.selectItem(item);
78         } else if (t.matches('[data-entity-type]')) {
79             this.selectItem(t)
80         }
81
82     }
83
84     selectItem(item) {
85         let isDblClick = this.isDoubleClick();
86         let type = item.getAttribute('data-entity-type');
87         let id = item.getAttribute('data-entity-id');
88         let isSelected = !item.classList.contains('selected') || isDblClick;
89
90         this.unselectAll();
91         this.input.value = isSelected ? `${type}:${id}` : '';
92
93         if (!isSelected) window.$events.emit('entity-select-change', null);
94         if (isSelected) {
95             item.classList.add('selected');
96             item.classList.add('primary-background');
97         }
98         if (!isDblClick && !isSelected) return;
99
100         let link = item.querySelector('.entity-list-item-link').getAttribute('href');
101         let name = item.querySelector('.entity-list-item-name').textContent;
102         let data = {id: Number(id), name: name, link: link};
103
104         if (isDblClick) window.$events.emit('entity-select-confirm', data);
105         if (isSelected) window.$events.emit('entity-select-change', data);
106     }
107
108     unselectAll() {
109         let selected = this.elem.querySelectorAll('.selected');
110         for (let i = 0, len = selected.length; i < len; i++) {
111             selected[i].classList.remove('selected');
112             selected[i].classList.remove('primary-background');
113         }
114     }
115
116 }
117
118 module.exports = EntitySelector;