(kb) cleaner way to toggle panel clipboard group/ignore classes

we now check if the passed doc observer is actually ready before doing
anything

Author: manuhabitela

app/client/components/RegionFocusSwitcher.ts

@@ -55,6 +55,7 @@ const log = (...args: any[]) => {
 export class RegionFocusSwitcher extends Disposable {
   // Currently focused region
   public readonly current: Observable<Region | undefined>;
+  private readonly _gristDocObs?: Observable<GristDoc | null>;
   private _currentUpdateInitiator: 'keyboard' | MouseEvent = 'keyboard';
   // Previously focused elements for each panel (not used for view section ids)
   private _prevFocusedElements: Record<Panel, Element | null> = {
@@ -64,12 +65,25 @@ export class RegionFocusSwitcher extends Disposable {
     main: null,
   };
 
-  constructor(private readonly _gristDocObs?: Observable<GristDoc | null>) {
+  constructor(gristDocObs?: Observable<GristDoc | null>) {
     super();
     this.current = Observable.create(this, undefined);
+    if (gristDocObs) {
+      this._gristDocObs = gristDocObs;
+    }
   }
 
   public init() {
+    // if we have a grist doc, wait for the current grist doc to be ready before doing anything
+    if (this._gristDocObs && this._gristDocObs.get() === null) {
+      this._gristDocObs.addListener((doc, prevDoc) => {
+        if (doc && prevDoc === null) {
+          this.init();
+        }
+      });
+      return;
+    }
+
     this.autoDispose(commands.createGroup({
       nextRegion: () => this._cycle('next'),
       prevRegion: () => this._cycle('prev'),
@@ -83,7 +97,6 @@ export class RegionFocusSwitcher extends Disposable {
       const onClick = this._onClick.bind(this);
       document.addEventListener('mouseup', onClick);
       this.onDispose(() => document.removeEventListener('mouseup', onClick));
-      this._dirtyClassesFix();
     }
   }
 
@@ -108,9 +121,6 @@ export class RegionFocusSwitcher extends Disposable {
   public reset() {
     log('reset');
     this.focusRegion(undefined);
-    if (this._gristDocObs) {
-      this._dirtyClassesFix();
-    }
   }
 
   public panelAttrs(id: Panel, ariaLabel: string) {
@@ -120,6 +130,20 @@ export class RegionFocusSwitcher extends Disposable {
       dom.attr('role', 'region'),
       dom.attr('aria-label', ariaLabel),
       dom.attr(ATTRS.regionId, id),
+      dom.cls('clipboard_group_focus', use => {
+        const gristDoc = this._gristDocObs ? use(this._gristDocObs) : null;
+        if (!gristDoc) {
+          return true;
+        }
+        return !hasViewLayout(gristDoc);
+      }),
+      dom.cls('clipboard_forbid_focus', use => {
+        const gristDoc = this._gristDocObs ? use(this._gristDocObs) : null;
+        if (!gristDoc) {
+          return false;
+        }
+        return hasViewLayout(gristDoc);
+      }),
       dom.cls(`${cssFocusedPanel.className}-focused`, use => {
         const current = use(this.current);
         return this._currentUpdateInitiator === 'keyboard' && current?.type === 'panel' && current.id === id;
@@ -141,32 +165,6 @@ export class RegionFocusSwitcher extends Disposable {
     }
   }
 
-  // @TODO: fix this. This is dirty code to see if what I want to do works.
-  // My issue is when starting the regionFocusSwitcher, the gristDoc is not yet ready.
-  // I need to see how to correctly wait for this and be sure there are view layout sections or not.
-  private _dirtyClassesFix(tries = 0): any {
-    if (tries > 20) {
-      return;
-    }
-    const main = document.querySelector(`[${ATTRS.regionId}="main"]`);
-    if (!main) {
-      return setTimeout(() => this._dirtyClassesFix(tries + 1), 100);
-    }
-    const hasGristDoc = !!this._gristDocObs;
-    const gristDoc = this._getGristDoc();
-    if (hasGristDoc && !gristDoc) {
-      return setTimeout(() => this._dirtyClassesFix(tries + 1), 100);
-    }
-    if (hasGristDoc) {
-      main?.classList.remove('clipboard_group_focus');
-      main?.classList.add('clipboard_forbid_focus');
-    } else {
-      main?.classList.remove('clipboard_forbid_focus');
-      main?.classList.add('clipboard_group_focus');
-    }
-    log('dirtyClassesFix, main classes:', main?.className);
-  }
-
   /**
    * When clicking on a grist doc page:
    *   - if necessary, make it easier to tab through things inside panels by "unfocusing" the view section,
@@ -519,11 +517,11 @@ const findRegionIndex = (regions: Region[], region: Region | undefined) => {
  * This can be false if we are on a grist-doc special page, or if the grist doc is not yet ready.
  */
 const hasViewLayout = (doc: GristDoc | null) => {
-  return doc
+  return !!(doc
     && !doc.viewModel.isDisposed()
     && doc.viewLayout
     && !doc.viewLayout.isDisposed()
-    && doc.viewLayout.layout;
+    && doc.viewLayout.layout);
 };