Feature: Scan-Fortschritt als SVG-Ring um das Zoom-Statusfeld
This commit is contained in:
parent
49d129e00c
commit
cd3f118113
4 changed files with 73 additions and 87 deletions
|
|
@ -2036,66 +2036,6 @@ textarea.form-control {
|
|||
.map-place-btns .btn { flex: 1; }
|
||||
|
||||
/* Statusleiste: nur Info, unten links */
|
||||
/* Scan-Fortschrittsbalken — oben im Kartenfenster */
|
||||
.map-scan-bar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1001;
|
||||
height: 40px;
|
||||
background: rgba(255,255,255,0.92);
|
||||
backdrop-filter: blur(6px);
|
||||
border-bottom: 1px solid var(--c-border-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: 0 var(--space-4);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.25s;
|
||||
overflow: hidden;
|
||||
}
|
||||
.map-scan-bar.active {
|
||||
opacity: 1;
|
||||
}
|
||||
.map-scan-bar__track {
|
||||
flex: 1;
|
||||
height: 6px;
|
||||
background: var(--c-border-light);
|
||||
border-radius: var(--radius-full);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.map-scan-bar__fill {
|
||||
height: 6px;
|
||||
background: var(--c-primary);
|
||||
border-radius: var(--radius-full);
|
||||
width: 0%;
|
||||
transition: width 0.4s ease;
|
||||
position: relative;
|
||||
}
|
||||
.map-scan-bar__fill::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; right: 0; bottom: 0;
|
||||
width: 60px;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
|
||||
animation: scan-shimmer 1.2s ease-in-out infinite;
|
||||
}
|
||||
@keyframes scan-shimmer {
|
||||
0% { transform: translateX(-60px); opacity: 0; }
|
||||
50% { opacity: 1; }
|
||||
100% { transform: translateX(60px); opacity: 0; }
|
||||
}
|
||||
.map-scan-bar__label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--c-primary);
|
||||
min-width: 80px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.map-statusbar {
|
||||
position: absolute;
|
||||
bottom: var(--space-3);
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
Router, State-Management, Navigation, Initialisierung.
|
||||
============================================================ */
|
||||
|
||||
const APP_VER = '97'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
|
||||
const APP_VER = '98'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
|
||||
|
||||
const App = (() => {
|
||||
|
||||
|
|
|
|||
|
|
@ -183,13 +183,6 @@ window.Page_map = (() => {
|
|||
<button class="map-fab" id="map-locate-btn" title="Meinen Standort"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#map-pin"></use></svg></button>
|
||||
</div>
|
||||
|
||||
<div class="map-scan-bar" id="map-scan-bar">
|
||||
<span class="map-scan-bar__label" id="map-scan-label"></span>
|
||||
<div class="map-scan-bar__track">
|
||||
<div class="map-scan-bar__fill" id="map-scan-fill"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="map-statusbar" id="map-statusbar">
|
||||
<span id="map-zoom-info"></span>
|
||||
<span id="map-osm-status"></span>
|
||||
|
|
@ -412,29 +405,82 @@ window.Page_map = (() => {
|
|||
function _setOsmStatus(text, pct = null) {
|
||||
const el = document.getElementById('map-osm-status');
|
||||
if (el) el.textContent = text;
|
||||
_updateScanRing(text ? pct : null);
|
||||
}
|
||||
|
||||
const bar = document.getElementById('map-scan-bar');
|
||||
const fill = document.getElementById('map-scan-fill');
|
||||
const label = document.getElementById('map-scan-label');
|
||||
if (!bar || !fill || !label) return;
|
||||
function _updateScanRing(pct) {
|
||||
const statusbar = document.getElementById('map-statusbar');
|
||||
if (!statusbar) return;
|
||||
const mapEl = statusbar.closest('.map-main') || statusbar.parentElement;
|
||||
if (!mapEl) return;
|
||||
|
||||
if (!text) {
|
||||
bar.classList.remove('active');
|
||||
let svg = document.getElementById('map-scan-ring');
|
||||
|
||||
// Ring ausblenden / entfernen
|
||||
if (pct === null) {
|
||||
if (svg) { svg.style.opacity = '0'; setTimeout(() => svg?.remove(), 600); }
|
||||
statusbar.style.border = '';
|
||||
return;
|
||||
}
|
||||
bar.classList.add('active');
|
||||
if (pct !== null) {
|
||||
fill.style.width = `${pct}%`;
|
||||
label.textContent = pct < 100 ? `Scanne ${pct}\u202f%` : '';
|
||||
} else {
|
||||
fill.style.width = '30%';
|
||||
fill.classList.add('indeterminate');
|
||||
label.textContent = text;
|
||||
|
||||
// SVG einmalig erzeugen
|
||||
if (!svg) {
|
||||
svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||||
svg.id = 'map-scan-ring';
|
||||
svg.setAttribute('overflow', 'visible');
|
||||
svg.style.cssText = 'position:absolute;pointer-events:none;z-index:1002;transition:opacity 0.55s ease';
|
||||
const path = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
|
||||
path.id = 'map-scan-ring-rect';
|
||||
path.setAttribute('fill', 'none');
|
||||
path.setAttribute('stroke', '#C4843A');
|
||||
path.setAttribute('stroke-width', '3');
|
||||
path.setAttribute('stroke-linecap', 'round');
|
||||
svg.appendChild(path);
|
||||
mapEl.appendChild(svg);
|
||||
}
|
||||
if (pct === 100) {
|
||||
fill.style.width = '100%';
|
||||
label.textContent = '';
|
||||
setTimeout(() => bar.classList.remove('active'), 600);
|
||||
|
||||
// Position relativ zum Map-Container berechnen
|
||||
const sr = statusbar.getBoundingClientRect();
|
||||
const mr = mapEl.getBoundingClientRect();
|
||||
const w = sr.width;
|
||||
const h = sr.height;
|
||||
const r = h / 2; // border-radius-full = Hälfte der Höhe
|
||||
const p = 2; // Abstand zur inneren Kante
|
||||
|
||||
// Umfang der Pill: gerades Stück + zwei Halbkreise
|
||||
const perim = 2 * (w - h) + Math.PI * h;
|
||||
// Stroke beginnt oben-links und läuft im Uhrzeigersinn
|
||||
// Um bei 12 Uhr zu starten: Offset um das linke Halbkreis-Viertel + halbe Geraden verschieben
|
||||
const startShift = (w - h) / 2 + (Math.PI * h) / 4;
|
||||
const progress = Math.min(100, Math.max(0, pct));
|
||||
const dashOffset = perim * (1 - progress / 100) + startShift;
|
||||
|
||||
svg.style.left = (sr.left - mr.left - p) + 'px';
|
||||
svg.style.top = (sr.top - mr.top - p) + 'px';
|
||||
svg.style.width = (w + p * 2) + 'px';
|
||||
svg.style.height = (h + p * 2) + 'px';
|
||||
svg.style.opacity = '1';
|
||||
|
||||
const rect = document.getElementById('map-scan-ring-rect');
|
||||
rect.setAttribute('x', String(p));
|
||||
rect.setAttribute('y', String(p));
|
||||
rect.setAttribute('width', String(w));
|
||||
rect.setAttribute('height', String(h));
|
||||
rect.setAttribute('rx', String(r));
|
||||
rect.setAttribute('ry', String(r));
|
||||
rect.setAttribute('stroke-dasharray', perim.toFixed(2));
|
||||
rect.setAttribute('stroke-dashoffset', dashOffset.toFixed(2));
|
||||
|
||||
// Original-Rahmen verstecken während Ring aktiv ist
|
||||
statusbar.style.border = 'none';
|
||||
|
||||
if (progress >= 100) {
|
||||
setTimeout(() => {
|
||||
const s = document.getElementById('map-scan-ring');
|
||||
if (s) s.style.opacity = '0';
|
||||
statusbar.style.border = '';
|
||||
setTimeout(() => s?.remove(), 600);
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
Offline-Cache + Push Notifications + Tile-Cache
|
||||
============================================================ */
|
||||
|
||||
const CACHE_VERSION = 'by-v122';
|
||||
const CACHE_VERSION = 'by-v123';
|
||||
const CACHE_STATIC = `${CACHE_VERSION}-static`;
|
||||
const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue