From 2cb592454ed33c770fbb428734a21145281500d5 Mon Sep 17 00:00:00 2001 From: teej387 Date: Thu, 9 May 2019 19:16:30 -0500 Subject: [PATCH 1/5] created Dropdown class and added a "click" event to toggle content. --- components/Dropdown/Dropdown.js | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/components/Dropdown/Dropdown.js b/components/Dropdown/Dropdown.js index c6cad4454..600efbf36 100644 --- a/components/Dropdown/Dropdown.js +++ b/components/Dropdown/Dropdown.js @@ -2,27 +2,25 @@ 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'); + // console.log(this.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'); } } - // 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 96b33069abe599e4fbc4ffbea567a5ac19f26bdb Mon Sep 17 00:00:00 2001 From: teej387 Date: Thu, 9 May 2019 19:49:26 -0500 Subject: [PATCH 2/5] selected links and used forEach() to set them to new TabLink --- components/Tabs/Tabs.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/components/Tabs/Tabs.js b/components/Tabs/Tabs.js index 4163d47aa..fafc148d8 100644 --- a/components/Tabs/Tabs.js +++ b/components/Tabs/Tabs.js @@ -2,10 +2,11 @@ class TabLink { constructor(element) { // Assign this.element to the passed in DOM element - // this.element; - + this.element = element; + console.log(this.element.dataset.tab) // Get the custom data attribute on the Link - // this.data; + this.data = this.element.dataset.tab; + console.log(this.data) // Using the custom data attribute get the associated Item element // this.itemElement; @@ -59,4 +60,6 @@ class TabItem { */ -links = document.querySelectorAll(); \ No newline at end of file +links = document.querySelectorAll('.tabs-link'); +console.log(links) +links.forEach((link) => new TabLink); \ No newline at end of file From 6f83392195882ac7d906693dd110e74b52581408 Mon Sep 17 00:00:00 2001 From: teej387 Date: Thu, 9 May 2019 20:10:22 -0500 Subject: [PATCH 3/5] retrieved data attribute of tabs-link using dataset. --- components/Tabs/Tabs.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/Tabs/Tabs.js b/components/Tabs/Tabs.js index fafc148d8..496d8c9d4 100644 --- a/components/Tabs/Tabs.js +++ b/components/Tabs/Tabs.js @@ -3,9 +3,9 @@ class TabLink { constructor(element) { // Assign this.element to the passed in DOM element this.element = element; - console.log(this.element.dataset.tab) + // console.log(this.element) // Get the custom data attribute on the Link - this.data = this.element.dataset.tab; + this.data = document.querySelector(`.tabs-link[data-tab='${this.element.dataset.tab}']`); console.log(this.data) // Using the custom data attribute get the associated Item element @@ -61,5 +61,5 @@ class TabItem { */ links = document.querySelectorAll('.tabs-link'); -console.log(links) -links.forEach((link) => new TabLink); \ No newline at end of file +// console.log(links) +links.forEach((link) => { return new TabLink(link)}); \ No newline at end of file From 71b251bc7066271da9b86a351b5092fa5eb03273 Mon Sep 17 00:00:00 2001 From: teej387 Date: Thu, 9 May 2019 20:34:04 -0500 Subject: [PATCH 4/5] created click event that triggers select() method on tabs --- components/Tabs/Tabs.js | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/components/Tabs/Tabs.js b/components/Tabs/Tabs.js index 496d8c9d4..9c2c67253 100644 --- a/components/Tabs/Tabs.js +++ b/components/Tabs/Tabs.js @@ -6,27 +6,31 @@ class TabLink { // console.log(this.element) // Get the custom data attribute on the Link this.data = document.querySelector(`.tabs-link[data-tab='${this.element.dataset.tab}']`); - console.log(this.data) + // console.log(this.data) // Using the custom data attribute get the associated Item element - // this.itemElement; - + this.itemElement = document.querySelector(`.tabs-item[data-tab='${this.element.dataset.tab}']`); + // console.log(this.itemElement) + // Using the Item element, create a new instance of the TabItem class - // this.tabItem; + this.tabItem = new TabItem(this.tabItem); // 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 = 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(); - + Array.from(links).forEach(link => { + link.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 From 84434c2a0e5abf906e9ca42d0f5432341bed92c2 Mon Sep 17 00:00:00 2001 From: teej387 Date: Thu, 9 May 2019 21:39:52 -0500 Subject: [PATCH 5/5] created TabItem class and tabs-item select() method... added method to itemElement in TabLink. --- components/Tabs/Tabs.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/components/Tabs/Tabs.js b/components/Tabs/Tabs.js index 9c2c67253..172381a2d 100644 --- a/components/Tabs/Tabs.js +++ b/components/Tabs/Tabs.js @@ -13,11 +13,11 @@ class TabLink { // console.log(this.itemElement) // Using the Item element, create a new instance of the TabItem class - this.tabItem = new TabItem(this.tabItem); + this.itemElement = 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() { @@ -33,24 +33,28 @@ class TabLink { this.element.classList.add('tabs-link-selected'); // Call the select method on the item associated with this link - + this.itemElement.select(); } } class TabItem { constructor(element) { // Assign this.element to the passed in element - // this.element; + this.element = element; + // console.log(this.element) + // this.element.addEventListener('click', () => this.select()); } 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.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'); } }