diff --git a/dist/bulma.js b/dist/bulma.js index ce06ab8..f049fba 100644 --- a/dist/bulma.js +++ b/dist/bulma.js @@ -211,7 +211,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _cor /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core */ \"./src/core.js\");\n\n\n/**\n * @module Tabs\n * @since 0.4.0\n * @author Thomas Erbe \n */\nclass Tabs {\n /**\n * Plugin constructor\n * @param {Object} options The options object for this plugin\n * @return {this} The newly created instance\n */\n constructor(options) {\n if (!options) {\n options = {};\n }\n\n this.root = options.hasOwnProperty('root') ? options.root : null;\n\n this.nav = this.findNav();\n this.navItems = this.findNavItems();\n\n this.content = this.findContent();\n this.contentItems = this.findContentItems();\n\n this.setupNavEvents();\n }\n\n findNav() {\n return this.root.querySelector('.tabs');\n }\n\n findNavItems() {\n return this.nav.querySelectorAll('li');\n }\n\n findContent() {\n return this.root.querySelector('.tabs-content');\n }\n\n findContentItems() {\n return this.content.querySelectorAll('li');\n }\n\n setupNavEvents() {\n this.navItems.forEach((navItem, index) => {\n navItem.addEventListener('click', () => {\n this.handleNavClick(navItem, index);\n });\n });\n }\n\n handleNavClick(navItem, index) {\n this.navItems.forEach(navItem => {\n navItem.classList.remove('is-active');\n });\n\n this.contentItems.forEach(contentItem => {\n contentItem.classList.remove('is-active');\n });\n\n navItem.classList.add('is-active');\n this.contentItems[index].classList.add('is-active');\n }\n\n /**\n * Helper method used by the Bulma core to create a new instance.\n * @param {Object} options The options object for this instance\n * @return {Tabs} The newly created instance\n */\n static create(options) {\n return new Tabs(options);\n }\n\n /**\n * Handle parsing the DOMs data attribute API.\n * @param {HTMLElement} element The root element for this instance\n * @return {undefined}\n */\n static handleDomParsing(element) {\n let options = {\n root: element\n };\n\n new Tabs(options);\n }\n\n static getRootClass() {\n return 'tabs-wrapper';\n }\n}\n\n_core__WEBPACK_IMPORTED_MODULE_0__[\"default\"].registerPlugin('tabs', Tabs);\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Tabs);\n\n//# sourceURL=webpack:///./src/plugins/tabs.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core */ \"./src/core.js\");\n\n\n/**\n * @module Tabs\n * @since 0.4.0\n * @author Thomas Erbe \n */\nclass Tabs {\n /**\n * Plugin constructor\n * @param {Object} options The options object for this plugin\n * @return {this} The newly created instance\n */\n constructor(options) {\n if (!options) {\n options = {};\n }\n\n /**\n * The root tab element\n * @param {HTMLElement}\n */\n this.root = options.hasOwnProperty('root') ? options.root : null;\n\n /**\n * Whether the tabs should be changed when the nav item is hovered over\n * @param {boolean}\n */\n this.hover = options.hasOwnProperty('hover') ? options.hover : false;\n\n /**\n * The tab nav container\n * @param {HTMLElement}\n */\n this.nav = this.findNav();\n\n /**\n * The tab's nav items\n * @param {HTMLElement[]}\n */\n this.navItems = this.findNavItems();\n\n /**\n * The tab content container\n * @param {HTMLElement}\n */\n this.content = this.findContent();\n\n /**\n * The tab's content items\n * @param {HTMLElement[]}\n */\n this.contentItems = this.findContentItems();\n\n this.setupNavEvents();\n }\n\n /**\n * Find the tab navigation container.\n * @returns {HTMLElement} The navigation container\n */\n findNav() {\n return this.root.querySelector('.tabs');\n }\n\n /**\n * Find each individual tab item\n * @returns {HTMLElement[]} An array of the found items\n */\n findNavItems() {\n return this.nav.querySelectorAll('li');\n }\n\n /**\n * Find the tab content container.\n * @returns {HTMLElement} The content container\n */\n findContent() {\n return this.root.querySelector('.tabs-content');\n }\n\n /**\n * Find each individual content item\n * @returns {HTMLElement[]} An array of the found items\n */\n findContentItems() {\n return this.content.querySelectorAll('li');\n }\n\n /**\n * Setup the events to handle tab changing\n */\n setupNavEvents() {\n this.navItems.forEach((navItem, index) => {\n navItem.addEventListener('click', () => {\n this.handleNavClick(navItem, index);\n });\n\n if (this.hover) {\n navItem.addEventListener('mouseover', () => {\n this.handleNavClick(navItem, index);\n });\n }\n });\n }\n\n /**\n * Handle the changing of the visible tab\n * @param {HTMLelement} navItem \n * @param {number} index \n */\n handleNavClick(navItem, index) {\n this.navItems.forEach(navItem => {\n navItem.classList.remove('is-active');\n });\n\n this.contentItems.forEach(contentItem => {\n contentItem.classList.remove('is-active');\n });\n\n navItem.classList.add('is-active');\n this.contentItems[index].classList.add('is-active');\n }\n\n /**\n * Helper method used by the Bulma core to create a new instance.\n * @param {Object} options The options object for this instance\n * @return {Tabs} The newly created instance\n */\n static create(options) {\n return new Tabs(options);\n }\n\n /**\n * Handle parsing the DOMs data attribute API.\n * @param {HTMLElement} element The root element for this instance\n * @return {undefined}\n */\n static handleDomParsing(element) {\n let hover = element.hasAttribute('data-hover') ? true : false;\n\n let options = {\n root: element,\n hover: hover\n };\n\n console.log(new Tabs(options));\n }\n\n /**\n * The root class used for initialisation\n * @returns {string}\n */\n static getRootClass() {\n return 'tabs-wrapper';\n }\n}\n\n_core__WEBPACK_IMPORTED_MODULE_0__[\"default\"].registerPlugin('tabs', Tabs);\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Tabs);\n\n//# sourceURL=webpack:///./src/plugins/tabs.js?"); /***/ }) diff --git a/dist/tabs.js b/dist/tabs.js index 10b6e66..8cede46 100644 --- a/dist/tabs.js +++ b/dist/tabs.js @@ -91,7 +91,7 @@ eval("__webpack_require__.r(__webpack_exports__);\nconst Bulma = {\n /**\n /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core */ \"./src/core.js\");\n\n\n/**\n * @module Tabs\n * @since 0.4.0\n * @author Thomas Erbe \n */\nclass Tabs {\n /**\n * Plugin constructor\n * @param {Object} options The options object for this plugin\n * @return {this} The newly created instance\n */\n constructor(options) {\n if (!options) {\n options = {};\n }\n\n this.root = options.hasOwnProperty('root') ? options.root : null;\n\n this.nav = this.findNav();\n this.navItems = this.findNavItems();\n\n this.content = this.findContent();\n this.contentItems = this.findContentItems();\n\n this.setupNavEvents();\n }\n\n findNav() {\n return this.root.querySelector('.tabs');\n }\n\n findNavItems() {\n return this.nav.querySelectorAll('li');\n }\n\n findContent() {\n return this.root.querySelector('.tabs-content');\n }\n\n findContentItems() {\n return this.content.querySelectorAll('li');\n }\n\n setupNavEvents() {\n this.navItems.forEach((navItem, index) => {\n navItem.addEventListener('click', () => {\n this.handleNavClick(navItem, index);\n });\n });\n }\n\n handleNavClick(navItem, index) {\n this.navItems.forEach(navItem => {\n navItem.classList.remove('is-active');\n });\n\n this.contentItems.forEach(contentItem => {\n contentItem.classList.remove('is-active');\n });\n\n navItem.classList.add('is-active');\n this.contentItems[index].classList.add('is-active');\n }\n\n /**\n * Helper method used by the Bulma core to create a new instance.\n * @param {Object} options The options object for this instance\n * @return {Tabs} The newly created instance\n */\n static create(options) {\n return new Tabs(options);\n }\n\n /**\n * Handle parsing the DOMs data attribute API.\n * @param {HTMLElement} element The root element for this instance\n * @return {undefined}\n */\n static handleDomParsing(element) {\n let options = {\n root: element\n };\n\n new Tabs(options);\n }\n\n static getRootClass() {\n return 'tabs-wrapper';\n }\n}\n\n_core__WEBPACK_IMPORTED_MODULE_0__[\"default\"].registerPlugin('tabs', Tabs);\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Tabs);\n\n//# sourceURL=webpack:///./src/plugins/tabs.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core */ \"./src/core.js\");\n\n\n/**\n * @module Tabs\n * @since 0.4.0\n * @author Thomas Erbe \n */\nclass Tabs {\n /**\n * Plugin constructor\n * @param {Object} options The options object for this plugin\n * @return {this} The newly created instance\n */\n constructor(options) {\n if (!options) {\n options = {};\n }\n\n /**\n * The root tab element\n * @param {HTMLElement}\n */\n this.root = options.hasOwnProperty('root') ? options.root : null;\n\n /**\n * Whether the tabs should be changed when the nav item is hovered over\n * @param {boolean}\n */\n this.hover = options.hasOwnProperty('hover') ? options.hover : false;\n\n /**\n * The tab nav container\n * @param {HTMLElement}\n */\n this.nav = this.findNav();\n\n /**\n * The tab's nav items\n * @param {HTMLElement[]}\n */\n this.navItems = this.findNavItems();\n\n /**\n * The tab content container\n * @param {HTMLElement}\n */\n this.content = this.findContent();\n\n /**\n * The tab's content items\n * @param {HTMLElement[]}\n */\n this.contentItems = this.findContentItems();\n\n this.setupNavEvents();\n }\n\n /**\n * Find the tab navigation container.\n * @returns {HTMLElement} The navigation container\n */\n findNav() {\n return this.root.querySelector('.tabs');\n }\n\n /**\n * Find each individual tab item\n * @returns {HTMLElement[]} An array of the found items\n */\n findNavItems() {\n return this.nav.querySelectorAll('li');\n }\n\n /**\n * Find the tab content container.\n * @returns {HTMLElement} The content container\n */\n findContent() {\n return this.root.querySelector('.tabs-content');\n }\n\n /**\n * Find each individual content item\n * @returns {HTMLElement[]} An array of the found items\n */\n findContentItems() {\n return this.content.querySelectorAll('li');\n }\n\n /**\n * Setup the events to handle tab changing\n */\n setupNavEvents() {\n this.navItems.forEach((navItem, index) => {\n navItem.addEventListener('click', () => {\n this.handleNavClick(navItem, index);\n });\n\n if (this.hover) {\n navItem.addEventListener('mouseover', () => {\n this.handleNavClick(navItem, index);\n });\n }\n });\n }\n\n /**\n * Handle the changing of the visible tab\n * @param {HTMLelement} navItem \n * @param {number} index \n */\n handleNavClick(navItem, index) {\n this.navItems.forEach(navItem => {\n navItem.classList.remove('is-active');\n });\n\n this.contentItems.forEach(contentItem => {\n contentItem.classList.remove('is-active');\n });\n\n navItem.classList.add('is-active');\n this.contentItems[index].classList.add('is-active');\n }\n\n /**\n * Helper method used by the Bulma core to create a new instance.\n * @param {Object} options The options object for this instance\n * @return {Tabs} The newly created instance\n */\n static create(options) {\n return new Tabs(options);\n }\n\n /**\n * Handle parsing the DOMs data attribute API.\n * @param {HTMLElement} element The root element for this instance\n * @return {undefined}\n */\n static handleDomParsing(element) {\n let hover = element.hasAttribute('data-hover') ? true : false;\n\n let options = {\n root: element,\n hover: hover\n };\n\n console.log(new Tabs(options));\n }\n\n /**\n * The root class used for initialisation\n * @returns {string}\n */\n static getRootClass() {\n return 'tabs-wrapper';\n }\n}\n\n_core__WEBPACK_IMPORTED_MODULE_0__[\"default\"].registerPlugin('tabs', Tabs);\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Tabs);\n\n//# sourceURL=webpack:///./src/plugins/tabs.js?"); /***/ }) diff --git a/docs/assets/js/bulmajs/bulma.js b/docs/assets/js/bulmajs/bulma.js index ce06ab8..f049fba 100644 --- a/docs/assets/js/bulmajs/bulma.js +++ b/docs/assets/js/bulmajs/bulma.js @@ -211,7 +211,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _cor /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core */ \"./src/core.js\");\n\n\n/**\n * @module Tabs\n * @since 0.4.0\n * @author Thomas Erbe \n */\nclass Tabs {\n /**\n * Plugin constructor\n * @param {Object} options The options object for this plugin\n * @return {this} The newly created instance\n */\n constructor(options) {\n if (!options) {\n options = {};\n }\n\n this.root = options.hasOwnProperty('root') ? options.root : null;\n\n this.nav = this.findNav();\n this.navItems = this.findNavItems();\n\n this.content = this.findContent();\n this.contentItems = this.findContentItems();\n\n this.setupNavEvents();\n }\n\n findNav() {\n return this.root.querySelector('.tabs');\n }\n\n findNavItems() {\n return this.nav.querySelectorAll('li');\n }\n\n findContent() {\n return this.root.querySelector('.tabs-content');\n }\n\n findContentItems() {\n return this.content.querySelectorAll('li');\n }\n\n setupNavEvents() {\n this.navItems.forEach((navItem, index) => {\n navItem.addEventListener('click', () => {\n this.handleNavClick(navItem, index);\n });\n });\n }\n\n handleNavClick(navItem, index) {\n this.navItems.forEach(navItem => {\n navItem.classList.remove('is-active');\n });\n\n this.contentItems.forEach(contentItem => {\n contentItem.classList.remove('is-active');\n });\n\n navItem.classList.add('is-active');\n this.contentItems[index].classList.add('is-active');\n }\n\n /**\n * Helper method used by the Bulma core to create a new instance.\n * @param {Object} options The options object for this instance\n * @return {Tabs} The newly created instance\n */\n static create(options) {\n return new Tabs(options);\n }\n\n /**\n * Handle parsing the DOMs data attribute API.\n * @param {HTMLElement} element The root element for this instance\n * @return {undefined}\n */\n static handleDomParsing(element) {\n let options = {\n root: element\n };\n\n new Tabs(options);\n }\n\n static getRootClass() {\n return 'tabs-wrapper';\n }\n}\n\n_core__WEBPACK_IMPORTED_MODULE_0__[\"default\"].registerPlugin('tabs', Tabs);\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Tabs);\n\n//# sourceURL=webpack:///./src/plugins/tabs.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core */ \"./src/core.js\");\n\n\n/**\n * @module Tabs\n * @since 0.4.0\n * @author Thomas Erbe \n */\nclass Tabs {\n /**\n * Plugin constructor\n * @param {Object} options The options object for this plugin\n * @return {this} The newly created instance\n */\n constructor(options) {\n if (!options) {\n options = {};\n }\n\n /**\n * The root tab element\n * @param {HTMLElement}\n */\n this.root = options.hasOwnProperty('root') ? options.root : null;\n\n /**\n * Whether the tabs should be changed when the nav item is hovered over\n * @param {boolean}\n */\n this.hover = options.hasOwnProperty('hover') ? options.hover : false;\n\n /**\n * The tab nav container\n * @param {HTMLElement}\n */\n this.nav = this.findNav();\n\n /**\n * The tab's nav items\n * @param {HTMLElement[]}\n */\n this.navItems = this.findNavItems();\n\n /**\n * The tab content container\n * @param {HTMLElement}\n */\n this.content = this.findContent();\n\n /**\n * The tab's content items\n * @param {HTMLElement[]}\n */\n this.contentItems = this.findContentItems();\n\n this.setupNavEvents();\n }\n\n /**\n * Find the tab navigation container.\n * @returns {HTMLElement} The navigation container\n */\n findNav() {\n return this.root.querySelector('.tabs');\n }\n\n /**\n * Find each individual tab item\n * @returns {HTMLElement[]} An array of the found items\n */\n findNavItems() {\n return this.nav.querySelectorAll('li');\n }\n\n /**\n * Find the tab content container.\n * @returns {HTMLElement} The content container\n */\n findContent() {\n return this.root.querySelector('.tabs-content');\n }\n\n /**\n * Find each individual content item\n * @returns {HTMLElement[]} An array of the found items\n */\n findContentItems() {\n return this.content.querySelectorAll('li');\n }\n\n /**\n * Setup the events to handle tab changing\n */\n setupNavEvents() {\n this.navItems.forEach((navItem, index) => {\n navItem.addEventListener('click', () => {\n this.handleNavClick(navItem, index);\n });\n\n if (this.hover) {\n navItem.addEventListener('mouseover', () => {\n this.handleNavClick(navItem, index);\n });\n }\n });\n }\n\n /**\n * Handle the changing of the visible tab\n * @param {HTMLelement} navItem \n * @param {number} index \n */\n handleNavClick(navItem, index) {\n this.navItems.forEach(navItem => {\n navItem.classList.remove('is-active');\n });\n\n this.contentItems.forEach(contentItem => {\n contentItem.classList.remove('is-active');\n });\n\n navItem.classList.add('is-active');\n this.contentItems[index].classList.add('is-active');\n }\n\n /**\n * Helper method used by the Bulma core to create a new instance.\n * @param {Object} options The options object for this instance\n * @return {Tabs} The newly created instance\n */\n static create(options) {\n return new Tabs(options);\n }\n\n /**\n * Handle parsing the DOMs data attribute API.\n * @param {HTMLElement} element The root element for this instance\n * @return {undefined}\n */\n static handleDomParsing(element) {\n let hover = element.hasAttribute('data-hover') ? true : false;\n\n let options = {\n root: element,\n hover: hover\n };\n\n console.log(new Tabs(options));\n }\n\n /**\n * The root class used for initialisation\n * @returns {string}\n */\n static getRootClass() {\n return 'tabs-wrapper';\n }\n}\n\n_core__WEBPACK_IMPORTED_MODULE_0__[\"default\"].registerPlugin('tabs', Tabs);\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Tabs);\n\n//# sourceURL=webpack:///./src/plugins/tabs.js?"); /***/ }) diff --git a/docs/assets/js/bulmajs/tabs.js b/docs/assets/js/bulmajs/tabs.js index 10b6e66..8cede46 100644 --- a/docs/assets/js/bulmajs/tabs.js +++ b/docs/assets/js/bulmajs/tabs.js @@ -91,7 +91,7 @@ eval("__webpack_require__.r(__webpack_exports__);\nconst Bulma = {\n /**\n /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core */ \"./src/core.js\");\n\n\n/**\n * @module Tabs\n * @since 0.4.0\n * @author Thomas Erbe \n */\nclass Tabs {\n /**\n * Plugin constructor\n * @param {Object} options The options object for this plugin\n * @return {this} The newly created instance\n */\n constructor(options) {\n if (!options) {\n options = {};\n }\n\n this.root = options.hasOwnProperty('root') ? options.root : null;\n\n this.nav = this.findNav();\n this.navItems = this.findNavItems();\n\n this.content = this.findContent();\n this.contentItems = this.findContentItems();\n\n this.setupNavEvents();\n }\n\n findNav() {\n return this.root.querySelector('.tabs');\n }\n\n findNavItems() {\n return this.nav.querySelectorAll('li');\n }\n\n findContent() {\n return this.root.querySelector('.tabs-content');\n }\n\n findContentItems() {\n return this.content.querySelectorAll('li');\n }\n\n setupNavEvents() {\n this.navItems.forEach((navItem, index) => {\n navItem.addEventListener('click', () => {\n this.handleNavClick(navItem, index);\n });\n });\n }\n\n handleNavClick(navItem, index) {\n this.navItems.forEach(navItem => {\n navItem.classList.remove('is-active');\n });\n\n this.contentItems.forEach(contentItem => {\n contentItem.classList.remove('is-active');\n });\n\n navItem.classList.add('is-active');\n this.contentItems[index].classList.add('is-active');\n }\n\n /**\n * Helper method used by the Bulma core to create a new instance.\n * @param {Object} options The options object for this instance\n * @return {Tabs} The newly created instance\n */\n static create(options) {\n return new Tabs(options);\n }\n\n /**\n * Handle parsing the DOMs data attribute API.\n * @param {HTMLElement} element The root element for this instance\n * @return {undefined}\n */\n static handleDomParsing(element) {\n let options = {\n root: element\n };\n\n new Tabs(options);\n }\n\n static getRootClass() {\n return 'tabs-wrapper';\n }\n}\n\n_core__WEBPACK_IMPORTED_MODULE_0__[\"default\"].registerPlugin('tabs', Tabs);\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Tabs);\n\n//# sourceURL=webpack:///./src/plugins/tabs.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core */ \"./src/core.js\");\n\n\n/**\n * @module Tabs\n * @since 0.4.0\n * @author Thomas Erbe \n */\nclass Tabs {\n /**\n * Plugin constructor\n * @param {Object} options The options object for this plugin\n * @return {this} The newly created instance\n */\n constructor(options) {\n if (!options) {\n options = {};\n }\n\n /**\n * The root tab element\n * @param {HTMLElement}\n */\n this.root = options.hasOwnProperty('root') ? options.root : null;\n\n /**\n * Whether the tabs should be changed when the nav item is hovered over\n * @param {boolean}\n */\n this.hover = options.hasOwnProperty('hover') ? options.hover : false;\n\n /**\n * The tab nav container\n * @param {HTMLElement}\n */\n this.nav = this.findNav();\n\n /**\n * The tab's nav items\n * @param {HTMLElement[]}\n */\n this.navItems = this.findNavItems();\n\n /**\n * The tab content container\n * @param {HTMLElement}\n */\n this.content = this.findContent();\n\n /**\n * The tab's content items\n * @param {HTMLElement[]}\n */\n this.contentItems = this.findContentItems();\n\n this.setupNavEvents();\n }\n\n /**\n * Find the tab navigation container.\n * @returns {HTMLElement} The navigation container\n */\n findNav() {\n return this.root.querySelector('.tabs');\n }\n\n /**\n * Find each individual tab item\n * @returns {HTMLElement[]} An array of the found items\n */\n findNavItems() {\n return this.nav.querySelectorAll('li');\n }\n\n /**\n * Find the tab content container.\n * @returns {HTMLElement} The content container\n */\n findContent() {\n return this.root.querySelector('.tabs-content');\n }\n\n /**\n * Find each individual content item\n * @returns {HTMLElement[]} An array of the found items\n */\n findContentItems() {\n return this.content.querySelectorAll('li');\n }\n\n /**\n * Setup the events to handle tab changing\n */\n setupNavEvents() {\n this.navItems.forEach((navItem, index) => {\n navItem.addEventListener('click', () => {\n this.handleNavClick(navItem, index);\n });\n\n if (this.hover) {\n navItem.addEventListener('mouseover', () => {\n this.handleNavClick(navItem, index);\n });\n }\n });\n }\n\n /**\n * Handle the changing of the visible tab\n * @param {HTMLelement} navItem \n * @param {number} index \n */\n handleNavClick(navItem, index) {\n this.navItems.forEach(navItem => {\n navItem.classList.remove('is-active');\n });\n\n this.contentItems.forEach(contentItem => {\n contentItem.classList.remove('is-active');\n });\n\n navItem.classList.add('is-active');\n this.contentItems[index].classList.add('is-active');\n }\n\n /**\n * Helper method used by the Bulma core to create a new instance.\n * @param {Object} options The options object for this instance\n * @return {Tabs} The newly created instance\n */\n static create(options) {\n return new Tabs(options);\n }\n\n /**\n * Handle parsing the DOMs data attribute API.\n * @param {HTMLElement} element The root element for this instance\n * @return {undefined}\n */\n static handleDomParsing(element) {\n let hover = element.hasAttribute('data-hover') ? true : false;\n\n let options = {\n root: element,\n hover: hover\n };\n\n console.log(new Tabs(options));\n }\n\n /**\n * The root class used for initialisation\n * @returns {string}\n */\n static getRootClass() {\n return 'tabs-wrapper';\n }\n}\n\n_core__WEBPACK_IMPORTED_MODULE_0__[\"default\"].registerPlugin('tabs', Tabs);\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Tabs);\n\n//# sourceURL=webpack:///./src/plugins/tabs.js?"); /***/ }) diff --git a/docs/documentation/tabs.html b/docs/documentation/tabs.html index b90b388..d268784 100644 --- a/docs/documentation/tabs.html +++ b/docs/documentation/tabs.html @@ -54,6 +54,7 @@

