MediaWiki:Common.js: Unterschied zwischen den Versionen

Aus Wikikama
Keine Bearbeitungszusammenfassung
Markierung: Zurückgesetzt
Keine Bearbeitungszusammenfassung
Markierung: Zurückgesetzt
Zeile 16: Zeile 16:
});
});


mw.loader.using('mediawiki.util', function () {
mw.loader.using(['mediawiki.util'], function () {
  // Sobald das DOM fertig ist…
   document.addEventListener('DOMContentLoaded', function () {
   document.addEventListener('DOMContentLoaded', function () {
    // 1) Leere DIV suchen
     var container = document.getElementById('link-scanner');
     var container = document.getElementById('link-scanner');
     if (!container) return;
     if (!container) return; // nichts tun, wenn nicht vorhanden


     // 1) Formular-HTML per JS erzeugen
     // 2) Formular per JS erzeugen
     container.innerHTML = '\
     container.innerHTML = '\
       <div style="background:#F7FAFC; padding:16px; border-left:5px solid #2C5282; border-radius:8px; margin:1em 0;">\
       <div style="background:#F7FAFC; padding:16px; border-left:5px solid #2C5282; \
                  border-radius:8px; margin:1em 0;">\
         <strong>🔗 Mini-Link-Scanner:</strong><br><br>\
         <strong>🔗 Mini-Link-Scanner:</strong><br><br>\
         <input type="url" id="linkScannerInput" placeholder="https://example.com" \
         <input type="url" id="linkScannerInput" placeholder="https://example.com" \
           style="width:70%; padding:8px; border:1px solid #ccc; border-radius:4px;" />\
           style="width:70%; padding:8px; border:1px solid #ccc; border-radius:4px;" />\
         <button id="linkScannerBtn" style="padding:8px 12px; margin-left:8px; background:#2C5282; color:#fff; border:none; border-radius:4px; cursor:pointer;">\
         <button id="linkScannerBtn" \
          style="padding:8px 12px; margin-left:8px; background:#2C5282; color:#fff; \
                border:none; border-radius:4px; cursor:pointer;">\
           Scan-Link\
           Scan-Link\
         </button>\
         </button>\
         <div id="linkScannerResult" style="margin-top:12px; font-size:95%; line-height:1.4em;"></div>\
         <div id="linkScannerResult" \
            style="margin-top:12px; font-size:95%; line-height:1.4em;"></div>\
       </div>';
       </div>';


     // 2) Deine bestehende Scanner-Logik
     // 3) Event-Listener für die Schaltfläche
     var btn    = document.getElementById('linkScannerBtn'),
     var btn    = document.getElementById('linkScannerBtn'),
         input  = document.getElementById('linkScannerInput'),
         input  = document.getElementById('linkScannerInput'),
Zeile 46: Zeile 52:
       result.innerHTML = '🔄 Scanne ' + mw.html.escape(url) + ' …';
       result.innerHTML = '🔄 Scanne ' + mw.html.escape(url) + ' …';


      // 4) CORS-Proxy Anfrage
       fetch('https://api.allorigins.win/raw?url=' + encodeURIComponent(url))
       fetch('https://api.allorigins.win/raw?url=' + encodeURIComponent(url))
         .then(function(res){
         .then(function(res){
Zeile 54: Zeile 61:
           var doc      = new DOMParser().parseFromString(html,'text/html'),
           var doc      = new DOMParser().parseFromString(html,'text/html'),
               title    = doc.querySelector('title') ? doc.querySelector('title').textContent : '',
               title    = doc.querySelector('title') ? doc.querySelector('title').textContent : '',
               descMeta = doc.querySelector('meta[name="description"]'),
               descMeta = doc.querySelector('meta[name=\"description\"]'),
               desc    = descMeta ? descMeta.content : '',
               desc    = descMeta ? descMeta.content : '',
               ogImg    = doc.querySelector('meta[property="og:image"]'),
               ogImg    = doc.querySelector('meta[property=\"og:image\"]'),
               img      = ogImg ? ogImg.content : '',
               img      = ogImg ? ogImg.content : '',
               out      = '';
               out      = '';
Zeile 62: Zeile 69:
           if (title) out += '<b>Titel:</b> ' + mw.html.escape(title) + '<br>';
           if (title) out += '<b>Titel:</b> ' + mw.html.escape(title) + '<br>';
           if (desc)  out += '<b>Beschreibung:</b> ' + mw.html.escape(desc) + '<br>';
           if (desc)  out += '<b>Beschreibung:</b> ' + mw.html.escape(desc) + '<br>';
           if (img)  out += '<b>Vorschaubild:</b><br><img src="'  
           if (img)  out += '<b>Vorschaubild:</b><br>'
                          + mw.html.escape(img)  
                        + '<img src=\"' + mw.html.escape(img) + '\" style=\"max-width:100%; \
                          + '" style="max-width:100%; margin-top:8px; border:1px solid #ddd; border-radius:4px;" />';
                                margin-top:8px; border:1px solid #ddd; border-radius:4px;\" />';
           if (!title && !desc && !img) out = '<span style="color:#c53030;">Keine Metadaten gefunden.</span>';
           if (!title && !desc && !img) out = '<span style=\"color:#c53030;\">Keine Metadaten gefunden.</span>';


           result.innerHTML = out;
           result.innerHTML = out;
         })
         })
         .catch(function(err){
         .catch(function(err){
           result.innerHTML = '<span style="color:#c53030;">Fehler: '
           result.innerHTML = '<span style=\"color:#c53030;\">Fehler: '  
                          + mw.html.escape(err.message) + '</span>';
                            + mw.html.escape(err.message) + '</span>';
         });
         });
     });
     });
   });
   });
});
});

