220 lines
6.7 KiB
HTML
220 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Test Editor Resize</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
padding: 20px;
|
|
background: #f5f5f5;
|
|
}
|
|
.test-container {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
h2 {
|
|
color: #333;
|
|
margin-bottom: 20px;
|
|
}
|
|
.editor-resizable {
|
|
position: relative;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 4px;
|
|
overflow: visible;
|
|
margin-bottom: 30px;
|
|
}
|
|
.editor-resize-handle {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 20px;
|
|
height: 20px;
|
|
cursor: nwse-resize;
|
|
background: linear-gradient(135deg, transparent 50%, #667eea 50%);
|
|
z-index: 1000;
|
|
transition: background 0.2s;
|
|
}
|
|
.editor-resize-handle:hover {
|
|
background: linear-gradient(135deg, transparent 50%, #5568d3 50%);
|
|
}
|
|
.editor-resize-handle:active {
|
|
background: linear-gradient(135deg, transparent 50%, #4451b8 50%);
|
|
}
|
|
.editor-content {
|
|
height: 300px;
|
|
overflow-y: auto;
|
|
padding: 15px;
|
|
background: white;
|
|
}
|
|
.editable-content {
|
|
height: 300px;
|
|
overflow-y: auto;
|
|
padding: 15px;
|
|
background: white;
|
|
border: none;
|
|
outline: none;
|
|
font-family: Arial, sans-serif;
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
resize: none;
|
|
}
|
|
.status {
|
|
padding: 10px;
|
|
background: #e7f3ff;
|
|
border-left: 4px solid #2196f3;
|
|
margin-bottom: 20px;
|
|
}
|
|
.info-box {
|
|
background: #fff3cd;
|
|
border-left: 4px solid #ffc107;
|
|
padding: 12px;
|
|
margin-bottom: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="test-container">
|
|
<h2>🧪 Editor Resize Test - Full Functionality</h2>
|
|
|
|
<div class="status">
|
|
<strong>✅ Test Instructions:</strong> Drag the small blue triangle in
|
|
the bottom-right corner to resize. You should be able to:
|
|
<ul style="margin: 10px 0 0 20px; padding: 0">
|
|
<li>Resize multiple times (up and down)</li>
|
|
<li>Edit/type in the expanded area</li>
|
|
<li>See smooth resizing with no jumps</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="info-box">
|
|
<strong>📝 Try This:</strong> Drag editor bigger → Type text in new
|
|
space → Drag smaller → Drag bigger again
|
|
</div>
|
|
|
|
<h3>Test 1: Editable Text Area</h3>
|
|
<div class="editor-resizable">
|
|
<textarea
|
|
id="editor1"
|
|
class="editable-content"
|
|
placeholder="Type here to test editing in expanded area..."
|
|
>
|
|
This is an EDITABLE text area.
|
|
|
|
Try this:
|
|
1. Drag the corner to make it BIGGER
|
|
2. Click here and TYPE NEW TEXT in the expanded area
|
|
3. Drag to make it SMALLER
|
|
4. Drag to make it BIGGER again
|
|
|
|
You should be able to resize multiple times and edit anywhere in the expanded space!</textarea
|
|
>
|
|
<div class="editor-resize-handle" data-target="editor1"></div>
|
|
</div>
|
|
|
|
<h3>Test 2: Contact Fields Scrollable</h3>
|
|
<div class="editor-resizable">
|
|
<div id="editor2" class="editor-content">
|
|
<p><strong>📞 Contact Information</strong></p>
|
|
<p>Phone: (555) 123-4567</p>
|
|
<p>Email: contact@example.com</p>
|
|
<p>Address: 123 Main St, City, State 12345</p>
|
|
<br />
|
|
<p><strong>🕐 Business Hours</strong></p>
|
|
<p>Monday - Friday: 9:00 AM - 6:00 PM</p>
|
|
<p>Saturday: 10:00 AM - 4:00 PM</p>
|
|
<p>Sunday: Closed</p>
|
|
<br />
|
|
<p><strong>Extra Content for Testing</strong></p>
|
|
<p>This content should remain scrollable.</p>
|
|
<p>Resize the box to see more or less content.</p>
|
|
<p>The scrollbar should work properly.</p>
|
|
</div>
|
|
<div class="editor-resize-handle" data-target="editor2"></div>
|
|
</div>
|
|
|
|
<div class="status" id="resizeStatus">
|
|
<strong>Status:</strong> Ready to test - Drag the corner handles!
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Simple Drag-to-Resize for Editor Content - EXACT SAME CODE AS ADMIN
|
|
(function () {
|
|
let resizeState = null;
|
|
const statusEl = document.getElementById("resizeStatus");
|
|
|
|
document.addEventListener("mousedown", function (e) {
|
|
if (e.target.classList.contains("editor-resize-handle")) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
const targetId = e.target.getAttribute("data-target");
|
|
const targetElement = document.getElementById(targetId);
|
|
|
|
if (!targetElement) return;
|
|
|
|
resizeState = {
|
|
target: targetElement,
|
|
handle: e.target,
|
|
startY: e.clientY,
|
|
startHeight: targetElement.offsetHeight,
|
|
};
|
|
|
|
document.body.style.cursor = "nwse-resize";
|
|
document.body.style.userSelect = "none";
|
|
e.target.style.pointerEvents = "none";
|
|
statusEl.innerHTML =
|
|
"<strong>Status:</strong> 🔄 Resizing " +
|
|
targetId +
|
|
"... (Height: " +
|
|
Math.round(resizeState.startHeight) +
|
|
"px)";
|
|
}
|
|
});
|
|
|
|
document.addEventListener("mousemove", function (e) {
|
|
if (resizeState) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
const deltaY = e.clientY - resizeState.startY;
|
|
const newHeight = Math.max(
|
|
200,
|
|
Math.min(1200, resizeState.startHeight + deltaY)
|
|
);
|
|
|
|
resizeState.target.style.height = newHeight + "px";
|
|
statusEl.innerHTML =
|
|
"<strong>Status:</strong> 📏 Resizing to " +
|
|
Math.round(newHeight) +
|
|
"px (Delta: " +
|
|
Math.round(deltaY) +
|
|
"px)";
|
|
}
|
|
});
|
|
|
|
document.addEventListener("mouseup", function () {
|
|
if (resizeState) {
|
|
const finalHeight = resizeState.target.offsetHeight;
|
|
statusEl.innerHTML =
|
|
"<strong>Status:</strong> ✅ Resize complete! Final height: " +
|
|
finalHeight +
|
|
"px. Try typing in the editor or resizing again!";
|
|
|
|
resizeState.handle.style.pointerEvents = "";
|
|
resizeState = null;
|
|
document.body.style.cursor = "";
|
|
document.body.style.userSelect = "";
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|