Replace Noty with Bootstrap Toasts (CFM-110) (#12)

* Replace Noty with Bootstrap Toasts, first commmit (CFM-110) * Wrap messages with h() (CFM-110) * Change lang file key (CFM-110)
COmanage · Apr 1, 2022 · 3998ce4 · 3998ce4
1 parent 8ffca04
commit 3998ce4
Show file tree

Hide file tree

Showing 29 changed files with 113 additions and 3,331 deletions.
diff --git a/app/resources/locales/en_US/default.po b/app/resources/locales/en_US/default.po
@@ -26,6 +26,9 @@
 msgid "product.code"
 msgstr "registry"
 
+msgid "product.comanage"
+msgstr "COmanage"
+
 # This should match the ISO 639-1 two letter language code for the translation
 msgid "registry.meta.lang"
 msgstr "en"

diff --git a/app/resources/locales/en_US/information.po b/app/resources/locales/en_US/information.po
@@ -36,6 +36,15 @@ msgstr "No collaborations (COs) yet exist. Please have an administrator create o
 msgid "cos.select"
 msgstr "Please select the collaboration (CO) you wish to manage."
 
+msgid "flash.default"
+msgstr "Notice"
+
+msgid "flash.error"
+msgstr "Error"
+
+msgid "flash.success"
+msgstr "Success"
+
 msgid "pagination.format"
 msgstr "Page {{page}} of {{pages}}, Viewing {{start}}-{{end}} of {{count}}"
 

diff --git a/app/templates/element/flash/default.php b/app/templates/element/flash/default.php
@@ -11,13 +11,26 @@
 <div class="<?= h($class) ?>" onclick="this.classList.add('hidden');"><?= $message ?></div>
 */ ?>
 
-<?php
-  if(!empty($message)) {
-    // Strip tags then escape quotes before handing Flash message to noty.js
-    $filteredMessage = filter_var(filter_var($message,FILTER_SANITIZE_STRING,FILTER_FLAG_NO_ENCODE_QUOTES),FILTER_SANITIZE_ADD_SLASHES);
-    // Replace all newlines with html breaks
-    $filteredMessage = str_replace(array("\r", "\n"), '<br/>', $filteredMessage);
-    print "<script>generateFlash('" . $filteredMessage . "', '" . $class . "');</script>";
-  }
-?>
+
+<?php if(!empty($message)): ?>
+  <div class="toast error" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
+    <div class="toast-header">
+      <?= $this->Html->image("COmanage-Gears-SM.png", array('alt' => __('registry.meta.logo'))); ?>
+      <span class="me-auto"><?= __('product.comanage'); ?></span>
+      <small><?= __d('information','flash.default'); ?></small>
+      <button type="button" class="btn-close nospin" data-bs-dismiss="toast" aria-label="Close"></button>
+    </div>
+    <div class="toast-body">
+      <?= h($message); ?>
+    </div>
+  </div>
+
+  <script>
+    var toastElList = [].slice.call(document.querySelectorAll('.toast'))
+    var toastList = toastElList.map(function(toastEl) {
+      return new bootstrap.Toast(toastEl);
+    });
+    toastList.forEach(toast => toast.show());
+  </script>
+<?php endif; ?>
 
diff --git a/app/templates/element/flash/error.php b/app/templates/element/flash/error.php
@@ -7,14 +7,24 @@
 <div class="message error" onclick="this.classList.add('hidden');"><?= $message ?></div>
 */ ?>
 
+<?php if(!empty($message)): ?>
+  <div class="toast error" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
+    <div class="toast-header">
+      <?= $this->Html->image("COmanage-Gears-SM.png", array('alt' => __('registry.meta.logo'))); ?>
+      <span class="me-auto"><?= __('product.comanage'); ?></span>
+      <small><?= __d('information','flash.error'); ?></small>
+      <button type="button" class="btn-close nospin" data-bs-dismiss="toast" aria-label="Close"></button>
+    </div>
+    <div class="toast-body">
+      <?= h($message); ?>
+    </div>
+  </div>
 
-<?php
-  if(!empty($message)) {
-    // Strip tags then escape quotes before handing Flash message to noty.js
-    $filteredMessage = filter_var(filter_var($message,FILTER_SANITIZE_STRING,FILTER_FLAG_NO_ENCODE_QUOTES),FILTER_SANITIZE_ADD_SLASHES);
-    // Replace all newlines with html breaks
-    $filteredMessage = str_replace(array("\r", "\n"), '<br/>', $filteredMessage);
-    print "<script>generateFlash('" . $filteredMessage . "', 'error');</script>";
-  }
-?>
-
+  <script>
+    var toastElList = [].slice.call(document.querySelectorAll('.toast'))
+    var toastList = toastElList.map(function(toastEl) {
+      return new bootstrap.Toast(toastEl);
+    });
+    toastList.forEach(toast => toast.show());
+  </script>
+<?php endif; ?>
diff --git a/app/templates/element/flash/success.php b/app/templates/element/flash/success.php
@@ -7,12 +7,24 @@
 <div class="message success" onclick="this.classList.add('hidden')"><?= $message ?></div>
 */ ?>
 
-<?php
-  if(!empty($message)) {
-    // Strip tags then escape quotes before handing Flash message to noty.js
-    $filteredMessage = filter_var(filter_var($message,FILTER_SANITIZE_STRING,FILTER_FLAG_NO_ENCODE_QUOTES),FILTER_SANITIZE_ADD_SLASHES);
-    // Replace all newlines with html breaks
-    $filteredMessage = str_replace(array("\r", "\n"), '<br/>', $filteredMessage);
-    print "<script>generateFlash('" . $filteredMessage . "', 'success');</script>";
-  }
-?>
+<?php if(!empty($message)): ?>
+  <div class="toast success" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
+    <div class="toast-header">
+      <?= $this->Html->image("COmanage-Gears-SM.png", array('alt' => __('registry.meta.logo'))); ?>
+      <span class="me-auto"><?= __('product.comanage'); ?></span>
+      <small><?= __d('information','flash.success'); ?></small>
+      <button type="button" class="btn-close nospin" data-bs-dismiss="toast" aria-label="Close"></button>
+    </div>
+    <div class="toast-body">
+      <?= h($message); ?>
+    </div>
+  </div>
+
+  <script>
+    var toastElList = [].slice.call(document.querySelectorAll('.toast'))
+    var toastList = toastElList.map(function(toastEl) {
+      return new bootstrap.Toast(toastEl);
+    });
+    toastList.forEach(toast => toast.show());
+  </script>
+<?php endif; ?>
diff --git a/app/templates/element/javascript.php b/app/templates/element/javascript.php
@@ -230,6 +230,4 @@
   var defaultConfirmCancel = "<?php print __d('operation', 'cancel'); ?>";
   var defaultConfirmTitle = "<?php print __d('operation', 'confirm'); ?>";
 
-</script>
-
-<?= $this->Flash->render() ?>
+</script>
diff --git a/app/templates/layout/default.php b/app/templates/layout/default.php
@@ -40,7 +40,7 @@
 <!DOCTYPE html>
 <html lang="<?= __('registry.meta.lang'); ?>">
   <head>
-    <?= $this->Html->meta('viewport', 'width=device-width, initial-scale=1.0') . "\n"; ?>
+    <?= $this->Html->meta('viewport', 'width=device-width, initial-scale=1, shrink-to-fit=no') . "\n"; ?>
     <?= $this->Html->charset(); ?>
 
     <title><?= (!empty($vv_title) ? $vv_title : __('registry.meta.registry')); ?></title>
@@ -63,8 +63,9 @@
       'co-responsive'
     ]) . "\n"; ?>
 
