compass: add className option

mistic100 · Nov 20, 2023 · 7cbf826 · 7cbf826
1 parent 5138d7e
commit 7cbf826
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 0 deletions.
diff --git a/docs/plugins/compass.md b/docs/plugins/compass.md
@@ -201,6 +201,13 @@ Color of the navigation cone.
 
 Default color of hotspots.
 
+#### `className`
+
+-   type: `string`
+-   updatable: yes
+
+CSS class(es) added to the compass element.
+
 ## Methods
 
 #### `setHotspots(hotspots)`

diff --git a/packages/compass-plugin/src/CompassPlugin.ts b/packages/compass-plugin/src/CompassPlugin.ts
@@ -15,6 +15,7 @@ const getConfig = utils.getConfigParser<CompassPluginConfig, ParsedCompassPlugin
         navigationColor: 'rgba(255, 0, 0, 0.2)',
         hotspots: [],
         hotspotColor: 'rgba(0, 0, 0, 0.5)',
+        className: null
     },
     {
         position: (position, { defValue }) => {

diff --git a/packages/compass-plugin/src/components/CompassComponent.ts b/packages/compass-plugin/src/components/CompassComponent.ts
@@ -91,6 +91,11 @@ export class CompassComponent extends AbstractComponent {
 
     applyConfig() {
         this.container.className = `psv-compass psv-compass--${this.config.position.join('-')}`;
+
+        if (this.config.className) {
+            utils.addClasses(this.container, this.config.className);
+        }
+
         this.background.innerHTML = this.config.backgroundSvg;
 
         this.container.style.width = this.config.size;

diff --git a/packages/compass-plugin/src/model.ts b/packages/compass-plugin/src/model.ts
@@ -53,6 +53,11 @@ export type CompassPluginConfig = {
      * @default 'rgba(0, 0, 0, 0.5)'
      */
     hotspotColor?: string;
+
+    /**
+     * CSS class(es) added to the compass element.
+     */
+    className?: string;
 };
 
 export type ParsedCompassPluginConfig = Omit<CompassPluginConfig, 'position'> & {