Add a Bookmarks to the Groups

Ask the Community General Questions
1

I am using this as a directory. I have 1 group for Training Division. I would like to be able to add the bookmark #training to this group. When the URL/#training is used I would like for the webpage of the directory to open and go to the bookmarked area Training Division instead of the top of the page.

1 Like
3

Hi there @Econ_Dev :wave:

You’d like to get a link to a specific group in your widget, and when clicked, that particular group opens automatically, right?

4

Yes, the same way that this bookmark works: https://wfdems.com/fire_ems_directory.php#HumanResources

1 Like
5

WillistonEconomicDevelopment would like to recall the message, “[Elfsight Community] [Ask the Community/General Questions] Add a Bookmarks to the Groups”.

1 Like
6

Got it, thanks!

Our devs came up with the custom code for you:

const LISTEN_TYPES = {
	one: {
		select: (selector, root) => root.querySelector(selector),
		validate: (node) => !!node,
	},
	all: {
		select: (selector, root) => root.querySelectorAll(selector),
		validate: (node) => node?.length > 0,
	},
};
function listenStep(args) {
	args.node = args.select(args.selector, args.root);
	if (!args.validate(args.node)) {
		args.step++;
		if (args.step < args.limit)
			setTimeout(() => {
				listenStep(args);
			}, args.delay);
		else args.reject();
	} else {
		args.resolve(args.node);
	}
}
async function asyncListenFor(selector, type = 'one', customArgs = {}) {
	const args = {
		root: document,
		node: undefined,
		selector,
		delay: 100,
		limit: 50,
		step: 0,
		select: LISTEN_TYPES[type].select,
		validate: LISTEN_TYPES[type].validate,
		...customArgs,
	};
	if (type === 'one' || type === 'all') {
		return new Promise((resolve, reject) => {
			listenStep({ ...args, resolve, reject });
		});
	}
}

asyncListenFor(
	'#eapps-team-showcase-e0b8799f-4ac0-45b7-801d-4c875a1cfb02'
).then(() => {
	const hash = window.location.hash;
	if (hash) {
		const groups = document.querySelectorAll(
			'.eapp-team-showcase-group-component'
		);

		groups.forEach((group) => {
			const title = group.querySelector(
				'.eapp-team-showcase-group-title'
			).textContent;
			if (
				hash.slice(1).toLowerCase() !== title.toLowerCase().split(' ').join('-')
			) {
				group.style.display = 'none';
			}
		});
	}
});

In this code, we used the ID of your FIRE EMS directory widget. To use it in another widgets, just add the ID of the required widget instead and add the resulted code to the Custom JS field on the Settings tab of your widget’s settings:

image


Try it out and let me know how it worked :slightly_smiling_face:

1 Like