diff --git a/modules/ext.tabberNeue.js b/modules/ext.tabberNeue.js index eb27db3..8085c17 100644 --- a/modules/ext.tabberNeue.js +++ b/modules/ext.tabberNeue.js @@ -13,10 +13,10 @@ function initTabber( tabber, count ) { prevButton = document.createElement( 'div' ), nextButton = document.createElement( 'div' ); - var buildTabs = function() { + var buildTabs = function () { var fragment = new DocumentFragment(); - Array.prototype.forEach.call( tabPanels, function( tabPanel ) { + Array.prototype.forEach.call( tabPanels, function ( tabPanel ) { var hash = mw.util.escapeIdForAttribute( tabPanel.title ) + '-' + count, tab = document.createElement( 'a' ); @@ -48,7 +48,7 @@ function initTabber( tabber, count ) { container.append( prevButton, tabList, nextButton ); }; - var updateSectionHeight = function( section, activePanel ) { + var updateSectionHeight = function ( section, activePanel ) { var height = activePanel.offsetHeight; if ( height === 0 ) { // Sometimes the tab is hidden by one of its parent elements @@ -68,10 +68,10 @@ function initTabber( tabber, count ) { section.scrollLeft = activePanel.offsetLeft; }; - var onElementResize = function( entries, observer) { + var onElementResize = function ( entries ) { if ( entries && entries.length > 0 ) { - var targetPanel = entries[0].target; - var section = targetPanel.parentElement; + var targetPanel = entries[ 0 ].target; + var section = targetPanel.parentNode; updateSectionHeight( section, targetPanel ); } }; @@ -85,12 +85,12 @@ function initTabber( tabber, count ) { tabber.prepend( container ); // Initalize previous and next buttons - var initButtons = function() { + var initButtons = function () { var PREVCLASS = 'tabber__header--prev-visible', NEXTCLASS = 'tabber__header--next-visible'; /* eslint-disable mediawiki/class-doc */ - var scrollTabs = function( offset ) { + var scrollTabs = function ( offset ) { var scrollLeft = tabList.scrollLeft + offset; // Scroll to the start @@ -101,7 +101,7 @@ function initTabber( tabber, count ) { } }; - var updateButtons = function() { + var updateButtons = function () { var scrollLeft = tabList.scrollLeft; // Scroll to the start @@ -120,7 +120,7 @@ function initTabber( tabber, count ) { } }; - var setupButtons = function() { + var setupButtons = function () { var isScrollable = ( tabList.scrollWidth > container.offsetWidth ); if ( isScrollable ) { @@ -131,11 +131,11 @@ function initTabber( tabber, count ) { // Button only shows on pointer devices if ( matchMedia( '(hover: hover)' ).matches ) { - prevButton.addEventListener( 'click', function() { + prevButton.addEventListener( 'click', function () { scrollTabs( -scrollOffset ); }, false ); - nextButton.addEventListener( 'click', function() { + nextButton.addEventListener( 'click', function () { scrollTabs( scrollOffset ); }, false ); } @@ -150,7 +150,7 @@ function initTabber( tabber, count ) { // Listen for scroll event on header // Also triggered by side-scrolling using other means other than the buttons - tabList.addEventListener( 'scroll', function() { + tabList.addEventListener( 'scroll', function () { updateButtons(); } ); @@ -168,8 +168,8 @@ function initTabber( tabber, count ) { /** * Loads page contents into tab * - * @param {HTMLElement} tab panel - * @param {string} api URL + * @param {HTMLElement} targetPanel + * @param {string} url */ function loadPage( targetPanel, url ) { var requestData = { @@ -177,7 +177,7 @@ function initTabber( tabber, count ) { targetPanel: targetPanel }; if ( currentRequest ) { - if ( currentRequest.url != requestData.url ) { + if ( currentRequest.url !== requestData.url ) { nextRequest = requestData; } // busy @@ -192,17 +192,18 @@ function initTabber( tabber, count ) { * Show panel based on target hash * * @param {string} targetHash + * @param {boolean} allowRemoteLoad */ function showPanel( targetHash, allowRemoteLoad ) { var ACTIVETABCLASS = 'tabber__tab--active', ACTIVEPANELCLASS = 'tabber__panel--active', targetPanel = document.getElementById( targetHash ), targetTab = document.getElementById( 'tab-' + targetHash ), - section = targetPanel.parentElement, + section = targetPanel.parentNode, activePanel = section.querySelector( ':scope > .' + ACTIVEPANELCLASS ), parentPanel, parentSection; - var loadTransclusion = function() { + var loadTransclusion = function () { var loading = document.createElement( 'div' ), indicator = document.createElement( 'div' ); @@ -214,7 +215,7 @@ function initTabber( tabber, count ) { targetPanel.textContent = ''; targetPanel.appendChild( loading ); loadPage( targetPanel, targetPanel.dataset.tabberLoadUrl ); - } + }; /* eslint-disable mediawiki/class-doc */ if ( activePanel ) { @@ -223,7 +224,7 @@ function initTabber( tabber, count ) { var activeTabs = tabList.querySelectorAll( '.' + ACTIVETABCLASS ); if ( activeTabs.length > 0 ) { - Array.prototype.forEach.call( activeTabs, function( activeTab ) { + Array.prototype.forEach.call( activeTabs, function ( activeTab ) { activeTab.classList.remove( ACTIVETABCLASS ); activeTab.setAttribute( 'aria-selected', false ); } ); @@ -244,7 +245,10 @@ function initTabber( tabber, count ) { targetPanel.setAttribute( 'aria-hidden', false ); // Lazyload transclusion if needed - if ( allowRemoteLoad && targetPanel.dataset.tabberPendingLoad && targetPanel.dataset.tabberLoadUrl ) { + if ( allowRemoteLoad && + targetPanel.dataset.tabberPendingLoad && + targetPanel.dataset.tabberLoadUrl + ) { loadTransclusion(); } @@ -253,12 +257,13 @@ function initTabber( tabber, count ) { // If we're inside another tab, trigger its logic to recalc its height parentSection = section; // ResizeObserver should take care of the recursivity already + /* eslint-disable-next-line no-unmodified-loop-condition */ while ( !resizeObserver ) { parentPanel = parentSection.closest( '.' + ACTIVEPANELCLASS ); if ( !parentPanel ) { break; } - parentSection = parentPanel.parentElement; + parentSection = parentPanel.parentNode; updateSectionHeight( parentSection, parentPanel ); } if ( resizeObserver ) { @@ -272,7 +277,7 @@ function initTabber( tabber, count ) { */ function onLoadEndPage() { var targetPanel = currentRequest.targetPanel; - if ( xhr.status != 200 ) { + if ( xhr.status !== 200 ) { var err = document.createElement( 'div' ), errMsg = mw.message( 'error' ).text() + ': HTTP ' + xhr.status; @@ -284,6 +289,7 @@ function initTabber( tabber, count ) { var result = JSON.parse( xhr.responseText ); targetPanel.innerHTML = result.parse.text; // wikipage.content hook requires a jQuery object + /* eslint-disable-next-line no-undef */ mw.hook( 'wikipage.content' ).fire( $( targetPanel ) ); delete targetPanel.dataset.tabberPendingLoad; delete targetPanel.dataset.tabberLoadUrl; @@ -292,7 +298,7 @@ function initTabber( tabber, count ) { var ACTIVEPANELCLASS = 'tabber__panel--active', targetHash = targetPanel.getAttribute( 'id' ), - section = targetPanel.parentElement, + section = targetPanel.parentNode, activePanel = section.querySelector( ':scope > .' + ACTIVEPANELCLASS ); if ( nextRequest ) { @@ -337,8 +343,8 @@ function initTabber( tabber, count ) { // window.addEventListener( 'hashchange', switchTab, false ); // Respond to clicks on the nav tabs - Array.prototype.forEach.call( tabList.children, function( tab ) { - tab.addEventListener( 'click', function( event ) { + Array.prototype.forEach.call( tabList.children, function ( tab ) { + tab.addEventListener( 'click', function ( event ) { var targetHash = tab.getAttribute( 'href' ).substring( 1 ); event.preventDefault(); if ( !config || config.updateLocationOnTabChange ) { @@ -358,7 +364,7 @@ function main() { if ( tabbers ) { var count = 0; mw.loader.load( 'ext.tabberNeue.icons' ); - Array.prototype.forEach.call( tabbers, function( tabber ) { + Array.prototype.forEach.call( tabbers, function ( tabber ) { initTabber( tabber, count ); count++; } ); diff --git a/modules/ve-tabberNeue/.eslintrc.json b/modules/ve-tabberNeue/.eslintrc.json index 91cb90f..a343cf9 100644 --- a/modules/ve-tabberNeue/.eslintrc.json +++ b/modules/ve-tabberNeue/.eslintrc.json @@ -2,4 +2,4 @@ "globals": { "ve": true } -} \ No newline at end of file +} diff --git a/modules/ve-tabberNeue/ve.ce.MWTabberNode.js b/modules/ve-tabberNeue/ve.ce.MWTabberNode.js index 8366118..5871ff6 100644 --- a/modules/ve-tabberNeue/ve.ce.MWTabberNode.js +++ b/modules/ve-tabberNeue/ve.ce.MWTabberNode.js @@ -12,7 +12,7 @@ ve.ce.MWTabberNode = function VeCeMWTabberNode() { // Parent constructor ve.ce.MWTabberNode.super.apply( this, arguments ); - this.renderHeader = OO.ui.debounce( this.renderHeader.bind( this ), 300 ); + this.renderHeader = OO.ui.debounce( this.renderHeader.bind( this ), 300 ); // DOM changes this.$element.addClass( 've-ce-mwTabberNode' ); @@ -38,63 +38,62 @@ var lastHeader; * @inheritdoc */ ve.ce.MWTabberNode.prototype.onSetup = function () { - // Parent method - ve.ce.MWTabberNode.super.prototype.onSetup.call( this ); + // Parent method + ve.ce.MWTabberNode.super.prototype.onSetup.call( this ); - var tabber = this.$element[ 0 ]; + var tabber = this.$element[ 0 ]; - // Do not render header if it is already rendered - if ( - tabber.firstElementChild && + // Do not render header if it is already rendered + if ( + tabber.firstElementChild && tabber.firstElementChild !== lastHeader && !tabber.classList.contains( 'tabber--live' ) && - tabber.classList.contains( 'tabber' ) - ) - { - this.renderHeader( tabber ); - } + tabber.classList.contains( 'tabber' ) + ) { + this.renderHeader( tabber ); + } }; /** * HACK: Render a simple static tab header for preview - * + * * Since it is only for preview it does not have to be fancy, * just having the right HTML and CSS will be sufficient - * - * @param {Object} Tabber HTMLElement + * + * @param {HTMLElement} tabber */ ve.ce.MWTabberNode.prototype.renderHeader = function ( tabber ) { - var tabPanels = tabber.querySelectorAll( ':scope > .tabber__section > .tabber__panel' ), - container = document.createElement( 'header' ), - tabList = document.createElement( 'nav' ) - fragment = new DocumentFragment(); + var tabPanels = tabber.querySelectorAll( ':scope > .tabber__section > .tabber__panel' ), + container = document.createElement( 'header' ), + tabList = document.createElement( 'nav' ), + fragment = new DocumentFragment(); - Array.prototype.forEach.call( tabPanels, function( tabPanel, index ) { - var tab = document.createElement( 'a' ); + Array.prototype.forEach.call( tabPanels, function ( tabPanel, index ) { + var tab = document.createElement( 'a' ); - tab.innerText = tabPanel.title; - tab.classList.add( 'tabber__tab' ); + tab.innerText = tabPanel.title; + tab.classList.add( 'tabber__tab' ); - // Make first tab active - if ( index === 0 ) { - tab.classList.add( 'tabber__tab--active' ); - } + // Make first tab active + if ( index === 0 ) { + tab.classList.add( 'tabber__tab--active' ); + } - fragment.append( tab ); - } ); + fragment.append( tab ); + } ); - tabList.append( fragment ); + tabList.append( fragment ); - container.classList.add( 'tabber__header' ); - tabList.classList.add( 'tabber__tabs' ); + container.classList.add( 'tabber__header' ); + tabList.classList.add( 'tabber__tabs' ); - container.append( tabList ); - tabber.prepend( container ); + container.append( tabList ); + tabber.prepend( container ); - tabber.classList.add( 'tabber--live' ); + tabber.classList.add( 'tabber--live' ); - lastHeader = tabber.firstElementChild; -} + lastHeader = tabber.firstElementChild; +}; /* Registration */ diff --git a/modules/ve-tabberNeue/ve.ce.MWTabberTranscludeNode.js b/modules/ve-tabberNeue/ve.ce.MWTabberTranscludeNode.js index 56c9dce..9f7e36e 100644 --- a/modules/ve-tabberNeue/ve.ce.MWTabberTranscludeNode.js +++ b/modules/ve-tabberNeue/ve.ce.MWTabberTranscludeNode.js @@ -12,7 +12,7 @@ ve.ce.MWTabberTranscludeNode = function VeCeMWTabberTranscludeNode() { // Parent constructor ve.ce.MWTabberTranscludeNode.super.apply( this, arguments ); - this.renderHeader = OO.ui.debounce( this.renderHeader.bind( this ), 300 ); + this.renderHeader = OO.ui.debounce( this.renderHeader.bind( this ), 300 ); // DOM changes this.$element.addClass( 've-ce-mwTabberTranscludeNode' ); @@ -38,63 +38,62 @@ var lastHeader; * @inheritdoc */ ve.ce.MWTabberTranscludeNode.prototype.onSetup = function () { - // Parent method - ve.ce.MWTabberTranscludeNode.super.prototype.onSetup.call( this ); + // Parent method + ve.ce.MWTabberTranscludeNode.super.prototype.onSetup.call( this ); - var tabber = this.$element[ 0 ]; + var tabber = this.$element[ 0 ]; - // Do not render header if it is already rendered - if ( - tabber.firstElementChild && + // Do not render header if it is already rendered + if ( + tabber.firstElementChild && tabber.firstElementChild !== lastHeader && !tabber.classList.contains( 'tabber--live' ) && - tabber.classList.contains( 'tabber' ) - ) - { - this.renderHeader( tabber ); - } + tabber.classList.contains( 'tabber' ) + ) { + this.renderHeader( tabber ); + } }; /** * HACK: Render a simple static tab header for preview - * + * * Since it is only for preview it does not have to be fancy, * just having the right HTML and CSS will be sufficient - * - * @param {Object} Tabber HTMLElement + * + * @param {HTMLElement} tabber */ ve.ce.MWTabberTranscludeNode.prototype.renderHeader = function ( tabber ) { - var tabPanels = tabber.querySelectorAll( ':scope > .tabber__section > .tabber__panel' ), - container = document.createElement( 'header' ), - tabList = document.createElement( 'nav' ) - fragment = new DocumentFragment(); + var tabPanels = tabber.querySelectorAll( ':scope > .tabber__section > .tabber__panel' ), + container = document.createElement( 'header' ), + tabList = document.createElement( 'nav' ), + fragment = new DocumentFragment(); - Array.prototype.forEach.call( tabPanels, function( tabPanel, index ) { - var tab = document.createElement( 'a' ); + Array.prototype.forEach.call( tabPanels, function ( tabPanel, index ) { + var tab = document.createElement( 'a' ); - tab.innerText = tabPanel.title; - tab.classList.add( 'tabber__tab' ); + tab.innerText = tabPanel.title; + tab.classList.add( 'tabber__tab' ); - // Make first tab active - if ( index === 0 ) { - tab.classList.add( 'tabber__tab--active' ); - } + // Make first tab active + if ( index === 0 ) { + tab.classList.add( 'tabber__tab--active' ); + } - fragment.append( tab ); - } ); + fragment.append( tab ); + } ); - tabList.append( fragment ); + tabList.append( fragment ); - container.classList.add( 'tabber__header' ); - tabList.classList.add( 'tabber__tabs' ); + container.classList.add( 'tabber__header' ); + tabList.classList.add( 'tabber__tabs' ); - container.append( tabList ); - tabber.prepend( container ); + container.append( tabList ); + tabber.prepend( container ); - tabber.classList.add( 'tabber--live' ); + tabber.classList.add( 'tabber--live' ); - lastHeader = tabber.firstElementChild; -} + lastHeader = tabber.firstElementChild; +}; /* Registration */ diff --git a/modules/ve-tabberNeue/ve.ui.MWTabberContextItem.js b/modules/ve-tabberNeue/ve.ui.MWTabberContextItem.js index 1c6fdc0..5e69d5d 100644 --- a/modules/ve-tabberNeue/ve.ui.MWTabberContextItem.js +++ b/modules/ve-tabberNeue/ve.ui.MWTabberContextItem.js @@ -41,4 +41,4 @@ ve.ui.MWTabberContextItem.prototype.getDescription = function () { /* Registration */ -ve.ui.contextItemFactory.register( ve.ui.MWTabberContextItem ); \ No newline at end of file +ve.ui.contextItemFactory.register( ve.ui.MWTabberContextItem ); diff --git a/modules/ve-tabberNeue/ve.ui.MWTabberDialog.js b/modules/ve-tabberNeue/ve.ui.MWTabberDialog.js index 5916264..e87f070 100644 --- a/modules/ve-tabberNeue/ve.ui.MWTabberDialog.js +++ b/modules/ve-tabberNeue/ve.ui.MWTabberDialog.js @@ -35,33 +35,33 @@ ve.ui.MWTabberDialog.static.size = 'larger'; * @inheritdoc */ ve.ui.MWTabberDialog.prototype.initialize = function () { - // Parent method - ve.ui.MWTabberDialog.super.prototype.initialize.call( this ); + // Parent method + ve.ui.MWTabberDialog.super.prototype.initialize.call( this ); - this.input = new ve.ui.MWAceEditorWidget( { - rows: 10, - maxRows: 25, - autosize: true - } ) - .setLanguage( 'mediawiki' ) - .toggleLineNumbers( false ); + this.input = new ve.ui.MWAceEditorWidget( { + rows: 10, + maxRows: 25, + autosize: true + } ) + .setLanguage( 'mediawiki' ) + .toggleLineNumbers( false ); - this.input.connect( this, { resize: 'updateSize' } ); + this.input.connect( this, { resize: 'updateSize' } ); - var inputField = new OO.ui.FieldLayout( this.input, { - align: 'top' - } ); + var inputField = new OO.ui.FieldLayout( this.input, { + align: 'top' + } ); - var panel = new OO.ui.PanelLayout( { - expanded: false, - padded: true - } ); + var panel = new OO.ui.PanelLayout( { + expanded: false, + padded: true + } ); - panel.$element.append( inputField.$element ); + panel.$element.append( inputField.$element ); - this.$body - .addClass( 've-ui-mwTabberDialog-content' ) - .append( panel.$element ); + this.$body + .addClass( 've-ui-mwTabberDialog-content' ) + .append( panel.$element ); }; /* Registration */ diff --git a/modules/ve-tabberNeue/ve.ui.MWTabberTranscludeContextItem.js b/modules/ve-tabberNeue/ve.ui.MWTabberTranscludeContextItem.js index 597240b..319e8f9 100644 --- a/modules/ve-tabberNeue/ve.ui.MWTabberTranscludeContextItem.js +++ b/modules/ve-tabberNeue/ve.ui.MWTabberTranscludeContextItem.js @@ -41,4 +41,4 @@ ve.ui.MWTabberTranscludeContextItem.prototype.getDescription = function () { /* Registration */ -ve.ui.contextItemFactory.register( ve.ui.MWTabberTranscludeContextItem ); \ No newline at end of file +ve.ui.contextItemFactory.register( ve.ui.MWTabberTranscludeContextItem ); diff --git a/modules/ve-tabberNeue/ve.ui.MWTabberTranscludeInspector.js b/modules/ve-tabberNeue/ve.ui.MWTabberTranscludeInspector.js index 8f3a9a8..f32a520 100644 --- a/modules/ve-tabberNeue/ve.ui.MWTabberTranscludeInspector.js +++ b/modules/ve-tabberNeue/ve.ui.MWTabberTranscludeInspector.js @@ -29,4 +29,4 @@ ve.ui.MWTabberTranscludeInspector.static.dir = 'ltr'; /* Registration */ -ve.ui.windowFactory.register( ve.ui.MWTabberTranscludeInspector ); \ No newline at end of file +ve.ui.windowFactory.register( ve.ui.MWTabberTranscludeInspector ); diff --git a/modules/ve-tabberNeue/ve.ui.MWTabberTranscludeInspectorTool.js b/modules/ve-tabberNeue/ve.ui.MWTabberTranscludeInspectorTool.js index 3f8ee6f..4e3c3ae 100644 --- a/modules/ve-tabberNeue/ve.ui.MWTabberTranscludeInspectorTool.js +++ b/modules/ve-tabberNeue/ve.ui.MWTabberTranscludeInspectorTool.js @@ -41,4 +41,4 @@ ve.ui.commandRegistry.register( 'mwTabberTransclude', 'window', 'open', { args: [ 'mwTabberTransclude' ], supportedSelections: [ 'linear' ] } ) -); \ No newline at end of file +);