Widget:Test: Unterschied zwischen den Versionen

Aus Aturien – Wiki
Zur Navigation springen Zur Suche springen
← Zum vorherigen VersionsunterschiedZum nächsten Versionsunterschied →
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
{literal}<style>
<style>
/* CSS hier */
.lm-wrapper{display:inline-block;max-width:100%;border:1px solid #a2a9b1;border-radius:6px;overflow:hidden;background:#f8f9fa;vertical-align:top}
</style>{/literal}
.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:.82em;font-weight:bold;color:#54595d;margin-right:4px}
.lm-btn{display:inline-flex;align-items:center;padding:4px 12px;font-size:.82em;font-family:inherit;color:#202122;background:#fff;border:1px solid #a2a9b1;border-radius:3px;cursor:pointer;transition:background .15s,color .15s,border-color .15s;white-space:nowrap}
.lm-btn:hover{background:#eaf3fb;border-color:#3680b0;color:#0645ad}
.lm-btn-active{background:#3680b0;color:#fff;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 .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:.80em;color:#54595d;white-space:nowrap}
.lm-opacity-slider{flex:1;accent-color:#3680b0;cursor:pointer}
.lm-opacity-value{font-size:.80em;color:#202122;min-width:36px;text-align:right}
</style>


<div class="lm-wrapper" id="lm-{{{id|karte}}}" style="width:{{{width|800}}}px; max-width:100%">
<div class="lm-wrapper" id="lm-{{{id|karte}}}" style="width:{{{width|800}}}px;max-width:100%">
   <div class="lm-controls" role="toolbar">
   <div class="lm-controls" role="toolbar" aria-label="Kartenebenen">
     <span class="lm-controls-title">Ebenen</span>
     <span class="lm-controls-title">Ebenen</span>
   </div>
   </div>
   <div class="lm-viewport" style="width:{{{width|800}}}px; height:{{{height|600}}}px; max-width:100%">
   <div class="lm-viewport" style="width:{{{width|800}}}px;height:{{{height|600}}}px;max-width:100%">
     <!--layerdata:{{{layers}}}-->
     <!--layerdata:{{{layers}}}-->
   </div>
   </div>
Zeile 17: Zeile 29:
</div>
</div>


{literal}<script>
<script>
(function() {
(function() {
   function init() {
   var wrapperId = 'lm-{{{id|karte}}}';
    var wrapperId = '{/literal}{{{id|karte}}}{literal}';
  var wrapper = document.getElementById(wrapperId);
    var wrapper = document.getElementById('lm-' + wrapperId);
  if (!wrapper) return;
    if (!wrapper) return;


    var viewport = wrapper.querySelector('.lm-viewport');
  var viewport = wrapper.querySelector('.lm-viewport');
    var controls = wrapper.querySelector('.lm-controls');
  var controls = wrapper.querySelector('.lm-controls');
    var opacityBar = wrapper.querySelector('.lm-opacity-bar');
  var opacityBar = wrapper.querySelector('.lm-opacity-bar');
    var opacitySlider = opacityBar.querySelector('.lm-opacity-slider');
  var opacitySlider = opacityBar.querySelector('.lm-opacity-slider');
    var opacityValue = opacityBar.querySelector('.lm-opacity-value');
  var opacityValue = opacityBar.querySelector('.lm-opacity-value');


    var comment = viewport.innerHTML.match(/<!--layerdata:([\s\S]*?)-->/);
  var comment = viewport.innerHTML.match(/<!--layerdata:([\s\S]*?)-->/);
    if (!comment) return;
  if (!comment) return;


    var layers;
  var layers;
    try { layers = JSON.parse(comment[1]); }
  try { layers = JSON.parse(comment[1]); }
    catch(e) { return; }
  catch(e) { console.error('LayeredMap: Ungültiges JSON', e); return; }


    viewport.innerHTML = '';
  viewport.innerHTML = '';
    layers.forEach(function(layer, i) {
  layers.forEach(function(layer, i) {
      var img = document.createElement('img');
    var img = document.createElement('img');
      img.className = 'lm-layer';
    img.className = 'lm-layer';
      img.id = 'lm-' + wrapperId + '-layer' + i;
    img.id = wrapperId + '-layer' + i;
      img.src = layer.image;
    img.src = layer.image;
      img.alt = layer.label;
    img.alt = layer.label;
      img.style.opacity = layer.visible ? '1' : '0';
    img.style.opacity = layer.visible ? '1' : '0';
      viewport.appendChild(img);
    viewport.appendChild(img);
    });
  });


    controls.innerHTML = '<span class="lm-controls-title">Ebenen</span>';
  controls.innerHTML = '<span class="lm-controls-title">Ebenen</span>';
    layers.forEach(function(layer, i) {
  layers.forEach(function(layer, i) {
      var btn = document.createElement('button');
    var btn = document.createElement('button');
      btn.type = 'button';
    btn.type = 'button';
      btn.textContent = layer.label;
    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.className = 'lm-btn' + (layer.visible ? ' lm-btn-active' : '');
       if (layer.visible) {
       btn.style.background = layer.visible ? layer.color : '';
        btn.style.background = layer.color;
      btn.style.borderColor = layer.visible ? layer.color : '';
        btn.style.borderColor = layer.color;
      btn.style.color = layer.visible ? '#fff' : '';
        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);
     });
     });
 
     btn.addEventListener('mouseenter', function() {
     opacitySlider.addEventListener('input', function() {
      if (!layer.visible) return;
       var img = document.getElementById(opacitySlider.dataset.target);
       var img = document.getElementById(wrapperId + '-layer' + i);
       if (img) img.style.opacity = opacitySlider.value / 100;
      opacitySlider.dataset.target = wrapperId + '-layer' + i;
       opacitySlider.value = Math.round(parseFloat(img.style.opacity) * 100);
       opacityValue.textContent = opacitySlider.value + '%';
       opacityValue.textContent = opacitySlider.value + '%';
      opacityBar.style.display = 'flex';
     });
     });
     wrapper.addEventListener('mouseleave', function() {
     controls.appendChild(btn);
      opacityBar.style.display = 'none';
  });
    });
  }


   if (document.readyState === 'loading') {
   opacitySlider.addEventListener('input', function() {
    document.addEventListener('DOMContentLoaded', init);
    var img = document.getElementById(opacitySlider.dataset.target);
  } else {
    if (img) img.style.opacity = opacitySlider.value / 100;
     init();
    opacityValue.textContent = opacitySlider.value + '%';
   }
  });
  wrapper.addEventListener('mouseleave', function() {
     opacityBar.style.display = 'none';
   });
})();
})();
</script>{/literal}
</script>

Version vom 6. Juni 2026, 13:25 Uhr

<style> .lm-wrapper{display:inline-block;max-width:100%;border:1px solid #a2a9b1;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:.82em;font-weight:bold;color:#54595d;margin-right:4px} .lm-btn{display:inline-flex;align-items:center;padding:4px 12px;font-size:.82em;font-family:inherit;color:#202122;background:#fff;border:1px solid #a2a9b1;border-radius:3px;cursor:pointer;transition:background .15s,color .15s,border-color .15s;white-space:nowrap} .lm-btn:hover{background:#eaf3fb;border-color:#3680b0;color:#0645ad} .lm-btn-active{background:#3680b0;color:#fff;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 .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:.80em;color:#54595d;white-space:nowrap} .lm-opacity-slider{flex:1;accent-color:#3680b0;cursor:pointer} .lm-opacity-value{font-size:.80em;color:#202122;min-width:36px;text-align:right} </style>

<script> (function() { 

 var wrapperId = 'lm-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(//);
 if (!comment) return;

 var layers;
 try { layers = JSON.parse(comment[1]); }
 catch(e) { console.error('LayeredMap: Ungültiges JSON', 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 = '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(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';
 });

})(); </script>

Abgerufen von „https://wiki.aturien-ev.de/index.php?title=Widget:Test&oldid=318“