feat: generate tab header in visual edit mode

extension.json

@@ -60,8 +60,7 @@
 				"ve-tabberNeue/ve.ui.MWTabberDialog.less"
 			],
 			"dependencies": [
-				"ext.visualEditor.mwcore",
-				"ext.tabberNeue"
+				"ext.visualEditor.mwcore"
 			],
 			"messages": [
 				"tabberneue-visualeditor-mwtabberdialog-title"

modules/ve-tabberNeue/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+	"globals": {
+		"ve": true
+	}
+}

modules/ve-tabberNeue/ve.ce.MWTabberNode.js

@@ -12,6 +12,8 @@ ve.ce.MWTabberNode = function VeCeMWTabberNode() {
 	// Parent constructor
 	ve.ce.MWTabberNode.super.apply( this, arguments );
 
+    this.renderHeader = OO.ui.debounce( this.renderHeader.bind( this ), 300 );
+
 	// DOM changes
 	this.$element.addClass( 've-ce-mwTabberNode' );
 };
@@ -28,6 +30,72 @@ ve.ce.MWTabberNode.static.tagName = 'div';
 
 ve.ce.MWTabberNode.static.primaryCommandName = 'mwTabber';
 
+/* Methods */
+
+var lastHeader;
+
+/**
+ * @inheritdoc
+ */
+ve.ce.MWTabberNode.prototype.onSetup = function () {
+    // Parent method
+    ve.ce.MWTabberNode.super.prototype.onSetup.call( this );
+
+    var tabber = this.$element[ 0 ];
+
+    // 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 );
+    }
+};
+
+/**
+ * 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
+ */
+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();
+
+    Array.prototype.forEach.call( tabPanels, function( tabPanel, index ) {
+        var tab = document.createElement( 'a' );
+
+        tab.innerText = tabPanel.title;
+        tab.classList.add( 'tabber__tab' );
+
+        // Make first tab active
+        if ( index === 0 ) {
+            tab.classList.add( 'tabber__tab--active' );
+        }
+
+        fragment.append( tab );
+    } );
+
+    tabList.append( fragment );
+
+    container.classList.add( 'tabber__header' );
+    tabList.classList.add( 'tabber__tabs' );
+
+    container.append( tabList );
+    tabber.prepend( container );
+
+    tabber.classList.add( 'tabber--live' );
+
+    lastHeader = tabber.firstElementChild;
+}
+
 /* Registration */
 
 ve.ce.nodeFactory.register( ve.ce.MWTabberNode );

modules/ve-tabberNeue/ve.ui.MWTabberDialog.js

@@ -64,6 +64,14 @@ ve.ui.MWTabberDialog.prototype.initialize = function () {
             .append( panel.$element );
 };
 
+/**
+ * @inheritdoc
+ */
+ve.ui.MWTabberDialog.prototype.updateMwData = function ( mwData ) {
+    // Parent method
+    ve.ui.MWTabberDialog.super.prototype.updateMwData.call( this, mwData );
+};
+
 
 /* Registration */