|
|
| (17 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) |
| Zeile 1: |
Zeile 1: |
| {literal}<style>
| | <iframe src="https://h417397.server55.campusspeicher.de/aturien/wiki/britonia_karte/britonia_karte.html" |
| /* CSS hier */ | | style="width: 100%; min-width: 100%; height: 1000px; border: none; display: block;"> |
| </style>{/literal}
| | </iframe> |
| | | <noinclude> |
| <div class="lm-wrapper" id="lm-{{{id|karte}}}" style="width:{{{width|800}}}px; max-width:100%">
| | Standard-Iframe-Widget. |
| <div class="lm-controls" role="toolbar">
| | </noinclude> |
| <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> | |
| | |
| {literal}<script>
| |
| (function() {
| |
| function init() {
| |
| var wrapperId = '{/literal}{{{id|karte}}}{literal}';
| |
| var wrapper = document.getElementById('lm-' + 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 = 'lm-' + 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('lm-' + 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('lm-' + wrapperId + '-layer' + i);
| |
| opacitySlider.dataset.target = 'lm-' + 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>{/literal}
| |
<iframe src="https://h417397.server55.campusspeicher.de/aturien/wiki/britonia_karte/britonia_karte.html"
style="width: 100%; min-width: 100%; height: 1000px; border: none; display: block;">
</iframe>
Standard-Iframe-Widget.