thesaurus-widget

A widget that can interact with a thesaurus api to select concepts.

This widget is a pluggable component that acts as a frontend to a thesaurus api provided by athramisis. This API has following endpoints: http://atramhasis.readthedocs.io/en/latest/services.html

The widget is based on this skeleton.

Read the specs.

Building the code

To build the code, you can run:

npm run build

You will find the compiled code in the dist folder, available in five module formats: AMD, CommonJS, ES2015, ES2017 and System. The dist folder needs to be checked in in git to be able to reuse in other projects.

Running The Tests

You can run the tests with this command:

npm test

Alternatively, you can run the tests in watch mode with this command:

npm run develop

Installing the plugin

In a CLI-based app

npm install onroerenderfgoed/thesaurus-widget#{version} --save

Add this to the aurelia.json config: (can be found at metaaldetectievondstmeldingen/metaaldetectievondstmeldingen/static/formulier/aurelia_project/)

  {
    "name": "thesaurus-widget",
    "main": "index",
    "path": "../node_modules/thesaurus-widget/dist/amd",
    "resources": ["**/*.{css,html}"]
  }

Add the plugin in main.ts

  aurelia.use
    .standardConfiguration()
    .plugin('thesaurus-widget')

Use the components in a template

  <require from="thesaurus-widget/oe-thesaurus-input"></require>
  <require from="thesaurus-widget/oe-thesaurus-tree"></require>
  <require from='thesaurus-widget/assets/styles/css/oe-thesaurus-input.css'></require>
  <require from='thesaurus-widget/assets/styles/css/oe-thesaurus-tree.css'></require> 
  ...
  
  <div>
    <oe-thesaurus-input value.bind="value" type.bind="type" minlength.bind="minlength" base-url.bind="baseUrl" label="label">
      <template replace-part="suggestion">${suggestion.label}</template>
    </oe-thesaurus-input>
    <oe-thesaurus-tree value.bind="value" type.bind="type" base-url.bind="baseUrl"></oe-thesaurus-tree>
  </div>

Or combined

  <require from="thesaurus-widget/oe-thesaurus-component"></require>
  <require from='thesaurus-widget/assets/styles/css/oe-thesaurus-input.css'></require>
  <require from='thesaurus-widget/assets/styles/css/oe-thesaurus-tree.css'></require> 
  ...
  
  <div>
    <oe-thesaurus-component value.bind="value" type.bind="type" base-url.bind="baseUrl" minlength.bind="minlength"></oe-thesaurus-component>
  </div>