I am in the process of developing a basic IDE for an educational programming language that has similarities to Karel the Dog. One major issue I am encountering is creating the foundation HTML page.
The IDE consists of 4 main areas:
- Toolbox (contains buttons like open, save as, run etc.)
- Field (canvas where the executor can move and perform actions)
- Code (uses CodeMirror editor for writing executor's commands)
- Console (location for displaying messages such as compilation errors or runtime debug output)
I have outlined my requirements for each area in my code, so I will highlight what is currently not functioning properly:
- The page should occupy 100% of the screen height.
- I am struggling to make CodeMirror fill the entire available height within its parent container. Additionally, I want scrollbars to appear when the content exceeds the height of the parent element.
- Similar to CodeMirror, I am facing issues with the canvas element only on the vertical axis.
- I am looking for a way to create a separator between the code and field areas that can be used to adjust horizontal space distribution between these two sections.
One more challenge arises if addressing item number 4 requires JavaScript implementation. In this case, I prefer to utilize the WinJS 3.0 library instead of adding jQuery or other heavy frameworks solely for resizing functionality.
If anyone can offer guidance or assistance, it would be greatly appreciated.
I have uploaded my code to jsfiddle.net and included it here:
var ce = CodeMirror(document.getElementById('b-codemirror'), {
value: "\n\n\nIt is CodeMirror element. [PARAMS ALL] " +
"width: 100% of parent element, height: always 100% of" +
" parent element + both scrollbars if needed\n\n\n",
lineNumbers: true
});
var cc = document.getElementById("canvas").getContext("2d");
cc.font = "16px Helvetica";
cc.fillText("It is canvas. Can be resized from", 10, 30);
cc.fillText("JS. If it is larger than parent element,", 10, 60);
cc.fillText("corresponding scrollbar should appear.", 10, 90);@import url("http://codemirror.net/lib/codemirror.css");
/* overriding default codemirror.css */
.CodeMirror {
font-family: monospace;
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.b-section {
margin: 2px;
padding: 4px;
border-radius: 4px;
}
#b-fieldcode {
min-height: 640px;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
flex-flow: row;
}
#b-toolbox {
background: #ffeebb;
}
#b-console {
height: 100px;
background: #ffeebb;
}
#b-field {
background: #ccccff;
overflow: auto;
-webkit-flex: 1 1 40%;
flex: 1 1 40%;
-webkit-order: 1;
order: 1;
}
#b-code {
background: #dddd88;
-webkit-flex: 1 1 60%;
flex: 1 1 60%;
-webkit-order: 2;
order: 2;
}
@media all and (max-width: 1024px) {
#b-fieldcode, #page {
-webkit-flex-flow: column;
flex-flow: column;
flex-direction: column;
}
#b-code, #b-field {
-webkit-order: 0;
order: 0;
}
#b-field, #b-code {
height: 500px;
}
}<script type="text/javascript" src="http://codemirror.net/lib/codemirror.js"></script>
<div id="b-toolbox" class="b-section">
Here comes the space for buttons.
[PARAMS ALL] width: 100% of screen, height: sized to content
</div>
<div id="b-fieldcode">
<div id="b-field" class="b-section">
Here comes canvas wrapper.<br />
[PARAMS landscape] width: flex 40% of screen, height:
100% of screen minus b-toolbox and b-console.
<br />[PARAMS portrait] width: 100% of
screen, height: fixed 400px.<br />
<canvas width="300" height="300" id="canvas"
style="background-color: green" />
</div>
<div id="b-code" class="b-section">
Here comes CodeEditor wrapper.<br />
[PARAMS landscape] width: flex 60% of screen, height:
100% of screen minus b-toolbox and b-console.<br />
[PARAMS portrait] width: 100% of
screen, height: fixed 500px.
<div id="b-codemirror"></div>
</div>
</div>
<div id="b-console" class="b-section">
Here comes output console.
[PARAMS ALL] width: 100% of screen, height: fixed 120px.
</div>