code-editor/script.js at main · jagdishdev32/code-editor · GitHub

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
const iframeEle = document.getElementById("iframe-ele");
const htmlEle = document.getElementById("html-editor");
const cssEle = document.getElementById("css-editor");
const jsEle = document.getElementById("js-editor");

let html, css, js;

let initialHtml = `<h1>Welcome to code editor</h1>`;

function setIframeContent(iframe, { html, css, js }) {
  if (!html || html === "") {
    html = initialHtml;
    htmlEle.placeholder = html;
  }

  const source = `
    <html>
      <head><style>${css}</style></head>
      <body>
        ${html}
        <script>${js}</script>
      </body>
    </html>
  `;
  iframe.srcdoc = source;
}

setIframeContent(iframeEle, { html: initialHtml, css: "", js: "" });

// Make changes from 1 place
function makeChanges() {
  setIframeContent(iframeEle, { html: html, css: css, js: js });
}

// Checking if exists
let htmlStorage = localStorage.getItem("html");
let cssStorage = localStorage.getItem("css");
let jsStorage = localStorage.getItem("js");

// Updating value if value exists
if (htmlStorage || cssStorage || jsStorage) {
  if (!htmlStorage || htmlStorage == "") {
    html = initialHtml;
  } else {
    html = htmlStorage;
  }

  css = cssStorage;
  js = jsStorage;

  htmlEle.value = html;
  cssEle.value = css;
  jsEle.value = js;

  makeChanges();
} else if (htmlEle.value == "") {
  htmlEle.value = initialHtml;
  html = initialHtml;
}

function updateLocalStorage() {
  localStorage.setItem("html", html || "");
  localStorage.setItem("css", css || "");
  localStorage.setItem("js", js || "");
}

function checkIfMobile() {
  if (window.innerWidth < 800) {
    return true;
  }
  return false;
}

// Objects for CodeMirror Properties / Features
let defaultObject = {
  theme: "dracula",
  // Fixing delete line glitch for mobiles
  lineNumbers: checkIfMobile() ? false : true,
  lineWrapping: true,
  autoCloseBrackets: true,
  inputStyle: "contenteditable",
  showCursorWhenSelecting: true,
};

let htmlObject = {
  mode: "htmlmixed",
  value: htmlEle.value,
  autoCloseTags: true,
};

let cssObject = {
  mode: "css",
};

let jsObject = {
  mode: "javascript",
};

// Code Mirror Objects
let htmlCodeMirror = CodeMirror.fromTextArea(htmlEle, {
  ...defaultObject,
  ...htmlObject,
});

let cssCodeMirror = CodeMirror.fromTextArea(cssEle, {
  ...defaultObject,
  ...cssObject,
});

let jsCodeMirror = CodeMirror.fromTextArea(jsEle, {
  ...defaultObject,
  ...jsObject,
});

// updating values on change
setInterval(() => {
  if (
    html !== htmlCodeMirror.getValue() ||
    css !== cssCodeMirror.getValue() ||
    js !== jsCodeMirror.getValue()
  ) {
    html = htmlCodeMirror.getValue();
    css = cssCodeMirror.getValue();
    js = jsCodeMirror.getValue();

    makeChanges();
    updateLocalStorage();
  }
}, 2000);

// Adding Caches
// Checking if service worker supported by browser for caching site
if ("serviceWorker" in navigator) {
  // console.log('Service Worker Support');
  window.addEventListener("load", () => {
    navigator.serviceWorker
      .register("sw_cached_pages.js") // Create any file name and create file with that name
      .then((reg) => console.log("Service Worker: Registered"))
      .catch((err) => console.log(`Service Worker: Error: ${err}`));
  });
}