Add toasts message style

bootstrap_barrio.libraries.yml

@@ -51,7 +51,11 @@ affix:
   css:
     component:
       css/components/affix.css: {}
-
+alerts:
+  version: VERSION
+  css:
+    component:
+      css/components/alerts.css: {}
 book-navigation:
   version: VERSION
   css:

css/components/alerts.css

@@ -3,10 +3,16 @@
  * Visual styles for comments in Bartik.
  */
 
-.alert {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    max-width: 100%;
-    z-index: 9999;
+.alert-wrapper {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  max-width: 100%;
+  z-index: 9999;
+}
+.toast-wrapper {
+  position: absolut;
+  top: 0;
+  right: 0;
+  z-index: 9999;
 }
\ No newline at end of file

js/global.js

@@ -10,20 +10,28 @@
   Drupal.behaviors.bootstrap_barrio = {
     attach: function (context, settings) {
 
-	$(window).scroll(function() {
+      var position = $(window).scrollTop();
+	    $(window).scroll(function() {
         if ($(this).scrollTop() > 50){  
           $('body').addClass("scrolled");
         }
         else{
           $('body').removeClass("scrolled");
         }
+        var scroll = $(window).scrollTop();
+        if (scroll > position) {
+          $('body').addClass("scrolldown");
+          $('body').removeClass("scrollup");
+        } else {
+          $('body').addClass("scrollup");
+          $('body').removeClass("scrolldown");
+        }
+        position = scroll;
       });
 
       var toggleAffix = function(affixElement, scrollElement, wrapper) {
-  
         var height = affixElement.outerHeight(),
             top = wrapper.offset().top;
-    
         if (scrollElement.scrollTop() >= top){
             wrapper.height(height);
             affixElement.addClass("affix");
@@ -32,23 +40,20 @@
             affixElement.removeClass("affix");
             wrapper.height('auto');
         }
-      
       };
-  
-
       $('[data-toggle="affix"]').each(function() {
         var ele = $(this),
-            wrapper = $('<div></div>');
-    
+          wrapper = $('<div></div>');
         ele.before(wrapper);
         $(window).on('scroll resize', function() {
-            toggleAffix(ele, $(this), wrapper);
+          toggleAffix(ele, $(this), wrapper);
         });
-    
         // init
         toggleAffix(ele, $(window), wrapper);
       });
 
+      $('.toast').toast('show');
+      
     }
   };
 

templates/misc/status-messages--toasts.html.twig

+{#
+/**
+ * @file
+ * Default theme implementation for status messages.
+ *
+ * Displays status, error, and warning messages, grouped by type.
+ *
+ * An invisible heading identifies the messages for assistive technology.
+ * Sighted users see a colored box. See http://www.w3.org/TR/WCAG-TECHS/H69.html
+ * for info.
+ *
+ * Add an ARIA label to the contentinfo area so that assistive technology
+ * user agents will better describe this landmark.
+ *
+ * Available variables:
+ * - message_list: List of messages to be displayed, grouped by type.
+ * - status_headings: List of all status types.
+ * - display: (optional) May have a value of 'status' or 'error' when only
+ *   displaying messages of that specific type.
+ * - attributes: HTML attributes for the element, including:
+ *   - class: HTML classes.
+ *
+ * @see template_preprocess_status_messages()
+ *
+ * @ingroup themeable
+ */
+#}
+
+<div class="toast-wrapper">
+
+  {% for type, messages in message_list %}
+    {%
+      set classes = [
+        'toast',
+        'text-white',
+        'fade',
+        type == 'status' ? 'bg-success',
+        type == 'warning' ? 'bg-warning',
+        type == 'error' ? 'bg-danger',
+        type == 'info' ? 'bg-info',
+      ]
+    %}
+    {%
+      set heading = {
+        'status': 'Status message'|t,
+        'error': 'Error message'|t,
+        'warning': 'Warning message'|t,
+        'info': 'Informative message'|t,
+      }
+    %}
+    {%
+      set color = {
+        'status': '#28a745',
+        'warning': '#dc3545',
+        'error': '#ffc107',
+        'info': '#17a2b8',
+      }
+    %}
+    {%
+      set role = {
+        'status': 'status',
+        'warning': 'alert',
+        'error': 'alert',
+        'info': 'info',
+      }
+    %}
+    {%
+      set autohide = {
+        'status': 'true',
+        'warning': 'false',
+        'error': 'true',
+        'info': 'false',
+      }
+    %}
+    {% for message in messages %}
+      <!-- Then put toasts within -->
+      <div {{ attributes|without('role', 'aria-label').addClass(classes).setAttribute('role', role[type]).setAttribute('data-autohide', autohide[type]) }} aria-live="assertive" aria-atomic="true" data-delay="10000">
+        <div class="toast-header">
+          <svg class="bd-placeholder-img rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
+            <rect {{ attributes.setAttribute('fill', color[type]) }} width="100%" height="100%">
+            </rect>
+          </svg>
+          <strong class="mr-auto">{{ status_headings[type] }}</strong>
+          <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="toast-body">
+          {{ message }}
+        </div>
+      </div>
+    {% endfor %}
+  {% endfor %}
+</div>

templates/misc/status-messages.html.twig

@@ -25,6 +25,7 @@
  * @ingroup themeable
  */
 #}
+<div class="alert-wrapper">
 {% for type, messages in message_list %}
   {%
     set classes = [
@@ -36,24 +37,33 @@
       type == 'status' ? 'alert-success',
       type == 'warning' ? 'alert-warning',
       type == 'error' ? 'alert-danger',
+      type == 'info' ? 'alert-info',
     ]
   %}
+  {%
+  set role = {
+    'status': 'status',
+    'error': 'alert',
+    'warning': 'alert',
+    'info': 'status',
+  }
+%}
 
-  <div role="alert" aria-label="{{ status_headings[type] }}" {{ attributes|without('role', 'aria-label').addClass(classes) }}>
+  <div aria-label="{{ status_headings[type] }}" {{ attributes|without('role', 'aria-label').addClass(classes).setAttribute('role', role[type]) }}>
     <button type="button" class="close" data-dismiss="alert" aria-label="Close">
       <span aria-hidden="true">&times;</span>
     </button>
     {% if status_headings[type] %}
       <h2 class="visually-hidden">{{ status_headings[type] }}</h2>
     {% endif %}
-    {% if messages|length > 1 %}
-      <ul>
-        {% for message in messages %}
-          <li>{{ message }}</li>
-        {% endfor %}
-      </ul>
-    {% else %}
-      {{ messages|first }}
-    {% endif %}
+    {% for message in messages %}
+      {% if loop.last %}
+        {{ message }}
+      {% else %}
+        {{ message }}
+        <hr>
+      {% endif %}
+    {% endfor %}
   </div>
 {% endfor %}
+</div>