MediaWiki:Common.js und Vorlage:QR-Code: Unterschied zwischen den Seiten

Aus ZUM-Unterrichten
(Unterschied zwischen Seiten)
KKeine Bearbeitungszusammenfassung
 
KKeine Bearbeitungszusammenfassung
 
Zeile 1: Zeile 1:
/* Das folgende JavaScript wird für alle Benutzer geladen. */
<noinclude>{{QR-Code}}</noinclude>
 
<onlyinclude><includeonly>{{DialogButton
/*
|Inhalt=<div class="zum-qrcode">{{#qrlite:{{{Link|{{fullurl:{{FULLPAGENAME}}}}}}}|format=svg|size=80|ecc=4|margin=0}}</div>
* Dialog Javascript for
|Link=<span class="fa fa-qrcode fa-3x"></span></span>
* Vorlage:DialogButton
|Titel={{FULLPAGENAME}}
*
}}</includeonly>
*
</onlyinclude>
*/
<noinclude>
 
<templatedata>
(function(){
{
  /* add dialog opener event handler */
"params": {
  const run = function(){
"Link": {
    document.querySelectorAll('[data-dialog-opener-id]').forEach(function(elem) {
"label": "Link",
      if(elem.dataset.dialogOpenerAdded === 'true') { return; }
"description": "Der Link, den der QR Code enthalten soll.",
 
"type": "url",
 
"default": "{{fullurl:{{FULLPAGENAME}}}}"
      var dialogId = elem.dataset.dialogOpenerId;
}
      var dialog = document.getElementById(dialogId);
},
 
"description": "Erzeugt einen kleinen QR Code, welcher auf Klick einen Dialog öffnet mit einem großen QR Code",
      elem.dataset.dialogOpenerAdded = 'true';
"format": "inline"
      elem.addEventListener('click', function(ev) {
        dialog.showModal();
        ev.stopPropagation();
        return false;
      });
    });
  };
if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", run);
} else {
  run();
}
}
})();
</templatedata>
(function(){
</noinclude>
    /* close on click outside of dialog content */
    const run = function(){
    document.querySelectorAll('dialog.zum-dialog').forEach(function(elem){
      if(elem.dataset.dialogCloseonBackdropAdded === 'true') { return; }
      elem.dataset.dialogCloseonBackdropAdded = 'true';
 
      elem.addEventListener('mousedown', function(ev){
        if(ev.target !== elem){return true;}
        var rect = ev.target.getBoundingClientRect();
        if(ev.x >= rect.left
        && ev.x <= rect.right
        && ev.y >= rect.top
        && ev.y <= rect.bottom) { return true; }
 
        ev.target.close();
        ev.stopPropagation();
        return false;
      });
    });
  };
if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", run);
} else {
  run();
}
})();
(function(){
  /*cleanup empty p tags, at beginning and end of dialogs created by Vorlage:DialogButton */
  const run = function() {
    document.querySelectorAll('dialog.zum-dialog').forEach(function(elem) {
      if(elem.dataset.dialogCleanedup === 'true') { return; }
      elem.dataset.dialogCleanedup = 'true';
      [elem.firstElementChild, elem.lastElementChild]
        .filter(function(e){return e && e.tagName === 'P' && e.textContent === '';})
        .forEach(function(e) { elem.removeChild(e);})
    });
    document.querySelectorAll('[data-dialog-opener-id]').forEach(function(elem) {
      if(elem.dataset.dialogCleanedup === 'true') { return; }
      elem.dataset.dialogCleanedup = 'true';
      [elem.firstElementChild, elem.lastElementChild]
        .filter(function(e){ return e && e.tagName === 'P' && e.textContent === '';})
        .forEach(function(e){ elem.removeChild(e);})
    });
  };
if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", run);
} else {
  run();
}
})();
(function(){
  /* overrule mediawiki default popup-close event handler */
  const run = function() {
    document.querySelectorAll('dialog.zum-dialog')
    .forEach(function(elem) {elem.querySelectorAll('button.popup-close')
      .forEach(function(btn) { btn.addEventListener('click', function(ev) {
        ev.stopImmediatePropagation();
      });});});
  };
if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", run);
} else {
  run();
}
})();

Version vom 18. Februar 2024, 20:50 Uhr



Erzeugt einen kleinen QR Code, welcher auf Klick einen Dialog öffnet mit einem großen QR Code

Vorlagenparameter

Diese Vorlage bevorzugt Inline-Formatierung von Parametern.

ParameterBeschreibungTypStatus
LinkLink

Der Link, den der QR Code enthalten soll.

Standard
{{fullurl:{{FULLPAGENAME}}}}
URLoptional