first changes for v0.2
This commit is contained in:
parent
50208b0ee8
commit
0140e114cd
8 changed files with 692 additions and 203 deletions
|
|
@ -1,3 +1,70 @@
|
|||
<div class="archive-controls"><label for="archive-date-select-${current_world_key}">Archivdatum:</label><select id="archive-date-select-${current_world_key}"><option value="">-- Bitte wählen --</option></select><span id="archive-loading-error-${current_world_key}" style="color:red;margin-left:10px;"></span></div>
|
||||
<div class="archive-image-container"><img id="archive-image-${current_world_key}" src="#" alt="Archivkarte" style="max-width:100%;border:1px solid #666;display:none;"><p id="archive-no-image-${current_world_key}" style="display:none;">Kein Bild für Auswahl.</p></div>
|
||||
<script>(function(){const e=document.getElementById('archive-date-select-${current_world_key}'),t=document.getElementById('archive-image-${current_world_key}'),n=document.getElementById('archive-no-image-${current_world_key}'),o=document.getElementById('archive-loading-error-${current_world_key}'),a=${available_archive_dates_js_array},i='${archive_world_rel_to_webroot}';if(!e||!a||a.length===0)return void(e&&(e.disabled=!0,e.innerHTML='<option value="">Keine Archivdaten</option>'));a.forEach(a_date=>{const r=document.createElement('option');r.value=a_date,r.textContent=a_date,e.appendChild(r)}),e.addEventListener('change',function(){t.style.display='none',n.style.display='none',o.textContent='',this.value&&(t.onload=function(){t.style.display='block'},t.onerror=function(){n.style.display='block',o.textContent='Bild nicht geladen.'},t.src=i+'/'+this.value.replace(/-/g,'/')+'.png?v=${CACHE_BUSTER}&t='+new Date().getTime())})})();</script>
|
||||
<div class="archive-controls">
|
||||
<label for="archive-date-selector-%%current_world_key%%">Archivdatum:</label>
|
||||
<select id="archive-date-selector-%%current_world_key%%">
|
||||
<option value="">-- Bitte wählen --</option>
|
||||
</select>
|
||||
<span id="archive-error-msg-%%current_world_key%%" class="archive-error"></span>
|
||||
</div>
|
||||
|
||||
<div class="archive-image-container">
|
||||
<img id="archive-image-%%current_world_key%%" alt="Archivierte Karte" style="display:none; max-width:100%;">
|
||||
<p id="archive-placeholder-%%current_world_key%%">Bitte ein Datum auswählen, um die Karte anzuzeigen.</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Um zu verhindern, dass das Skript mehrfach ausgeführt wird
|
||||
if (!window.archiveScriptLoaded_%%current_world_key%%) {
|
||||
window.archiveScriptLoaded_%%current_world_key%% = true;
|
||||
|
||||
const selector = document.getElementById('archive-date-selector-%%current_world_key%%');
|
||||
const imageElement = document.getElementById('archive-image-%%current_world_key%%');
|
||||
const placeholder = document.getElementById('archive-placeholder-%%current_world_key%%');
|
||||
const errorMessage = document.getElementById('archive-error-msg-%%current_world_key%%');
|
||||
const availableDates = %%available_archive_dates_js_array%%;
|
||||
const imageBaseUrl = '%%archive_world_rel_to_webroot%%';
|
||||
|
||||
if (selector && availableDates && availableDates.length > 0) {
|
||||
availableDates.forEach(dateStr => {
|
||||
const option = document.createElement('option');
|
||||
const parts = dateStr.split('-');
|
||||
option.value = dateStr;
|
||||
option.textContent = `${parts[2]}.${parts[1]}.${parts[0]}`;
|
||||
selector.appendChild(option);
|
||||
});
|
||||
|
||||
selector.addEventListener('change', function() {
|
||||
imageElement.style.display = 'none';
|
||||
errorMessage.textContent = '';
|
||||
|
||||
const selectedDate = this.value;
|
||||
|
||||
if (selectedDate) {
|
||||
// WICHTIGE ÄNDERUNG: Platzhalter wird jetzt hier versteckt
|
||||
placeholder.style.display = 'none';
|
||||
const dateParts = selectedDate.split('-');
|
||||
const imageUrl = `${imageBaseUrl}/${dateParts[0]}/${dateParts[1]}/${dateParts[2]}.png?v=%%CACHE_BUSTER%%`;
|
||||
imageElement.src = imageUrl;
|
||||
} else {
|
||||
// Wenn "-- Bitte wählen --" ausgewählt wird, Platzhalter wieder anzeigen
|
||||
placeholder.style.display = 'block';
|
||||
}
|
||||
});
|
||||
|
||||
imageElement.onload = function() {
|
||||
this.style.display = 'block';
|
||||
errorMessage.textContent = ''; // Sicherstellen, dass keine alte Fehlermeldung mehr da ist
|
||||
};
|
||||
|
||||
imageElement.onerror = function() {
|
||||
this.style.display = 'none';
|
||||
// WICHTIGE ÄNDERUNG: Fehlermeldung ersetzt jetzt den Platzhalter
|
||||
placeholder.style.display = 'none';
|
||||
errorMessage.textContent = 'Fehler: Bild für dieses Datum konnte nicht geladen werden.';
|
||||
};
|
||||
|
||||
} else if (selector) {
|
||||
selector.disabled = true;
|
||||
selector.querySelector('option').textContent = 'Keine Archive verfügbar';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue