maquette/website/source/script.js.ejs at 61f86b72f434816bb86007ab3b4bd89754b56e5d · AFASSoftware/maquette · 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
/* global maquette ace */
window.createLiveEditor = function (projector) {

  var h = maquette.h;

  var editor;
  var validateTimeout;
  var error;
  var resultDomNode;

  var throttleValidateScript = function () {
    if(validateTimeout) {
      clearTimeout(validateTimeout);
    }
    validateTimeout = setTimeout(validateScript, 250);
  };

  // Super-fast way to validate the javascript
  var validateScript = function () {
    validateTimeout = null;
    var script = editor.getValue();
    var func;
    try {
      func = new Function("maquette", "h", "projector", "domNode", script);
      error = "";
    } catch(e) {
      error = e.message;
    }
    if(func) {
      resultDomNode.innerHTML = "";
      try {
        func(maquette, maquette.h, maquette.createProjector(), resultDomNode);
      } catch(e) {
        error = "" + e;
      }
    }
    if(error) {
      resultDomNode.innerHTML = error;
    }
    projector.scheduleRender(); // (actually only for the 'error' css class on resultDomNode)
  };

  var createAce = function (textArea) {
    var content = textArea.textContent;
    var value = textArea.value;
    editor = ace.edit(textArea);
    editor.setOptions({minLines: 5, maxLines: 50});
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode({ path: "ace/mode/javascript" });
    editor.getSession().setTabSize(2);
    editor.getSession().setUseSoftTabs(true);
    editor.setHighlightActiveLine(false);
    editor.setShowPrintMargin(false);
    editor.setBehavioursEnabled(true);
    // editor.renderer.setShowGutter(false);
    editor.getSession().on("change", throttleValidateScript);
    if (content && value.charCodeAt(0)===1) {
      // Happens sometimes in chrome while navigatiing using browser back
      editor.setValue(content, 0);
      editor.clearSelection();
    }
  };

  var registerResultDomNode = function (domNode) {
    resultDomNode = domNode;
    validateScript();
  };

  var handleEditOnCodepen = function() {
    maquette.dom.append(document.body, h("form", {action: "https://codepen.io/pen/define/", method: "POST", target:"_blank"}, [
      h("input", {type: "hidden", name: "data", value: JSON.stringify({
        title: "New pen using maquette",
        editors: "001",
        js: "var h = maquette.h;\n" +
        "var domNode = document.body;\n" +
        "var projector = maquette.createProjector();\n\n" +
        editor.getValue() + "\n",
        js_external: "//unpkg.com/maquette@<%-maquetteVersion-%>/dist/maquette.umd.js;" +
        "//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js;" +
        "//unpkg.com/maquette-css-transitions@1.1.0/dist/maquette-css-transitions.umd.js",
        css_external: "//maquette.js.org/demo.css"
      })})
    ])).domNode.submit();
  };

  var liveEditor = {
    renderEditor: function () {
      return h("textarea", { afterCreate: createAce });
    },
    renderResult: function () {
      return h("div.result", { afterCreate: registerResultDomNode, classes: { error: !!error } }); // Contents is supplied using resultDomNode
    },
    renderExtras: function() {
      return h("div.extras", [
        h("a.codepen", {href:"#", onclick: handleEditOnCodepen}, ["Edit on codepen"])
      ]);
    }
  };

  return liveEditor;
}