-
-
Notifications
You must be signed in to change notification settings - Fork 6
/
renderer.js
319 lines (278 loc) · 11.2 KB
/
renderer.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
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
const editor = CodeMirror.fromTextArea(document.querySelector('#editor'), {
mode: 'javascript',
lineNumbers: true,
tabSize: 2,
});
let dataFromStore;
const openFile = document.getElementById('open-file');
const saveFileBtn = document.getElementById('save-file');
const newFileBtn = document.getElementById('new-file');
const lastViewed = new Set();
const seeBrowser = document.getElementById('browser-btn');
const openDev = document.getElementById('devtools-btn');
document.getElementById('toggle-dark-mode').addEventListener('click', () => {
window.darkMode.toggle();
});
document.onkeydown = function (evt) {
evt = evt || window.event;
var isEscape = false;
const input = document.getElementById('tabInput');
const ul = document.getElementsByTagName('UL');
if ('key' in evt) {
isEscape = evt.key === 'Escape' || evt.key === 'Esc';
} else {
isEscape = evt.key === 27;
}
if (isEscape && input) {
ul[0].removeChild(input);
}
};
openFile.addEventListener('click', () => {
window.fileHandler.getFileFromUser();
});
window.fileHandler.recieveMessage((content, allFiles) => {
//open file functionality
//copy store Data to var. allData (electron quirk)
dataFromStore = allFiles;
const allData = dataFromStore;
//get the current item (obj)
const selfObj = allData[allData.length - 1];
//add item (now active) on the recently viewed queue
lastViewed.add(selfObj.filename);
//create a tab dom element with text (filename) and closing button and append to dom
const ul = document.getElementsByTagName('UL');
const tab = document.createElement('li');
const txt = document.createElement('h5');
const btn = document.createElement('button');
txt.innerText = `${selfObj.filename}`;
btn.innerText = 'X';
tab.setAttribute('class', true);
txt.setAttribute('class', 'text');
btn.setAttribute('class', 'close');
tab.appendChild(txt);
tab.appendChild(btn);
//get list of tabs
const tabs = document.getElementsByTagName('LI');
//set active property of current obj to true
selfObj.active = true;
//if no other tabs are active then set tab class to active (true)
if (document.querySelector('.true') === null) {
txt.parentNode.setAttribute('class', true);
} else {
//else select the previously active tab, change it to false and set the new tab to active true
const activeToFalse = document.querySelector('.true');
activeToFalse.removeAttribute('class', 'true');
activeToFalse.setAttribute('class', false);
txt.parentNode.setAttribute('class', true);
}
txt.addEventListener('click', () => {
//click file functionality
//remove clicked tab from recently viewed queue and re-insert it so that the order is correct
lastViewed.delete(selfObj.filename);
lastViewed.add(selfObj.filename);
//show obj editor value
editor.setValue(selfObj.editor.value);
//go through the data array, turn active: false properties on all the other objs and active on the current obj
allData.forEach((obj) => {
if (obj !== selfObj) {
obj.active = false;
} else {
obj.active = true;
}
});
//check if there is a tab with an active class (true) and if not then set current tab to true
if (document.querySelector('.true') === null) {
txt.parentNode.setAttribute('class', true);
} else {
//get the active tab, deactivate it and set current tab class to active (true)
const activeToFalse = document.querySelector('.true');
activeToFalse.removeAttribute('class', 'true');
activeToFalse.setAttribute('class', false);
txt.parentNode.setAttribute('class', true);
}
});
//closing tab functionality
btn.addEventListener('click', () => {
//if tab to be closed is last tab, reset editor to empty, turn active to false and remove tab
if (tabs.length <= 1) {
editor.setValue('');
selfObj.active = false;
tab.remove();
//remove obj from allData array
//allData.splice(allData.indexOf(selfObj), 1);
//if tab not last, set active property to false, remove from recently viewed queue, set as active tab the most recently viewed tab and set editor to corresponding editor content.
} else {
//if current obj property is active then deactivate it and delete filename from recently viewed queue
const parentActiveTab = btn.closest('.true');
if (Boolean(parentActiveTab)) {
selfObj.active = false;
lastViewed.delete(selfObj.filename);
//search the obj that is the last viewed item
//bug: store here doesn't have both items (newFiles)
const activeFile = allData.find(
(obj) => obj.filename == [...lastViewed][lastViewed.size - 1]
);
const tabs = document.getElementsByTagName('LI');
//set the tab class corresponding to that obj to active true
for (let i = 0; i < tabs.length; i++) {
if (tabs[i].innerText.slice(0, -1) === activeFile.filename) {
tabs[i].removeAttribute('class', false);
tabs[i].setAttribute('class', true);
break;
}
}
//set the editor value to the last viewed obj
editor.setValue(activeFile.editor.value);
//turn property active true on the obj
activeFile.active = true;
} else {
//if current obj active property false then just remove it's filename from last visited queue
lastViewed.delete(selfObj.filename);
}
//delete tab
tab.remove();
}
//remove obj from allData array
allData.splice(allData.indexOf(selfObj), 1);
});
//append tab to ul dom parent
ul[0].appendChild(tab);
//set the editor value to the curret obj editor value
editor.setValue(content);
});
seeBrowser.addEventListener('click', () => {
const browserURL = document.getElementById('url-field').value;
window.browserView.getInputUrl('getInputUrl', browserURL);
});
saveFileBtn.addEventListener('click', async () => {
try {
const activeTab = document.querySelector('.true');
const editorValue = await editor.getValue();
const fileName = activeTab.innerText.slice(0, -1);
fileHandler.saveFile('saveFile', editorValue, fileName);
} catch (error) {
console.log('error', error);
}
});
//new File button event listener triggers
newFileBtn.addEventListener('click', async () => {
//create new file functionality
//create input field on ul dom parent so that the new filename can be set
const ul = document.getElementsByTagName('UL');
const input = document.createElement('input');
input.setAttribute('type', 'text');
input.setAttribute('id', 'tabInput');
ul[0].appendChild(input);
//input event listener is triggered by enter key action and invokes main.js filehandler is invoked passing the filename which creates a file in the users filesystem
input.addEventListener('keypress', function (event) {
if (event.key === 'Enter') {
event.preventDefault();
fileHandler.newFile('createFile', input.value);
//remove input field from dom
ul[0].removeChild(input);
}
});
});
window.fileHandler.receiveNewFileData((allFiles) => {
//copy store Data to var. allData (electron quirk)
dataFromStore = allFiles;
const allDataNewFile = dataFromStore;
//get the current item (obj) and delete it from last viewed queue
const selfObject = allDataNewFile[allDataNewFile.length - 1];
lastViewed.add(selfObject.filename);
//create a new tab according to user's input with text (filename) and closing button
const ul = document.getElementsByTagName('UL');
const tab = document.createElement('li');
const txt = document.createElement('h5');
const btn = document.createElement('button');
txt.innerText = `${selfObject.filename}`;
btn.innerText = 'X';
tab.setAttribute('class', true);
txt.setAttribute('class', 'text');
btn.setAttribute('class', 'close');
tab.appendChild(txt);
tab.appendChild(btn);
//get list of all tabs
const tabs = document.getElementsByTagName('LI');
//set active property of current obj to true
selfObject.active = true;
//if no other tabs are active then set tab class to active (true)
if (document.querySelector('.true') === null) {
txt.parentNode.setAttribute('class', true);
} else {
//else select the previously active tab, change it to false and set the new tab to active true
const activeToFalse = document.querySelector('.true');
activeToFalse.removeAttribute('class', 'true');
activeToFalse.setAttribute('class', false);
txt.parentNode.setAttribute('class', true);
}
//add item (now active) on the recently viewed queue
lastViewed.add(tab.innerText.slice(0, -1));
txt.addEventListener('click', () => {
//click file functionality
//remove clicked tab from recently viewed queue and re-insert it so that the order is correct
lastViewed.delete(txt.parentNode.innerText.slice(0, -1));
lastViewed.add(txt.parentNode.innerText.slice(0, -1));
//show obj editor value
editor.setValue(selfObject.editor.value);
//go through the data array, turn active: false properties on all the other objs and active on the current obj
allDataNewFile.forEach((obj) => {
if (obj !== selfObject) {
obj.active = false;
} else {
obj.active = true;
}
});
//check if there is a tab with an active class (true) and if not then set current tab to true
if (document.querySelector('.true') === null) {
txt.parentNode.setAttribute('class', true);
} else {
const activeToFalse = document.querySelector('.true');
activeToFalse.removeAttribute('class', 'true');
activeToFalse.setAttribute('class', false);
txt.parentNode.setAttribute('class', true);
}
});
//closing tab functionality
btn.addEventListener('click', () => {
//if tab to be closed is last tab, reset editor to empty, turn active to false and remove tab
if (tabs.length <= 1) {
editor.setValue('');
tab.remove();
//if tab not last, set active to false, remove from recently viewed queue, set as active tab the most recently viewed tab and set editor to corresponding editor content.
} else {
//if tab to be close is active
const parentActiveTab = btn.closest('.true');
if (Boolean(parentActiveTab)) {
selfObject.active = false;
lastViewed.delete(parentActiveTab.innerText.slice(0, -1));
const activeFile = allDataNewFile.find(
(obj) => obj.filename == [...lastViewed][lastViewed.size - 1]
);
const tabs = document.getElementsByTagName('LI');
for (let i = 0; i < tabs.length; i++) {
if (
tabs[i].innerText.slice(0, -1) ===
[...lastViewed][lastViewed.size - 1]
) {
tabs[i].removeAttribute('class', false);
tabs[i].setAttribute('class', true);
break;
}
}
editor.setValue(activeFile.editor.value);
activeFile.active = true;
//else (non-active tab)
} else {
const parentTab = btn.parentNode;
lastViewed.delete(parentTab.innerText.slice(0, -1));
}
tab.remove();
}
});
ul[0].appendChild(tab);
editor.setValue(selfObject.editor.value);
});
openDev.addEventListener('click', async () => {
devToolsHandler.openDevTools('openDevTools');
});