Merl javascript collection

I’m primarly a visual designer. But I do enjoy tinkering around with javascript. Usually, I try to solve things in my own way to better understand the challenges and consequences. In my narrow and privileged world view, I consider these ready for production. If you think otherwise, please send your feedback.

Proceed at your own risk.

About Merl

It’s basically a namespace for my javascript endeavours. As I have a tendency to name things after characters from the Simpson’s, Merl is named after Cletus cousin Merl. A construction worker at the Springfield Dam.

I prefer separating Javascript from styles. As much as possible, I try to not add styles via javascript.

The basic structure of each module is pretty much consistent. There are default values which you can override when initiating. And for each module, there are custom settings as well.

Getting started

I include each javascript module just before the end of the closing body-element. Don’t forget utils.js, and put it first:

<script src="[…]/utils.js"></script>
<script src="[…]/module1.js"></script>

After each module is included, I need to initiate each. Looking something like this, if I’ve got two modules:

<script src="[…]/utils.js"></script>
<script src="[…]/module1.js"></script>
<script src="[…]/module2.js"></script>
<script>
	document.onreadystatechange = function () {
		if ( document.readyState === 'interactive' ) {
			merl.module1.init();
			merl.module2.init();
		}
	};
</script>

Changing default settings for the entire module:

merl.module1.init( { 'param':'.Component-element' } );

Custom settings for an instance of the module needs to be put on parent element, as JSON:

<div class="Component" data-module1='{"param": "value"}'>

Notice! Default settings and custom settings doesn’t always use the same parameters.

Toggle (Github)

At it’s core, toggles a class on parent element. E.g. I use it to show/hide overlays. Escape and click outside usually hides overlay.

If default location for overlay will be outside of viewport, the javascript will add a few classes. This way, you can relocate the overlay. E.g. scroll down so the first example toggle button almost touches the bottom part of the viewport. It’s far from a perfect solution, especially if your overlay is crazy long.

scrollToggle (Github)

Toggle class of element based on scroll position and viewport.

Utils (Github)

A collection of utility functions. I’ve used these throughout the years, and can’t give credit where credit is due. People contributing on sites like Stack Overflow/plainjs are awesome.