ISTWCMS-3662: updating FF to allow for carousel/no-carousel and number of items per carousel

source/_patterns/04-components/facts-and-figures/facts-and-figures.js

-(function ($, Drupal) {
-  Drupal.behaviors.factfigure = {
-    attach: function (context, settings) {
-      $(document).ready(function(){
-
-        // Step through each FF on the page.
-        $('.uw-ff').each(function() {
-
-          // Get the id to reference the individual FF.
-          // Need this to ensure that if more than one FF on the page,
-          // that all FFs get the carousel added.
-          var id = '#uw-ff-' + $(this).data('id');
-
-          // Add the carousel to the FF using the id.
-          $(id + ' .owl-carousel').owlCarousel({
-            loop: true,
-            nav: true,
-            margin: 10,
-            responsiveClass: true,
-            responsive: {
-              0: {
-                items: 1,
-                nav: true,
-                loop: true
-              },
-              600: {
-                items: 2,
-                nav: true,
-                loop: true
-              },
-              1000: {
-                items: 3,
-                nav: true,
-                loop: true
-              }
-            }
-          });
-        });
-      });
-    }
-  };
-})(jQuery, Drupal);
+(function ($, Drupal) {
+  Drupal.behaviors.factfigure = {
+    attach: function (context, settings) {
+      $(document).ready(function(){
+
+        // Step through each FF on the page.
+        $('.uw-ff').each(function() {
+
+          var result = $(this).find('.uw-ff__has-carousel-settings').length;
+
+          // Get the id to reference the individual FF.
+          // Need this to ensure that if more than one FF on the page,
+          // that all FFs get the carousel added.
+          var id = '#uw-ff-' + $(this).data('id');
+
+          // Get the number of items for the carousel, if any.
+          var num_of_items = $(id).data('num-per-carousel') !== '' ? $(this).data('num-per-carousel') : 3;
+
+          // Add the carousel to the FF using the id.
+          $(id + ' .owl-carousel').owlCarousel({
+            loop: true,
+            nav: true,
+            margin: 10,
+            responsiveClass: true,
+            responsive: {
+              0: {
+                items: 1,
+                nav: true,
+                loop: true
+              },
+              600: {
+                items: num_of_items <= 2 ? (num_of_items - 1 > 0) ? num_of_items - 1 : 1 : 2,
+                nav: true,
+                loop: true
+              },
+              1000: {
+                items: num_of_items,
+                nav: true,
+                loop: true
+              }
+            }
+          });
+        });
+      });
+    }
+  };
+})(jQuery, Drupal);

source/_patterns/04-components/facts-and-figures/facts-and-figures.twig

-<div id="uw-ff-{{ ffs.id }}" class="uw-ff {{ ffs.show ? 'uw-ff--with-bubbles' }}" data-carousel="Yes" data-num-per-carousel="3" data-id="{{ ffs.id }}">
-  <div class="uw-ff__wrapper {{ ffs.theme }}">
-    {% embed '@layouts/carousel/carousel.twig' %}
-      {% block content %}
-        {% for details in ffs.details %}
-          <div class="uw-ff__fact {{ icon != '' ? 'with-icon' : 'no-icon' }}">
-            {% for detail in details %}
-              {% if detail.type == 'icon' %}
-                <div class="uw-ff__text uw-ff__text--{{ detail.type }}">
-                  <img src="{{ detail.icon }}" />
-                </div>
-              {% else %}
-                <span class="uw-ff__text uw-ff__text--{{ detail.type }}">{{ detail.text }}</span>
-              {% endif %}
-            {% endfor %}
-          </div>
-        {% endfor %}
-      {% endblock %}
-    {% endembed %}
+<div id="uw-ff-{{ ffs.id }}" class="uw-ff {{ ffs.show ? 'uw-ff--with-bubbles' }}" data-carousel="Yes" data-num-per-carousel="{{ ffs.num_per_carousel }}" data-id="{{ ffs.id }}">
+  <div class="uw-ff__wrapper {{ ffs.num_per_carousel ? 'uw-ff--carousel' : 'uw-ff--no-carousel' }} {{ ffs.theme }}">
+
+    {% if ffs.num_per_carousel %}
+
+      {% embed '@layouts/carousel/carousel.twig' %}
+        {% block content %}
+          {% for details in ffs.details %}
+            <div class="uw-ff__fact {{ icon != '' ? 'with-icon' : 'no-icon' }}">
+              {% for detail in details %}
+                {% if detail.type == 'icon' %}
+                  <div class="uw-ff__text uw-ff__text--{{ detail.type }}">
+                    <img src="{{ detail.icon }}" />
+                  </div>
+                {% else %}
+                  <span class="uw-ff__text uw-ff__text--{{ detail.type }}">{{ detail.text }}</span>
+                {% endif %}
+              {% endfor %}
+            </div>
+          {% endfor %}
+        {% endblock %}
+      {% endembed %}
+
+    {% else %}
+
+      {% for details in ffs.details %}
+        <div class="uw-ff__fact {{ icon != '' ? 'with-icon' : 'no-icon' }}">
+          {% for detail in details %}
+            {% if detail.type == 'icon' %}
+              <div class="uw-ff__text uw-ff__text--{{ detail.type }}">
+                <img src="{{ detail.icon }}" />
+              </div>
+            {% else %}
+              <span class="uw-ff__text uw-ff__text--{{ detail.type }}">{{ detail.text }}</span>
+            {% endif %}
+          {% endfor %}
+        </div>
+      {% endfor %}
+
+    {% endif %}
   </div>
 </div>
-

source/_patterns/04-components/facts-and-figures/facts-and-figures.yml

@@ -3,6 +3,7 @@ ffs:
   show: true
   theme: 'org-mat'
   text_align: 'center'
+  num_per_carousel: 3
   details:
     -
       -