<\/p>)+/, '').replace(/(
<\/p>)+$/, '');
@@ -179,21 +163,32 @@ class WriterEditor {
this.quill.on('text-change', sync);
this.form.addEventListener('submit', sync);
- // Делаем глобально доступным для автосейва
+ // Обработчик изменения ориентации для мобильных устройств
+ window.addEventListener('orientationchange', () => {
+ if (this.isFullscreen) {
+ setTimeout(() => this.adjustFullscreenHeight(), 300);
+ }
+ });
+
+ // Обработчик изменения размера окна
+ window.addEventListener('resize', () => {
+ if (this.isFullscreen) {
+ this.adjustFullscreenHeight();
+ }
+ });
+
window.quillEditorInstance = this.quill;
window.quillTextarea = this.textarea;
}
addCustomButtonsToToolbar() {
- // Находим тулбар Quill
const toolbar = this.quill.container.previousSibling;
if (!toolbar) return;
- // Находим кнопки по классам Quill
const dialogueBtn = toolbar.querySelector('.ql-dialogue');
const undoDialogueBtn = toolbar.querySelector('.ql-undodialogue');
+ const fullscreenBtn = toolbar.querySelector('.ql-fullscreen');
- // Заменяем содержимое кнопок на наши символы
if (dialogueBtn) {
dialogueBtn.innerHTML = '—';
dialogueBtn.title = 'Форматировать диалоги (—)';
@@ -205,6 +200,137 @@ class WriterEditor {
undoDialogueBtn.title = 'Убрать форматирование диалогов (-)';
undoDialogueBtn.style.fontWeight = 'bold';
}
+
+ if (fullscreenBtn) {
+ fullscreenBtn.innerHTML = '⛶';
+ fullscreenBtn.title = 'Полноэкранный режим';
+ }
+ }
+
+ toggleFullscreen() {
+ if (this.isFullscreen) {
+ this.exitFullscreen();
+ } else {
+ this.enterFullscreen();
+ }
+ }
+
+ enterFullscreen() {
+ this.isFullscreen = true;
+
+ // Сохраняем оригинальные стили
+ this.originalStyles = {
+ container: this.editorContainer.style.cssText,
+ body: document.body.style.cssText,
+ toolbar: this.quill.container.previousSibling.style.cssText
+ };
+
+ // Получаем тулбар
+ const toolbar = this.quill.container.previousSibling;
+
+ // Применяем стили для полноэкранного режима
+ document.body.style.overflow = 'hidden';
+
+ this.editorContainer.style.position = 'fixed';
+ this.editorContainer.style.top = '0';
+ this.editorContainer.style.left = '0';
+ this.editorContainer.style.width = '100vw';
+ this.editorContainer.style.zIndex = '9999';
+ this.editorContainer.style.background = 'white';
+ this.editorContainer.style.paddingTop = toolbar.offsetHeight + 'px';
+
+ // Стили для тулбара
+ toolbar.style.position = 'fixed';
+ toolbar.style.top = '0';
+ toolbar.style.left = '0';
+ toolbar.style.width = '100%';
+ toolbar.style.zIndex = '10000';
+ toolbar.style.background = 'white';
+ toolbar.style.borderBottom = '1px solid #ccc';
+
+ this.adjustFullscreenHeight();
+
+ // Добавляем обработчик ESC
+ this.escapeHandler = (e) => {
+ if (e.key === 'Escape') {
+ this.exitFullscreen();
+ }
+ };
+ document.addEventListener('keydown', this.escapeHandler);
+
+ // Добавляем кнопку выхода из полноэкранного режима
+ this.addFullscreenExitButton();
+ }
+
+ exitFullscreen() {
+ this.isFullscreen = false;
+
+ // Восстанавливаем оригинальные стили
+ this.editorContainer.style.cssText = this.originalStyles.container || '';
+ document.body.style.cssText = this.originalStyles.body || '';
+
+ const toolbar = this.quill.container.previousSibling;
+ if (toolbar) {
+ toolbar.style.cssText = this.originalStyles.toolbar || '';
+ }
+
+ // Удаляем обработчик ESC
+ if (this.escapeHandler) {
+ document.removeEventListener('keydown', this.escapeHandler);
+ }
+
+ // Удаляем кнопку выхода
+ this.removeFullscreenExitButton();
+ }
+
+ adjustFullscreenHeight() {
+ // Корректируем высоту с учетом видимой области и возможной клавиатуры
+ const visualViewport = window.visualViewport || window;
+ const height = visualViewport.height || window.innerHeight;
+
+ this.editorContainer.style.height = height + 'px';
+
+ // Пересчитываем размеры Quill
+ setTimeout(() => {
+ this.quill.root.style.height = '100%';
+ this.quill.root.querySelector('.ql-editor').style.height = '100%';
+ }, 50);
+ }
+
+ addFullscreenExitButton() {
+ // Создаем кнопку выхода из полноэкранного режима
+ this.exitButton = document.createElement('button');
+ this.exitButton.innerHTML = '✕';
+ this.exitButton.title = 'Выйти из полноэкранного режима (ESC)';
+ this.exitButton.style.cssText = `
+ position: fixed;
+ top: 10px;
+ right: 10px;
+ z-index: 10001;
+ background: #dc3545;
+ color: white;
+ border: none;
+ border-radius: 50%;
+ width: 40px;
+ height: 40px;
+ font-size: 18px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ `;
+
+ this.exitButton.addEventListener('click', () => {
+ this.exitFullscreen();
+ });
+
+ document.body.appendChild(this.exitButton);
+ }
+
+ removeFullscreenExitButton() {
+ if (this.exitButton && this.exitButton.parentNode) {
+ this.exitButton.parentNode.removeChild(this.exitButton);
+ }
}
formatExistingDialogues() {