From 3e36a284c18ceea00a409ad766d79b9d466b1f73 Mon Sep 17 00:00:00 2001 From: bipolarbearstrikesback <49734722+bipolarbearstrikesback@users.noreply.github.com> Date: Thu, 16 May 2019 14:14:03 -0500 Subject: [PATCH 1/6] Update Dropdown.js Is this right chris? --- components/Dropdown/Dropdown.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/components/Dropdown/Dropdown.js b/components/Dropdown/Dropdown.js index c6cad4454..7b5de6e10 100644 --- a/components/Dropdown/Dropdown.js +++ b/components/Dropdown/Dropdown.js @@ -2,27 +2,27 @@ 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', () => { - +toggleContent(); }) } toggleContent() { // Toggle the ".dropdown-hidden" class off and on - this.content; + this.content.classList.toggle("dropdown-hidden"); } } // Nothing to do here, just study what the code is doing and move on to the Dropdown class -let dropdowns = document.querySelectorAll('.dropdown').forEach( dropdown => new Dropdown(dropdown)); \ No newline at end of file +let dropdowns = document.querySelectorAll('.dropdown').forEach( dropdown => new Dropdown(dropdown)); From 619d7a1b3b33a15ca9cc88840977ee5431ff05fb Mon Sep 17 00:00:00 2001 From: bipolarbearstrikesback <49734722+bipolarbearstrikesback@users.noreply.github.com> Date: Thu, 16 May 2019 14:18:44 -0500 Subject: [PATCH 2/6] Update Tabs.js --- components/Tabs/Tabs.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/Tabs/Tabs.js b/components/Tabs/Tabs.js index 4163d47aa..193317365 100644 --- a/components/Tabs/Tabs.js +++ b/components/Tabs/Tabs.js @@ -2,7 +2,7 @@ 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; @@ -59,4 +59,4 @@ class TabItem { */ -links = document.querySelectorAll(); \ No newline at end of file +links = document.querySelectorAll(); From 6389fc4999c6fa9a89fa3ee1db58ec824634a4c0 Mon Sep 17 00:00:00 2001 From: bipolarbearstrikesback <49734722+bipolarbearstrikesback@users.noreply.github.com> Date: Thu, 16 May 2019 14:39:48 -0500 Subject: [PATCH 3/6] Update Tabs.js --- components/Tabs/Tabs.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/components/Tabs/Tabs.js b/components/Tabs/Tabs.js index 193317365..3e6514bea 100644 --- a/components/Tabs/Tabs.js +++ b/components/Tabs/Tabs.js @@ -2,24 +2,24 @@ class TabLink { constructor(element) { // Assign this.element to the passed in DOM element - this.element = element; + this.element = element; // Get the custom data attribute on the Link // this.data; - + this.data = document.querySelector(`.tabs-link[data-tab='${this.element.dataset.tab}']`); // Using the custom data attribute get the associated Item element // this.itemElement; - + this.itemElement = document.querySelector(`.tabs-item[data-tab='${this.link.dataset.tab}']`); // 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()); }; select() { // Get all of the elements with the tabs-link class - // const links; + const links = documents.querySelector("tabs-link"); // Using a loop or the forEach method remove the 'tabs-link-selected' class from all of the links // Array.from(links).forEach(); From 37d66b1135363ed3ed5c8251eb39d22ae6edb230 Mon Sep 17 00:00:00 2001 From: bipolarbearstrikesback <49734722+bipolarbearstrikesback@users.noreply.github.com> Date: Thu, 16 May 2019 15:16:00 -0500 Subject: [PATCH 4/6] Update Tabs.js --- components/Tabs/Tabs.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/components/Tabs/Tabs.js b/components/Tabs/Tabs.js index 3e6514bea..5df852ac8 100644 --- a/components/Tabs/Tabs.js +++ b/components/Tabs/Tabs.js @@ -20,14 +20,19 @@ class TabLink { select() { // Get all of the elements with the tabs-link class const links = documents.querySelector("tabs-link"); + Array.from(links).forEach(link => { + link.classList.remove("tabs-link-selected"); + }); + this.link.classList.add("tabs-link-selected") // Using a loop or the forEach method remove the 'tabs-link-selected' class from all of the links - // Array.from(links).forEach(); + //Array.from(links).forEach(); // Add a class named "tabs-link-selected" to this link // this.element; // Call the select method on the item associated with this link + this.tabItem.select(); } } @@ -35,7 +40,7 @@ class TabLink { class TabItem { constructor(element) { // Assign this.element to the passed in element - // this.element; + this.element=element; } select() { From 792075992f97f28816213c827562e9086cc41c59 Mon Sep 17 00:00:00 2001 From: bipolarbearstrikesback <49734722+bipolarbearstrikesback@users.noreply.github.com> Date: Thu, 16 May 2019 15:16:21 -0500 Subject: [PATCH 5/6] Update Tabs.js --- components/Tabs/Tabs.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Tabs/Tabs.js b/components/Tabs/Tabs.js index 5df852ac8..a43b1ec50 100644 --- a/components/Tabs/Tabs.js +++ b/components/Tabs/Tabs.js @@ -35,7 +35,7 @@ class TabLink { this.tabItem.select(); } -} +}; class TabItem { constructor(element) { From b0ea618b77470aca0c33a860c3d2f1c786269078 Mon Sep 17 00:00:00 2001 From: bipolarbearstrikesback <49734722+bipolarbearstrikesback@users.noreply.github.com> Date: Thu, 16 May 2019 15:25:07 -0500 Subject: [PATCH 6/6] Update Tabs.js --- components/Tabs/Tabs.js | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/components/Tabs/Tabs.js b/components/Tabs/Tabs.js index a43b1ec50..de4e7512d 100644 --- a/components/Tabs/Tabs.js +++ b/components/Tabs/Tabs.js @@ -37,23 +37,25 @@ class TabLink { } }; + class TabItem { - constructor(element) { - // Assign this.element to the passed in element - this.element=element; + constructor(tabItem) { + this.tabItem = tabItem; } select() { - // Select all ".tabs-item" elements from the DOM - // const items; - - // Remove the class "tabs-item-selected" from each element - - // Add a class named "tabs-item-selected" to this element - //this.element; + const items = document.querySelectorAll('.tabs-item') + Array.from(items).forEach(item => { + item.classList.remove("tabs-item-selected"); + }); + this.tabItem.classList.add("tabs-item-selected") } } +let links = document.querySelectorAll('.tabs-link'); +links.forEach(link => { + return new TabLink(link); +}); /* START HERE: - Select all classes named ".tabs-link" and assign that value to the links variable