mirror of
https://github.com/ONLYOFFICE/onlyoffice.github.io.git
synced 2026-04-07 14:04:30 +08:00
255 lines
7.1 KiB
HTML
255 lines
7.1 KiB
HTML
<!--
|
|
(c) Copyright Ascensio System SIA 2020
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
-->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>ONLYOFFICE MACROS EDITOR</title>
|
|
<script type="text/javascript" src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.js"></script>
|
|
<script type="text/javascript" src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins-ui.js"></script>
|
|
<script src="vendor/jquery-v2.2.2-min.js"></script>
|
|
<link rel="stylesheet" href="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.css">
|
|
|
|
<style type="text/css" media="screen">
|
|
body {
|
|
overflow: hidden;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
#editor {
|
|
margin: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
#menu {
|
|
margin: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 42px;
|
|
left: 0;
|
|
right: 70%;
|
|
background-color: #F1F1F1;
|
|
overflow: hidden;
|
|
|
|
border-right-color: #CBCBCB;
|
|
border-right-style: solid;
|
|
border-right-width: 1px;
|
|
|
|
padding-right: 10px;
|
|
}
|
|
#editorWrapper {
|
|
margin: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 42px;
|
|
left: 30%;
|
|
right: 0;
|
|
}
|
|
|
|
.context-menu {
|
|
width: 180px;
|
|
background: transparent;
|
|
position: absolute;
|
|
z-index: 100;
|
|
display: none;
|
|
}
|
|
|
|
.context-menu-options {
|
|
list-style: none;
|
|
background-color: #FFFFFF;
|
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
border-radius: 4px;
|
|
padding: 5px 0;
|
|
margin: 2px 0 0;
|
|
}
|
|
|
|
.context-menu-option {
|
|
font-weight: normal;
|
|
padding: 5px 20px;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
font-size: 11px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.context-menu-option:hover {
|
|
background: rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.macrosAutostart {
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: calc(50% - 5px);
|
|
position: absolute;
|
|
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
|
|
font-size: 10px;
|
|
pointer-events: none;
|
|
box-sizing: border-box;
|
|
padding-left: 2px;
|
|
}
|
|
|
|
.macrosSelected {
|
|
position: relative;
|
|
background-color: #7D858C;
|
|
color: #FFFFFF;
|
|
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
|
|
font-size: 13px;
|
|
padding-bottom: 3px;
|
|
padding-left: 20px;
|
|
padding-right: 10px;
|
|
padding-top: 4px;
|
|
user-select: none;
|
|
margin: 5px 0px 5px 5px;
|
|
}
|
|
|
|
.macros {
|
|
position: relative;
|
|
background-color: #F1F1F1;
|
|
color: #000000;
|
|
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
|
|
font-size: 13px;
|
|
padding-bottom: 3px;
|
|
padding-left: 20px;
|
|
padding-right: 10px;
|
|
padding-top: 4px;
|
|
user-select: none;
|
|
margin: 5px 0px 5px 5px;
|
|
}
|
|
.macros:hover {
|
|
background-color: #D8DADC;
|
|
}
|
|
|
|
.divFooter {
|
|
position: absolute;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
width: 100%;
|
|
height: 42px;
|
|
left: 0px;
|
|
bottom: 0px;
|
|
box-sizing: border-box;
|
|
border-top-color: #CBCBCB;
|
|
border-top-style: solid;
|
|
border-top-width: 1px;
|
|
user-select:none;
|
|
}
|
|
|
|
.divRename {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 300px;
|
|
height: 100px;
|
|
margin: -50px 0px 0px -150px;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
border-color: #CBCBCB;
|
|
background: #F1F1F1;
|
|
z-index: 1001;
|
|
}
|
|
|
|
.textSelect::selection {
|
|
background: #D8DADC; /* WebKit/Blink Browsers */
|
|
}
|
|
.textSelect::-moz-selection {
|
|
background: #D8DADC; /* Gecko Browsers */
|
|
}
|
|
|
|
.divRenameMask {
|
|
position: fixed;
|
|
z-index: 1000;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
background-color: #000000;
|
|
opacity: 0.2;
|
|
}
|
|
.input_error {
|
|
display: none;
|
|
float: left;
|
|
position: relative;
|
|
}
|
|
|
|
.input_error:before {
|
|
content: '';
|
|
position: absolute;
|
|
right: 25px;
|
|
top: 21px;
|
|
width: 16px;
|
|
height: 16px;
|
|
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAACvSURBVDhPrZNRDoIwEER7COA6HgJPpAnHM4oXQdFE/VDfNrsfpQvGhkneT2dmky40rK77pq6ggx4eyhF2UGnMF4EWBvjMcIFW46nEgLcGl5BMOoSDGmR6EjZNz0GyjdbjALlfFjR5HnRajwNkSVnI5HnQaz0OkE1nIZPnwVPrxQNGrc9f4Qcnra+zxAbKP6OIg/IfyYSxhasGPcTzyyYC9pjO8IIbHGAPy4/pf4XwBSVejZ5wzd0zAAAAAElFTkSuQmCC);
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="menu">
|
|
<div id="menu_content" style="position:absolute;left:0px;top:0px;width:100%;height:100%;margin:0;padding:0;border:none;"></div>
|
|
</div>
|
|
|
|
<div id="editorWrapper">
|
|
|
|
<pre id="editor"></pre>
|
|
|
|
</div>
|
|
|
|
<div class="divFooter">
|
|
<div style="position:absolute;margin:0;padding:0;left:10px;top:10px;right: 10px;bottom: 10px;" id="menu_footer">
|
|
<button class="btn-text-default" style="left: 0px; top: 0px; position:relative; bottom: 0px;" id="button_new">New</button>
|
|
<button class="btn-text-default" style="left: 10px; top: 0px; position:relative; bottom: 0px;" id="button_delete">Delete</button>
|
|
<button class="btn-text-default" style="left: 20px; top: 0px; position:relative; bottom: 0px;" id="button_rename">Rename</button>
|
|
<button class="btn-text-default" style="left: 30px; top: 0px; position:relative; bottom: 0px; display:none" id="button_autostart">Autostart</button>
|
|
</div>
|
|
<button class="btn-text-default primary" style="right: 10px; top: 10px; position:absolute; bottom: 10px;" id="button_run">Run</button>
|
|
</div>
|
|
|
|
<div class="divRenameMask" id="idRenameMask" style="display: none">
|
|
</div>
|
|
<div class="divRename" id="idRename" style="display: none">
|
|
<input type="text" class="form-control textSelect" style="top:18px;margin: 0px;width:260px;left:20px;position:absolute;" id="rename_text" autofocus="autofocus" />
|
|
<div id="input_error_id" title="The name must not be empty" class="input_error" style="position:absolute; top:0px; right:0px; width: 0px; height: 16px; display: none;"></div>
|
|
|
|
<div class="divFooter">
|
|
<button class="btn-text-default primary" style="left: 75px; top: 10px; width:70px; position:absolute; bottom: 10px;" id="rename_ok">Ok</button>
|
|
<button class="btn-text-default" style="right: 75px; top: 10px; width:70px; position:absolute; bottom: 10px;" id="rename_cancel">Cancel</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="vendor/ace/src/ace.js"></script>
|
|
|
|
<!-- code -->
|
|
<script src="scripts/code.js"></script>
|
|
|
|
<div id="context-menu-id" class="context-menu"><ul class="context-menu-options"><li id="menu_autostart_id" class="context-menu-option" onclick="window.CustomContextMenu.onAutostartClick();">Make autostart</li></ul></div>
|
|
</body>
|
|
</html>
|