From 53c3ddd06e1d3703b2f32fbb5bffce9ee0b04713 Mon Sep 17 00:00:00 2001
From: Bruno Bruno <b.bruno@1xinternet.de>
Date: Wed, 23 Apr 2025 08:56:33 +0200
Subject: [PATCH 1/2] Issue #3519334: Make editing overlay truly resizable
---
css/frontend_editing.css | 18 ++++++++++--
js/frontend_editing.js | 63 ++++++++++++++++++++++++++++++++++++++--
2 files changed, 76 insertions(+), 5 deletions(-)
diff --git a/css/frontend_editing.css b/css/frontend_editing.css
index 2c92d55..e7565f9 100644
--- a/css/frontend_editing.css
+++ b/css/frontend_editing.css
@@ -17,9 +17,6 @@ body.path-frontend-editing {
transition: width 0.5s;
overflow: auto;
}
-.editing-container--wide {
- width: 80%;
-}
.editing-container--loading {
animation-duration: 1.8s;
animation-fill-mode: forwards;
@@ -442,3 +439,18 @@ button.fe-confirm-dialog-button--false {
background-color: rgba(var(--fe-editing-primary-color), 0.6);
border-color: rgba(var(--fe-editing-primary-color), 0.6);
}
+
+/* Sidebar */
+.sidebar-resizer {
+ width: 5px;
+ cursor: ew-resize;
+ height: 100%;
+ position: absolute;
+ left: 0;
+ top: 0;
+}
+
+/* Prevents dragging of content while sidebar is resized */
+body:has(.sidebar-resizer:hover) .frontend-editing {
+ pointer-events: none;
+}
diff --git a/js/frontend_editing.js b/js/frontend_editing.js
index 899358f..f32bbf1 100644
--- a/js/frontend_editing.js
+++ b/js/frontend_editing.js
@@ -56,9 +56,62 @@
// Global variables
let sidebarWidth = 30;
let sidebarFullWidth = 70;
+ const editWideClass = 'editing-container--wide';
Drupal.frontendEditing = Drupal.frontendEditing || {};
+ Drupal.frontendEditing.sidebarResizer = function (editContainer) {
+ const $sidebarResizer = document.createElement('div');
+ $sidebarResizer.classList.add('sidebar-resizer');
+ editContainer.append($sidebarResizer);
+
+ let isResizing = false;
+ let resizedWidth;
+
+ $sidebarResizer.addEventListener('mousedown', (e) => {
+ isResizing = true;
+
+ document.body.style.cursor = 'ew-resize';
+ document.body.style.userSelect = 'none';
+ editContainer.style.transition = 'none';
+ });
+
+ window.addEventListener('mousemove', (e) => {
+ if (!isResizing) return;
+
+ // Prevent text selection and dragging.
+ editContainer.style.pointerEvents = 'none';
+
+ const windowWidth = window.innerWidth;
+ const newWidth = windowWidth - e.clientX;
+ const newWidthPercent = (newWidth / windowWidth) * 100;
+
+ // Set a min and max width for the sidebar.
+ // -5% from the default width is the minimum width of the sidebar.
+ if (newWidthPercent >= (sidebarWidth - 5) && newWidthPercent < 90) {
+ editContainer.style.width = `${newWidthPercent}%`;
+ resizedWidth = newWidthPercent;
+ }
+ });
+
+ window.addEventListener('mouseup', () => {
+ if (!isResizing) return;
+
+ editContainer.style.pointerEvents = 'auto';
+ document.body.style.cursor = '';
+ document.body.style.userSelect = '';
+ editContainer.style.transition = '';
+
+ if(resizedWidth > sidebarWidth) {
+ editContainer.classList.add(editWideClass);
+ } else {
+ editContainer.classList.remove(editWideClass);
+ }
+
+ isResizing = false;
+ });
+ }
+
// Remove all placeholders.
Drupal.frontendEditing.removePlaceholder = function () {
// Delete all previews placeholders.
@@ -93,18 +146,24 @@
'editing-container',
'editing-container--loading',
);
+
document.body.append(editContainer);
+
+ // Add sidebar resizer.
+ Drupal.frontendEditing.sidebarResizer(editContainer);
+
editContainer.style.width = sidebarClassWidth;
} else {
editContainer.innerHTML = '';
}
// Setup width toggle button.
- const editWideClass = 'editing-container--wide';
const widthToggle = document.createElement('button');
widthToggle.type = 'button';
widthToggle.className = 'editing-container__toggle';
widthToggle.addEventListener('click', function (e) {
- if (editContainer.classList.contains(editWideClass)) {
+ const currentWidth = parseFloat(editContainer.style.width) || 0;
+
+ if (editContainer.classList.contains(editWideClass) || currentWidth > sidebarWidth) {
editContainer.classList.remove(editWideClass);
editContainer.style.width = sidebarClassWidth;
} else {
--
GitLab
From f3e6b3a7f9a38f2c615a12463bd5c0bc09de3873 Mon Sep 17 00:00:00 2001
From: Artem Dmitriiev <a.dmitriiev@1xinternet.de>
Date: Wed, 23 Apr 2025 16:23:00 +0200
Subject: [PATCH 2/2] Remove whitespaces
---
js/frontend_editing.js | 23 ++++++++++++-----------
1 file changed, 12 insertions(+), 11 deletions(-)
diff --git a/js/frontend_editing.js b/js/frontend_editing.js
index f32bbf1..2fef7e9 100644
--- a/js/frontend_editing.js
+++ b/js/frontend_editing.js
@@ -67,7 +67,7 @@
let isResizing = false;
let resizedWidth;
-
+
$sidebarResizer.addEventListener('mousedown', (e) => {
isResizing = true;
@@ -81,19 +81,19 @@
// Prevent text selection and dragging.
editContainer.style.pointerEvents = 'none';
-
+
const windowWidth = window.innerWidth;
const newWidth = windowWidth - e.clientX;
const newWidthPercent = (newWidth / windowWidth) * 100;
-
+
// Set a min and max width for the sidebar.
// -5% from the default width is the minimum width of the sidebar.
- if (newWidthPercent >= (sidebarWidth - 5) && newWidthPercent < 90) {
+ if (newWidthPercent >= (sidebarWidth - 5) && newWidthPercent < 90) {
editContainer.style.width = `${newWidthPercent}%`;
resizedWidth = newWidthPercent;
}
});
-
+
window.addEventListener('mouseup', () => {
if (!isResizing) return;
@@ -101,16 +101,17 @@
document.body.style.cursor = '';
document.body.style.userSelect = '';
editContainer.style.transition = '';
-
+
if(resizedWidth > sidebarWidth) {
editContainer.classList.add(editWideClass);
- } else {
+ }
+ else {
editContainer.classList.remove(editWideClass);
}
isResizing = false;
- });
- }
+ });
+ };
// Remove all placeholders.
Drupal.frontendEditing.removePlaceholder = function () {
@@ -162,7 +163,6 @@
widthToggle.className = 'editing-container__toggle';
widthToggle.addEventListener('click', function (e) {
const currentWidth = parseFloat(editContainer.style.width) || 0;
-
if (editContainer.classList.contains(editWideClass) || currentWidth > sidebarWidth) {
editContainer.classList.remove(editWideClass);
editContainer.style.width = sidebarClassWidth;
@@ -280,7 +280,8 @@
'.frontend-editing-actions',
context,
);
- // Find all elements with frontend editing action buttons and attach event listener.
+ // Find all elements with frontend editing action buttons and attach
+ // event listener.
actionsElements.forEach(function (actionsElement) {
actionsElement.addEventListener('mouseover', function () {
const container = actionsElement.closest('.frontend-editing');
--
GitLab