Добавляем все файлы
This commit is contained in:
172
main_plugin/form_editor/form_editor.css
Executable file
172
main_plugin/form_editor/form_editor.css
Executable file
@@ -0,0 +1,172 @@
|
||||
#formEditorContent {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 800px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
.formEditorArea {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#formEditorButtons,
|
||||
.formEditorProperties {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
#panelButtons {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-color: #f0f0f0;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
z-index: 50;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.fe-btn {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#panelProperties {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 0;
|
||||
margin: 10px;
|
||||
width: 17%;
|
||||
background-color: #f0f0f0;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
z-index: 50;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
height: -webkit-fill-available;
|
||||
min-width: 160px;
|
||||
padding-top: 15px;
|
||||
overflow-y: auto;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.panelHeader {
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.formEditorProperties {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
/* окно действий с элементами */
|
||||
#formEditorActions {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #f0f0f0;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
z-index: 50;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.formEditorActionPanel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.formEditorAction {
|
||||
text-align: center;
|
||||
border: 1px solid #000;
|
||||
border-radius: 3px;
|
||||
padding: 3px;
|
||||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.image-chooser {
|
||||
position: absolute;
|
||||
z-index: 50;
|
||||
background: #fff;
|
||||
border: 1px solid #ccc;
|
||||
padding: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.image-chooser button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
#formMainPanel {
|
||||
position: relative;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
#menuToggle {
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f0f0f0;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
z-index: 10;
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
#menuPanel {
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
left: 10px;
|
||||
display: none;
|
||||
background: #fff;
|
||||
border: 1px solid #ccc;
|
||||
padding: 5px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f0f0f0;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
#menuPanel button {
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 4px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#menuPanel label {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#gridInput {
|
||||
width: 60px;
|
||||
}
|
||||
1595
main_plugin/form_editor/form_editor.js
Executable file
1595
main_plugin/form_editor/form_editor.js
Executable file
File diff suppressed because it is too large
Load Diff
55
main_plugin/form_editor/form_editor.php
Executable file
55
main_plugin/form_editor/form_editor.php
Executable file
@@ -0,0 +1,55 @@
|
||||
<?php
|
||||
/**
|
||||
* @file form_editor.php
|
||||
* @brief Интерфейс визуального редактора форм: панель кнопок, область редактирования, свойства элементов, действия (копировать, вставить, удалить) и выбор изображений
|
||||
*/
|
||||
?>
|
||||
|
||||
<?php /** @brief Основной контейнер визуального редактора форм */ $formEditor; ?>
|
||||
<div id="formEditor" class="bfloat">
|
||||
<div class="btitle">{{form_editor}}</div>
|
||||
<div id="formEditorContent">
|
||||
<div id="formMainPanel">
|
||||
<button id="menuToggle">☰</button>
|
||||
<div id="menuPanel">
|
||||
<button id="downloadBtn">{{download_html}}</button>
|
||||
<button id="loadBtn">{{load_html}}</button>
|
||||
<button id="downloadCssBtn">{{download_html_and_auto_css}}</button>
|
||||
Сетка (px): <input id="gridInput" type="number" value="20" min="1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="formEditorPanel" id="panelButtons">
|
||||
<div id="formEditorButtons">
|
||||
<div class="fe-btn" id="addDiv">D</div>
|
||||
<div class="fe-btn" id="addText">T</div>
|
||||
<div class="fe-btn" id="addInput">I</div>
|
||||
<div class="fe-btn" id="addButton">B</div>
|
||||
<div class="fe-btn" id="addImg">Im</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="formEditorArea"></div>
|
||||
<div class="formEditorAreaStyle" style="display: none;"></div>
|
||||
<div class="formEditorPanel" id="panelProperties" style="display: none;">
|
||||
<div class="panelHeader">{{properties_and_actions}}</div>
|
||||
<div class="formEditorProperties">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="formEditorStyles" style="display: none;"><style></style></div>
|
||||
|
||||
<?php /** @brief Контейнер выбора изображения */ $image_chooser; ?>
|
||||
<div class="image-chooser" style="display: none;">
|
||||
<button id="imgByUrl">{{img_by_url}}</button>
|
||||
<button id="imgUpload">{{img_upload_to_server}}</button>
|
||||
<button id="imgData">{{img_insert_as_data_url}}</button>
|
||||
</div>
|
||||
|
||||
<?php /** @brief Панель действий с элементами формы (копировать, вставить, удалить) */ $formEditorActions; ?>
|
||||
<div id="formEditorActions">
|
||||
<div class="formEditorActionPanel">
|
||||
<div class="formEditorAction" id="copyAction">{{copy}}</div>
|
||||
<div class="formEditorAction" id="pasteAction">{{paste}}</div>
|
||||
<div class="formEditorAction" id="deleteAction">{{delete}}</div>
|
||||
</div>
|
||||
</div>
|
||||
21
main_plugin/form_editor/lang.js.php
Executable file
21
main_plugin/form_editor/lang.js.php
Executable file
@@ -0,0 +1,21 @@
|
||||
<?php
|
||||
/**
|
||||
* @file lang.js.php
|
||||
* @brief Подготавливает языковые строки и подставляет их в JS-файл редактора форм
|
||||
*/
|
||||
|
||||
/** @brief Языковой массив для редактора */
|
||||
$lang = include $path . 'lang.php';
|
||||
|
||||
/** @brief Текущий язык пользователя, по умолчанию 'en' */
|
||||
$lng = $_GET['lng'] ?? ($_SESSION['lng'] ?? 'en');
|
||||
|
||||
/** @brief Массив подстановок для шаблона JS */
|
||||
$placeholders = [];
|
||||
|
||||
foreach ($lang[$lng] as $key => $value) {
|
||||
$placeholders['{{' . $key . '}}'] = $value;
|
||||
}
|
||||
|
||||
echo 'window.addEventListener("load", function() {' . strtr(file_get_contents($path . 'form_editor.js'), $placeholders) . '});';
|
||||
?>
|
||||
11
main_plugin/form_editor/lang.php
Executable file
11
main_plugin/form_editor/lang.php
Executable file
@@ -0,0 +1,11 @@
|
||||
<?php
|
||||
$lang = [
|
||||
'ru' => [
|
||||
],
|
||||
'en' => [
|
||||
],
|
||||
'lv' => [
|
||||
],
|
||||
];
|
||||
|
||||
return $lang;
|
||||
40
main_plugin/form_editor/plug.php
Executable file
40
main_plugin/form_editor/plug.php
Executable file
@@ -0,0 +1,40 @@
|
||||
<?php
|
||||
/**
|
||||
* @file plug.php
|
||||
* @brief Подключает плагин form_editor для администраторов, подставляет языковые строки и выводит HTML-код редактора форм
|
||||
*/
|
||||
|
||||
global $path, $_SESSION, $configAdmins;
|
||||
|
||||
/** @brief Языковой массив для плагина form_editor */
|
||||
$lang = include $path . 'main_plugin/form_editor/lang.php';
|
||||
|
||||
/** @brief Текущий язык пользователя, по умолчанию 'en' */
|
||||
$lng = $_SESSION['lng'] ?? 'en';
|
||||
|
||||
if (in_array($_SESSION['username'], $configAdmins, true)) {
|
||||
|
||||
$Html = file_get_contents($path . 'main_plugin/form_editor/form_editor.php');
|
||||
foreach ($lang[$lng] as $key => $value) {
|
||||
$Html = str_replace('{{' . $key . '}}', $value, $Html);
|
||||
}
|
||||
|
||||
echo $Html;
|
||||
|
||||
echo "<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const c = document.querySelector('.center-float');
|
||||
const d = document.getElementById('formEditor');
|
||||
if (c && d) {
|
||||
c.appendChild(document.createElement('br'));
|
||||
c.appendChild(d);
|
||||
} else if (d) {
|
||||
d.remove();
|
||||
}
|
||||
});
|
||||
</script>";
|
||||
|
||||
echo '<link rel="stylesheet" type="text/css" href="/main_plugin/form_editor/form_editor.css">';
|
||||
echo '<script type="text/javascript" src="/main_plugin/form_editor/lang.js.php?lng=' . $lng . '"></script>';
|
||||
}
|
||||
?>
|
||||
Reference in New Issue
Block a user