Superglue
/
serverfiles


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421
							<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>SystemBrowser &mdash; 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> &#8593; Class managment &#8593;<br>
                    &mdash;New/Clone/Delete&mdash;<br>
                    &mdash;File-in/File-out&mdash;
                </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>