Add a hover option to the tabs plugin. Closes #35

This adds a new property to the tabs plugin that allows the user to change the visible tab by hovering over the correct element. On mobile, this will revert back to the click handler.
VizuaaLOG · Jun 10, 2018 · a91e037 · a91e037
1 parent 065c683
commit a91e037
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 7 deletions.
diff --git a/dist/bulma.js b/dist/bulma.js
diff --git 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 <vizuaalog@gmail.com>\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 <vizuaalog@gmail.com>\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?");
 
 /***/ })