diff --git a/src/website/index.js b/src/website/index.js index 87762a3b..2b75d2f6 100644 --- a/src/website/index.js +++ b/src/website/index.js @@ -16,8 +16,10 @@ import queryString from "querystring"; /* For initialization, look at the end of this file */ function parseLocationQuery() { - const locSearch = queryString.parse(document.location.search.substr(1)); - const locHash = queryString.parse(document.location.hash.substr(1)); + const source = { + ...queryString.parse(document.location.search.substr(1)), + ...queryString.parse(document.location.hash.substr(1)) + } const keys = [ "id_token", @@ -27,11 +29,11 @@ function parseLocationQuery() { "debugger-io?token" ]; for (const key of keys) { - const token = locSearch[key] || locHash[key]; + const token = source[key]; if (token) { - if (locSearch.publicKey || locHash.publicKey) { - publicKeyTextArea.value = locSearch.publicKey || locHash.publicKey; + if (source.publicKey) { + publicKeyTextArea.value = source.publicKey; } setTokenEditorValue(token); diff --git a/src/website/libraries/libraries.js b/src/website/libraries/libraries.js index 205e63f6..a275cbc8 100644 --- a/src/website/libraries/libraries.js +++ b/src/website/libraries/libraries.js @@ -1,8 +1,10 @@ import { librariesElement, librariesSelect } from "./dom-elements.js"; +import queryString from "querystring"; import Isotope from "isotope-layout"; const librariesGrid = new Isotope(librariesElement, { + initLayout: false, layoutMode: "fitRows", itemSelector: "article", percentPosition: true, @@ -11,10 +13,44 @@ const librariesGrid = new Isotope(librariesElement, { }, }); +function setQueryStringParameter(name, value) { + if (value) { + const params = new URLSearchParams(window.location.search); + params.set(name, value); + window.history.replaceState({}, '', decodeURIComponent(`${window.location.pathname}?${params}`)); + } else { + window.history.replaceState({}, '', decodeURIComponent(window.location.pathname)); + } +} + export function setupLibraries() { librariesSelect.addEventListener("change", (event) => { librariesGrid.arrange({ filter: event.target.value, }); + if (event.target.value === '*') { + setQueryStringParameter('language', '') + } else { + setQueryStringParameter('language', document.querySelector(`#libraries-select > option[value="${event.target.value}"]`).innerHTML) + } }); -} \ No newline at end of file + + const { language: preselect } = { + ...queryString.parse(document.location.search.substr(1)), + ...queryString.parse(document.location.hash.substr(1)) + } + + let select; + + if (preselect) { + try { + select = document.querySelector(`#libraries-select > option[value=".${preselect}"]`) + || [...document.querySelectorAll('#libraries-select > option')].find((el) => preselect === el.innerHTML) + } catch (err) {} + } + + select || (select = document.querySelector('#libraries-select > option[value="*"]')) + + librariesGrid.arrange({ filter: select.value }); + select.selected = 'selected'; +} diff --git a/test/functional/libraries.js b/test/functional/libraries.js index 41117903..1f9931cc 100644 --- a/test/functional/libraries.js +++ b/test/functional/libraries.js @@ -169,4 +169,18 @@ describe('Libraries', function() { return result; })).to.be.empty; }); -}); \ No newline at end of file + + it('Can pre-select a language with a name', async function () { + await this.page.goto(`http://localhost:8000/libraries?language=Node.js`); + expect(await this.page.$eval('.net', isVisible)).to.be.false; + expect(await this.page.$eval('.php', isVisible)).to.be.false; + expect(await this.page.$eval('.node', isVisible)).to.be.true; + }); + + it('Can pre-select a language with a class', async function () { + await this.page.goto(`http://localhost:8000/libraries?language=node`); + expect(await this.page.$eval('.net', isVisible)).to.be.false; + expect(await this.page.$eval('.php', isVisible)).to.be.false; + expect(await this.page.$eval('.node', isVisible)).to.be.true; + }); +}); diff --git a/test/unit/libraries.js b/test/unit/libraries.js index ba8e809c..3efe9041 100644 --- a/test/unit/libraries.js +++ b/test/unit/libraries.js @@ -17,21 +17,19 @@ describe('Libraries', function() { it('Each language has a unique name', function() { const names = new Set(); - - for(const lang of languages) { - names.has(lang.name).should.be.false; - names.add(lang.name); - } + languages + .map(({ name }) => name) + .forEach(Set.prototype.add.bind(names)) + names.size.should.equal(languages.length); }); it('uniqueClass is unique for each language', function() { const classes = new Set(); - - for(const lang of languages) { - classes.has(lang.uniqueClass).should.be.false; - classes.add(lang.uniqueClass); - } - }); + languages + .map(({ uniqueClass }) => uniqueClass) + .forEach(Set.prototype.add.bind(classes)) + classes.size.should.equal(languages.length); + }); it('Have a correct schema', function() { for(const lang of languages) {