|
@@ -0,0 +1,421 @@
|
|
|
|
+<!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>
|