diff --git a/components/Dropdown/Dropdown.js b/components/Dropdown/Dropdown.js index c6cad4454..1a6732e53 100644 --- a/components/Dropdown/Dropdown.js +++ b/components/Dropdown/Dropdown.js @@ -1,28 +1,42 @@ +// class Dropdown { +// constructor(element) { + +// // Assign this.element to the dropdown element +// this.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(); + +// // assign the reference to the ".dropdown-content" class found in the dropdown element +// this.content; + +// // Add a click handler to the button reference and call the toggleContent method. +// this.button.addEventListener('click', () => { + +// }) +// } + +// toggleContent() { + +// // Toggle the ".dropdown-hidden" class off and on +// this.content; +// } +// } + class Dropdown { constructor(element) { - - // Assign this.element to the dropdown element - this.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(); - - // assign the reference to the ".dropdown-content" class found in the dropdown element - this.content; - - // Add a click handler to the button reference and call the toggleContent method. - this.button.addEventListener('click', () => { - - }) + this.element = element; + this.button = this.element.querySelector(".dropdown-button"); + this.content = this.element.querySelector(".dropdown-content"); + 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)); diff --git a/components/Tabs/Tabs.js b/components/Tabs/Tabs.js index 4163d47aa..2585477d2 100644 --- a/components/Tabs/Tabs.js +++ b/components/Tabs/Tabs.js @@ -1,62 +1,88 @@ +// class TabLink { +// constructor(element) { +// // Assign this.element to the passed in DOM element +// // this.element; -class TabLink { - constructor(element) { - // Assign this.element to the passed in DOM element - // this.element; - - // Get the custom data attribute on the Link - // this.data; - - // Using the custom data attribute get the associated Item element - // this.itemElement; - - // Using the Item element, create a new instance of the TabItem class - // this.tabItem; - - // Add a click event listener on this instance, calling the select method on click - - }; +// // Get the custom data attribute on the Link +// // this.data; - select() { - // Get all of the elements with the tabs-link class - // const links; +// // Using the custom data attribute get the associated Item element +// // this.itemElement; - // Using a loop or the forEach method remove the 'tabs-link-selected' class from all of the links - // Array.from(links).forEach(); +// // Using the Item element, create a new instance of the TabItem class +// // this.tabItem; - // Add a class named "tabs-link-selected" to this link - // this.element; - - // Call the select method on the item associated with this link +// // Add a click event listener on this instance, calling the select method on click - } -} +// }; -class TabItem { - constructor(element) { - // Assign this.element to the passed in element - // this.element; - } +// select() { +// // Get all of the elements with the tabs-link class +// // const links; - select() { - // Select all ".tabs-item" elements from the DOM - // const items; +// // Using a loop or the forEach method remove the 'tabs-link-selected' class from all of the links +// // Array.from(links).forEach(); - // Remove the class "tabs-item-selected" from each element - - // Add a class named "tabs-item-selected" to this element - //this.element; - } -} +// // Add a class named "tabs-link-selected" to this link +// // this.element; -/* START HERE: +// // Call the select method on the item associated with this link -- Select all classes named ".tabs-link" and assign that value to the links variable +// } +// } -- With your selection in place, now chain a .forEach() method onto the links variable to iterate over the DOM NodeList +// class TabItem { +// constructor(element) { +// // Assign this.element to the passed in element +// // this.element; +// } -- In your .forEach() method's callback function, return a new instance of TabLink and pass in each link as a parameter +// 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; +// } +// } + +/* START HERE: +- Select all classes named ".tabs-link" and assign that value to the links variable +- With your selection in place, now chain a .forEach() method onto the links variable to iterate over the DOM NodeList +- In your .forEach() method's callback function, return a new instance of TabLink and pass in each link as a parameter */ -links = document.querySelectorAll(); \ No newline at end of file +// links = document.querySelectorAll(); + +class TabLink { + constructor(element) { + this.element = element; + this.data = this.element.dataset.tab; + this.item = document.querySelector(`.tabs-item[data-tab="${this.data}"]`); + this.itemElement = new TabItem(this.item); + this.element.addEventListener("click", () => this.select()); + } + + select() { + const links = document.querySelectorAll(".tabs-link"); + links.forEach(link => link.classList.remove("tabs-link-selected")); + this.element.classList.add("tabs-link-selected"); + this.itemElement.select(); + } +} + +class TabItem { + constructor(element) { + this.element = element; + } + select() { + const items = document.querySelectorAll(".tabs-item"); + items.forEach(item => item.classList.remove("tabs-item-selected")); + this.element.classList.add("tabs-item-selected"); + } +} + +const links = document.querySelectorAll(".tabs-link"); +links.forEach(link => new TabLink(link)); diff --git a/components/Tabs/Tabs.less b/components/Tabs/Tabs.less index 2c114d684..503c591b6 100644 --- a/components/Tabs/Tabs.less +++ b/components/Tabs/Tabs.less @@ -46,6 +46,4 @@ background-color: @white; } } -} - - +} \ No newline at end of file