@simonsoft/cds-components
v1.1.7
Published
<!-- SPDX-FileCopyrightText: © 2022 Simonsoft AB
Readme
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-components1. 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 as Web Component (Script Tag)
Use this method when you want to include the component directly in your HTML without a build step.
example.html
<!--
SPDX-FileCopyrightText: © 2022 Simonsoft AB
SPDX-License-Identifier: LicenseRef-LICENSE
-->
<!DOCTYPE html>
<html lang="en">
<head>
...
<!--
1. Add the component bundle to your HTML page.
-->
<script type="module" src="https://unpkg.com/@simonsoft/cds-components/dist/bundle.js"></script>
<!--
2. Add the component stylesheet to your HTML page.
-->
<link rel="stylesheet" href="https://unpkg.com/@simonsoft/cds-components/dist/bundle.css" />
</head>
<body>
<!--
3. 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"
buttonLabel="SELECT"
buttonIconSrc="data:image/svg+xml;base64,..."
pdfIconSrc="data:image/svg+xml;base64,..."
pdfLabel="PDF"
lazy="true"
version="latest"
docno="CMS_DOCNO"
algoliaAppId="**********"
algoliaApiKey="********************************"
algoliaIndexName="cdn_public_v1"
urlprefix="https://cloudid.simonsoftcdn.com"
onSelect="onSelect(language, format, urldocument, url)"
/>
<!--
4. 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. Usage as React/Preact Component (NPM Import)
Use this method when you want to import the component into your React/Preact application with full tree-shaking support.
example.tsx
import { LanguagePicker } from '@simonsoft/cds-components';
import '@simonsoft/cds-components/lib/bootstrap.scss';
function App() {
const handleSelect = (language, format, urldocument, url) => {
console.log('Selection changed:', { language, format, urldocument, url });
};
return (
<LanguagePicker
size="sm"
variant="primary"
menuVariant="primary"
default="en-US"
buttonLabel="SELECT"
buttonIconSrc="data:image/svg+xml;base64,..."
pdfIconSrc="data:image/svg+xml;base64,..."
pdfLabel="PDF"
lazy={true}
version="latest"
docno="CMS_DOCNO"
algoliaAppId="**********"
algoliaApiKey="********************************"
algoliaIndexName="cdn_public_v1"
urlprefix="https://cloudid.simonsoftcdn.com"
onSelect={handleSelect}
/>
);
}