|
|
| (18 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) |
| Zeile 1: |
Zeile 1: |
| <!-- CSS --> | | <iframe src="https://h417397.server55.campusspeicher.de/aturien/wiki/britonia_karte/britonia_karte.html" |
| <style>
| | style="width: 100%; min-width: 100%; height: 1000px; border: none; display: block;"> |
| .lm-wrapper {
| | </iframe> |
| display: inline-block;
| | <noinclude> |
| max-width: 100%;
| | Standard-Iframe-Widget. |
| border: 1px solid #a2a9b1;
| | </noinclude> |
| border-radius: 6px;
| |
| overflow: hidden;
| |
| background: #f8f9fa;
| |
| vertical-align: top;
| |
| }
| |
| .lm-controls { | |
| display: flex;
| |
| flex-wrap: wrap;
| |
| align-items: center;
| |
| gap: 6px;
| |
| padding: 8px 12px;
| |
| background: #f8f9fa;
| |
| border-bottom: 1px solid #a2a9b1;
| |
| min-height: 42px;
| |
| }
| |
| .lm-controls-title { | |
| font-size: 0.82em;
| |
| font-weight: bold;
| |
| color: #54595d;
| |
| margin-right: 4px;
| |
| }
| |
| .lm-btn { | |
| display: inline-flex;
| |
| align-items: center;
| |
| padding: 4px 12px;
| |
| font-size: 0.82em;
| |
| font-family: inherit;
| |
| color: #202122;
| |
| background: #ffffff;
| |
| border: 1px solid #a2a9b1;
| |
| border-radius: 3px;
| |
| cursor: pointer;
| |
| transition: background 0.15s, color 0.15s, border-color 0.15s;
| |
| white-space: nowrap;
| |
| }
| |
| .lm-btn:hover {
| |
| background: #eaf3fb;
| |
| border-color: #3680b0;
| |
| color: #0645ad;
| |
| }
| |
| .lm-btn-active {
| |
| background: #3680b0;
| |
| color: #ffffff;
| |
| border-color: #3680b0;
| |
| }
| |
| .lm-viewport {
| |
| position: relative;
| |
| display: block;
| |
| overflow: hidden;
| |
| background: #eaecf0;
| |
| }
| |
| .lm-layer {
| |
| position: absolute;
| |
| top: 0; left: 0;
| |
| width: 100%; height: 100%;
| |
| display: block;
| |
| object-fit: fill;
| |
| max-width: none;
| |
| transition: opacity 0.2s ease;
| |
| pointer-events: none;
| |
| }
| |
| .lm-layer:first-child {
| |
| position: relative;
| |
| }
| |
| .lm-opacity-bar {
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 8px;
| |
| padding: 6px 12px;
| |
| background: #f8f9fa;
| |
| border-top: 1px solid #a2a9b1;
| |
| }
| |
| .lm-opacity-label {
| |
| font-size: 0.80em;
| |
| color: #54595d;
| |
| white-space: nowrap;
| |
| }
| |
| .lm-opacity-slider {
| |
| flex: 1;
| |
| accent-color: #3680b0;
| |
| cursor: pointer;
| |
| }
| |
| .lm-opacity-value {
| |
| font-size: 0.80em;
| |
| color: #202122;
| |
| min-width: 36px;
| |
| text-align: right;
| |
| }
| |
| </style>
| |
| | |
| <!-- HTML -->
| |
| <div class="lm-wrapper" id="lm-{{{id|karte}}}" style="width:{{{width|800}}}px; max-width:100%">
| |
| | |
| <div class="lm-controls" role="toolbar" aria-label="Kartenebenen">
| |
| <span class="lm-controls-title">Ebenen</span>
| |
| </div>
| |
| | |
| <div class="lm-viewport" style="width:{{{width|800}}}px; height:{{{height|600}}}px; max-width:100%">
| |
| <!--layerdata:{{{layers}}}-->
| |
| </div>
| |
| | |
| <div class="lm-opacity-bar" style="display:none">
| |
| <span class="lm-opacity-label">Deckkraft:</span>
| |
| <input class="lm-opacity-slider" type="range" min="0" max="100" value="100">
| |
| <span class="lm-opacity-value">100%</span>
| |
| </div>
| |
| | |
| </div>
| |
| | |
| <!-- JavaScript -->
| |
| <script>
| |
| (function() {
| |
| function init() {
| |
| var wrapperId = 'lm-{{{id|karte}}}';
| |
| var wrapper = document.getElementById(wrapperId);
| |
| if (!wrapper) return;
| |
| | |
| var viewport = wrapper.querySelector('.lm-viewport');
| |
| var controls = wrapper.querySelector('.lm-controls');
| |
| var opacityBar = wrapper.querySelector('.lm-opacity-bar');
| |
| var opacitySlider = opacityBar.querySelector('.lm-opacity-slider');
| |
| var opacityValue = opacityBar.querySelector('.lm-opacity-value');
| |
| | |
| var comment = viewport.innerHTML.match(/<!--layerdata:([\s\S]*?)-->/);
| |
| if (!comment) return;
| |
| | |
| var layers;
| |
| try { layers = JSON.parse(comment[1]); }
| |
| catch(e) { return; }
| |
| | |
| viewport.innerHTML = '';
| |
| layers.forEach(function(layer, i) {
| |
| var img = document.createElement('img');
| |
| img.className = 'lm-layer';
| |
| img.id = wrapperId + '-layer' + i;
| |
| img.src = layer.image;
| |
| img.alt = layer.label;
| |
| img.style.opacity = layer.visible ? '1' : '0';
| |
| viewport.appendChild(img);
| |
| });
| |
| | |
| controls.innerHTML = '<span class="lm-controls-title">Ebenen</span>';
| |
| layers.forEach(function(layer, i) {
| |
| var btn = document.createElement('button');
| |
| btn.type = 'button';
| |
| btn.textContent = layer.label;
| |
| btn.className = 'lm-btn' + (layer.visible ? ' lm-btn-active' : '');
| |
| if (layer.visible) {
| |
| btn.style.background = layer.color;
| |
| btn.style.borderColor = layer.color;
| |
| btn.style.color = '#fff';
| |
| }
| |
| btn.addEventListener('click', function() {
| |
| layer.visible = !layer.visible;
| |
| var img = document.getElementById(wrapperId + '-layer' + i);
| |
| if (img) img.style.opacity = layer.visible ? '1' : '0';
| |
| btn.className = 'lm-btn' + (layer.visible ? ' lm-btn-active' : '');
| |
| btn.style.background = layer.visible ? layer.color : '';
| |
| btn.style.borderColor = layer.visible ? layer.color : '';
| |
| btn.style.color = layer.visible ? '#fff' : '';
| |
| });
| |
| btn.addEventListener('mouseenter', function() {
| |
| if (!layer.visible) return;
| |
| var img = document.getElementById(wrapperId + '-layer' + i);
| |
| opacitySlider.dataset.target = wrapperId + '-layer' + i;
| |
| opacitySlider.value = Math.round(parseFloat(img.style.opacity) * 100);
| |
| opacityValue.textContent = opacitySlider.value + '%';
| |
| opacityBar.style.display = 'flex';
| |
| });
| |
| controls.appendChild(btn);
| |
| });
| |
| | |
| opacitySlider.addEventListener('input', function() {
| |
| var img = document.getElementById(opacitySlider.dataset.target);
| |
| if (img) img.style.opacity = opacitySlider.value / 100;
| |
| opacityValue.textContent = opacitySlider.value + '%';
| |
| });
| |
| wrapper.addEventListener('mouseleave', function() {
| |
| opacityBar.style.display = 'none';
| |
| });
| |
| }
| |
| | |
| if (document.readyState === 'loading') {
| |
| document.addEventListener('DOMContentLoaded', init);
| |
| } else {
| |
| init();
| |
| }
| |
| })();
| |
| </script> | |