From 59de98f1fb6c9544eb9139d4f705737f21319dab Mon Sep 17 00:00:00 2001 From: Naomi Pentrel <5212232+npentrel@users.noreply.github.com> Date: Mon, 25 Sep 2023 19:20:06 +0200 Subject: [PATCH] Address Sentry issue (#1888) --- assets/js/tutorials.js | 219 +++++++++++++++++++++++++---------------- 1 file changed, 133 insertions(+), 86 deletions(-) diff --git a/assets/js/tutorials.js b/assets/js/tutorials.js index df3bf8a7a8..aab869a26d 100644 --- a/assets/js/tutorials.js +++ b/assets/js/tutorials.js @@ -18,24 +18,23 @@ const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({ // query_by is required. additionalSearchParameters: { query_by: "title,description", - sort_by: "featured:asc,date:desc" + sort_by: "featured:asc,date:desc", }, }); const searchClient = typesenseInstantsearchAdapter.searchClient; const search = instantsearch({ - indexName: 'tutorials', + indexName: "tutorials", searchClient, }); - const customRefinementList = instantsearch.connectors.connectRefinementList( ({ items, refine, widgetParams }, isFirstRender) => { const container = document.getElementById(widgetParams.container); if (isFirstRender) { - container.addEventListener('click', ({target}) => { - const input = target.closest('input'); + container.addEventListener("click", ({ target }) => { + const input = target.closest("input"); if (input) { refine(input.value.split(" ")[0]); @@ -45,11 +44,9 @@ const customRefinementList = instantsearch.connectors.connectRefinementList( return; } - const list = widgetParams.items.map(({label: staticLabel}) => { - const elem = items.find( - ({label}) => label === staticLabel - ); - let count = 0 + const list = widgetParams.items.map(({ label: staticLabel }) => { + const elem = items.find(({ label }) => label === staticLabel); + let count = 0; let isRefined = false; if (elem) { count = elem.count; @@ -62,8 +59,8 @@ const customRefinementList = instantsearch.connectors.connectRefinementList( @@ -72,16 +69,15 @@ const customRefinementList = instantsearch.connectors.connectRefinementList( container.innerHTML = ` `; - } + }, ); - search.addWidgets([ instantsearch.widgets.hits({ - container: '#hits', + container: "#hits", templates: { item: `
@@ -123,108 +119,159 @@ search.addWidgets([ hitsPerPage: 12, }), customRefinementList({ - container: 'languages-list', - attribute: 'languages', - operator: 'or', - sortBy: ['name:asc'], - items: [ - {label: "go" }, - {label: "python" }, - {label: "typescript"}, - ], + container: "languages-list", + attribute: "languages", + operator: "or", + sortBy: ["name:asc"], + items: [{ label: "go" }, { label: "python" }, { label: "typescript" }], }), customRefinementList({ - container: 'components-list', - attribute: 'viamcomponents', - operator: 'and', - sortBy: ['name:asc'], + container: "components-list", + attribute: "viamcomponents", + operator: "and", + sortBy: ["name:asc"], items: [ - {label: "arm"}, - {label: "base"}, - {label: "board"}, - {label: "camera"}, - {label: "gripper"}, - {label: "input_controller"}, - {label: "motor"}, - {label: "sensor"}, - {label: "servo"}, + { label: "arm" }, + { label: "base" }, + { label: "board" }, + { label: "camera" }, + { label: "gripper" }, + { label: "input_controller" }, + { label: "motor" }, + { label: "sensor" }, + { label: "servo" }, ], }), customRefinementList({ - container: 'services-list', - attribute: 'viamservices', - operator: 'and', - sortBy: ['name:asc'], + container: "services-list", + attribute: "viamservices", + operator: "and", + sortBy: ["name:asc"], items: [ - {label: "data"}, - {label: "motion"}, - {label: "frame_system"}, - {label: "mlmodel"}, - {label: "navigation"}, - {label: "base_rc"}, - {label: "sensors"}, - {label: "slam"}, - {label: "vision"}, + { label: "data" }, + { label: "motion" }, + { label: "frame_system" }, + { label: "mlmodel" }, + { label: "navigation" }, + { label: "base_rc" }, + { label: "sensors" }, + { label: "slam" }, + { label: "vision" }, ], }), customRefinementList({ - container: 'level-list', - attribute: 'level', - operator: 'or', - sortBy: ['name:asc'], + container: "level-list", + attribute: "level", + operator: "or", + sortBy: ["name:asc"], items: [ - {label: "Beginner"}, - {label: "Intermediate"}, - {label: "Advanced"}, + { label: "Beginner" }, + { label: "Intermediate" }, + { label: "Advanced" }, ], }), instantsearch.widgets.pagination({ - container: '#pagination', + container: "#pagination", }), ]); - search.start(); -search.on('render', function() { - if (search.helper.state.disjunctiveFacetsRefinements.languages && search.helper.state.disjunctiveFacetsRefinements.languages.length) { - document.getElementById("filter-languages").textContent = "Languages (" + search.helper.state.disjunctiveFacetsRefinements.languages.length + ")"; +search.on("render", function () { + if ( + search.helper.state.disjunctiveFacetsRefinements.languages && + search.helper.state.disjunctiveFacetsRefinements.languages.length + ) { + document.getElementById("filter-languages").textContent = + "Languages (" + + search.helper.state.disjunctiveFacetsRefinements.languages.length + + ")"; } else { document.getElementById("filter-languages").textContent = "Languages"; } - if (search.helper.state.facetsRefinements.viamcomponents && search.helper.state.facetsRefinements.viamcomponents.length) { - document.getElementById("filter-components").textContent = "Components (" + search.helper.state.facetsRefinements.viamcomponents.length + ")"; + if ( + search.helper.state.facetsRefinements.viamcomponents && + search.helper.state.facetsRefinements.viamcomponents.length + ) { + document.getElementById("filter-components").textContent = + "Components (" + + search.helper.state.facetsRefinements.viamcomponents.length + + ")"; } else { document.getElementById("filter-components").textContent = "Components"; } - if (search.helper.state.facetsRefinements.viamservices && search.helper.state.facetsRefinements.viamservices.length) { - document.getElementById("filter-services").textContent = "Services (" + search.helper.state.facetsRefinements.viamservices.length + ")"; + if ( + search.helper.state.facetsRefinements.viamservices && + search.helper.state.facetsRefinements.viamservices.length + ) { + document.getElementById("filter-services").textContent = + "Services (" + + search.helper.state.facetsRefinements.viamservices.length + + ")"; } else { document.getElementById("filter-services").textContent = "Services"; } - if (search.helper.state.disjunctiveFacetsRefinements.level && search.helper.state.disjunctiveFacetsRefinements.level.length) { - document.getElementById("filter-level").textContent = "Level (" + search.helper.state.disjunctiveFacetsRefinements.level.length + ")"; + if ( + search.helper.state.disjunctiveFacetsRefinements.level && + search.helper.state.disjunctiveFacetsRefinements.level.length + ) { + document.getElementById("filter-level").textContent = + "Level (" + + search.helper.state.disjunctiveFacetsRefinements.level.length + + ")"; } else { document.getElementById("filter-level").textContent = "Level"; } - if (search.helper.state.facetsRefinements && search.helper.state.disjunctiveFacetsRefinements.languages && search.helper.state.facetsRefinements.viamcomponents) { - document.querySelectorAll('.pill-lang').forEach(e => search.helper.state.disjunctiveFacetsRefinements.languages.includes(e.textContent) ? e.classList.add('pill-highlight') : e.classList.remove('pill-highlight')); - document.querySelectorAll('.pill-component').forEach(e => (search.helper.state.facetsRefinements.viamcomponents.includes(e.textContent) || search.helper.state.facetsRefinements.viamservices.includes(e.textContent)) ? e.classList.add('pill-highlight') : e.classList.remove('pill-highlight')); + if ( + search.helper.state.facetsRefinements && + search.helper.state.disjunctiveFacetsRefinements.languages && + search.helper.state.facetsRefinements.viamcomponents + ) { + document + .querySelectorAll(".pill-lang") + .forEach((e) => + search.helper.state.disjunctiveFacetsRefinements.languages.includes( + e.textContent, + ) + ? e.classList.add("pill-highlight") + : e.classList.remove("pill-highlight"), + ); + document + .querySelectorAll(".pill-component") + .forEach((e) => + search.helper.state.facetsRefinements.viamcomponents.includes( + e.textContent, + ) || + search.helper.state.facetsRefinements.viamservices.includes( + e.textContent, + ) + ? e.classList.add("pill-highlight") + : e.classList.remove("pill-highlight"), + ); } - observer.observe() + observer.observe(); }); -document.body.addEventListener('click', function(event) { - let filter_box = document.getElementById('tutorial-filter-items'); - let tutorial_menu = document.getElementById('tutorial-menu'); - if (!filter_box.contains(event.target) && !tutorial_menu.contains(event.target)) { - document.querySelectorAll('.filter').forEach( el => { - el.setAttribute("aria-expanded", false); - el.classList.add("collapsed"); - }); - let open_elem = filter_box.getElementsByClassName("show"); - if (open_elem) { - open_elem[0].classList.remove("show"); +document.body.addEventListener( + "click", + function (event) { + let filter_box = document.getElementById("tutorial-filter-items"); + let tutorial_menu = document.getElementById("tutorial-menu"); + if ( + !filter_box.contains(event.target) && + !tutorial_menu.contains(event.target) + ) { + document.querySelectorAll(".filter").forEach((el) => { + el.setAttribute("aria-expanded", false); + if (el && el.classList) { + el.classList.add("collapsed"); + } + }); + let open_elem = filter_box.getElementsByClassName("show"); + if (open_elem) { + open_elem[0].classList.remove("show"); + } } - } -}, true); \ No newline at end of file + }, + true, +);