diff --git a/.vscode/settings.json b/.vscode/settings.json index 335f886..f4a6601 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,9 @@ { - "editor.defaultFormatter": "esbenp.prettier-vscode" + "editor.defaultFormatter": "esbenp.prettier-vscode", + "[javascript]": { + "editor.formatOnPaste": true, + "editor.formatOnSave": true, + }, + "editor.formatOnPaste": true, + "editor.formatOnSave": true, } \ No newline at end of file diff --git a/eslint.config.js b/eslint.config.js index 66e46c9..43cabeb 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -1,4 +1,5 @@ const prettier = require('eslint-plugin-prettier'); +const trunOffPrettier = require('eslint-config-prettier'); const globals = require('globals'); const babelParser = require('@babel/eslint-parser'); const path = require('path'); @@ -20,10 +21,11 @@ const GLOBALS_BROWSER_FIX = Object.assign({}, globals.browser, { delete GLOBALS_BROWSER_FIX['AudioWorkletGlobalScope ']; module.exports = [ - ...compat.extends('eslint:recommended', 'plugin:prettier/recommended'), + ...compat.extends('eslint:recommended', 'plugin:prettier/recommended', 'prettier'), { plugins: { prettier, + trunOffPrettier, }, languageOptions: { @@ -35,8 +37,7 @@ module.exports = [ parser: babelParser, ecmaVersion: 12, - sourceType: 'commonjs', - + sourceType: 'module', parserOptions: { ecmaFeatures: { //jsx: true, diff --git a/src/api.factory.js b/src/api.factory.js index 2ca6927..dc3b783 100644 --- a/src/api.factory.js +++ b/src/api.factory.js @@ -7,11 +7,11 @@ * @param {String} [options.tabDisplay="inline-flex"] - default value is "inline-flex". would be display of tab elements * @param {String} [options.containerDisplay="flex"] - default value is "flex". would be display of container element */ -export const Api = function (options) { +export const Api = function () { const arg = arguments; this._setOptions(arg[1]); this._tablistEl = null; - const { getElManagementIns } = arg[0](); + const {getElManagementIns} = arg[0](); this._getElManagementIns = getElManagementIns; this._tabs = null; this._tabsCount = null; @@ -63,11 +63,11 @@ Api.prototype = { _hideTabs: function (firstHiddenTabIndex, selectedTabInfo, includeSelectedTab) { const hiddenTabs = []; this._options.containerElement.style.display = 'none'; - const { index: selectedTabIndex } = selectedTabInfo; + const {index: selectedTabIndex} = selectedTabInfo; for (let i = firstHiddenTabIndex, tabsCount = this._tabsCount; i < tabsCount; i++) { if (includeSelectedTab || i !== selectedTabIndex) { this._tabs[i].style.display = 'none'; - hiddenTabs.push({ el: this._tabs[i], index: i }); + hiddenTabs.push({el: this._tabs[i], index: i}); } } this._showBtn(); @@ -79,12 +79,12 @@ Api.prototype = { const el = index >= 0 ? tabs[index] : null; const overflow = el ? this.els - .getDistance(el) - .sub(this.els.getEl(this._options.tablistElement).getSpacing(this._btnPositionRelativeToTablist)) - .sub(this.els.getEl(this._options.buttonElement).getFullSize()).value <= 0 + .getDistance(el) + .sub(this.els.getEl(this._options.tablistElement).getSpacing(this._btnPositionRelativeToTablist)) + .sub(this.els.getEl(this._options.buttonElement).getFullSize()).value <= 0 : false; const overflowFullSize = overflow ? this.els.getEl(el).getFullSize() : 0; - return { index, overflowFullSize }; + return {index, overflowFullSize}; }, _validateTabsCount: function () { this._tabs = this._tablistEl.children; @@ -112,16 +112,19 @@ Api.prototype = { if (this._checkOverflow(_lastTab) === false) { return []; } - const selectedTabInfo = this._setBtnPositionRelativeToTablist(isVertical, direction)._getSelectedTabInfo(this._tabs, selectedTabIndex); + const selectedTabInfo = this._setBtnPositionRelativeToTablist(isVertical, direction)._getSelectedTabInfo( + this._tabs, + selectedTabIndex, + ); return this._validateSliderMinSize(selectedTabInfo) ? this._hideTabs( - this._findFirstHiddenTabIndexFactory( + this._findFirstHiddenTabIndexFactory( + selectedTabInfo, + this._getSearchBoundries(selectedTabInfo), + this._getOrder(this._tabs[0], _lastTab), + ), selectedTabInfo, - this._getSearchBoundries(selectedTabInfo), - this._getOrder(this._tabs[0], _lastTab), - ), - selectedTabInfo, - ) + ) : this._hideTabs(0, selectedTabInfo, true); }, _validateSliderMinSize: function (selectedTabInfo) { @@ -139,7 +142,7 @@ Api.prototype = { : 'desc'; }, _getSearchBoundries: function (selectedTabInfo) { - const { overflowFullSize, index: pivotIndex } = selectedTabInfo; + const {overflowFullSize, index: pivotIndex} = selectedTabInfo; //if selected tab is not existed if (pivotIndex < 0) { return [0, this._tabsCount - 2]; @@ -181,7 +184,8 @@ Api.prototype = { /** set _btnPositionRelativeToTablist and _btnReversePositionRelativeToTablist */ _setBtnPositionRelativeToTablist: function (isVertical, dir) { if (!this._btnPositionRelativeToTablist) { - let pos = '', reversePos = ''; + let pos = '', + reversePos = ''; if (isVertical == true) { pos = 'Bottom'; //the Button is rendered below the Tablist reversePos = 'Top'; diff --git a/src/distanceFrom.js b/src/distanceFrom.js index 4197d46..abed9b5 100644 --- a/src/distanceFrom.js +++ b/src/distanceFrom.js @@ -1,5 +1,5 @@ -export const constructor = function DistanceFrom(deps, { baseEl, isVertical, dir }) { - deps.Base.call(this, { isVertical }); +export const constructor = function DistanceFrom(deps, {baseEl, isVertical, dir}) { + deps.Base.call(this, {isVertical}); this.baseEl = baseEl; this._distanceFactory(isVertical, dir); }; diff --git a/src/el.js b/src/el.js index 6e0bea1..ee061d3 100644 --- a/src/el.js +++ b/src/el.js @@ -1,4 +1,4 @@ -export default function El({ el, sizeDimension, sizeDirections }) { +export default function El({el, sizeDimension, sizeDirections}) { this._el = el; /**would be width|height */ this._sizeDimension = sizeDimension; @@ -14,7 +14,7 @@ El.prototype = { }, /** * including padding, border and margin - * @param {"Right"|"Bottom"|"Left"|"Top"} dir + * @param {"Right"|"Bottom"|"Left"|"Top"} dir * @returns {Number} */ getSpacing: function (dir) {