@simonsoft/cds-components NPM

cds-components

The Content Delivery System components are a collection of reusable components available for use in Simonsoft customer applications.

Installation

npm install @simonsoft/cds-components

1. Language Picker

Language Picker is a component that retrieves and displays the available languages for a particular version of a docno and allows the user to choose the desired language. The languages are retrieved from the Algolia index.

1.1. Usage

Here's a simple example of how to use the component in an HTML file without the need to add any other dependencies.

example.html

<!--
SPDX-FileCopyrightText: © 2022 Simonsoft AB

SPDX-License-Identifier: LicenseRef-LICENSE
-->

<!DOCTYPE html>
<html lang="en">
  <head>
    ...

    <!--
      1. Add the component script to your HTML page.
    -->
    <script type="module" src="./node_modules/@simonsoft/cds-components/dist/language-picker.js"></script>

    <!--
      2. Add the component stylesheet to your HTML page.
    -->
    <link rel="stylesheet" href="./node_modules/@simonsoft/cds-components/dist/language-picker.css" />

    <!--
      3. Add the required bootstrap stylesheet from our library or another CDS to your HTML page.
    -->
    <link rel="stylesheet" href="./node_modules/@simonsoft/cds-components/dist/bootstrap.css" />

  </head>

  <body>

    <!--
      4. Add the language-picker component in your HTML page wherever suits you best. Typically in the navigation bar.
    -->
    <language-picker
      size="sm"
      variant="primary"
      menuVariant="primary"
      default="en-US"
      lazy="true"
      version="latest"
      docno="CMS_DOCNO"
      algoliaAppId="**********"
      algoliaApiKey="********************************"
      algoliaIndexName="cdn_public_v1"
      urlprefix="https://cloudid.simonsoftcdn.com"
      onSelect="onSelect(language, format, urldocument, url)"
    />

    <!--
      5. Optionally intercept and customize the component actions.
    -->
    <script>
      // There are two ways of intercepting the onSelect events:
      // Method 1 (Callback Function):
      function onSelect(language, format, urldocument, url) {
        console.log('The selection has changed (callback): ', 'language: ' + language, 'format: ' + format, 'urldocument: ' + urldocument, 'url: ' + url);
      }
      // Method 2 (Event Listener):
      document.addEventListener('onLanguagePickerSelect', function (e) {
        console.log('The selection has changed (event listener): ', 'language: ' + e.detail.language, 'format: ' + e.detail.format, 'urldocument: ' + e.detail.urldocument, 'url: ' + e.detail.url);
        // Override the default behavior of the selection which is to navigate to the url/urldocument if needed.
        e.preventDefault();
      }, false);
    </script>
  </body>
</html>

1.2. Advanced Usage

In a Node.js module, instead of using the script bundle, you can import the component in your JS file.

example.js

// Required
import '@simonsoft/cds-components/lib/components/language-picker';

// Optional (Includes the required Bootstrap styles if not already loaded elsewhere)
import '@simonsoft/cds-components/lib/bootstrap'