2.1.12 • Published 6 months ago
@bridgeline-digital/kabinet v2.1.12
kabinet
App switcher for Bridgeline applications
Getting Started
- Run
npm install @bridgeline-digital/kabinet - Modify your HTML by importing the Kabinet script file and adding the appropriate HTML elements.
<head>
<script src="https://assets.woorank.com/kabinet/dist/[version]/index.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
const kabinetComponent = document.querySelector('kabinet-drawer');
const trigger = document.querySelector('.kabinet-trigger');
trigger.addEventListener('click', function () {
kabinetComponent.openDrawer();
});
kabinetComponent.addEventListener('open-kabinet' ,() => {
console.log('open-drawer custom event');
});
kabinetComponent.addEventListener('close-kabinet' ,() => {
console.log('close-drawer custom event');
});
});
</script>
</head>
<body>
<button class="kabinet-trigger">Open Kabinet</button>
<kabinet-drawer></kabinet-drawer>
</body>Methods
Handle the state of the App Switcher Drawer using DOM Event listeners:
const trigger = document.querySelector('.kabinet-trigger');
trigger.addEventListener('click', function () {
kabinetComponent.openDrawer();
});| Name | Description |
|---|---|
| openDrawer | Displays the Drawer |
| closeDrawer | Hides the Drawer |
Events
kabinetComponent.addEventListener('onOpen' ,() => {
console.log('open-drawer custom event');
});
kabinetComponent.addEventListener('onClose' ,() => {
console.log('close-drawer custom event');
});| Name | Description |
|---|---|
| onOpen | Triggers when opening the drawer |
| onClose | Triggers when closing the drawer |
Development flow
npm inpm run buildnpm run serve
You should develop your changes in the branches and create a pull request where the last commit is setting the new version number according to the semantic versioning.
Always use the npm version command to update the package:
$ npm version <major|minor|patch>Publishing
To publish the changes, you have to build the project at CircleCI.
Successfull build will automatically push the assets into the S3 bucket and NPM registry with the current version number and can be used in the applications.