|
1 | | -function wait(ms = 0) { |
2 | | - return new Promise(resolve => setTimeout(resolve, ms)); |
3 | | -} |
4 | | - |
5 | | -async function destroyPopup(popup) { |
6 | | - popup.classList.remove('open'); |
7 | | - await wait(1000); |
8 | | - // remove the popup entirely! |
9 | | - popup.remove(); |
10 | | - /* eslint-disable no-param-reassign */ |
11 | | - popup = null; |
12 | | - /* eslint-enable no-param-reassign */ |
13 | | -} |
14 | | - |
15 | | -function ask(options) { |
16 | | - return new Promise(async function(resolve) { |
17 | | - // First we need to create a popup with all the fields in it |
18 | | - const popup = document.createElement('form'); |
19 | | - popup.classList.add('popup'); |
20 | | - popup.insertAdjacentHTML( |
21 | | - 'afterbegin', |
22 | | - `<fieldset> |
23 | | - <label>${options.title}</label> |
24 | | - <input type="text" name="input"/> |
25 | | - <button type="submit">Submit</button> |
26 | | - </fieldset> |
27 | | - ` |
28 | | - ); |
29 | | - |
30 | | - // check if they want a cancel button |
31 | | - if (options.cancel) { |
32 | | - const skipButton = document.createElement('button'); |
33 | | - skipButton.type = 'button'; |
34 | | - skipButton.textContent = 'Cancel'; |
35 | | - console.log(popup.firstChild); |
36 | | - popup.firstElementChild.appendChild(skipButton); |
37 | | - // TODO: listen for a click on that cancel button |
38 | | - skipButton.addEventListener( |
39 | | - 'click', |
40 | | - function() { |
41 | | - resolve(null); |
42 | | - destroyPopup(popup); |
43 | | - }, |
44 | | - { once: true } |
45 | | - ); |
46 | | - } |
47 | | - // listen for the submit event on the inputs |
48 | | - popup.addEventListener( |
49 | | - 'submit', |
50 | | - function(e) { |
51 | | - e.preventDefault(); |
52 | | - console.log('SUBMITTED'); |
53 | | - resolve(e.target.input.value); |
54 | | - // remove it from the DOM entirely |
55 | | - destroyPopup(popup); |
56 | | - }, |
57 | | - { once: true } |
58 | | - ); |
59 | | - // when someone does submit it, resolve the data that was in the input box! |
60 | | - |
61 | | - // insert that popup into the DOM |
62 | | - document.body.appendChild(popup); |
63 | | - // put a very small timeout before we add the open class |
64 | | - |
65 | | - await wait(50); |
66 | | - popup.classList.add('open'); |
67 | | - }); |
68 | | -} |
69 | | - |
70 | | -// select all button that have a question |
71 | | -async function askQuestion(e) { |
72 | | - const button = e.currentTarget; |
73 | | - const cancel = 'cancel' in button.dataset; |
74 | | - |
75 | | - const answer = await ask({ |
76 | | - title: button.dataset.question, |
77 | | - cancel, |
78 | | - }); |
79 | | - console.log(answer); |
80 | | -} |
81 | | - |
82 | | -const buttons = document.querySelectorAll('[data-question]'); |
83 | | -buttons.forEach(button => button.addEventListener('click', askQuestion)); |
84 | | - |
85 | | -const questions = [ |
86 | | - { title: 'What is your name?' }, |
87 | | - { title: 'What is your age?', cancel: true }, |
88 | | - { title: 'What is your dogs name?' }, |
89 | | -]; |
90 | | - |
91 | | -async function asyncMap(array, callback) { |
92 | | - // make an array to store our results |
93 | | - const results = []; |
94 | | - // loop over our array |
95 | | - for (const item of array) { |
96 | | - results.push(await callback(item)); |
97 | | - } |
98 | | - // when we are done the loop, return it! |
99 | | - return results; |
100 | | -} |
101 | | - |
102 | | -async function go() { |
103 | | - const answers = await asyncMap(questions, ask); |
104 | | - console.log(answers); |
105 | | -} |
106 | | - |
107 | | -go(); |
108 | | - |
109 | | -// async function askMany() { |
110 | | -// for (const question of questions) { |
111 | | -// const answer = await ask(question); |
112 | | -// console.log(answer); |
113 | | -// } |
114 | | -// } |
115 | | - |
116 | | -// askMany(); |
0 commit comments