Widget:Dialog-js

Aus ZUM-Unterrichten
<includeonly><script type="text/javascript">
(function(){
  const run = ()=>{
    document.querySelectorAll('[data-dialog-opener-id]').forEach((elem) => {
      if(elem.dataset.dialogOpenerAdded === 'true') { return; }


      const dialogId = elem.dataset.dialogOpenerId;
      const dialog = document.getElementById(dialogId);

      elem.dataset.dialogOpenerAdded = 'true';
      elem.addEventListener('click', (ev) => {
        dialog.showModal();
        ev.stopPropagation();
        return false;
      });
    });
  };
if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", run);
} else {
  run();
}
})();
</script><script type="text/javascript">
(function(){
  const run = ()=>{
    document.querySelectorAll('dialog.zum-dialog').forEach((elem) => {
      if(elem.dataset.dialogCloseonBackdropAdded === 'true') { return; }
      elem.dataset.dialogCloseonBackdropAdded = 'true';

      elem.addEventListener('mousedown', (ev) => {
        if(ev.target !== elem){return true;}
        const 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();
}
})();
</script>
<script type="text/javascript">
(function(){
  /*cleanup empty p tags, at beginning and end of dialogs created by Vorlage:DialogButton */
  const run = () => {
    document.querySelectorAll('dialog.zum-dialog').forEach((elem) => {
      if(elem.dataset.dialogCleanedup === 'true') { return; }
      elem.dataset.dialogCleanedup = 'true';
      [elem.firstElementChild, elem.lastElementChild]
        .filter((e) => e && e.tagName === 'P' && e.textContent === '')
        .forEach((e) => elem.removeChild(e))
    });
    document.querySelectorAll('[data-dialog-opener-id]').forEach((elem) => {
      if(elem.dataset.dialogCleanedup === 'true') { return; }
      elem.dataset.dialogCleanedup = 'true';
      [elem.firstElementChild, elem.lastElementChild]
        .filter((e) => e && e.tagName === 'P' && e.textContent === '')
        .forEach((e) => elem.removeChild(e))
    });
  };
if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", run);
} else {
  run();
}
})();
</script>
<script type="text/javascript">
(function(){
  /**/
  const run = () => {
    document.querySelectorAll('dialog.zum-dialog')
     .forEach((elem) => elem.querySelectorAll('button.popup-close')
       .forEach((btn) => btn.addEventListener('click', (ev) => {
         ev.stopImmediatePropagation();
       })));
  };
if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", run);
} else {
  run();
}
})();
</script></includeonly>