handlebars4code
Version:
library and NPM module that extends Handlebars with Helpers for Code Generation in a specific programming language (e.g. Javascript)
143 lines (133 loc) • 4.83 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>ACE Editor</title>
<!-- Load Link Paramater library linkparam.js to send paramters to this file via URL-->
<style type="text/css" media="screen">
body {
overflow: hidden;
}
#editor {
margin: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<!-- ACE Editor placed here -->
<pre id="editor"></pre>
<!-- Import ACE library and LinkParam library -->
<script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/linkparam.js" type="text/javascript" charset="utf-8"></script>
<!-- Init ACE and read Link/URL parameter -->
<script>
var vThemeACE = "xcode";
var vModeACE = "html";
var vTextACE = "My Text in the editor";
//--- DOM value of parent document ---
// DOM ID for setting and getting Value for Parent Window
var vID = ""; // will be set remotely by call of ace.html?domid=myid
var vNodeDOM = null;
// if the DOM node with the vDOMID exists in parent window,
// the vTextACE will be overwritten by value of the DOM node with id vID
function getElement4ID(pID) {
if (pID && (pID != "")) {
var vNode = top.document.getElementById(pID);
if (vNode) {
if (vNode.value) {
return vNode;
};
}
}
}
function getInitText(pID) {
var vInitText = "";
// var vNode = getElement4ID(pID);
// if (vNode) {
// vInitText = top.getValueDOM(pID);
// } else {
// alert("ERROR: with 'domid' ACE should run in iFrame.\nParent element ["+pID+"] of iframe undefined");
// console.log("ERROR: getInitText(): Parent element ["+pID+"] of iframe undefined");
// };
// return vInitText;
if (typeof top.getValueDOM !== "undefined") {
vInitText = top.getValueDOM(pID);
console.log("ACE: getInitText('"+pID+"') loaded:\n"+vInitText);
} else {
console.log("getInitText('"+pID+"') top.getValueDOM() is undefined!");
}
return vInitText;
};
//----- create ACE Editor -----------
var editor = ace.edit("editor");
//--- create a LinkParam instance ---
var vLinkParam = new LinkParam();
// the parameter of ace.html are store in "document"
vLinkParam.init(document);
//---------------------------------
//----Analyse the Parameters-------
// URL: ace.html?domid=my_textarea_id&theme=xcode&mode=json
// In parent window you have e.g.
// <textarea id="my_textarea_id" rows="10" cols="80"></textarea>
//---LinkParam: "domid"----------------
// domid is an id of an dom, that specifies the a id of DOM node in the parent
// window. Is DOM id is in hidden or visible HTML textarea
if (vLinkParam.exists("domid")) {
vID = vLinkParam.getValue("domid");
//alert("domid="+vID);
//alert("top.vSchemaID='"+top.vSchemaID+"'")
vTextACE = getInitText(vID);
};
//---LinkParam: "mode"----------------
// set the ACE mode via Link Parameter
// default is mode is "html"
// ace.html?mode=json
//
if (vLinkParam.exists("mode")) {
// overwrite mode of ACE with setting in linkparameter
vModeACE = vLinkParam.getValue("mode");
};
//---LinkParam: "theme"----------------
// set the ACE theme via Link Parameter
// default is the xcode theme
if (vLinkParam.exists("theme")) {
// overwrite theme of ACE with setting in linkparameter
vThemeACE = vLinkParam.getValue("theme");
};
//-----------------------------------------
//---Send ACE settings to editor instance
console.log("Editor Parent-DOM-ID: ["+vID+"] ModeACE='"+vModeACE+"' ThemeACE='"+vThemeACE+"'");
//alert("vTextACE="+vTextACE);
editor.setTheme("ace/theme/"+vThemeACE);
editor.session.setMode("ace/mode/"+vModeACE);
editor.setValue(vTextACE,-1);
//----- define, what to do on "onchange" events of ACE -------
// vID is set be link parameter 'domid'
if (vID != "") {
// a DOM Element vNode exists and the ACE editor content will be synced
// to the value attribute of DOM element.
// now check if onChangeACE handler is defined in top frame
// 'domid' is set by parent frame and the onchange handler is
// expected to be defined in top frame of the window.
// vID as parameter can be used
if (top.onChangeACE) {
editor.getSession().on('change', function() {
// this is a call the onChangeACE defined in ace.html
top.onChangeACE(vID,editor.getValue());
});
} else {
editor.getSession().on('change', function() {
// this is a call the onChangeACE defined in ace.html
onChangeACE(vID,editor.getValue());
});
};
};
</script>
</body>
</html>