code_editor/jsbinjquery.js at main · abhijitacharya793/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
$(document).ready(function () {
  console.log("ready!");

  var windowHeight = $(window).height();
  var headerBarHeight = $(".header").height();
  var codeContainerHeight = $(".codeContainer").height();

  $(".codeContainer").height(windowHeight - headerBarHeight);

  $(".toggle a").click(function () {
    $(this).toggleClass("selected");
    var activeDiv = $(this).html();
    $("." + activeDiv.toLowerCase() + "Container").toggle(500);
    var showingDivs = $(activeDiv).filter(".selected").css("width");

    var width = 100 / showingDivs;
    $(activeDiv).filter(".selected").css("width", width);
  });

  document.addEventListener(
    "keydown",
    function (e) {
      if (
        (window.navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) &&
        e.keyCode == 83
      ) {
        e.preventDefault();
        runCode();
      }
    },
    false
  );

  $("#run").click(function () {
    runCode();
  });
});

function runCode() {
  console.log("Run clicked");
  const getGeneratedPageURL = ({ html, css, js }) => {
    const getBlobURL = (code, type) => {
      const blob = new Blob([code], { type });
      return URL.createObjectURL(blob);
    };

    const cssURL = getBlobURL(css, "text/css");
    const jsURL = getBlobURL(js, "text/javascript");

    const source = `
        <html>
          <head>
            ${
              css &&
              `<link rel="stylesheet" type="text/css" href="${cssURL}" />`
            }
            ${js && `<script src="${jsURL}"></script>`}
          </head>
          <body>
            ${html || ""}
          </body>
        </html>
      `;

    return getBlobURL(source, "text/html");
  };

  const url = getGeneratedPageURL({
    html: $("#htmlContent").val() + "",
    css: $("#cssContent").val() + "",
    js: $("#jsContent").val() + "",
  });

  const iframe = document.querySelector(".iframe");
  iframe.src = url;
}