From db21932c2305962e150b8e55e128a8758bfad16d Mon Sep 17 00:00:00 2001
From: ebremner <ebremner@uwaterloo.ca>
Date: Thu, 20 Aug 2020 15:09:40 -0400
Subject: [PATCH] Adding multi-type-list component
---
css/styles.css | 23 +++++
js/component_scripts.min.js | 43 +++++++++
.../multi-type-list/_multi-type-list.scss | 30 +++++++
.../multi-type-list/multi-type-list.js | 42 +++++++++
.../multi-type-list/multi-type-list.twig | 53 +++++++++++
.../multi-type-list/multi-type-list.yml | 87 +++++++++++++++++++
6 files changed, 278 insertions(+)
create mode 100644 source/_patterns/04-components/multi-type-list/_multi-type-list.scss
create mode 100644 source/_patterns/04-components/multi-type-list/multi-type-list.js
create mode 100644 source/_patterns/04-components/multi-type-list/multi-type-list.twig
create mode 100644 source/_patterns/04-components/multi-type-list/multi-type-list.yml
diff --git a/css/styles.css b/css/styles.css
index 31a1bd19..bce76170 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -4331,6 +4331,29 @@ fieldset,
.mobile-menu__subnav .mobile-menu__link:hover, .mobile-menu__subnav .mobile-menu__link:focus, .mobile-menu__subnav .mobile-menu__link:active {
color: #000; }
+/* Style the tab */
+.uw-multi-type-list-tab {
+ background-color: #f1f1f1;
+ border: 1px solid #ccc;
+ overflow: hidden; }
+ .uw-multi-type-list-tab button {
+ background-color: inherit;
+ cursor: pointer;
+ float: left;
+ outline: none;
+ padding: 14px 16px;
+ transition: 0.3s; }
+ .uw-multi-type-list-tab button:hover {
+ background-color: #ddd; }
+ .uw-multi-type-list-tab button:active {
+ background-color: #ccc; }
+
+/* Style the tab content */
+.uw-tabcontent {
+ border: 1px solid #ccc;
+ display: none;
+ padding: 6px 12px; }
+
.page-title {
padding-top: 1rem; }
diff --git a/js/component_scripts.min.js b/js/component_scripts.min.js
index 051717fa..5ffde968 100644
--- a/js/component_scripts.min.js
+++ b/js/component_scripts.min.js
@@ -111,3 +111,46 @@
}
};
})(jQuery, Drupal);
+
+(function ($, Drupal) {
+ Drupal.behaviors.multitypelist = {
+ attach: function (context, settings) {
+
+ $(document).ready(function() {
+ if ($('.uw-multi-type-list-tab').length > 0) {
+
+ $('.uw-tabcontent')[0].style.display = 'block';
+
+ $('.uw-tablinks').each(function(index, value) {
+ var type = this.getAttribute('data-type');
+ this.click(function() {
+ openTab(type);
+ });
+ });
+ }
+ });
+
+ function openTab(cityName) {
+ alert('CLICKED');
+ // Declare all variables
+ var i, tabcontent, tablinks;
+
+ // Get all elements with class="tabcontent" and hide them
+ tabcontent = document.getElementsByClassName("uw-tabcontent");
+ for (i = 0; i < tabcontent.length; i++) {
+ tabcontent[i].style.display = "none";
+ }
+
+ // Get all elements with class="tablinks" and remove the class "active"
+ tablinks = document.getElementsByClassName("uw-tablinks");
+ for (i = 0; i < tablinks.length; i++) {
+ tablinks[i].className = tablinks[i].className.replace(" active", "");
+ }
+
+ // Show the current tab, and add an "active" class to the button that opened the tab
+ document.getElementById(cityName).style.display = "block";
+ evt.currentTarget.className += " active";
+ }
+ }
+ };
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/source/_patterns/04-components/multi-type-list/_multi-type-list.scss b/source/_patterns/04-components/multi-type-list/_multi-type-list.scss
new file mode 100644
index 00000000..3f78b32a
--- /dev/null
+++ b/source/_patterns/04-components/multi-type-list/_multi-type-list.scss
@@ -0,0 +1,30 @@
+/* Style the tab */
+.uw-multi-type-list-tab {
+ background-color: #f1f1f1;
+ border: 1px solid #ccc;
+ overflow: hidden;
+
+ button {
+ background-color: inherit;
+ cursor: pointer;
+ float: left;
+ outline: none;
+ padding: 14px 16px;
+ transition: 0.3s;
+
+ &:hover {
+ background-color: #ddd;
+ }
+
+ &:active {
+ background-color: #ccc;
+ }
+ }
+}
+
+/* Style the tab content */
+.uw-tabcontent {
+ border: 1px solid #ccc;
+ display: none;
+ padding: 6px 12px;
+}
\ No newline at end of file
diff --git a/source/_patterns/04-components/multi-type-list/multi-type-list.js b/source/_patterns/04-components/multi-type-list/multi-type-list.js
new file mode 100644
index 00000000..05849f1c
--- /dev/null
+++ b/source/_patterns/04-components/multi-type-list/multi-type-list.js
@@ -0,0 +1,42 @@
+(function ($, Drupal) {
+ Drupal.behaviors.multitypelist = {
+ attach: function (context, settings) {
+
+ $(document).ready(function() {
+ if ($('.uw-multi-type-list-tab').length > 0) {
+
+ $('.uw-tabcontent')[0].style.display = 'block';
+
+ $('.uw-tablinks').each(function(index, value) {
+ var type = this.getAttribute('data-type');
+ this.click(function() {
+ openTab(type);
+ });
+ });
+ }
+ });
+
+ function openTab(cityName) {
+ alert('CLICKED');
+ // Declare all variables
+ var i, tabcontent, tablinks;
+
+ // Get all elements with class="tabcontent" and hide them
+ tabcontent = document.getElementsByClassName("uw-tabcontent");
+ for (i = 0; i < tabcontent.length; i++) {
+ tabcontent[i].style.display = "none";
+ }
+
+ // Get all elements with class="tablinks" and remove the class "active"
+ tablinks = document.getElementsByClassName("uw-tablinks");
+ for (i = 0; i < tablinks.length; i++) {
+ tablinks[i].className = tablinks[i].className.replace(" active", "");
+ }
+
+ // Show the current tab, and add an "active" class to the button that opened the tab
+ document.getElementById(cityName).style.display = "block";
+ evt.currentTarget.className += " active";
+ }
+ }
+ };
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/source/_patterns/04-components/multi-type-list/multi-type-list.twig b/source/_patterns/04-components/multi-type-list/multi-type-list.twig
new file mode 100644
index 00000000..eb6994fc
--- /dev/null
+++ b/source/_patterns/04-components/multi-type-list/multi-type-list.twig
@@ -0,0 +1,53 @@
+<div class="uw-multi-type-list-tab">
+ {% for type, list in lists %}
+ <button class="uw-tablinks" data-type="{{ type }}">{{ type }}</button>
+ {% endfor %}
+</div>
+
+{% for type, list in lists %}
+ <div id="{{ type }}" class="uw-tabcontent">
+
+ {% for content in list %}
+
+ {% if type == 'Blog' %}
+ {% include '@components/teaser/teaser--blog/teaser--blog.twig' with {
+ 'title': content.title,
+ 'url': content.url,
+ 'date': content.date,
+ 'author_name': content.author_name,
+ 'author_link': content.author_link,
+ 'sources': content.sources,
+ 'img_element': content.img_element,
+ 'alt': content.alt,
+ 'tags': content.tags,
+ 'content': content.content
+ } %}
+ {% endif %}
+
+ {% if type == 'News' %}
+ {% include '@components/teaser/teaser--news/teaser--news.twig' with {
+ 'title': content.title,
+ 'url': content.url,
+ 'date': content.date,
+ 'sources': content.sources,
+ 'img_element': content.img_element,
+ 'alt': content.alt,
+ 'content': content.content
+ } %}
+ {% endif %}
+
+ {% if type == 'Events' %}
+ {% include '@components/teaser/teaser--event/teaser--event.twig' with {
+ 'title': content.title,
+ 'url': content.url,
+ 'date': content.date,
+ 'sources': content.sources,
+ 'img_element': content.img_element,
+ 'alt': content.alt,
+ 'tags': content.tags,
+ 'content': content.content
+ } %}
+ {% endif %}
+ </div>
+ {% endfor %}
+{% endfor %}
\ No newline at end of file
diff --git a/source/_patterns/04-components/multi-type-list/multi-type-list.yml b/source/_patterns/04-components/multi-type-list/multi-type-list.yml
new file mode 100644
index 00000000..ea666e17
--- /dev/null
+++ b/source/_patterns/04-components/multi-type-list/multi-type-list.yml
@@ -0,0 +1,87 @@
+lists:
+ Blog:
+ -
+ title: 'Blog Teaser title'
+ url: '#'
+ date: 'Friday, September 18, 2020'
+ author_name: 'Author Lastname'
+ author_link: '#'
+ tags:
+ - url: '#'
+ title: 'Tag 1'
+ - url: '#'
+ title: 'Tag 2'
+ - url: '#'
+ title: 'Tag 3'
+ - url: '#'
+ title: 'Tag 4'
+ 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 for blog teaser photo'
+ content: |-
+ <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
+ News:
+ -
+ title: 'News Teaser title'
+ url: '#'
+ date: 'Sep. 18, 2020'
+ 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 for blog teaser photo'
+ content: |-
+ <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
+ Events:
+ -
+ title: 'Event Teaser title'
+ url: '#'
+ date: 'Friday, September 18, 2020 - 4:20 PM'
+ 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 for blog teaser photo'
+ content: |-
+ <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
\ No newline at end of file
--
GitLab