From b3874f41264235c813783e2e9aaaf9f68193c140 Mon Sep 17 00:00:00 2001
From: ebremner <ebremner@uwaterloo.ca>
Date: Wed, 12 May 2021 09:53:53 -0400
Subject: [PATCH] ISTWCMS-4695: creating separate component for banners and
updating card--banner
---
js/component_scripts.min.js | 82 +++++++++----------
.../card--banner.js => banners/banners.js} | 0
.../04-components/banners/banners.twig | 7 ++
.../04-components/banners/banners.yml | 74 +++++++++++++++++
.../card/card--banner/card--banner.twig | 26 +++---
5 files changed, 133 insertions(+), 56 deletions(-)
rename source/_patterns/04-components/{card/card--banner/card--banner.js => banners/banners.js} (100%)
create mode 100644 source/_patterns/04-components/banners/banners.twig
create mode 100644 source/_patterns/04-components/banners/banners.yml
diff --git a/js/component_scripts.min.js b/js/component_scripts.min.js
index 04a5e1ca..4809c83d 100644
--- a/js/component_scripts.min.js
+++ b/js/component_scripts.min.js
@@ -1,3 +1,44 @@
+(function ($, Drupal) {
+ Drupal.behaviors.cardbanner = {
+ attach: function (context, settings) {
+ $(document).ready(function () {
+
+ // Step through each FF on the page.
+ $('.card.banner').each(function () {
+
+ // Get the number of items for the carousel, if any.
+ var num_of_items = 1;
+
+ // Add the carousel to the FF using the id.
+ $('.owl-carousel').owlCarousel({
+ margin: 10,
+ nav: true,
+ navContainerClass: 'uw-owl-nav',
+ navText:[
+ '‹ prev',
+ 'next ›'
+ ],
+ responsiveClass: true,
+ responsive: {
+ 0: {
+ items: 1
+ },
+ 600: {
+ items: num_of_items <= 2 ? (num_of_items - 1 > 0) ? num_of_items - 1 : 1 : 2
+
+ },
+ 1000: {
+ items: num_of_items
+
+ }
+ }
+ });
+ });
+ });
+ }
+ };
+})(jQuery, Drupal);
+
/**
* @file
*/
@@ -297,47 +338,6 @@ else {
}
})(jQuery, Drupal);
-(function ($, Drupal) {
- Drupal.behaviors.cardbanner = {
- attach: function (context, settings) {
- $(document).ready(function () {
-
- // Step through each FF on the page.
- $('.card.banner').each(function () {
-
- // Get the number of items for the carousel, if any.
- var num_of_items = 1;
-
- // Add the carousel to the FF using the id.
- $('.owl-carousel').owlCarousel({
- margin: 10,
- nav: true,
- navContainerClass: 'uw-owl-nav',
- navText:[
- '‹ prev',
- 'next ›'
- ],
- responsiveClass: true,
- responsive: {
- 0: {
- items: 1
- },
- 600: {
- items: num_of_items <= 2 ? (num_of_items - 1 > 0) ? num_of_items - 1 : 1 : 2
-
- },
- 1000: {
- items: num_of_items
-
- }
- }
- });
- });
- });
- }
- };
-})(jQuery, Drupal);
-
/**
* @file
*/
diff --git a/source/_patterns/04-components/card/card--banner/card--banner.js b/source/_patterns/04-components/banners/banners.js
similarity index 100%
rename from source/_patterns/04-components/card/card--banner/card--banner.js
rename to source/_patterns/04-components/banners/banners.js
diff --git a/source/_patterns/04-components/banners/banners.twig b/source/_patterns/04-components/banners/banners.twig
new file mode 100644
index 00000000..be699f54
--- /dev/null
+++ b/source/_patterns/04-components/banners/banners.twig
@@ -0,0 +1,7 @@
+{% embed '@layouts/carousel/carousel.twig' %}
+ {% block content %}
+ {% include '@components/card/card--banner/card--banner.twig' with {
+ banners: banners,
+ } %}
+ {% endblock %}
+{% endembed %}
\ No newline at end of file
diff --git a/source/_patterns/04-components/banners/banners.yml b/source/_patterns/04-components/banners/banners.yml
new file mode 100644
index 00000000..44f6529d
--- /dev/null
+++ b/source/_patterns/04-components/banners/banners.yml
@@ -0,0 +1,74 @@
+banners:
+ images:
+ -
+ sources:
+ -
+ srcset: '../../../../source/images/president/president_xlarge.jpg'
+ media: 'all and (min-width: 63.19rem)'
+ type: 'image/jpeg'
+ -
+ srcset: '../../../../source/images/president/president_large.jpg'
+ media: 'all and (min-width: 49.81rem)'
+ type: 'image/jpeg'
+ -
+ srcset: '../../../../source/images/president/president_medium.jpg'
+ media: 'all and (min-width: 30rem)'
+ type: 'image/jpeg'
+ -
+ srcset: '../../../../source/images/president/president_small.jpg'
+ media: 'all and (min-width: 25rem)'
+ type: 'image/jpeg'
+ -
+ srcset: '../../../../source/images/president/president_xsmall.jpg'
+ media: 'all and (min-width: 15rem)'
+ type: 'image/jpeg'
+ img_element: '../../../../source/images/president/president_xlarge.jpg'
+ alt: 'Alternative text'
+ big_text: 'Image1'
+ small_text: 'Caption 1'
+ link: 'http://google.ca'
+ -
+ sources:
+ - srcset: '../../../../source/images/president/president_xlarge.jpg'
+ media: 'all and (min-width: 63.19rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_large.jpg'
+ media: 'all and (min-width: 49.81rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_medium.jpg'
+ media: 'all and (min-width: 30rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_small.jpg'
+ media: 'all and (min-width: 25rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_xsmall.jpg'
+ media: 'all and (min-width: 15rem)'
+ type: 'image/jpeg'
+ img_element: '../../../../source/images/president/president_xlarge.jpg'
+ alt: 'Alternative text'
+ big_text: 'Image2'
+ -
+ sources:
+ - srcset: '../../../../source/images/president/president_xlarge.jpg'
+ media: 'all and (min-width: 63.19rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_large.jpg'
+ media: 'all and (min-width: 49.81rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_medium.jpg'
+ media: 'all and (min-width: 30rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_small.jpg'
+ media: 'all and (min-width: 25rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_xsmall.jpg'
+ media: 'all and (min-width: 15rem)'
+ type: 'image/jpeg'
+ img_element: '../../../../source/images/president/president_xlarge.jpg'
+ alt: 'Alternative text'
+ big_text: 'Image3'
+ link: 'http://google.ca'
+ autoplay: 1
+ slide_speed: 7000
+ style: 'full-width'
+ transition_speed: 400
diff --git a/source/_patterns/04-components/card/card--banner/card--banner.twig b/source/_patterns/04-components/card/card--banner/card--banner.twig
index 9b151b03..6c9c0cd7 100644
--- a/source/_patterns/04-components/card/card--banner/card--banner.twig
+++ b/source/_patterns/04-components/card/card--banner/card--banner.twig
@@ -1,15 +1,11 @@
-{% embed '@layouts/carousel/carousel.twig' %}
- {% block content %}
- {% for image in banners.images %}
- {% include '@components/card/card.twig' with {
- sources: image.sources,
- img_element: image.img_element,
- type: 'banner',
- title: image.big_text,
- sub_title: image.small_text,
- header_level: 2,
- url: image.link,
- } %}
- {% endfor %}
- {% endblock %}
-{% endembed %}
\ No newline at end of file
+{% for image in banners.images %}
+ {% include '@components/card/card.twig' with {
+ sources: image.sources,
+ img_element: image.img_element,
+ type: 'banner',
+ title: image.big_text,
+ sub_title: image.small_text,
+ header_level: 2,
+ url: image.link,
+ } %}
+{% endfor %}
\ No newline at end of file
--
GitLab