Merge pull request #5475 from jimchamp/bug/capitalize-observation-typ…

…e-in-toast Various toast component bug fixes
internetarchive · Aug 17, 2021 · 45be872 · 45be872
2 parents e88cdd7 + 795134f
commit 45be872
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 30 deletions.
diff --git a/openlibrary/plugins/openlibrary/js/Toast.js b/openlibrary/plugins/openlibrary/js/Toast.js
@@ -9,53 +9,50 @@ const DEFAULT_TIMEOUT = 2500;
  * @class Toast creates a small pop-up message that closes after some amount of time.
  */
 export class Toast {
-  static $toastContainer;
 
-  /**
+    /**
    * Creates a new toast component, adds a close listener to the component, and adds the component
    * as the first child of the given parent element.
    *
    * @param {JQuery} $parent Designates where the toast component will be attached
    * @param {string} message Message that will be displayed in the toast component
    * @param {number} timeout Amount of time, in milliseconds, that the component will be visible
    */
-  constructor($parent, message, timeout=DEFAULT_TIMEOUT) {
-      if (!Toast.$toastContainer) {
-          Toast.$toastContainer = $('<div class="toast-container"></div>');
-      }
-      if ($parent.has(Toast.$toastContainer).length === 0) {
-          $parent.prepend(Toast.$toastContainer);
-      }
-
-      this.timeout = timeout;
-      this.$toast = $(`<div class="toast">
+    constructor($parent, message, timeout=DEFAULT_TIMEOUT) {
+        if (!$parent.has('.toast-container').length) {
+            $parent.prepend('<div class="toast-container"></div>')
+        }
+        const $toastContainer = $parent.children('.toast-container').first();
+
+        this.timeout = timeout;
+        this.$toast = $(`<div class="toast">
         <span class="toast-message">${message}</span>
         <a class="toast--close">&times;<span class="shift">$_("Close")</span></a>
       </div>
     `);
 
-      this.$toast.find('.toast--close').on('click', () => {
-          this.close();
-      });
+        this.$toast.find('.toast--close').on('click', () => {
+            this.close();
+        });
 
-      Toast.$toastContainer.append(this.$toast);
-  }
+        $toastContainer.append(this.$toast);
+    }
 
-  /**
+    /**
    * Displays the toast component on the page.
    */
-  show() {
-      this.$toast.addClass('show');
+    show() {
+        this.$toast.addClass('show');
 
-      setTimeout(() => {
-          this.close();
-      }, this.timeout);
-  }
+        setTimeout(() => {
+            this.close();
+        }, this.timeout);
+    }
 
-  /**
+    /**
    * Hides the toast component and removes it from the DOM.
    */
-  close() {
-      this.$toast.fadeOut('slow', function() { $(this).remove() });
-  }
+    close() {
+        this.$toast.fadeOut('slow', function() { $(this).remove() });
+    }
 }
diff --git a/openlibrary/plugins/openlibrary/js/modals/index.js b/openlibrary/plugins/openlibrary/js/modals/index.js
@@ -404,6 +404,8 @@ function addObservationChangeListeners($parent, context) {
  */
 function submitObservation($input, workOlid, data, sectionType) {
     let toastMessage;
+    const capitalizedType = sectionType[0].toUpperCase() + sectionType.substring(1);
+
     // Make AJAX call
     $.ajax({
         type: 'POST',
@@ -412,10 +414,10 @@ function submitObservation($input, workOlid, data, sectionType) {
         data: JSON.stringify(data)
     })
         .done(function() {
-            toastMessage = `${sectionType} saved!`;
+            toastMessage = `${capitalizedType} saved!`;
         })
         .fail(function() {
-            toastMessage = `${sectionType} save failed...`;
+            toastMessage = `${capitalizedType} save failed...`;
         })
         .always(function() {
             showToast($input.closest('.metadata-form'), toastMessage);

diff --git a/static/css/components/toast.less b/static/css/components/toast.less
@@ -8,6 +8,7 @@
   left: 0;
   right: 0;
   z-index: @z-index-level-17;
+  pointer-events: none;
 }
 
 .toast {
@@ -16,6 +17,9 @@
   width: max-content;
   margin: 0 auto 20px;
   padding: 1em;
+  display: flex;
+  justify-content: space-between;
+  pointer-events: auto;
 
   background-color: @light-beige;
   border: 1px solid @mid-grey;