Widget:Test

{literal}<style> /* CSS hier */ </style>{/literal}

   Ebenen

   Deckkraft:
   <input class="lm-opacity-slider" type="range" min="0" max="100" value="100">
   100%

{literal}<script> (function() {

 function init() {
   var wrapperId = '{/literal}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(//);
   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 = 'Ebenen';
   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}