@ca-plant-list/ca-plant-list 0.1.5 → 0.1.7

package/jekyll/assets/css/main.css

@@ -61,6 +61,13 @@ span.rare::before {
     font-weight: 600;
 }
 
+div.grid {
+    display: grid;
+    grid-auto-flow: row;
+    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+    column-gap: 2rem;
+}
+
 div.wrapper {
     display: flex;
     flex-wrap: wrap;
@@ -82,6 +89,8 @@ div.section ul {
 
 div.section li {
     display: block;
+    margin-left: 1rem;
+    text-indent: -1rem;
 }
 
 div.section ul.indent {

package/jekyll/assets/js/name_search.js

@@ -6,9 +6,9 @@ class Search {
     static #debounceTimer;
     static #searchData;
 
-    static #debounce( func ) {
+    static #debounce( timeout = 500 ) {
         clearTimeout( this.#debounceTimer );
-        this.#debounceTimer = setTimeout( func, 500 );
+        this.#debounceTimer = setTimeout( Search.#doSearch, timeout );
     }
 
     static #doSearch() {
@@ -141,7 +141,11 @@ class Search {
     }
 
     static #handleChange() {
-        this.#debounce( Search.#doSearch );
+        this.#debounce();
+    }
+
+    static #handleSubmit() {
+        this.#debounce( 0 );
     }
 
     static init() {
@@ -149,6 +153,7 @@ class Search {
         const eName = document.getElementById( "name" );
         eName.focus();
         eName.oninput = ( ev ) => { return this.#handleChange( ev ); };
+        document.getElementById( "search_form" ).onsubmit = () => { this.#handleSubmit(); return false; };
     }
 
 }

package/jekyll/name_search.html

@@ -8,7 +8,7 @@ js: name_search.js
     const NAMES = {% include names.json%};
 </script>
 
-<form>
+<form id="search_form">
     <input type="text" id="name"><label for="name">Search for scientific name, common name, or synonym</label>
 </form>
 

package/lib/basepagerenderer.js

@@ -1,17 +1,20 @@
 import * as fs from "node:fs";
 import { Config } from "./config.js";
+import { Families } from "./families.js";
 
 class BasePageRenderer {
 
     static render( outputDir, Taxa ) {
 
         // Copy static files
-        fs.rmSync( outputDir, { force: true, recursive: true, maxRetries: 2, retryDelay: 300 } );
+        fs.rmSync( outputDir, { force: true, recursive: true, maxRetries: 2, retryDelay: 400 } );
         // First copy default Jekyll files from package.
         fs.cpSync( Config.getPackageDir() + "/jekyll", outputDir, { recursive: true } );
         // Then copy Jekyll files from current dir (which may override default files).
         fs.cpSync( "jekyll", outputDir, { recursive: true } );
 
+        Families.renderPages( outputDir );
+
         this.renderTools( outputDir, Taxa );
 
     }

package/lib/families.js

@@ -1,6 +1,6 @@
 import * as fs from "node:fs";
 import { HTMLPage } from "./htmlpage.js";
-import { HTML, HTML_OPTIONS } from "./html.js";
+import { HTML } from "./html.js";
 import { Jepson } from "./jepson.js";
 import { Taxa } from "./taxa.js";
 
@@ -46,7 +46,7 @@ class PageFamilyList extends HTMLPage {
 
         let html = this.getFrontMatter( title );
 
-        html += HTML.getElement( "h1", title );
+        html += HTML.textElement( "h1", title );
 
         html += "<ul>";
         for ( const family of this.#families ) {
@@ -75,13 +75,12 @@ class PageFamily extends HTMLPage {
 
         let html = this.getFrontMatter( this.#family.getName() );
 
-        html += HTML.getElement( "h1", this.#family.getName() );
+        html += HTML.textElement( "h1", this.#family.getName() );
 
-        html += HTML.getElement(
+        html += HTML.wrap(
             "div",
             Jepson.getEFloraLink( this.#family.getJepsonID() ),
-            { class: "section" },
-            HTML_OPTIONS.NO_ESCAPE
+            { class: "section" }
         );
 
         html += Taxa.getHTMLTable( this.#family.getTaxa() );

package/lib/html.js

@@ -1,3 +1,6 @@
+/**
+ * @deprecated
+ */
 const HTML_OPTIONS = {
     OPEN_NEW: 1,
     NO_ESCAPE: 2,
@@ -17,6 +20,9 @@ class HTML {
         return text.replaceAll( "&", "&amp;" ).replaceAll( "<", "&lt;" ).replaceAll( ">", "&gt;" );
     }
 
+    /**
+     * @deprecated
+     */
     static getElement( elName, text, attributes = {}, options = 0 ) {
         let html = "<" + elName;
         html += this.renderAttributes( attributes );
@@ -28,6 +34,16 @@ class HTML {
 
     }
 
+    static #getElement( elName, text, attributes, escape ) {
+        let html = "<" + elName;
+        html += this.renderAttributes( attributes );
+        if ( escape ) {
+            text = this.escapeText( text );
+        }
+        html += ">" + text + "</" + elName + ">";
+        return html;
+    }
+
     static getLink( href, linkText, attributes = {}, options = 0 ) {
         let html = "<a";
         if ( href !== undefined ) {
@@ -52,6 +68,14 @@ class HTML {
         return html;
     }
 
+    static textElement( elName, text, attributes = {} ) {
+        return this.#getElement( elName, text, attributes, true );
+    }
+
+    static wrap( elName, text, attributes = {} ) {
+        return this.#getElement( elName, text, attributes, false );
+    }
+
 }
 
 export { HTML, HTML_OPTIONS };

package/lib/pagerenderer.js

@@ -1,13 +1,15 @@
 import * as fs from "node:fs";
-import { Families } from "./families.js";
-import { HTML, HTML_OPTIONS } from "./html.js";
-import { Taxa } from "./taxa.js";
+import { HTML } from "./html.js";
+import { Taxa, COLUMNS } from "./taxa.js";
 import { HTMLPage } from "./htmlpage.js";
 import { PageTaxon } from "./pagetaxon.js";
 import { Config } from "./config.js";
 import { RarePlants } from "./rareplants.js";
 import { BasePageRenderer } from "./basepagerenderer.js";
 
+const RPI_CESA = [ COLUMNS.COL_SPECIES, COLUMNS.COL_COMMON_NAME, COLUMNS.COL_CESA ];
+const RPI_COLUMNS = [ COLUMNS.COL_SPECIES, COLUMNS.COL_COMMON_NAME, COLUMNS.COL_CNPS_RANK ];
+
 class PageRenderer extends BasePageRenderer {
 
     static render( outputDir ) {
@@ -16,8 +18,6 @@ class PageRenderer extends BasePageRenderer {
 
         this.renderLists( outputDir );
 
-        Families.renderPages( outputDir );
-
         const taxa = Taxa.getTaxa();
         for ( const taxon of taxa ) {
             new PageTaxon( taxon ).render( outputDir );
@@ -27,7 +27,8 @@ class PageRenderer extends BasePageRenderer {
 
     static renderLists( outputDir ) {
 
-        function getListArray( listInfo, attributes = {} ) {
+        function getListArray( listInfo, attributes = {}, columns ) {
+
             const listArray = [];
             for ( const list of listInfo ) {
                 const taxa = [];
@@ -48,23 +49,25 @@ class PageRenderer extends BasePageRenderer {
                 fs.writeFileSync( outputDir + "/calflora_" + list.filename + ".txt", calfloraTaxa.join( "\n" ) );
                 fs.writeFileSync( outputDir + "/inat_" + list.filename + ".txt", iNatTaxa.join( "\n" ) );
 
-                new PageTaxonList().render( outputDir, taxa, list.filename, list.name );
+                const cols = columns ? columns : list.columns;
+                new PageTaxonList().render( outputDir, taxa, list.filename, list.name, cols );
 
                 // Check for sublists.
-                const subListHTML = list.listInfo ? getListArray( list.listInfo, { class: "indent" } ) : "";
+                const subListHTML = list.listInfo ? getListArray( list.listInfo, { class: "indent" }, cols ) : "";
 
                 listArray.push( HTML.getLink( "./" + list.filename + ".html", list.name ) + " (" + taxa.length + ")" + subListHTML );
             }
+
             return renderList( listArray, attributes );
         }
 
         function renderList( listsHTML, attributes = {} ) {
-            return HTML.getElement( "ul", HTML.arrayToLI( listsHTML ), attributes, HTML_OPTIONS.NO_ESCAPE );
+            return HTML.wrap( "ul", HTML.arrayToLI( listsHTML ), attributes );
         }
 
         function renderSection( title, listsHTML ) {
             let html = "<div class=\"section\">";
-            html += HTML.getElement( "h2", title );
+            html += HTML.textElement( "h2", title );
             html += listsHTML;
             html += "</div>";
             return html;
@@ -86,6 +89,7 @@ class PageRenderer extends BasePageRenderer {
                         name: "CNPS Ranked Plants",
                         filename: "list_rpi",
                         include: ( t ) => t.getRPIRank() !== undefined,
+                        columns: RPI_COLUMNS,
                         listInfo: [
                             {
                                 name: RarePlants.getRPIRankDescription( "1A" ),
@@ -123,6 +127,7 @@ class PageRenderer extends BasePageRenderer {
                         name: "California Endangered Species Act",
                         filename: "list_cesa",
                         include: ( t ) => t.getCESA() !== undefined,
+                        columns: RPI_CESA,
                         listInfo: [
                             {
                                 name: RarePlants.getCESADescription( "CE" ),
@@ -153,7 +158,7 @@ class PageRenderer extends BasePageRenderer {
         let html = "<div class=\"wrapper\">";
         for ( const section of sections ) {
 
-            const listHTML = getListArray( section.listInfo );
+            const listHTML = getListArray( section.listInfo, section.listInfo.columns );
 
             if ( listHTML.length > 0 ) {
                 html += renderSection( section.title, listHTML );
@@ -173,20 +178,20 @@ class PageRenderer extends BasePageRenderer {
 
 class PageTaxonList extends HTMLPage {
 
-    render( outputDir, taxa, baseName, title ) {
+    render( outputDir, taxa, baseName, title, columns ) {
 
         let html = this.getFrontMatter( title );
 
-        html += HTML.getElement( "h1", title );
+        html += HTML.textElement( "h1", title );
 
         html += "<div class=\"wrapper\">";
 
         html += "<div class=\"section\">";
-        html += Taxa.getHTMLTable( taxa );
+        html += Taxa.getHTMLTable( taxa, columns );
         html += "</div>";
 
         html += "<div class=\"section\">";
-        html += HTML.getElement( "h2", "Download" );
+        html += HTML.textElement( "h2", "Download" );
         html += "<ul>";
         html += "<li>" + HTML.getLink( "./calflora_" + baseName + ".txt", "Calflora List" ) + "</li>";
         html += "<li>" + HTML.getLink( "./inat_" + baseName + ".txt", "iNaturalist List" ) + "</li>";

package/lib/pagetaxon.js

@@ -151,7 +151,7 @@ class PageTaxon extends HTMLPage {
             );
         }
 
-        html += "<div class=\"wrapper\">";
+        html += "<div class=\"grid\">";
         html += this.#getListSectionHTML( this.#getInfoLinks(), "Information", "info" );
         html += this.#getListSectionHTML( this.#getObsLinks(), "Observations", "obs" );
         html += this.#getListSectionHTML( this.#getRelatedTaxaLinks(), "Related Species", "rel-taxa" );

package/lib/taxa.js

@@ -1,29 +1,56 @@
 import { Taxon } from "./taxon.js";
 import { ErrorLog } from "./errorlog.js";
-import { HTML, HTML_OPTIONS } from "./html.js";
+import { HTML } from "./html.js";
 import { CSV } from "./csv.js";
+import { RarePlants } from "./rareplants.js";
+
+const COLUMNS = {
+    COL_CESA: "CESA",
+    COL_COMMON_NAME: "Common Name",
+    COL_CNPS_RANK: "CNPS Rank",
+    COL_SPECIES: "Species",
+};
+
+const DEFAULT_COLUMNS = [ COLUMNS.COL_SPECIES, COLUMNS.COL_COMMON_NAME ];
 
 class Taxa {
 
     static #taxa = {};
     static #sortedTaxa;
 
-    static getHTMLTable( taxa ) {
+    static getHTMLTable( taxa, columns = DEFAULT_COLUMNS ) {
+
+        let includeRPI = true;
+
         let html = "<table><thead>";
-        html += HTML.getElement( "th", "Species" );
-        html += HTML.getElement( "th", "Common Name" );
+        for ( const column of columns ) {
+            html += HTML.textElement( "th", column );
+            if ( column === COLUMNS.COL_CNPS_RANK ) {
+                // Don't show rarity with species link if CNPS Rank column is included.
+                includeRPI = false;
+            }
+        }
         html += "</thead>";
         html += "<tbody>";
 
         for ( const taxon of taxa ) {
             html += "<tr>";
-            html += HTML.getElement(
-                "td",
-                taxon.getHTMLLink(),
-                undefined,
-                HTML_OPTIONS.NO_ESCAPE
-            );
-            html += HTML.getElement( "td", taxon.getCommonNames().join( ", " ) );
+            for ( const column of columns ) {
+                switch ( column ) {
+                    case COLUMNS.COL_CESA:
+                        html += HTML.textElement( "td", RarePlants.getCESADescription( taxon.getCESA() ) );
+                        break;
+                    case COLUMNS.COL_COMMON_NAME:
+                        html += HTML.textElement( "td", taxon.getCommonNames().join( ", " ) );
+                        break;
+                    case COLUMNS.COL_CNPS_RANK:
+                        html += HTML.wrap( "td", HTML.wrap( "span", taxon.getRPIRankAndThreat(), taxon.getRPIRankAndThreatTooltip( {} ) ) );
+                        break;
+                    case COLUMNS.COL_SPECIES:
+                        html += HTML.wrap( "td", taxon.getHTMLLink( true, includeRPI ) );
+                        break;
+                }
+            }
             html += "</tr>";
         }
 
@@ -93,4 +120,4 @@ class Taxa {
 
 }
 
-export { Taxa };
+export { Taxa, COLUMNS };

package/lib/taxon.js

@@ -100,14 +100,17 @@ class Taxon {
         return this.#genus;
     }
 
-    getHTMLLink( href = true ) {
+    getHTMLLink( href = true, includeRPI = true ) {
         href = href ? ( "./" + this.getFileName() ) : undefined;
-        const className = this.isNative() ? ( this.isRare() ? "rare" : "native" ) : "non-native";
+        let className = this.isNative() ? "native" : "non-native";
+        if ( includeRPI && this.isRare() ) {
+            className = "rare";
+        }
         const attributes = { class: className };
         if ( className === "rare" ) {
-            attributes[ "title" ] = RarePlants.getRPIRankAndThreatDescriptions( this.getRPIRankAndThreat() ).join( "\n" );
+            this.getRPIRankAndThreatTooltip( attributes );
         }
-        return HTML.getElement( "span", HTML.getLink( href, this.getName() ), attributes, HTML_OPTIONS.NO_ESCAPE );
+        return HTML.wrap( "span", HTML.getLink( href, this.getName() ), attributes );
     }
 
     getINatID() {
@@ -151,6 +154,11 @@ class Taxon {
         return this.#rankRPI;
     }
 
+    getRPIRankAndThreatTooltip( attributes ) {
+        attributes[ "title" ] = RarePlants.getRPIRankAndThreatDescriptions( this.getRPIRankAndThreat() ).join( "\n" );
+        return attributes;
+    }
+
     getRPITaxonLink() {
         const rpiID = this.getRPIID();
         if ( !rpiID ) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ca-plant-list/ca-plant-list",
-    "version": "0.1.5",
+    "version": "0.1.7",
     "description": "Tools to create Jekyll files for a website listing plants in an area of California.",
     "license": "MIT",
     "repository": {