<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SystemBrowser — SmallClasses.js</title>
<script src="ace/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="ace/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var SC = window.opener.SC;
window.ace = ace;
var onLoad = function(evt){
window.editorSharedPropertyValidator = ace.edit("sharedPropertyValidatorEditor");
window.editorSharedPropertyTransformer = ace.edit("sharedPropertyTransformerEditor");
window.editorPropertyValidator = ace.edit("propertyValidatorEditor");
window.editorPropertyTransformer = ace.edit("propertyTransformerEditor");
window.editorMethodCode = ace.edit("methodCodeEditor");
allEditors = [
editorSharedPropertyValidator,
editorSharedPropertyTransformer,
editorPropertyValidator,
editorPropertyTransformer,
editorMethodCode
];
for(var i = 0; i < allEditors.length; i++){
allEditors[i].setTheme("ace/theme/monokai");
allEditors[i].getSession().setMode("ace/mode/javascript");
allEditors[i].setFontSize(16)
allEditors[i].setOptions({ maxLines: Infinity,
showPrintMargin: false,
highlightActiveLine: false,
enableBasicAutocompletion: true,
});
}
onResize();
SC.init('SCSystemBrowser', { browserWindow: window });
};
var onResize = function(evt){
window.document.getElementById('packageList').style.height = (window.innerHeight-100) + 'px';
window.document.getElementById('classControls').style.width = (window.innerWidth-200) + 'px';
window.document.getElementById('classTraitsInput').style.width = (window.innerWidth-300) + 'px';
window.document.getElementById('classMixinsInput').style.width = (window.innerWidth-300) + 'px';
window.document.getElementById('classSharedPropertiesList').style.width = ((window.innerWidth-200)/3) + 'px';
window.document.getElementById('classPropertiesList').style.width = ((window.innerWidth-200)/3) + 'px';
window.document.getElementById('classMethodsList').style.width = ((window.innerWidth-200)/3) + 'px';
window.document.getElementById('classPropertiesList').style.left = ((window.innerWidth-200)/3) + 'px';
window.document.getElementById('classMethodsList').style.left = ((window.innerWidth-200)/3*2) + 'px';
for(var divsToFillWidth = [
'classCommentEditor',
'sharedPropertyCommentEditor',
'sharedPropertyInitValueEditor',
'sharedPropertyValidatorEditor',
'sharedPropertyTransformerEditor',
'propertyCommentEditor',
'propertyValidatorEditor',
'propertyTransformerEditor',
'methodCommentEditor',
'methodCodeEditor'
],
i = 0; i < divsToFillWidth.length; i++){
window.document.getElementById(divsToFillWidth[i]).style.width = (window.innerWidth-240) + 'px';
}
for(var editorPanes = window.document.getElementsByClassName('editorPane'),
i = 0; i < editorPanes.length; i++){
//editorPanes[i].style.width = (window.innerWidth-200) + 'px';
//editorPanes[i].style.height = (window.innerHeight-330) + 'px';
editorSharedPropertyValidator.resize();
editorSharedPropertyTransformer.resize();
editorPropertyValidator.resize();
editorPropertyTransformer.resize();
editorMethodCode.resize();
}
};
window.addEventListener('DOMContentLoaded', onLoad);
window.addEventListener('resize', onResize);
</script>
<style>
.ace-monokai .ace_gutter {
background: #333 !important;
color: #8F908A !important;
}
.ace-monokai .ace_marker-layer .ace_selection {
background: #6F70AA !important;
}
.ace_editor, .ace_editor * {
font-family: Consolas, "Lucida Console", Monaco, monospace !important;
font-size: 16px !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
}
.ace_autocomplete {
background: #555 !important;
color: #fff !important;
box-shadow: 2px 3px 5px rgba(255,255,255,.2) !important;
}
.ace_autocomplete.ace-tm .ace_marker-layer .ace_active-line {
background-color: #6F70AA !important;
}
::selection {
background: #6F70AA;
}
* {
font-family: Consolas, "Lucida Console", Monaco, monospace;
font-size: 16px;
font-weight: 400;
letter-spacing: 0;
}
body {
background-color: #333;
color: #FFF;
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
display: box;
}
input {
background-color: #444;
color: #FFF;
border: none;
padding: 3px;
}
select {
background-color: #444;
color: #FFF;
border: none;
padding: 3px;
padding-top: 6px;
}
::-webkit-scrollbar {
width: 16px;
height: 16px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.4);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
}
.widgetContainer {
position: absolute;
display: box;
margin: 0px;
padding: 0px;
}
#packageControls {
top: 0px;
left: 0px;
width: 200px;
height: 100%;
}
#packageList {
top: 0px;
width: 200px;
height: 440px;
}
#packageList > * {
width: 100%;
height: 100%;
}
#packageAction {
bottom: 0px;
width:200px;
height:100px;
}
#classControls {
top: 0px;
left: 200px;
width: 590px;
height: 100%;
overflow-x: hidden;
}
#classTraits {
top: 0px;
height: 30px;
}
#classMixins {
top: 30px;
height: 30px;
}
#classTraitsLabel, #classMixinsLabel {
position: absolute;
top: 10px;
left: 6px;
width: 70px;
color: #707070;
}
#classTraitsInput, #classMixinsInput {
position: absolute;
top: 3px;
left: 80px;
width: 500px;
}
#classMembersBrowser {
top: 80px;
left: 0px;
width: 100%;
height:230px;
}
#classSharedPropertiesList, #classPropertiesList, #classMethodList {
height: 100%;
width: 200px;
}
#classSharedPropertiesSelect, #classPropertiesSelect, #classMethodsSelect {
width: 100%;
height: 180px;
}
.classBrowserLabel {
margin-top:6px;
padding-left: 6px;
color: #707070;
}
.classBrowserIndent {
margin-left: 42px;
}
#classSharedPropertiesList { left:0px; }
#classPropertiesList { left:200px; }
#classMethodList { left:400px; }
.classMembersToolbar{
width:100%;
display: block;
}
#classMemberEditor {
position: absolute;
top: 300px;
left: 0px;
width: 600px;
}
.editorPane {
position: absolute;
top: 0px;
left: 0px;
width: 600px;
height: 296px;
}
#classEditor, #sharedPropertyEditor, #propertyEditor, #methodEditor {
visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 170px;
}
#classCommentEditor,
#sharedPropertyCommentEditor,
#sharedPropertyInitValueEditor,
#sharedPropertyValidatorEditor,
#sharedPropertyTransformerEditor,
#propertyCommentEditor,
#propertyValidatorEditor,
#propertyTransformerEditor,
#methodCommentEditor,
#methodCodeEditor {
display: block;
width: 600px;
min-height: 80px;
background-color: #444;
color: #FFF;
margin-bottom: 10px;
padding: 6px
}
</style>
</head>
<body>
<div id="packageControls" class="widgetContainer">
<div id="packageList" class="widgetContainer">
<select id="packageListSelect">
</select>
</div>
<div id="packageAction" class="widgetContainer">
<p> ↑ Class managment ↑<br>
—New/Clone/Delete—<br>
—File-in/File-out—
</p>
</div>
</div>
<div id="classControls" class="widgetContainer">
<div id="classTraits" class="widgetContainer">
<div id="classTraitsLabel">Traits:</div>
<input type="text" id="classTraitsInput">
</div>
<div id="classMixins" class="widgetContainer">
<div id="classMixinsLabel">Mixins:</div>
<input type="text" id="classMixinsInput">
</div>
<div id="classMembersBrowser" class="widgetContainer">
<div id="classSharedPropertiesList" class="widgetContainer">
<div class="classBrowserLabel">Shared Properties</div>
<select id="classSharedPropertiesSelect" size="3">
</select>
<div class="classMembersToolbar">
<!--button id="classSharedPropertiesPlus">+</button>
<button id="classSharedPropertiesMinus">-</button-->
</div>
</div>
<div id="classPropertiesList" class="widgetContainer">
<div class="classBrowserLabel">Properties</div>
<select id="classPropertiesSelect" size="3">
</select>
<div class="classMembersToolbar">
<!--button id="classPropertiesPlus">+</button>
<button id="classPropertiesMinus">-</button-->
</div>
</div>
<div id="classMethodsList" class="widgetContainer">
<div class="classBrowserLabel">Methods</div>
<select id="classMethodsSelect" size="3">
</select>
<div class="classMembersToolbar">
<!--button id="classMethodsPlus">+</button>
<button id="classMethodsMinus">-</button-->
</div>
</div>
</div>
<div id="classMemberEditor" class="widgetContainer">
<div id="classEditor" class="editorPane">
<div class="classBrowserLabel">Class Comment:</div>
<div id="classCommentEditor"></div>
</div>
<div id="sharedPropertyEditor" class="editorPane">
<div class="classBrowserLabel classBrowserIndent">Comment:</div>
<div id="sharedPropertyCommentEditor" class="classBrowserIndent"></div>
<div class="classBrowserLabel classBrowserIndent">Initial Value:</div>
<div id="sharedPropertyInitValueEditor" class="classBrowserIndent"></div>
<div class="classBrowserLabel classBrowserIndent">Validator Function:</div>
<div id="sharedPropertyValidatorEditor"></div>
<div class="classBrowserLabel classBrowserIndent">Transformer Function:</div>
<div id="sharedPropertyTransformerEditor"></div>
</div>
<div id="propertyEditor" class="editorPane">
<div class="classBrowserLabel classBrowserIndent">Comment:</div>
<div id="propertyCommentEditor" class="classBrowserIndent"></div>
<div class="classBrowserLabel classBrowserIndent">Validator Function:</div>
<div id="propertyValidatorEditor"></div>
<div class="classBrowserLabel classBrowserIndent">Transformer Function:</div>
<div id="propertyTransformerEditor"></div>
</div>
<div id="methodEditor" class="editorPane">
<div class="classBrowserLabel classBrowserIndent">Comment:</div>
<div id="methodCommentEditor" class="classBrowserIndent"></div>
<div class="classBrowserLabel classBrowserIndent">Method Code:</div>
<div id="methodCodeEditor"></div>
</div>
</div>
</div>
</body>
</html>