-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathmain.js
135 lines (119 loc) · 4.55 KB
/
main.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
const html = document.getElementById('htmlSource');
const css = document.getElementById('cssSource');
const js = document.getElementById('jsSource');
let timer, timeoutVal = 450;
if (!localStorage.getItem('savedCode')) {
localStorage.setItem('savedCode', JSON.stringify({
'html': `<h1>Hello!</h1>
<p>Write HTML, CSS or JavaScript code here and click 'Run Code'.</p>`, 'css': '/* CSS goes here */', 'js': '// JS code here'
}))
}
let saveData = JSON.parse(localStorage.getItem('savedCode'));
function runCode() {
var htmlCode = html.value;
var cssCode = css.value;
var jsCode = js.value;
if (jsCode.includes('alert')) {
jsCode = jsCode.replace(/alert\(/g, 'console.log(\'[Alerted Output] \'+');
}
if (jsCode.includes('console.log')) {
jsCode = jsCode.replace(/console.log\(/g, 'console.log(\'[Console Output] \'+');
}
let iframe = document.createElement('iframe');
let oi = document.querySelector('#targetCode')
iframe.id = 'targetCode';
oi.parentElement.appendChild(iframe);
oi.remove();
let iframecw = iframe.contentWindow;
iframecw.document.open();
iframecw.document.write(`<!DOCTYPE html><html><head><title>DevPad Output</title><style>${cssCode}</style></head><body>${htmlCode}<script>${jsCode}</script></body></html>`);
iframecw.document.close();
return false;
}
function exportCode(t) {
var htmlCode = html.value;
var cssCode = css.value;
var jsCode = js.value;
var download = document.getElementById('download');
download.setAttribute('href', 'data:text/html;charset=utf-8,' + `<html><head><title>DevPad Output</title><style>${cssCode}</style></head><body>${htmlCode}<script>${jsCode}</script></body></html>`);
download.setAttribute('download', 'devpadoutput-' + new Date() + '.html');
download.click()
}
function clearCode() {
localStorage.setItem('savedCode', JSON.stringify({
'html': `<h1>Hello!</h1>
<p>Write HTML, CSS or JavaScript code here and click 'Run Code'.</p>`, 'css': '/* CSS goes here */', 'js': '// JS code here'
}));
loadCode();
}
function saveCode() {
localStorage.setItem('savedCode',
JSON.stringify({
'html': html.value,
'css': css.value,
'js': js.value
})
);
}
function loadCode() {
let saveData = JSON.parse(localStorage.getItem('savedCode'));
html.value = saveData.html;
css.value = saveData.css;
js.value = saveData.js;
update(html.value);
}
html.addEventListener('keypress', handleKeyPress);
html.addEventListener('keyup', handleKeyUp);
css.addEventListener('keypress', handleKeyPress);
css.addEventListener('keyup', handleKeyUp);
js.addEventListener('keypress', handleKeyPress);
js.addEventListener('keyup', handleKeyUp);
function handleKeyPress(e) { window.clearTimeout(timer); }
function handleKeyUp(e) {
window.clearTimeout(timer);
timer = window.setTimeout(() => {
runCode();
}, timeoutVal);
}
setInterval(function () {
saveCode();
}, 500)
loadCode();
runCode();
update(html.value);
function update(text) {
let result_element = document.querySelector("#highlighting-content");
if(text[text.length-1] == "\n") {
text += " ";
}
result_element.innerHTML = text.replace(new RegExp("&", "g"), "&").replace(new RegExp("<", "g"), "<"); /* Global RegExp */
Prism.highlightElement(result_element);
}
function sync_scroll(element) {
let result_element = document.querySelector("#highlighting");
result_element.scrollTop = element.scrollTop;
result_element.scrollLeft = element.scrollLeft;
}
function check_tab(element, event) {
let code = element.value;
if(event.key == "Tab") {
event.preventDefault();
let before_tab = code.slice(0, element.selectionStart); // text before tab
let after_tab = code.slice(element.selectionEnd, element.value.length); // text after tab
let cursor_pos = element.selectionStart + 1; // where cursor moves after tab - moving forward by 1 char to after tab
element.value = before_tab + "\t" + after_tab; // add tab char
element.selectionStart = cursor_pos;
element.selectionEnd = cursor_pos;
console.log(element.id)
let text = element.value;
if(element.id === 'htmlSource') {
update(text);
}else{
if(text[text.length-1] == "\n") {
text += " ";
}
element.innerHTML = text.replace(new RegExp("&", "g"), "&").replace(new RegExp("<", "g"), "<"); /* Global RegExp */
Prism.highlightElement(element);
}
}
}