Merge pull request #45 from SDFIdk/filter-buttons

Add Filter buttons and Clear button

.gitignore

@@ -1,5 +1,4 @@
 node_modules/
 dist/
-config.js
-public/style.css*
-public/search.js*
+public/
+!public/index.html

README.md

@@ -44,6 +44,7 @@ GSearch-UI is configured using html data attributes.
 |:---|---|---|---|---|
 |`data-token`|A valid token from https://dataforsyningen.dk/|yes|yes|`NaN`|
 |`data-resources`|The resources that should be searched in. See more information in the [GSearch documentation](https://github.com/SDFIdk/gsearch/tree/main/doc)|no|yes|`navngivenvej,husnummer,adresse,stednavn,kommune,region,retskreds,postnummer,opstillingskreds,sogn,politikreds,matrikel,matrikel_udgaaet`|
+|`resourceFilterEnabled`|Show filter buttons for the selected resources to allow the user to toggle resources.|no|yes|false|
 |`data-limit`|The number of matches for each resource to be shown. The maximum value is 100.|no|yes|`10`|
 |`data-placeholder`|The placeholder text to show in the input field.|no|yes|`søg...`|
 |`data-api`|Use a custom URL for GSearch API (ie. if you want to use a test API)|no|yes|`https://api.dataforsyningen.dk/rest/gsearch/v1.0/`|
@@ -53,6 +54,8 @@ GSearch-UI is configured using html data attributes.
 
 When clicking on a result displayed in the GSearch-UI it will dispatch a custom event, `gsearch:select`, that contains the result object in event.detail. The structure of the object depends on the resource. See more information about the different resouces here: https://github.com/SDFIdk/gsearch/tree/main/doc.
 
+Clicking the cross to clear the input field fires a custom event, `gsearch:clear`.
+
 ## Publish NPM
 
 Create a new release in Github to publish an updated NPM package.

esbuild.js

@@ -1,4 +1,5 @@
 import esbuild from 'esbuild'
+import { sassPlugin } from 'esbuild-sass-plugin'
 
 const entry_points = {
   search: './index.js',
@@ -18,8 +19,12 @@ if (process.env.NODE_ENV === 'production') {
     splitting: true,
     format: 'esm',
     loader: {
-      '.ttf': 'file'
-    }
+      '.ttf': 'file',
+      '.svg': 'file'
+    },
+    plugins: [
+      sassPlugin()
+    ]
   })
   .then((result) => {
 
@@ -37,15 +42,21 @@ if (process.env.NODE_ENV === 'production') {
     entryPoints: entry_points,
     outdir: 'public',
     bundle: true,
+    splitting: true,
+    format: 'esm',
     loader: {
-      '.ttf': 'file'
+      '.ttf': 'file',
+      '.svg': 'file'
     },
-    splitting: true,
-    format: 'esm'
+    plugins: [
+      sassPlugin()
+    ]
   })
   .then((result) => {
-    let { host, port } = result.serve({
+    result.serve({
       servedir: 'public',
+    }).then(({ host, port }) => {
+      console.log('Serving at localhost:' + port)
     })
   })