Materialize theme
Posted: Thu Apr 21, 2022 8:11 pm
As you may know, I'm working on the WCMS theme PROTOTYPE, based on the Materialize Framework. Today I installed the Simple Blog plugin. Everything is working just fine but there is a javascript conflict between the Materialize javascript and the Simple Blog plugin which I can't solve.
theme.php code:
My theme uses the javascript navigation panel called "Sidenav", which uses that kind of link to trigger the panel:
More obout this feature here:
https://materializecss.com/sidenav.html
The slide-out panel does not work on the Blog pages with the Simple Blog plugin installed. Dedicated button does not slide the panel in. On other WCMS pages it works fine, being logged in or not.
Materialize Sidenav javascript part with this "Click to slide in" function:
Materialize framework sources, there you can find every part of javascript of the framework in separate *.js files:
https://materializecss.com/getting-started.html
Someone can help me with this? I am not familiar with javascript programming.
theme.php code:
Code: Select all
<?php global $Wcms ?>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Encoding, browser compatibility, viewport -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Search Engine Optimization (SEO) -->
<meta name="title" content="<?= $Wcms->get('config', 'siteTitle') ?> - <?= $Wcms->page('title') ?>" />
<meta name="apple-mobile-web-app-title" content="<?= $Wcms->get('config', 'siteTitle') ?>">
<meta name="description" content="<?= $Wcms->page('description') ?>">
<meta name="keywords" content="<?= $Wcms->page('keywords') ?>">
<meta property="og:url" content="<?= $this->url() ?>" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="<?= $Wcms->get('config', 'siteTitle') ?>" />
<meta property="og:title" content="<?= $Wcms->page('title') ?>" />
<meta name="twitter:site" content="<?= $this->url() ?>" />
<meta name="twitter:title" content="<?= $Wcms->get('config', 'siteTitle') ?> - <?= $Wcms->page('title') ?>" />
<meta name="twitter:description" content="<?= $Wcms->page('description') ?>" />
<!-- Website and page title -->
<title><?= $Wcms->get('config', 'siteTitle') ?> - <?= $Wcms->page('title') ?></title>
<!-- Admin CSS -->
<?= $Wcms->css() ?>
<!-- Theme CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<!-- Admin settings panel and alerts -->
<?= $Wcms->settings() ?>
<?= $Wcms->alerts() ?>
<nav>
<div class="nav-wrapper">
<a href="<?= $Wcms->url() ?>" class="brand-logo center"><?= $Wcms->get('config', 'siteTitle') ?></a>
</div>
</nav>
<ul class="sidenav left" id="slide-out"><!-- Navigation panel -->
<?= $Wcms->menu() ?>
</ul>
<div class="container">
<a style="position:fixed;top: 1.25rem;right: 1.25rem" href="#" data-target="slide-out" class="sidenav-trigger">Navigation</a><!-- "Sidenav" trigger link -->
<div class="section">
<div class="row">
<?= $Wcms->page('content') ?>
</div>
</div>
</div>
<footer class="page-footer">
<div class="container">
<div class="row">
<div class="col s12 l6">
<?= $Wcms->block('subside') ?>
</div>
<div class="col s12 l6">
<h5>Menu</h5><!-- Tytuł -->
<ul class="footer-menu">
<?= $Wcms->menu() ?>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
<div class="row">
<div class="col s12">
<?= $Wcms->footer() ?>
</div>
</div>
</div>
</div>
</footer>
<!-- Javascript -->
<!-- Admin JavaScript. More JS libraries can be added below -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<?= $Wcms->js() ?>
<script>
$(document).ready(function(){
$('.sidenav').sidenav({edge: 'right'});
});
</script>
</body>
</html>
Code: Select all
<a style="position:fixed; top: 1.25rem; right: 1.25rem" href="#" data-target="slide-out" class="sidenav-trigger">Navigation</a><!-- "Sidenav" trigger link -->
https://materializecss.com/sidenav.html
The slide-out panel does not work on the Blog pages with the Simple Blog plugin installed. Dedicated button does not slide the panel in. On other WCMS pages it works fine, being logged in or not.
Materialize Sidenav javascript part with this "Click to slide in" function:
Code: Select all
/**
* Handle Trigger Click
* @param {Event} e
*/
_handleTriggerClick(e) {
let $trigger = $(e.target).closest('.sidenav-trigger');
if (e.target && $trigger.length) {
let sidenavId = M.getIdFromTrigger($trigger[0]);
let sidenavInstance = document.getElementById(sidenavId).M_Sidenav;
if (sidenavInstance) {
sidenavInstance.open($trigger);
}
e.preventDefault();
}
}
https://materializecss.com/getting-started.html
Someone can help me with this? I am not familiar with javascript programming.