resolution: add badge

mistic100 · Feb 27, 2022 · 8a1cc2a · 8a1cc2a
1 parent 747941c
commit 8a1cc2a
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 6 deletions.
diff --git a/docs/plugins/plugin-resolution.md b/docs/plugins/plugin-resolution.md
@@ -52,6 +52,12 @@ The following example provides two resolutions for the panorama, "small" is load
 List of available resolutions. Each resolution consist of an object with the properties `id`, `label` and `panorama`.
 Cubemaps are supported.
 
+#### `showBadge`
+- type: `boolean`
+- default: `true`
+
+Show the resolution id as a badge on the settings button.
+
 #### `lang`
 - type: `object`
 - default:
@@ -62,3 +68,16 @@ lang: {
 ```
 
 _Note: this option is not part of the plugin but is merged with the main [`lang`](../guide/config.md#lang) object._
+
+
+## Events
+
+#### `resolution-changed(id)`
+
+Triggered when the resolution is changed.
+
+```js
+resolutionPlugin.on('resolution-changed', (e, id) => {
+  console.log(`Current resolution: ${id}`);
+});
+```
diff --git a/example/plugin-resolution.html b/example/plugin-resolution.html
@@ -28,14 +28,15 @@
     plugins   : [
       PhotoSphereViewer.SettingsPlugin,
       [PhotoSphereViewer.ResolutionPlugin, {
+        showBadge  : true,
         resolutions: [
           {
-            id      : 'small',
+            id      : 'SD',
             label   : 'Small',
             panorama: 'sphere_small.jpg',
           },
           {
-            id      : 'normal',
+            id      : 'HD',
             label   : 'Normal',
             panorama: 'sphere.jpg',
           },

diff --git a/src/plugins/resolution/index.js b/src/plugins/resolution/index.js
@@ -13,6 +13,7 @@ import { deepEqual } from './utils';
 /**
  * @typedef {Object} PSV.plugins.ResolutionPlugin.Options
  * @property {PSV.plugins.ResolutionPlugin.Resolution[]} resolutions - list of available resolutions
+ * @property {boolean} [showBadge=true] - show the resolution id as a badge on the settings button
  */
 
 
@@ -76,6 +77,7 @@ export class ResolutionPlugin extends AbstractPlugin {
      * @type {PSV.plugins.ResolutionPlugin.Options}
      */
     this.config = {
+      showBadge: true,
       ...options,
     };
   }
@@ -99,6 +101,7 @@ export class ResolutionPlugin extends AbstractPlugin {
       current: () => this.prop.resolution,
       options: () => this.__getSettingsOptions(),
       apply  : resolution => this.setResolution(resolution),
+      badge  : !this.config.showBadge ? null : () => this.prop.resolution,
     });
 
     this.psv.on(CONSTANTS.EVENTS.PANORAMA_LOADED, this);
@@ -177,6 +180,7 @@ export class ResolutionPlugin extends AbstractPlugin {
     const resolution = this.resolutions.find(r => deepEqual(this.psv.config.panorama, r.panorama));
     if (this.prop.resolution !== resolution?.id) {
       this.prop.resolution = resolution?.id;
+      this.settings?.updateBadge();
       this.trigger(EVENTS.RESOLUTION_CHANGED, this.prop.resolution);
     }
   }

diff --git a/types/plugins/resolution/index.d.ts b/types/plugins/resolution/index.d.ts
@@ -9,17 +9,18 @@ export type Resolution = {
 
 export type ResolutionPluginOptions = {
   resolutions: Resolution[];
+  showBadge?: boolean;
+};
+
+export const EVENTS: {
+  RESOLUTION_CHANGED: 'resolution-changed',
 };
 
 /**
  * @summary Adds a setting to choose between multiple resolutions of the panorama.
  */
 export class ResolutionPlugin extends AbstractPlugin {
 
-  static EVENTS: {
-    RESOLUTION_CHANGED: 'resolution-changed',
-  };
-
   constructor(psv: Viewer, options: ResolutionPluginOptions);
 
   /**