-    <!-- Load JavaScript (only JQuery here - other scripts at bottom) -->
+    <!-- Load Bootstrap and jQuery (other scripts at bottom) -->
     <?= $this->Html->script([
+      'bootstrap/bootstrap.bundle.min.js',
       'jquery/jquery.min.js'
     ]) . "\n"; ?>
 
@@ -176,6 +177,15 @@
 
     <!-- loading animation -->
     <div id="co-loading"><span></span><span></span><span></span></div>
+
+    <!-- informational messages -->
+    <div 
+      class="toast-container" 
+      id="flash-messages" 
+      aria-live="polite" 
+      aria-atomic="true" >
+      <?= $this->Flash->render() ?>
+    </div>
 
     <!-- modal dialog box -->
     <?= $this->element('dialog'); ?>
@@ -191,13 +201,9 @@
     </script>
 
     <!-- Load Javascript -->
-    <!-- XXX Noty, js-cookie, and metisMenu should be deprecated -->
+    <!-- XXX js-cookie should be deprecated -->
     <?= $this->Html->script([
-      'bootstrap/bootstrap.bundle.min.js',
       'js-cookie/js.cookie-2.1.3.min.js',
-      'jquery/noty/jquery.noty.js',
-      'jquery/noty/layouts/topCenter.js',
-      'jquery/noty/themes/comanage.js',
       'comanage.js'
     ]) . "\n"; ?>
 

diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
@@ -319,11 +319,31 @@ instead, reveal in user menu */
   padding: 1em 0;
 }
 /* NOTICES */
-.noty_text {
-  letter-spacing: 0.3px;
-  font-size: 14px;
+#flash-messages {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  margin: 1em auto;
+  z-index: 100;
+}
+#flash-messages .toast-header img {
+  width: 20px;
+  margin-right: 0.3em;
+}
+#flash-messages .toast.success .toast-header {
+  background-color: var(--cmg-color-green-007);
+  color: white;
+}
+#flash-messages .toast.error .toast-header {
+  background-color: var(--cmg-color-red-002);
+  color: white;
+}
+#flash-messages .toast.default .toast-header {
+  background-color: var(--cmg-color-yellow-001);
+  color: black;
 }
-.noty_text .material-icons {
+#flash-messages .material-icons {
   font-size: 20px !important;
   padding: 0;
   margin: 0 4px 0 -10px;

diff --git a/app/webroot/img/COmanage-Gears-SM.png b/app/webroot/img/COmanage-Gears-SM.png
diff --git a/app/webroot/js/comanage.js b/app/webroot/js/comanage.js
@@ -40,17 +40,6 @@ function js_onsubmit_call_hooks() {
   }
 }
 
-// Generate flash notifications for messages
-function generateFlash(text, type) {
-  var n = noty({
-    text: text,
-    type: type,
-    dismissQueue: true,
-    layout: 'topCenter',
-    theme: 'comanage'
-  });
-}
-
 // Generate a loading animation by revealing a persistent hidden div with CSS animation.
 // An element's onclick action will trigger this to appear if it has the class "spin" class on an element.
 // (See Template/Elements/javascript.ctp)

diff --git a/app/webroot/js/jquery/noty/LICENSE.txt b/app/webroot/js/jquery/noty/LICENSE.txt