feat: preselect a language on libraries page

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);

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)
+        }
     });
-}
+
+    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';
+}

test/functional/libraries.js

@@ -169,4 +169,18 @@ describe('Libraries', function() {
                 return result;
             })).to.be.empty;
         });
-});
+
+    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;
+    });
+});

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) {