fix(mux-uploader): Refactor overlay behavior for drop. Remove z-index…

… assumptions from uploader. Rename overlay text attr to overlay-text for clarity.
muxinc · Jul 8, 2022 · dcf2c80 · dcf2c80
1 parent a1d7552
commit dcf2c80
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 27 deletions.
diff --git a/packages/mux-uploader/src/index.ts b/packages/mux-uploader/src/index.ts
@@ -40,7 +40,6 @@ button {
   transition: all 0.2s ease;
   font-family: inherit;
   font-size: inherit;
-  z-index: 10;
   position: relative;
 }
 
@@ -78,7 +77,6 @@ button:active {
   color: #e22c3e;
   text-decoration-line: underline;
   cursor: pointer;
-  z-index: 10;
   position: relative;
 }
 

diff --git a/packages/mux-uploader/src/mux-uploader-drop.ts b/packages/mux-uploader/src/mux-uploader-drop.ts
@@ -4,11 +4,12 @@ const template = document.createElement('template');
 /** @todo: Currently removing all styles. Follow up on overlay styling (CJP) */
 template.innerHTML = `
 <style>
-  .overlay {
-    display: none;
+  :host {
+    position: relative;
   }
 
-  :host([overlay]) .overlay {
+  #overlay {
+    display: none;
     position: absolute;
     top: 0;
     bottom: 0;
@@ -17,59 +18,54 @@ template.innerHTML = `
     height: 100%;
     width: 100%;
   }
- 
-  :host([active][fullscreen][overlay]) .overlay {
-    background-color: var(--overlay-background-color, rgba(226, 253, 255, 0.95));
 
+  :host([active][overlay]) > #overlay {
+    background: var(--overlay-background-color, rgba(226, 253, 255, 0.95));
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
   }
-
-  h1 {
-    display: none;
-  }
-
-  :host([active][overlay]) h1 {
-    display: block;
-  }
 </style>
 
 <slot></slot>
-<div class="overlay" id="overlay">
-  <h1 id="overlay-text"></h1>
+<div id="overlay">
+  <h1 id="overlay-label"></h1>
 </div>
 `;
 
+const Attributes = {
+  MUX_UPLOADER: 'mux-uploader',
+  OVERLAY_TEXT: 'overlay-text',
+};
+
 class MuxUploaderDropElement extends HTMLElement {
-  overlay: HTMLElement | null | undefined;
-  overlayText: HTMLElement | null | undefined;
+  overlayText: HTMLElement;
 
   constructor() {
     super();
     const shadowRoot = this.attachShadow({ mode: 'open' });
     shadowRoot.appendChild(template.content.cloneNode(true));
 
-    this.overlay = shadowRoot.getElementById('overlay');
-    this.overlayText = shadowRoot.getElementById('overlay-text');
+    this.overlayText = shadowRoot.getElementById('overlay-label') as HTMLElement;
   }
 
   connectedCallback() {
     this.setupDragEvents();
   }
 
-  attributeChangedCallback() {
-    //@ts-ignore
-    this.shadowRoot.getElementById('overlay-text').innerHTML = this.getAttribute('text');
+  attributeChangedCallback(attributeName: string, oldValue: string | null, newValue: string | null) {
+    if (attributeName === Attributes.OVERLAY_TEXT && oldValue !== newValue) {
+      this.overlayText.innerHTML = newValue ?? '';
+    }
   }
 
   static get observedAttributes() {
-    return ['text', 'mux-uploader'];
+    return [Attributes.OVERLAY_TEXT, Attributes.MUX_UPLOADER];
   }
 
   get muxUploader() {
-    const uploaderId = this.getAttribute('mux-uploader');
+    const uploaderId = this.getAttribute(Attributes.MUX_UPLOADER);
     return uploaderId ? document.getElementById(uploaderId) : null;
   }