Extract Backbone Lightbox view module

js/views/attachment_view.js

@@ -117,10 +117,6 @@
         return;
       }
 
-      const lightboxContainer = document.querySelector('.lightboxContainer');
-      lightboxContainer.innerHTML = '';
-      lightboxContainer.style.display = 'block';
-
       const props = {
         imageURL: this.objectUrl,
       };
@@ -128,10 +124,10 @@
         Component: Signal.Components.Lightbox,
         props,
         onClose: () => {
-          lightboxContainer.style.display = 'none';
+          Signal.Backbone.Views.Lightbox.hide();
         },
       });
-      lightboxContainer.appendChild(this.lightboxView.el);
+      Signal.Backbone.Views.Lightbox.show(this.lightboxView.el);
     },
     isVoiceMessage() {
       // eslint-disable-next-line no-bitwise

ts/backbone/index.ts

@@ -1,3 +1,7 @@
+/**
+ * @prettier
+ */
 import * as Conversation from './Conversation';
+import * as Views from './views';
 
-export { Conversation };
+export { Conversation, Views };

ts/backbone/views/Lightbox.ts

@@ -0,0 +1,25 @@
+/**
+ * @prettier
+ */
+export const show = (element: HTMLElement): void => {
+  const container: HTMLDivElement | null = document.querySelector(
+    '.lightboxContainer'
+  );
+  if (container === null) {
+    throw new TypeError("'.lightboxContainer' is required");
+  }
+  container.innerHTML = '';
+  container.style.display = 'block';
+  container.appendChild(element);
+};
+
+export const hide = (): void => {
+  const container: HTMLDivElement | null = document.querySelector(
+    '.lightboxContainer'
+  );
+  if (container === null) {
+    return;
+  }
+  container.innerHTML = '';
+  container.style.display = 'none';
+};

ts/backbone/views/index.ts

@@ -0,0 +1,6 @@
+/**
+ * @prettier
+ */
+import * as Lightbox from './Lightbox';
+
+export { Lightbox };