Multiple Instances

[JoeKendall]

Hello!

Is there any way of setting up multiple instances so as to support multiple heights? Like this:

<div class="grid">
	<div class="block block--medium grid__one-half">Foo</div><!-- block -->
	<div class="block block--medium grid__one-half">Foo</div><!-- block -->
	<div class="block block--large grid__one-half">Bar</div><!-- block -->
	<div class="block block--large grid__one-half">Bar</div><!-- block -->
	<div class="block block--medium grid__one-half">Foo</div><!-- block -->
	<div class="block block--medium grid__one-half">Foo</div><!-- block -->
</div><!-- grid -->

It seems I can achieve this by duplicating the initialize code (below), but this will only work if I remove the call to destroy existing initializations within the init function.

rightHeight.init({
	selector: '.grid',
	selectorContent: '.block--medium',
});
rightHeight.init({
	selector: '.grid',
	selectorContent: '.block--large',
});

I was wondering if there was a better way to do this, and if you had developed it in this way due to a limitation I am not aware of?

Thanks, Joe.

[cferdinandi]

Hi @JoeKendall! Great question.

Unfortunately, right now when you initialize Right Height, it destroys all other initializations. There's a way I could rewrite the script that would allow you to achieve what you're trying to do right now, and I plan to eventually, but haven't yet. You would end up initializing right height more like this:

var rightHeightLarge = new RightHeight.init({
	selector: '.grid',
	selectorContent: '.block--large',
});

var rightHeightMedium = new RightHeight.init({
	selector: '.grid',
	selectorContent: '.block--medium',
});

But again, not available today.

That said... you can accomplish what you're trying to do today by passing in multiple selectors for the selectorContent setting on a single init:

rightHeight.init({
	selector: '.grid',
	selectorContent: '.block--large, .block--medium'
});

That should work. Both querySelectorAll() and matches(), the two methods that use selectorContent in the script, accept multiple selectors.

Want to give it a try and let me know if it works?

[JoeKendall]

Hi @cferdinandi, thanks for getting back to me.

Your proposed solution sounds spot on, thanks. :)

As for the work around, using multiple selectors does work, however it does not differentiate between the two different heights, in this case medium and large. It sets them all the same.

With that in mind, do you see any major issues with my current work around (removing the destroy call)?

Thanks again, Joe.

[JoeKendall]

Ah @cferdinandi I have noticed that the one problem doing it this way is the resize event listener is only applied to the last initialized. :/

[cferdinandi]

@JoeKendall You got it. All of the listeners and settings are done at the window level, so there's no differentiation between them.

I didn't fully understand what you were trying to do with the different heights. In that case, sadly, this won't work until I refactor. Sorry!

Keeping this open as a Feature Request.

[nfq]

I was just trying this, on multiple isotope grid instances. Would love this to work!

[cferdinandi]

Hey all, I've decided to deprecate this plugin, as this is now better handled with Flexbox and CSS Grid Layout.