-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
252 lines (216 loc) · 11.1 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
// Initialize application and event listeners once DOM content is fully loaded
document.addEventListener('DOMContentLoaded', () => {
initCoreEmotions();
document.getElementById('submitButton').addEventListener('click', submitSelections); // Event listener for the submit button
});
//global constants
const emotionsBox = document.getElementById('emotions-box');
const feelingsBox = document.getElementById('feelings-box');
const precisefeelingsBox = document.getElementById('precisefeelings-box');
const inputBox = document.getElementById('inputBox');
let currentState = 'feelings'
const transistion_delay=0.1;
// Initialize core emotions display
// Trying to solve the mess of waiting after transitions in CSS from https://stackoverflow.com/questions/15617970/wait-for-css-transition
function whichTransitionEvent(){
var t;
var el = document.createElement('fakeelement');
var transitions = {
'transition':'transitionend',
'OTransition':'oTransitionEnd',
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd'
}
for(t in transitions){
if( el.style[t] !== undefined ){
return transitions[t];
}
}
}
var transitionEnd = whichTransitionEvent();
function initCoreEmotions() {
emotionsBox.innerHTML = ''; // Clear input box for new content
emotionsBox.style.width = '33.3%'; //to be sure. If something fancy is hapenning before
// emotionsBox.style.backgroundColor = '#f0f0f0'; // Reset to default color
//delete the past
if (precisefeelingsBox.style.width != ''){
precisefeelingsBox.style.width='0%';
eraseFeelingBox();
// precisefeelingsBox.addEventListener(transitionEnd, eraseFeelingBox());
feelingsBox.addEventListener(transitionEnd, createEmotionsButtons());
} else {
if (feelingsBox.style.width!=''){
eraseFeelingBox();
feelingsBox.addEventListener(transitionEnd, createEmotionsButtons());
} else {
createEmotionsButtons();
}
}
// if (feelingsBox.style.width != ''){
// feelingsBox.style.width='0%';
// }
// Iterate through each emotion in the emotionsData object
let currentState = 'emotions'; //optional. Maybe is needed to check at some point
}
//element.addEventListener(transitionEnd, theFunctionToInvoke, false);
function createEmotionsButtons(){
Object.keys(emotionsData).forEach(emotion => {
const button = document.createElement('button');
button.className = 'emotion-button';
button.textContent = emotion; // Set button text to the emotion name
button.style.backgroundColor = emotionsData[emotion].color; // Use color from data
button.addEventListener('click', () => loadFeelings(emotion)); // Load associated feelings when clicked
emotionsBox.appendChild(button);
});
}
// Load feelings associated with a selected core emotion
function loadFeelings(emotion) {
feelingsBox.innerHTML = ''; // Clear feelings box for new content
// emotionsBox.style.width = '33.33%';
// emotionsBox.style.backgroundColor = emotionsData[emotion].color; // Change background color based on emotion
if (precisefeelingsBox.style.width != '') { //if there is something in the precisefeelingsbox
precisefeelingsBox.style.width='0%' //make it dissapear
// precisefeelingsBox.style.backgroundColor = '#f0f0f0';
// eraseFeelingBox()
precisefeelingsBox.addEventListener(transitionEnd, eraseFeelingBox(), false); //make disappear the feelingsBox
// populateFeelingsBox(emotion);
feelingsBox.addEventListener(transitionEnd, populateFeelingsBox(emotion), false);
} else {
if (feelingsBox.style.width != '') { //if there is something in the feelingsBox
eraseFeelingBox(); // make it disappear
// populateFeelingsBox(emotion);
feelingsBox.addEventListener(transitionEnd, populateFeelingsBox(emotion), false); //wait for the transition to end and then build another FeelingsBox
} else { //if nothing was there
populateFeelingsBox(emotion); //just create it
// feelingsBox.style.backgroundColor = emotionsData[emotion].color;
}
}
// Access the feelings for the selected emotion
//draw the backbutton -- uuuh not needed anymore? to be confirmed
// const button = document.createElement('button');
// button.className = 'semi-transparent-button';
// button.textContent = ' < ';
// button.addEventListener('click', () => initCoreEmotions());
// inputBox.appendChild(button)
currentState = 'feelings'; //optional. Maybe is needed to check at some point
}
function eraseFeelingBox(){ //needed to be able to wait
feelingsBox.style.width = '0%';
console.log('eraseFeelingBox executed')
}
function populateFeelingsBox(emotion) {
const feelings = emotionsData[emotion].feelings;
Object.keys(feelings).forEach(feeling => {
const button = document.createElement('button');
button.className = 'emotion-button';
button.textContent = feeling;
button.addEventListener('click', () => loadPreciseFeelings(emotion, feeling));
button.style.backgroundColor = emotionsData[emotion].color; // Use color from data
feelingsBox.appendChild(button);
})
feelingsBox.style.width = '33.33%'; //make it appear
feelingsBox.style.left = '33.33%';
}
// Load precise feelings for a selected feeling
function loadPreciseFeelings(emotion, feeling) {
// emotionsBox.style.width = '33.33%';
// feelingsBox.style.width = '33.33%'; //just to be sure
// emotionsBox.style.backgroundColor = emotionsData[emotion].color; // Change background color based on emotion
if (precisefeelingsBox.style.width == '33.33%') { //if there is a precisefeelingsBox present
console.log('precisefeelingsBox.style.width is 33.33%')
console.log(precisefeelingsBox.style.width)
precisefeelingsBox.style.width = '0%'; //annihilate the box !!
console.log(precisefeelingsBox.style.width)
precisefeelingsBox.addEventListener(transitionEnd, populatePreciseFeelingsBox(emotion, feeling), false); //build it again after the transition ends
console.log(precisefeelingsBox.style.width)
} else { //else
populatePreciseFeelingsBox(emotion, feeling)
// precisefeelingsBox.style.backgroundColor = emotionsData[emotion].color;
}
// Retrieve the precise feelings for the selected feeling
//draw the backbutton --- uuh not needed anymore, after dividing the inputBox in 3
// const button = document.createElement('button');
// button.className = 'semi-transparent-button';
// button.textContent = ' < ';
// button.addEventListener('click', () => loadFeelings(emotion));
// precisefeelingsBox.appendChild(button)
currentState = 'preciseFeelings'; //optional. Maybe is needed to check at some point
}
function populatePreciseFeelingsBox(emotion, feeling) {
const preciseFeelings = emotionsData[emotion].feelings[feeling];
precisefeelingsBox.innerHTML = ''; // Clear precise feelings box for new content
preciseFeelings.forEach(preciseFeeling => {
const button = document.createElement('button');
button.className = 'emotion-button';
button.textContent = preciseFeeling;
button.style.backgroundColor = emotionsData[emotion].color; // Use color from data
button.addEventListener('click', () => {
addToOutputBox(emotion, feeling, preciseFeeling); // Add selection to output box
initCoreEmotions(); // Re-initialize with core emotions for new selection
});
precisefeelingsBox.appendChild(button);
precisefeelingsBox.style.width = '33.33%';
precisefeelingsBox.style.left = '66.66%';
});
}
var all_feelings=[]
// Function to add selections to the output box and to the global array all_selections
function addToOutputBox(emotion, feeling, preciseFeeling) {
const outputBox = document.getElementById('outputBox');
const selectionDiv = document.createElement('div');
selectionDiv.className = 'selection-div';
const selection = document.createElement('button');
selection.className = 'output-emotion-button';
selection.textContent = `${emotion} \u2282 ${feeling} \u2282 ${preciseFeeling}`;
selection.style.backgroundColor = emotionsData[emotion].color;
const closeButton = document.createElement('button');
closeButton.className = 'close-button';
closeButton.innerHTML = '×';
closeButton.onclick = function() { deleteFeeling(selection.textContent); };
if (all_feelings.includes(selection.textContent)) {
alert('Feeling already chosen!');
} else {
selectionDiv.appendChild(selection);
selectionDiv.appendChild(closeButton);
outputBox.appendChild(selectionDiv);
all_feelings.push(selection.textContent);
}
}
//function to delete the feeling from the outbox if a selection is pressed
function deleteFeeling(feelingText) {
const outputBox = document.getElementById('outputBox');
const divs = outputBox.getElementsByClassName('selection-div');
for (let i = 0; i < divs.length; i++) {
let selection = divs[i].getElementsByTagName('button')[0];
if (selection && selection.textContent === feelingText) {
divs[i].parentNode.removeChild(divs[i]);
break; // Assuming unique feelings, stop after finding the right one
}
}
// Update the all_feelings array
all_feelings = all_feelings.filter(feeling => feeling !== feelingText);
console.log(all_feelings);
}
// Function to handle submit button click, displaying all selections
function submitSelections() {
const outputBox = document.getElementById('outputBox');
let formData = new FormData();
formData.append('date', new Date().toISOString().slice(0,10)); // Today's date in YYYY-MM-DD format
formData.append('feelings', JSON.stringify(all_feelings)); // Convert array to JSON string
if (all_feelings.length !==0) {
console.log(all_feelings)
fetch('saveFeelings.php', { // Assuming a PHP server-side script. Adjust for your actual server-side solution
method: 'POST',
body: formData
}
)
.then(response => response.text()) //I don't know what this does. I am afraid to delete it. Maybe later.
.then(result => {
alert('Feelings saved successfully!');
outputBox.innerHTML = '' //deletes everything in the output box
})
.catch(error => {
console.error('Error saving feelings:', error);
});
}
}