opening event modal on load

This commit is contained in:
marko
2022-10-24 18:30:59 +02:00
parent 81cbb973b9
commit 99846445a4
6 changed files with 76 additions and 69 deletions

View File

@@ -13,30 +13,45 @@ include_once("events.inc.php");
<!-- inits for the materializeCss -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems, {
// specify options here
function initSidenav() {
var sidenavElements = document.querySelectorAll('.sidenav');
var sidenavInstances = M.Sidenav.init(sidenavElements, {
});
});
// document.addEventListener('DOMContentLoaded', function() {
// var elems = document.querySelectorAll('.modal');
// var instances = M.Modal.init(elems, {
// // specify options here
// });
// });
};
function initModals() {
var modalElements = document.querySelectorAll('.modal');
var modalInstances = M.Modal.init(modalElements, {
});
};
function openEventModal(eventId){
openModal(`#event-modal-${eventId}`);
}
function openModal(modalId){
var modalElement = document.querySelector(modalId);
if( modalElement === null ){
console.log(`No modalElement by name ${modalId} found. Won't open!`);
return;
}
var modalInstance = M.Modal.getInstance(modalElement);
console.log("before opening: ", modalInstance);
modalInstance.open();
console.log("after opening: ", modalInstance);
}
// Open the given modal
document.addEventListener('DOMContentLoaded', function () {
// So far we assume the first given fragment (the stuff behind the #) is the modalId
var eventId = window.location.hash.substr(1);
var Modalelem = document.querySelector('#event-modal-'+eventId);
var instance = M.Modal.init(Modalelem);
instance.open();
// What to do when the document is loaded.
document.addEventListener('DOMContentLoaded', function() {
// init materialize elements
initModals();
initSidenav();
// opening event modal if given
var eventId = parseInt( window.location.hash.substr(1) );
if( !isNaN(eventId) ){
openEventModal(eventId);
}
});
</script>
<title><?php echo($meta['title']);?></title>
<meta name="description" content="<?php echo($meta['description']);?>" />
@@ -47,37 +62,8 @@ include_once("events.inc.php");
<body>
<header>
<!-- cwsvJudoApps SideNav -->
<div>
<nav class="indigo darken-4">
<div class="nav-wrapper">
<div class="col s12">
<a href="http://cwsvjudo.bplaced.net/" class="breadcrumb">cwsvJudo-Apps</a>
<a href="http://cwsvjudo.bplaced.net/participo/events" class="breadcrumb"><?php echo($meta['title']);?></a>
</div>
</div>
<a class="right top-nav sidenav-trigger waves-effect waves-light hide-on-large-only" href="#" data-target="nav-mobile">
<i class="material-icons">menu</i>
</a>
</nav>
<ul class="sidenav sidenav-fixed sidenav-close" id="nav-mobile">
<li class="logo">
<a style="height:auto;" class="brand-logo" id="logo-container" href="/participo/">
<img alt="cwsvJudoApps" style="max-width:100%;height:12vh;" class="responsive-img" src="http://cwsvjudo.bplaced.net/ressourcen/graphiken/logos/cwsvJudoLogoWappen.x256.png" />
</a>
</li>
<?php require_once("sidenav/loginStatus.php");?><!-- brings its own li -->
<li class="bold">
<a class="waves-effect waves-teal right-align" href="#eventList">Liste anstehender Events<i class="material-icons">format_list_bulleted</i></a>
</li>
<li class="bold">
<a class="waves-effect waves-teal right-align" href="#detailedEventList">Details anstehender Events<i class="material-icons">view_list</i></a>
</li>
</ul>
</div>
<!-- The sidenav -->
<?php require("./events.sidenav.inc.php");?>
</header>
<?php if($_SESSION['login']){ ?>