KLAB/testFs.htm at master · WebManufacture/KLAB · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html manifest="http://system.web-manufacture.net/TextEditor.manifest">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <link type='text/css' rel='stylesheet' href="http://Services.web-manufacture.net/Styles/System.default.css"/>
    <script type="text/javascript" src="http://Services.web-manufacture.net/Base/v1.6/?join=true"></script>
    <script type="text/javascript" src="http://Services.web-manufacture.net/System/ui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.1/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.1/ext-language_tools.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.1/ext-elastic_tabstops_lite.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify-css.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify-html.min.js"></script>
    <script src="http://services.web-manufacture.net/ilab-socket.js" type="text/javascript"></script>
    <script src="../Client/WebSocketProxy.js" type="text/javascript"></script>

    <style>
        #filesBlock{
            margin-left: 70px;
            width: 430px;
            height: 100%;
            float: left;
        }

        #textEditor{
            width: calc(100% - 500px);
            height: 100%;
            float: left;
        }

        #Help{
            background-color: white;
            border: 1px solid navy;
            border-radius: 10px;
            cursor: default;
            font-size: 12px;
            height: 86%;
            opacity: 0.5;
            overflow: hidden;
            padding: 7px;
            position: fixed;
            right: 1%;
            text-align: left;
            top: 10%;
            width: 8%;
            z-index: 20;
        }

        #Help .event{
            color: #333;
        }

        #Help .event.first{
            background-color:yellow;
        }

        #Help .event.error{
            color: red;
        }

        #LoadingMask{
            position: fixed;
            z-index: 1000;
            width: 100%;
            height: 100%;
            background-color: rgba(80,80,80,0.3);
        }

        #LoadingMask .loading-text{
            background-color: white;
            border: 1px solid black;
            border-radius: 5px;
            color: navy;
            font-family: verdana;
            font-size: 20px;
            left: 45%;
            padding: 30px 0;
            position: absolute;
            text-align: center;
            top: 33%;
            width: 170px;
        }
    </style>

    <script type="text/javascript">
        WS.DOMload(()=>{
            Channels.on("/ui-component-initialized", function(){
                filesBlock.on("loading", (state)=>{
                    if (state){
                        LoadingMask.hide();
                    } else {
                        LoadingMask.show();
                    }
                });
                filesBlock.on('edit', (url)=>{
                    textEditor.Load(url);
                });
            });
            var theme = window.localStorage.getItem("klab_ace_theme");
            if (!theme) theme = "ace/theme/ambiance";
            EditorThemeSelector.value = theme;
        });
    </script>
</head>
<body>

<include url='http://services.web-manufacture.net/ui/Toolbars.htm'></include>
<include url='http://services.web-manufacture.net/ui/FrameWin.htm'></include>
<include url='http://services.web-manufacture.net/ui/Win.htm'></include>
<include url='http://services.web-manufacture.net/ui/Notification.htm'></include>
<include url='http://services.web-manufacture.net/ui/HtmlElements.htm'></include>
<include url='http://klab.web-manufacture.net/klab/files.component.htm'></include>
<include url='http://klab.web-manufacture.net/klab/editor.component.htm'></include>
<div class='toolbar vertical fixed with-titles' id='HeaderBar'>
    <div class='menuitem file-manager-button' id='create-file-button' icon="http://system.web-manufacture.net/images/document-small.png" onclick="FS.CreateNewDoc()">
        Создать
    </div>
    <div class='menuitem file-manager-button' id='create-folder-button' icon="http://system.web-manufacture.net/images/folderopened_yellow.png" onclick="FolderInputRender()">
        Создать папку
    </div>
    <div class='menuitem file-manager-button' id='delete-file' icon="http://system.web-manufacture.net/images/delete-mini.png" onclick="FS.DeleteDocs()">
        Удалить
    </div>
    <div class="menuitem round" icon="http://system.web-manufacture.net/images/ButtonUSSR.png" onclick="FS.ClearTagFilter();">
        Отменить фильтрацию
    </div>
    <div class="menuitem round" icon="" onclick="FS.ClearSelect();">
        Убрать выделение
    </div>
    <select id="EditorThemeSelector" size="1" onchange="Editor.ChangeTheme(this.value);">
        <optgroup label="Bright">
            <option value="ace/theme/chrome">Chrome</option>
            <option value="ace/theme/clouds">Clouds</option>
            <option value="ace/theme/crimson_editor">Crimson Editor</option>
            <option value="ace/theme/dawn">Dawn</option>
            <option value="ace/theme/dreamweaver">Dreamweaver</option>
            <option value="ace/theme/eclipse">Eclipse</option>
            <option value="ace/theme/github">GitHub</option>
            <option value="ace/theme/iplastic">IPlastic</option>
            <option value="ace/theme/solarized_light">Solarized Light</option>
            <option value="ace/theme/textmate">TextMate</option>
            <option value="ace/theme/tomorrow">Tomorrow</option>
            <option value="ace/theme/xcode">XCode</option>
            <option value="ace/theme/kuroir">Kuroir</option>
            <option value="ace/theme/katzenmilch">KatzenMilch</option>
            <option value="ace/theme/sqlserver">SQL Server</option>
        </optgroup>
        <optgroup label="Dark">
            <option value="ace/theme/ambiance">Ambiance</option>
            <option value="ace/theme/chaos">Chaos</option>
            <option value="ace/theme/clouds_midnight">Clouds Midnight</option>
            <option value="ace/theme/cobalt">Cobalt</option>
            <option value="ace/theme/idle_fingers">idle Fingers</option>
            <option value="ace/theme/kr_theme">krTheme</option>
            <option value="ace/theme/merbivore">Merbivore</option>
            <option value="ace/theme/merbivore_soft">Merbivore Soft</option>
            <option value="ace/theme/mono_industrial">Mono Industrial</option>
            <option value="ace/theme/monokai">Monokai</option>
            <option value="ace/theme/pastel_on_dark">Pastel on dark</option>
            <option value="ace/theme/solarized_dark">Solarized Dark</option>
            <option value="ace/theme/terminal">Terminal</option>
            <option value="ace/theme/tomorrow_night">Tomorrow Night</option>
            <option value="ace/theme/tomorrow_night_blue">Tomorrow Night Blue</option>
            <option value="ace/theme/tomorrow_night_bright">Tomorrow Night Bright</option>
            <option value="ace/theme/tomorrow_night_eighties">Tomorrow Night 80s</option>
            <option value="ace/theme/twilight">Twilight</option>
            <option value="ace/theme/vibrant_ink">Vibrant Ink</option>
        </optgroup>
    </select>

</div>

<div id='LoadingMask'>
    <div class='loading-text'>Loading...</div>
</div>

<files-browser id="filesBlock" class="files-block" title="File System">

</files-browser>
<text-editor id="textEditor">

</text-editor>
</body>
</html>