aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--assets_src/js/lib/dom.js32
-rw-r--r--assets_src/js/list.js29
-rw-r--r--views/includes/list_gril.html14
3 files changed, 68 insertions, 7 deletions
diff --git a/assets_src/js/lib/dom.js b/assets_src/js/lib/dom.js
index 33845af..bfbeea7 100644
--- a/assets_src/js/lib/dom.js
+++ b/assets_src/js/lib/dom.js
@@ -5,10 +5,42 @@ export function ready(fn) {
5} 5}
6 6
7export function closest(el, fn) { 7export function closest(el, fn) {
8 if (!el) {
9 return null;
10 }
8 while (el) { 11 while (el) {
9 if (fn(el)) { 12 if (fn(el)) {
10 return el; 13 return el;
11 } 14 }
12 el = el.parentNode 15 el = el.parentNode
13 } 16 }
17 return null;
18}
19
20export function next(el, fn) {
21 if (!el) {
22 return null;
23 }
24 el = el.nextSibling;
25 while (el) {
26 if (fn(el)) {
27 return el;
28 }
29 el = el.nextSibling;
30 }
31 return null;
32}
33
34export function previous(el, fn) {
35 if (!el) {
36 return null;
37 }
38 el = el.previousSibling;
39 while (el) {
40 if (fn(el)) {
41 return el;
42 }
43 el = el.previousSibling;
44 }
45 return null;
14} 46}
diff --git a/assets_src/js/list.js b/assets_src/js/list.js
index 413f517..8246950 100644
--- a/assets_src/js/list.js
+++ b/assets_src/js/list.js
@@ -19,11 +19,40 @@ async function resultClicked(grilId) {
19 document.getElementById('gril-list').innerHTML += response; 19 document.getElementById('gril-list').innerHTML += response;
20} 20}
21 21
22function listButtonHandler(e) {
23 let liFilter = x => x.tagName && x.tagName.toLowerCase() === 'li';
24 let item = dom.closest(e.target, liFilter);
25 let pItem = dom.previous(item, liFilter),
26 nItem = dom.next(dom.next(item, liFilter), liFilter);
27 switch (e.target.classList[0]) {
28 case 'gril-sort-up':
29 //TODO: backend
30 item.parentNode.insertBefore(item, pItem);
31 break;
32 case 'gril-sort-down':
33 //TODO: backend
34 if (nItem) {
35 item.parentNode.insertBefore(item, nItem);
36 } else {
37 item.parentNode.appendChild(item);
38 }
39 break;
40 case 'gril-delete':
41 //TODO: backend
42 item.parentNode.removeChild(item);
43 break;
44 }
45}
46
22function main() { 47function main() {
23 let is = new search.InstantSearch( 48 let is = new search.InstantSearch(
24 document.getElementById('gril-add-search'), 49 document.getElementById('gril-add-search'),
25 document.getElementById('search-results')); 50 document.getElementById('search-results'));
26 is.resultClicked = resultClicked; 51 is.resultClicked = resultClicked;
52 document.getElementById('gril-list').addEventListener(
53 'click',
54 listButtonHandler,
55 true);
27} 56}
28 57
29dom.ready(main); 58dom.ready(main);
diff --git a/views/includes/list_gril.html b/views/includes/list_gril.html
index f719dae..57694aa 100644
--- a/views/includes/list_gril.html
+++ b/views/includes/list_gril.html
@@ -15,19 +15,19 @@
15 <div class="hide-on-med-and-up"> 15 <div class="hide-on-med-and-up">
16 <div class="row list-controls valign-wrapper"> 16 <div class="row list-controls valign-wrapper">
17 <div class="col s6 left-align"> 17 <div class="col s6 left-align">
18 <i class="material-icons grey-text" onClick="">keyboard_arrow_up</i> 18 <i class="gril-sort-up material-icons grey-text">keyboard_arrow_up</i>
19 <i class="material-icons grey-text" onClick="">keyboard_arrow_down</i> 19 <i class="gril-sort-down material-icons grey-text">keyboard_arrow_down</i>
20 </div> 20 </div>
21 <div class="col s4 left-align"> 21 <div class="col s4 left-align">
22 <i class="hide-on-med-and-up material-icons delete-icon grey-text" onClick="">delete</i> 22 <i class="gril-delete hide-on-med-and-up material-icons delete-icon grey-text">delete</i>
23 </div> 23 </div>
24 </div> 24 </div>
25 </div> 25 </div>
26 <div class="hide-on-small-only"> 26 <div class="hide-on-small-only">
27 <div class="valign-wrapper"> 27 <div class="valign-wrapper">
28 <i class="medium material-icons grey-text" onClick="">keyboard_arrow_up</i> 28 <i class="gril-sort-up medium material-icons grey-text">keyboard_arrow_up</i>
29 <i class="medium material-icons grey-text" onClick="">keyboard_arrow_down</i> 29 <i class="gril-sort-down medium material-icons grey-text">keyboard_arrow_down</i>
30 <i class="material-icons grey-text" onClick="">delete</i> 30 <i class="gril-delete material-icons grey-text">delete</i>
31 </div> 31 </div>
32 </div> 32 </div>
33 </div> 33 </div>
@@ -35,4 +35,4 @@
35 </div> 35 </div>
36 </div> 36 </div>
37</li> 37</li>
38{{ end }} \ No newline at end of file 38{{ end }}