Cleanup bucket bar

- Added types
- Moved out of the plugin directory
- Avoid extending from Delegator (unnecessary)

src/annotator/plugin/bucket-bar.js → src/annotator/bucket-bar.js

-import Delegator from '../delegator';
-
 import { render } from 'preact';
-import Buckets from '../components/Buckets';
-
-import { anchorBuckets } from '../util/buckets';
+import Buckets from './components/Buckets';
 
-export default class BucketBar extends Delegator {
-  constructor(container, options, annotator) {
-    const defaultOptions = {
-      // Selectors for the scrollable elements on the page
-      scrollables: [],
-    };
+import { anchorBuckets } from './util/buckets';
 
-    const opts = { ...defaultOptions, ...options };
+/**
+ * @typedef BucketBarOptions
+ * @prop {string[]} [scrollables] - Selectors for the scrollable elements on the page
+ */
 
-    const el = document.createElement('div');
-    el.className = 'annotator-bucket-bar';
-    super(el, opts);
+export default class BucketBar {
+  /**
+   * @param {HTMLElement} container
+   * @param {Pick<import('./guest').default, 'anchors'|'selectAnnotations'>} guest
+   * @param {BucketBarOptions} [options]
+   */
+  constructor(container, guest, options = {}) {
+    this.options = options;
+    this.element = document.createElement('div');
+    this.element.className = 'annotator-bucket-bar';
 
-    this.annotator = annotator;
+    this.guest = guest;
     container.appendChild(this.element);
 
     this.updateFunc = () => this.update();
 
     window.addEventListener('resize', this.updateFunc);
     window.addEventListener('scroll', this.updateFunc);
-    this.options.scrollables.forEach(scrollable => {
+    this.options.scrollables?.forEach(scrollable => {
       const scrollableElement = /** @type {HTMLElement | null} */ (document.querySelector(
         scrollable
       ));
@@ -36,7 +37,7 @@ export default class BucketBar extends Delegator {
   destroy() {
     window.removeEventListener('resize', this.updateFunc);
     window.removeEventListener('scroll', this.updateFunc);
-    this.options.scrollables.forEach(scrollable => {
+    this.options.scrollables?.forEach(scrollable => {
       const scrollableElement = /** @type {HTMLElement | null} */ (document.querySelector(
         scrollable
       ));
@@ -56,14 +57,14 @@ export default class BucketBar extends Delegator {
   }
 
   _update() {
-    const buckets = anchorBuckets(this.annotator.anchors);
+    const buckets = anchorBuckets(this.guest.anchors);
     render(
       <Buckets
         above={buckets.above}
         below={buckets.below}
         buckets={buckets.buckets}
         onSelectAnnotations={(annotations, toggle) =>
-          this.annotator.selectAnnotations(annotations, toggle)
+          this.guest.selectAnnotations(annotations, toggle)
         }
       />,
       this.element

src/annotator/sidebar.js

@@ -9,7 +9,7 @@ import features from './features';
 import Guest from './guest';
 import { ToolbarController } from './toolbar';
 import { createShadowRoot } from './util/shadow-root';
-import BucketBar from './plugin/bucket-bar';
+import BucketBar from './bucket-bar';
 
 /**
  * @typedef LayoutState
@@ -78,9 +78,7 @@ export default class Sidebar extends Guest {
       if (config.theme === 'clean') {
         frame.classList.add('annotator-frame--theme-clean');
       } else {
-        // BucketBar is a "plugin" for legacy reasons and is now constructed here so
-        // that the parent element can be passed into the constructor.
-        this.plugins.BucketBar = new BucketBar(frame, config.BucketBar, this);
+        this.plugins.BucketBar = new BucketBar(frame, this, config.BucketBar);
       }
 
       // Undocumented switch to enable/disable the wrapping of the sidebar inside a shadow DOM

src/annotator/plugin/test/bucket-bar-test.js → src/annotator/test/bucket-bar-test.js

@@ -10,7 +10,7 @@ describe('BucketBar', () => {
 
   const createBucketBar = function (options) {
     const element = document.createElement('div');
-    return new BucketBar(element, options || {}, fakeAnnotator);
+    return new BucketBar(element, fakeAnnotator, options);
   };
 
   beforeEach(() => {
@@ -30,8 +30,8 @@ describe('BucketBar', () => {
     };
 
     $imports.$mock({
-      '../components/Buckets': FakeBuckets,
-      '../util/buckets': fakeBucketUtil,
+      './components/Buckets': FakeBuckets,
+      './util/buckets': fakeBucketUtil,
     });
 
     sandbox.stub(window, 'requestAnimationFrame').yields();