BulmaJS currently provides a basic implementation for tabs.

Bulma only provides the nav styling, and so the content area must be added, and styled by you, BulmaJS provides no styling for the hiding/showing of content boxes.

+

If you would like the tabs to change when you hover over the tab label, you can add data-hover to the tab-wrapper element. On mobile, it will gracefully fall back to click/tap handling.

@@ -96,7 +97,11 @@

DOM options

- This plugin does not provide any additional DOM options. + data-hover + No + false + boolean + Enable the tab hovering functionality. diff --git a/src/plugins/tabs.js b/src/plugins/tabs.js index 18c78b6..7560afc 100644 --- a/src/plugins/tabs.js +++ b/src/plugins/tabs.js @@ -22,6 +22,12 @@ class Tabs { */ this.root = options.hasOwnProperty('root') ? options.root : null; + /** + * Whether the tabs should be changed when the nav item is hovered over + * @param {boolean} + */ + this.hover = options.hasOwnProperty('hover') ? options.hover : false; + /** * The tab nav container * @param {HTMLElement} @@ -89,6 +95,12 @@ class Tabs { navItem.addEventListener('click', () => { this.handleNavClick(navItem, index); }); + + if(this.hover) { + navItem.addEventListener('mouseover', () => { + this.handleNavClick(navItem, index); + }); + } }); } @@ -125,11 +137,14 @@ class Tabs { * @return {undefined} */ static handleDomParsing(element) { + let hover = element.hasAttribute('data-hover') ? true : false; + let options = { - root: element + root: element, + hover: hover }; - new Tabs(options); + console.log(new Tabs(options)); } /**