The Content Delivery System components are a collection of reusable components available for use in Simonsoft customer applications.
npm install @simonsoft/cds-components
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.
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"
redirect="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>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'