-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.js
172 lines (153 loc) · 5.19 KB
/
index.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
// Initial variable declaring
const html = document.getElementById("htmlArea");
const css = document.getElementById("cssArea");
const js = document.getElementById("jsArea");
const saveState = document.getElementById("saveState");
const downloadHTML = document.getElementById("downloadHtml");
const downloadJS = document.getElementById("downloadJs");
const downloadCSS = document.getElementById("downloadCss");
const clearState = document.getElementById("clearState");
const settingsIcon = document.getElementById("settingsIcon");
const closeWindow = document.getElementById("closeWindow");
const buttonsDownload = document.getElementById("buttonsDownload");
const code = document.getElementById("code").contentWindow.document;
// Declaring opening and closing symbols
// const single_quote = "'";
const lParen = "(";
const rParen = ")";
const lBrack = "[";
const rBrack = "]";
const lCurly = "{";
const rCurly = "}";
const lBrace = "<";
const rBrace = ">";
// const back_tick = "`";
// Declaring pairs
const pairs = {
// [single_quote]: single_quote,
[lParen]: rParen,
[lBrack]: rBrack,
[lCurly]: rCurly,
[lBrace]: rBrace,
// [back_tick]: back_tick,
};
// Check if there is data previously saved and provide them in html, css, js textarea
for (let i = 0; i < localStorage.length; i++) {
let key = localStorage.key(i);
let code = localStorage.getItem(key);
key === "html" ? (html.innerHTML += code) : null;
key === "css" ? (css.innerHTML += code) : null;
key === "js" ? (js.innerHTML += code) : null;
}
// Assign event listener on the body
document.body.onkeyup = (e) => {
let keyTyped = e.key;
let inputElement = e.target;
// Check If first digit starts with one the left symbols, close it with its right one
if (
keyTyped.startsWith(lBrace) ||
keyTyped.startsWith(lCurly) ||
keyTyped.startsWith(lParen) ||
// keyTyped.startsWith(single_quote) ||
keyTyped.startsWith(lBrack)
// keyTyped.startsWith(back_tick)
) {
// Getting the position of symbol
let caretPosition = inputElement.selectionStart;
// Find the right pair
let closingChar = pairs[keyTyped];
// Adding right pair to input
inputElement.value =
inputElement.value.substr(0, caretPosition) +
closingChar +
inputElement.value.substr(caretPosition);
// Moving cursor between symbols
inputElement.setSelectionRange(caretPosition, caretPosition);
return;
}
// Write code inside the Iframe
code.open();
code.writeln(
html.value +
"<style>" +
css.value +
"</style>" +
"<script>" +
js.value +
"</script>"
);
code.close();
};
// Event that runs Js code
let run = document.getElementById("runJs");
run.addEventListener("click", () => {
let code = document.getElementById("code").contentWindow.document;
let js = document.getElementById("jsArea");
code.open();
code.writeln("<script>" + js.value + "</script>");
code.close();
});
// Assign listener for each download button
[downloadHTML, downloadJS, downloadCSS].forEach((item) => {
item.addEventListener("click", () => {
let fileToDownload =
item.id === "downloadHtml"
? document.getElementById("htmlArea").value
: item.id === "downloadCss"
? document.getElementById("cssArea").value
: item.id === "downloadJs"
? document.getElementById("jsArea").value
: null;
let textFileAsBlob = new Blob([fileToDownload], { type: "text/plain" });
// Saving file in a certain extension
let fileNameToSaveAs =
item.id === "downloadHtml"
? "index.html"
: item.id === "downloadCss"
? "style.css"
: item.id === "downloadJs"
? "index.js"
: null;
// Creating the link
let downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
if (window.webkitURL != null) {
// for Chrome: allows the link to be clicked without actually adding it to the DOM.
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
} else {
// for Firefox: requires the link to be added to the DOM before it can be clicked.
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
}
downloadLink.click();
});
});
// Assign local storage to save a code session
saveState.addEventListener("click", () => {
html.value ? localStorage.setItem("html", html.value) : null;
css.value ? localStorage.setItem("css", css.value) : null;
js.value ? localStorage.setItem("js", js.value) : null;
location.reload();
window.scrollTo(0, 0);
});
// Delete local storage
clearState.addEventListener("click", () => {
localStorage.clear();
location.reload();
window.scrollTo(0, 0);
});
// Popup toggler
const toggle = () => {
document.getElementById("popupId").classList.toggle("active");
};
// Alert if user is refreshing or closing the page
let isDirty = () => {
return false;
};
// Warn user before leaving the page when code is written
window.addEventListener("beforeunload", (event) => {
event.returnValue = `Are you sure you want to leave?`;
});