From 2406ae16852d17b6a1c8531146c3e45b7b7fc5c8 Mon Sep 17 00:00:00 2001 From: Ricardo Barbosa Date: Thu, 13 Jun 2019 13:09:57 -0700 Subject: [PATCH 1/3] Restarted --- components/Tabs/Tabs.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/Tabs/Tabs.js b/components/Tabs/Tabs.js index 4163d47aa..7f4bdd9e4 100644 --- a/components/Tabs/Tabs.js +++ b/components/Tabs/Tabs.js @@ -2,13 +2,13 @@ class TabLink { constructor(element) { // Assign this.element to the passed in DOM element - // this.element; + this.element = element; // Get the custom data attribute on the Link - // this.data; + this.data = this.element.attribute.tab; // Using the custom data attribute get the associated Item element - // this.itemElement; + this.itemElement = document.querySelector(`.tabs-item[data-tab = '${this.data}']`); // Using the Item element, create a new instance of the TabItem class // this.tabItem; From 36fb720d2baebfe5121c63d6e53027582024a40e Mon Sep 17 00:00:00 2001 From: Ricardo Barbosa Date: Thu, 13 Jun 2019 13:18:27 -0700 Subject: [PATCH 2/3] Tabs MVO --- components/Tabs/Tabs.js | 30 +++++++++++++++++++----------- 1 file changed, 19 insertions(+), 11 deletions(-) diff --git a/components/Tabs/Tabs.js b/components/Tabs/Tabs.js index 7f4bdd9e4..858830c2b 100644 --- a/components/Tabs/Tabs.js +++ b/components/Tabs/Tabs.js @@ -11,41 +11,47 @@ class TabLink { this.itemElement = document.querySelector(`.tabs-item[data-tab = '${this.data}']`); // Using the Item element, create a new instance of the TabItem class - // this.tabItem; + this.tabItem = new TabItem(this.itemElement); // Add a click event listener on this instance, calling the select method on click - + this.element.addEventListener('click', () => { + this.select(event); + }) }; select() { // Get all of the elements with the tabs-link class - // const links; + const links = document.querySelectorAll('.tabs-link'); // Using a loop or the forEach method remove the 'tabs-link-selected' class from all of the links - // Array.from(links).forEach(); + links = Array.from(links); + for (let i=0; i < links.length; i++) { + links[i].classList.remove('tabs-link-selected'); + } // Add a class named "tabs-link-selected" to this link - // this.element; + this.element.classList.add('tabs-link-selected'); // Call the select method on the item associated with this link - + this.tabItem.select(); } } class TabItem { constructor(element) { // Assign this.element to the passed in element - // this.element; + this.element = element; } select() { // Select all ".tabs-item" elements from the DOM - // const items; + const items = document.querySelectorAll('.tabs-item'); // Remove the class "tabs-item-selected" from each element - + items = Array.from(items).forEach (item => + item.classList.remove('tabs-item-selected')); // Add a class named "tabs-item-selected" to this element - //this.element; + this.element.classList.add('tabs-item-selected'); } } @@ -59,4 +65,6 @@ class TabItem { */ -links = document.querySelectorAll(); \ No newline at end of file +links = document.querySelectorAll('.tabs-link'); + +links = Array.from(links).map( element => new TabLink(element)); \ No newline at end of file From 8f5f48e9b2239d358599aecfb0f6154147a1d88d Mon Sep 17 00:00:00 2001 From: Ricardo Barbosa Date: Thu, 13 Jun 2019 13:44:05 -0700 Subject: [PATCH 3/3] MVP Completed --- components/Dropdown/Dropdown.js | 10 +++++----- components/Tabs/Tabs.js | 20 ++++++++------------ index.html | 7 +++++++ 3 files changed, 20 insertions(+), 17 deletions(-) diff --git a/components/Dropdown/Dropdown.js b/components/Dropdown/Dropdown.js index c6cad4454..388054baa 100644 --- a/components/Dropdown/Dropdown.js +++ b/components/Dropdown/Dropdown.js @@ -2,24 +2,24 @@ class Dropdown { constructor(element) { // Assign this.element to the dropdown element - this.element; + this.element = element; // Get the element with the ".dropdown-button" class found in the dropdown element (look at the HTML for context) - this.button = this.element.querySelector(); + this.button = this.element.querySelector('.dropdown-button'); // assign the reference to the ".dropdown-content" class found in the dropdown element - this.content; + this.content = this.element.querySelector('.dropdown-content'); // Add a click handler to the button reference and call the toggleContent method. this.button.addEventListener('click', () => { - + this.toggleContent(); }) } toggleContent() { // Toggle the ".dropdown-hidden" class off and on - this.content; + this.content.classList.toggle('dropdown-hidden'); } } diff --git a/components/Tabs/Tabs.js b/components/Tabs/Tabs.js index 858830c2b..659bdbc1f 100644 --- a/components/Tabs/Tabs.js +++ b/components/Tabs/Tabs.js @@ -5,35 +5,32 @@ class TabLink { this.element = element; // Get the custom data attribute on the Link - this.data = this.element.attribute.tab; + this.data = this.element.dataset.tab; // Using the custom data attribute get the associated Item element - this.itemElement = document.querySelector(`.tabs-item[data-tab = '${this.data}']`); + this.itemElement = document.querySelector(`.tabs-item[data-tab='${this.data}']`); // Using the Item element, create a new instance of the TabItem class this.tabItem = new TabItem(this.itemElement); // Add a click event listener on this instance, calling the select method on click this.element.addEventListener('click', () => { - this.select(event); + this.select(); }) }; select() { // Get all of the elements with the tabs-link class - const links = document.querySelectorAll('.tabs-link'); + let links = document.querySelectorAll('.tabs-link'); // Using a loop or the forEach method remove the 'tabs-link-selected' class from all of the links - links = Array.from(links); - for (let i=0; i < links.length; i++) { - links[i].classList.remove('tabs-link-selected'); - } + Array.from(links).forEach(array => array.classList.remove('tabs-link-selected')); // Add a class named "tabs-link-selected" to this link this.element.classList.add('tabs-link-selected'); // Call the select method on the item associated with this link - this.tabItem.select(); + this.tabItem.select(this.itemElement); } } @@ -48,8 +45,7 @@ class TabItem { const items = document.querySelectorAll('.tabs-item'); // Remove the class "tabs-item-selected" from each element - items = Array.from(items).forEach (item => - item.classList.remove('tabs-item-selected')); + items.forEach(item => item.classList.remove('tabs-item-selected)')); // Add a class named "tabs-item-selected" to this element this.element.classList.add('tabs-item-selected'); } @@ -65,6 +61,6 @@ class TabItem { */ -links = document.querySelectorAll('.tabs-link'); +let links = document.querySelectorAll('.tabs-link'); links = Array.from(links).map( element => new TabLink(element)); \ No newline at end of file diff --git a/index.html b/index.html index febb5870b..5f3ba375e 100644 --- a/index.html +++ b/index.html @@ -38,6 +38,7 @@
Tab 2
Tab 3
Tab 4
+
Tab 5
@@ -72,6 +73,12 @@ that this has already happened.
+
+
Quote 5
+
+ Tab 5 test +
+