Disable loupe? about loupe

[redoPop]

There's currently no method to temporarily enable/disable loupe functionality, and I'll leave this issue open until that's added, but there are a couple of other ways to do this.

The simplest is to use the lens property, which references the magnifier element. You could add/remove a className or temporarily change the CSS display of the magnifier:

const loupe = new Loupe(document.getElementById('some-element'));
loupe.lens.style.display = 'none';

Another idea: use the destroy() method when a loupe is disabled, then create the loupe afresh when it's re-enabled. This will also remove any listeners. Here's a mock implementation:

const loupes = {};

function enableLoupe(name, el) {
	if (!loupes[name]) {
		loupes[name] = new Loupe(el);
	}
}

function disableLoupe(name) {
	if (loupes[name]) {
		loupes[name].destroy();
		delete loupes[name];
	}
}

// Then in your user actions could look like this:
enableLoupe('my-loupe', document.getElementById('some-element'));
disableLoupe('my-loupe');