Optimierung

14**.09.22**

• Buttons an Moodle 4 (mebis) angepasst

07.06.22

• Modal-ID angepasst

03.06.2022

• Button-Code geändert: digiscreen-Elemente waren verschoben beim wiederholten Aufruf

02.06.22:

• neue Version (052) angepasst
• beforeunload event nun ohne Warnmeldung, damit kann die index.html direkt eingebunden werden.
• Achtung: index.html befindet sich nun im Ordner dist!

Anleitung

mebis/moodle: Digiscreen als Overlay

Moodle 4 mit Block in Seitenleiste rechts

<style>
.modal-backdrop.in, .modal-backdrop.show {
opacity: 0.1!important
}
@media (max-width: 1023px) {
#digiscreenbutton { display: /none; }
}
</style>
<script>
function changeStyle() {
document.getElementsByClassName("drawer-right")[0].style.zIndex = "9999";
document.getElementsByClassName("drawer")[0].style.zIndex = "9999";
}
</script>
<div style="position: fixed; bottom: 5rem; right: 1.0rem;background-color: transparent;"><button id="digiscreenbutton" type="button" class="btn btn-icon btn-primary" data-toggle="modal" data-target="#digiscreenModal" accesskey="b" onclick="changeStyle()">
<i class="fa fa-pencil"></i>
</button>
</div>
<!-- Modal -->
<div class="modal fade" id="digiscreenModal" tabindex="-1" role="dialog" aria-labelledby="digiscreenModalLabel" aria-hidden="true" style="overflow:hidden;z-index:10000;right:0;padding:0px!important"">
<div class="modal-dialog" style="max-width:100%;margin:0;background-color: transparent" role="document">
<div class="modal-content" style="background-color: transparent;border: 0px;">
<div class="modal-header" style="width:0px;padding:0px;z-index:10000;border:none">
<div style="position: fixed; bottom: 5rem; right: 1.0rem;z-index:10000;"background-color: transparent"><button  type="button" class="btn btn-icon btn-danger" data-dismiss="modal" aria-label="Close"  style="border-radius: 20px;" >
<span aria-hidden="true"><i class="fa fa-window-close"></i></span><br>
</button>
</div>
</div>
<div class="modal-body">
    <iframe src="[[LINK ZUR HTML-DATEI]]" style="background-color: transparent;width: 100vw;height: 100vh;border-color:red;position: fixed;right:0;bottom:0;left:0" name="digiscreen"  allowfullscreen></iframe>
      </div>

</div>
</div>
</div>