From 3fdebef2702e11a2e135e5cd3394a116215c07f3 Mon Sep 17 00:00:00 2001
From: ebremner <ebremner@uwaterloo.ca>
Date: Thu, 20 Aug 2020 15:22:38 -0400
Subject: [PATCH] Updating multi-type-list
---
css/styles.css | 10 +++----
js/component_scripts.min.js | 27 ++++++++++++++-----
.../multi-type-list/_multi-type-list.scss | 4 +--
.../multi-type-list/multi-type-list.js | 27 ++++++++++++++-----
.../multi-type-list/multi-type-list.twig | 6 ++---
5 files changed, 48 insertions(+), 26 deletions(-)
diff --git a/css/styles.css b/css/styles.css
index bce76170..12b7e878 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -4331,24 +4331,22 @@ 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 {
+.uw-tab {
background-color: #f1f1f1;
border: 1px solid #ccc;
overflow: hidden; }
- .uw-multi-type-list-tab button {
+ .uw-tab button {
background-color: inherit;
cursor: pointer;
float: left;
outline: none;
padding: 14px 16px;
transition: 0.3s; }
- .uw-multi-type-list-tab button:hover {
+ .uw-tab button:hover {
background-color: #ddd; }
- .uw-multi-type-list-tab button:active {
+ .uw-tab button:active {
background-color: #ccc; }
-/* Style the tab content */
.uw-tabcontent {
border: 1px solid #ccc;
display: none;
diff --git a/js/component_scripts.min.js b/js/component_scripts.min.js
index 5ffde968..e56c872a 100644
--- a/js/component_scripts.min.js
+++ b/js/component_scripts.min.js
@@ -117,21 +117,34 @@
attach: function (context, settings) {
$(document).ready(function() {
- if ($('.uw-multi-type-list-tab').length > 0) {
+ // If there are tabs, process them.
+ if ($('.uw-tab').length > 0) {
+
+ // Set the first of the tabs to be displayted.
$('.uw-tabcontent')[0].style.display = 'block';
+ // Step through each of the tab buttons and add the click.
$('.uw-tablinks').each(function(index, value) {
- var type = this.getAttribute('data-type');
- this.click(function() {
- openTab(type);
+
+ // Add the click function to open the tab.
+ $(value).click(function() {
+
+ // The open tab function with the data attribute.
+ openTab(this.getAttribute('data-type'));
});
});
}
});
- function openTab(cityName) {
- alert('CLICKED');
+ /**
+ * Function to open a tab.
+ *
+ * @param contentType
+ * The type of tab to open.
+ */
+ function openTab(contentType) {
+
// Declare all variables
var i, tabcontent, tablinks;
@@ -148,7 +161,7 @@
}
// Show the current tab, and add an "active" class to the button that opened the tab
- document.getElementById(cityName).style.display = "block";
+ document.getElementById(contentType).style.display = "block";
evt.currentTarget.className += " active";
}
}
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
index 3f78b32a..ea313d28 100644
--- a/source/_patterns/04-components/multi-type-list/_multi-type-list.scss
+++ b/source/_patterns/04-components/multi-type-list/_multi-type-list.scss
@@ -1,5 +1,4 @@
-/* Style the tab */
-.uw-multi-type-list-tab {
+.uw-tab {
background-color: #f1f1f1;
border: 1px solid #ccc;
overflow: hidden;
@@ -22,7 +21,6 @@
}
}
-/* Style the tab content */
.uw-tabcontent {
border: 1px solid #ccc;
display: none;
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
index 05849f1c..06eafde4 100644
--- a/source/_patterns/04-components/multi-type-list/multi-type-list.js
+++ b/source/_patterns/04-components/multi-type-list/multi-type-list.js
@@ -3,21 +3,34 @@
attach: function (context, settings) {
$(document).ready(function() {
- if ($('.uw-multi-type-list-tab').length > 0) {
+ // If there are tabs, process them.
+ if ($('.uw-tab').length > 0) {
+
+ // Set the first of the tabs to be displayted.
$('.uw-tabcontent')[0].style.display = 'block';
+ // Step through each of the tab buttons and add the click.
$('.uw-tablinks').each(function(index, value) {
- var type = this.getAttribute('data-type');
- this.click(function() {
- openTab(type);
+
+ // Add the click function to open the tab.
+ $(value).click(function() {
+
+ // The open tab function with the data attribute.
+ openTab(this.getAttribute('data-type'));
});
});
}
});
- function openTab(cityName) {
- alert('CLICKED');
+ /**
+ * Function to open a tab.
+ *
+ * @param contentType
+ * The type of tab to open.
+ */
+ function openTab(contentType) {
+
// Declare all variables
var i, tabcontent, tablinks;
@@ -34,7 +47,7 @@
}
// Show the current tab, and add an "active" class to the button that opened the tab
- document.getElementById(cityName).style.display = "block";
+ document.getElementById(contentType).style.display = "block";
evt.currentTarget.className += " active";
}
}
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
index eb6994fc..7fbf0041 100644
--- a/source/_patterns/04-components/multi-type-list/multi-type-list.twig
+++ b/source/_patterns/04-components/multi-type-list/multi-type-list.twig
@@ -1,4 +1,4 @@
-<div class="uw-multi-type-list-tab">
+<div class="uw-tab">
{% for type, list in lists %}
<button class="uw-tablinks" data-type="{{ type }}">{{ type }}</button>
{% endfor %}
@@ -48,6 +48,6 @@
'content': content.content
} %}
{% endif %}
- </div>
- {% endfor %}
+ {% endfor %}
+ </div>
{% endfor %}
\ No newline at end of file
--
GitLab