Version vom 28. Mai 2025, 18:29 Uhr

/* Das folgende JavaScript wird für alle Benutzer geladen. */
$(function () {
  if (mw.config.get('wgNamespaceNumber') >= 0) {
    $('body').append(
      '<div id="support-banner">❤️ <b>WIKIKAMA und Mimikama sind unabhängig und werbefrei – hilf mit, das möglich zu machen!</b> <a href="https://www.wikikama.org/index.php/Unterstützen">Jetzt unterstützen!</a></div>'
    );
  }
});
// === Meta-Tags in den <head> einfügen ===
$(function() {
  var og = '';
  og += '<meta property="og:title" content="' + mw.config.get('wgTitle') + ' – Wikikama" />';
  og += '<meta property="og:description" content="' + $('p').first().text().substr(0, 150) + '…" />';
  og += '<meta property="og:image" content="https://www.wikikama.org/images/default-og-image.png" />';
  $('head').append( og );
});

mw.loader.using(['mediawiki.util'], function () {
  // Sobald das DOM fertig ist…
  document.addEventListener('DOMContentLoaded', function () {
    // 1) Leere DIV suchen
    var container = document.getElementById('link-scanner');
    if (!container) return;  // nichts tun, wenn nicht vorhanden

    // 2) Formular per JS erzeugen
    container.innerHTML = '\
      <div style="background:#F7FAFC; padding:16px; border-left:5px solid #2C5282; \
                   border-radius:8px; margin:1em 0;">\
        <strong>🔗 Mini-Link-Scanner:</strong><br><br>\
        <input type="url" id="linkScannerInput" placeholder="https://example.com" \
          style="width:70%; padding:8px; border:1px solid #ccc; border-radius:4px;" />\
        <button id="linkScannerBtn" \
          style="padding:8px 12px; margin-left:8px; background:#2C5282; color:#fff; \
                 border:none; border-radius:4px; cursor:pointer;">\
          Scan-Link\
        </button>\
        <div id="linkScannerResult" \
             style="margin-top:12px; font-size:95%; line-height:1.4em;"></div>\
      </div>';

    // 3) Event-Listener für die Schaltfläche
    var btn    = document.getElementById('linkScannerBtn'),
        input  = document.getElementById('linkScannerInput'),
        result = document.getElementById('linkScannerResult');

    btn.addEventListener('click', function () {
      var url = input.value.trim();
      if (!url) {
        result.innerHTML = '<span style="color:#c53030;">Bitte gib eine URL ein.</span>';
        return;
      }
      result.innerHTML = '🔄 Scanne ' + mw.html.escape(url) + ' …';

      // 4) CORS-Proxy Anfrage
      fetch('https://api.allorigins.win/raw?url=' + encodeURIComponent(url))
        .then(function(res){
          if (!res.ok) throw new Error(res.statusText);
          return res.text();
        })
        .then(function(html){
          var doc      = new DOMParser().parseFromString(html,'text/html'),
              title    = doc.querySelector('title') ? doc.querySelector('title').textContent : '',
              descMeta = doc.querySelector('meta[name=\"description\"]'),
              desc     = descMeta ? descMeta.content : '',
              ogImg    = doc.querySelector('meta[property=\"og:image\"]'),
              img      = ogImg ? ogImg.content : '',
              out      = '';

          if (title) out += '<b>Titel:</b> ' + mw.html.escape(title) + '<br>';
          if (desc)  out += '<b>Beschreibung:</b> ' + mw.html.escape(desc) + '<br>';
          if (img)   out += '<b>Vorschaubild:</b><br>' 
                         + '<img src=\"' + mw.html.escape(img) + '\" style=\"max-width:100%; \
                                margin-top:8px; border:1px solid #ddd; border-radius:4px;\" />';
          if (!title && !desc && !img) out = '<span style=\"color:#c53030;\">Keine Metadaten gefunden.</span>';

          result.innerHTML = out;
        })
        .catch(function(err){
          result.innerHTML = '<span style=\"color:#c53030;\">Fehler: ' 
                            + mw.html.escape(err.message) + '</span>';
        });
    });
  });
});