Spaces:
Running
Running
File size: 6,541 Bytes
b07d9ae 2ec058a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Zoom Controls</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<style>
.text-selection-toolbar {
position: absolute;
background: rgba(0,0,0,0.9);
border-radius: 8px;
padding: 6px;
display: flex;
gap: 4px;
z-index: 1000;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
transform: translateY(-100%) translateY(-8px);
opacity: 0;
transition: opacity 0.2s ease;
}
.text-selection-toolbar.visible {
opacity: 1;
}
.text-selection-toolbar button {
background: #3b82f6;
color: white;
border: none;
border-radius: 4px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s ease;
}
.text-selection-toolbar button:hover {
background: #2563eb;
}
.text-selection-toolbar button i {
width: 16px;
height: 16px;
}
.highlighted-text {
background: rgba(59, 130, 246, 0.2);
border-radius: 2px;
position: relative;
}
</style>
</head>
<body class="bg-gray-50 min-h-screen p-8">
<div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md p-6">
<h1 class="text-3xl font-bold text-gray-800 mb-6">Text Selection Demo</h1>
<div class="prose max-w-none" id="content">
<p class="text-gray-700 mb-4">Select any text in this paragraph to see the zoom controls appear. These controls will allow you to increase or decrease the font size of the selected text. The toolbar is minimal and only shows the essential zoom functions.</p>
<p class="text-gray-700 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor.</p>
<p class="text-gray-700">Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p>
</div>
</div>
<div class="text-selection-toolbar" id="textToolbar">
<button id="increaseFontSize" title="Increase font size">
<i data-feather="plus"></i>
</button>
<button id="decreaseFontSize" title="Decrease font size">
<i data-feather="minus"></i>
</button>
</div>
<script>
feather.replace();
let currentSelection = null;
let highlightedElement = null;
document.addEventListener('mouseup', function(e) {
const selection = window.getSelection();
if (selection.toString().trim().length > 0) {
showToolbar(selection);
} else {
hideToolbar();
removeHighlights();
}
});
document.addEventListener('mousedown', function(e) {
if (!e.target.closest('#textToolbar')) {
hideToolbar();
removeHighlights();
}
});
function showToolbar(selection) {
const range = selection.getRangeAt(0);
const rect = range.getBoundingClientRect();
const toolbar = document.getElementById('textToolbar');
// Highlight the selected text
highlightSelection(range);
// Position the toolbar above the selection
toolbar.style.left = `${rect.left + window.scrollX + (rect.width / 2) - (toolbar.offsetWidth / 2)}px`;
toolbar.style.top = `${rect.top + window.scrollY}px`;
toolbar.classList.add('visible');
currentSelection = selection;
}
function hideToolbar() {
const toolbar = document.getElementById('textToolbar');
toolbar.classList.remove('visible');
currentSelection = null;
}
function highlightSelection(range) {
// Remove previous highlight
removeHighlights();
// Create a span to highlight the selected text
const span = document.createElement('span');
span.className = 'highlighted-text';
// Surround the selected text with the span
range.surroundContents(span);
// Store reference to the highlighted element
highlightedElement = span;
}
function removeHighlights() {
if (highlightedElement) {
// Replace the highlight span with its contents
const parent = highlightedElement.parentNode;
while (highlightedElement.firstChild) {
parent.insertBefore(highlightedElement.firstChild, highlightedElement);
}
parent.removeChild(highlightedElement);
highlightedElement = null;
}
}
document.getElementById('increaseFontSize').addEventListener('click', function() {
if (highlightedElement) {
const currentSize = parseInt(window.getComputedStyle(highlightedElement).fontSize) || 16;
highlightedElement.style.fontSize = `${currentSize + 2}px`;
}
hideToolbar();
});
document.getElementById('decreaseFontSize').addEventListener('click', function() {
if (highlightedElement) {
const currentSize = parseInt(window.getComputedStyle(highlightedElement).fontSize) || 16;
highlightedElement.style.fontSize = `${Math.max(currentSize - 2, 8)}px`;
}
hideToolbar();
});
</script>
</body>
</html>
|