From 340f4e74797077d1435d3dfbc60727d0157d223b Mon Sep 17 00:00:00 2001 From: Andres Morey Date: Mon, 1 Jun 2020 09:33:29 +0300 Subject: [PATCH] wip --- examples/css-js/tabs-bugfix.html | 76 ++++++++++++++++++++++++++++++++ src/js/lib/animationHelpers.js | 1 + src/js/tabs.js | 40 +++++++++++++++++ 3 files changed, 117 insertions(+) create mode 100644 examples/css-js/tabs-bugfix.html diff --git a/examples/css-js/tabs-bugfix.html b/examples/css-js/tabs-bugfix.html new file mode 100644 index 00000000..6566009c --- /dev/null +++ b/examples/css-js/tabs-bugfix.html @@ -0,0 +1,76 @@ + + + + + + + + + + + + +
+

Tabs

+ +
+ +
+
Home
+
Profile
+
Messages
+
Settings
+
+
+ +
+ +
+
Home
+
Profile
+
Messages
+
Settings
+
+
+ +
+ + diff --git a/src/js/lib/animationHelpers.js b/src/js/lib/animationHelpers.js index 7f496e95..fc021bab 100644 --- a/src/js/lib/animationHelpers.js +++ b/src/js/lib/animationHelpers.js @@ -68,6 +68,7 @@ function loadCss() { 'mui-btn-inserted,mui-dropdown-inserted' ], ['[data-mui-toggle="tab"]', 'mui-tab-inserted'], + ['.mui-tabs__bar', 'mui-tabs-bar-inserted'], ['.mui-textfield > input', 'mui-textfield-inserted'], ['.mui-textfield > textarea', 'mui-textfield-inserted'], ['.mui-select > select', 'mui-select-inserted'], diff --git a/src/js/tabs.js b/src/js/tabs.js index 3fda5140..27ba9ae5 100644 --- a/src/js/tabs.js +++ b/src/js/tabs.js @@ -19,6 +19,37 @@ var jqLite = require('./lib/jqLite'), hideendKey = 'mui.tabs.hideend'; +function initializeTabsBar(barEl) { + // check flag + if (barEl._muiTabs === true) return; + else barEl._muiTabs = true; + + // activate first tab by default + + // add event listener + jqLite.on(barEl, 'click', tabBarClickHandler); +} + + +function tabBarClickHandler(ev) { + // only left clicks + if (ev.button !== 0) return; + + var clickEl = ev.target, + attrVal; + + // detect clicks on toggle element + while (clickEl !== this) { + attrVal = clickEl.getAttribute('data-mui-toggle'); + if (attrVal === 'tab') { + if (clickEl.getAttribute('disabled') === null) activateTab(clickEl); + break; + } + clickEl = clickEl.parentElement; + } +} + + /** * Initialize the toggle element * @param {Element} toggleEl - The toggle element. @@ -142,6 +173,15 @@ module.exports = { animationHelpers.onAnimationStart('mui-tab-inserted', function(ev) { initialize(ev.target); }); + + // initialize tabs bar + elList = document.querySelectorAll('.mui-tabs__bar'); + i = elList.length; + while (i--) initializeTabsBar(elList[i]); + + animationHelpers.onAnimationStart('mui-tabs-bar-inserted', function(ev) { + initializeTabsBar(ev.target); + }); }, /** External API */