mp.js
In general, the theme rljbase
works without javascript. For prettyfication or for image lightboxes, I created a lightweight toolkit. mp.js
is modular and is built with Node.js and browserify.
Parts of mp.js
can be used everywhere, but I wrote it specifically to target the markup from the rljbase theme. So it might have some unwanted side effects if you use it in your own project with a completely different markup.
Features
- simple cookie management
- handle privacy events
- simple video - display YouTube and Vimeo iframes with a thumbnail and don't load videos without user's privacy consent
- simple image lightbox
- simple image carousel
- simple mail address protection
- prevents a
:target
jump in the pure css mobile nav
Modules
Core
to do...
Cookie
to do...
MailProtection
Simple mail address protection to prevent some crawlers from being able to read them. This only works for crawlers, that read raw html without running javascript.
If you write email addresses in the pattern john.doe [AT] example [DOT] com
(with spaces) or john.doe[AT]example[DOT]com
(without spaces), they will be converted to john.doe@example.com
.
It also replaces the pattern inside mailto links, if you created them before via php.
So the markup
<a href="mailto:john.doe [AT] example [DOT] com">john.doe [AT] example [DOT] com</a>
becomes
<a href="mailto:john.doe@example.com">john.doe@example.com</a>
Usage:
Add a snippet to your (theme) bootstrap.php
mp()->add('scripts', [
'MP.ready(function() {
MP.MailProtection.decode();
});'
]);
Usage example with a customized pattern:
mp()->add('scripts', [
'MP.ready(function() {
MP.MailProtection.init({at:"[Ät]",dot:"[Punkt]"});
});'
]);
Privacy
to do...
SimpleCarousel
to do...
SimpleLightbox
I tried multiple lightboxes out there, but I wasn't able to find one, that wasn't bloated or that didn't require a predifined pattern. So I wrote my own.
It expects a wrapper as a group selector and it allows multiple options for your markup, e. g.:
<div class="gallery">
<a href="img/original.jpg" title="Image caption in lightbox">
<img src="img/thumbnail.jpg" />
</a>
</div>
<p class="gallery">
<a href="img/original.jpg">
<figure>
<img src="img/thumbnail.jpg" />
<figcaption>Image caption in lightbox<figcaption>
</figure>
</a>
</p>
Init lightbox:
MP.ready(function() { // document is ready
// init lightbox
MP.Lightbox.init({
group: '.gallery', // all elements with class 'gallery' are galleries
selector: 'a' // all a tags are detected as image links
});
});
Tip: The lightbox is also compatible with WordPress Gutenberg galleries.
MP.ready(function() {
MP.Lightbox.init({group: '.wp-block-gallery', selector: 'a'});
}
SimpleModalManager
to do...
SimpleVideo
to do...