Add more support to PortableInfoboxBuilder (#124)

Adds support for `<header>` and `<navigation>` tags

extension.json

@@ -87,6 +87,9 @@
 				"infoboxbuilder-node-title",
 				"infoboxbuilder-node-title-value",
 				"infoboxbuilder-node-title-value-pagename",
+				"infoboxbuilder-node-header",
+				"infoboxbuilder-node-header-value",
+				"infoboxbuilder-node-navigation",
 				"infoboxbuilder-node-data",
 				"infoboxbuilder-node-data-value-source",
 				"infoboxbuilder-node-media",
@@ -95,6 +98,7 @@
 				"infoboxbuilder-nodeparam-default",
 				"infoboxbuilder-nodeparam-label",
 				"infoboxbuilder-nodeparam-source",
+				"infoboxbuilder-nodeparam-value",
 				"infoboxbuilder-templatename"
 			]
 		}

i18n/en.json

@@ -40,11 +40,15 @@
 	"infoboxbuilder-node-data": "Data",
 	"infoboxbuilder-node-data-value-source": "Value of $1",
 	"infoboxbuilder-node-media": "Image",
+	"infoboxbuilder-node-header": "Header",
+	"infoboxbuilder-node-header-value": "Infobox header",
+	"infoboxbuilder-node-navigation": "Navigation",
 	"infoboxbuilder-nodeerror-invalidsource": "Source parameter is invalid.",
 	"infoboxbuilder-nodeerror-nosourceordefault": "Element without source parameter or default value won't be displayed.",
 	"infoboxbuilder-nodeparam-default": "Default value",
 	"infoboxbuilder-nodeparam-label": "Label",
 	"infoboxbuilder-nodeparam-source": "Source parameter",
+	"infoboxbuilder-nodeparam-value": "Value",
 	"infoboxbuilder-templatename": "Template name",
 	"portableinfoboxbuilder": "Portable Infobox Builder"
 }

resources/PortableInfoboxBuilder.js

@@ -35,6 +35,7 @@
 			this.infobox.children = [
 				Nodes.Node.factory( this.infobox.markupDoc, 'title' ),
 				Nodes.Node.factory( this.infobox.markupDoc, 'media' ),
+				Nodes.Node.factory( this.infobox.markupDoc, 'header' ),
 				Nodes.Node.factory( this.infobox.markupDoc, 'data' ),
 				Nodes.Node.factory( this.infobox.markupDoc, 'data' )
 			];
@@ -130,6 +131,10 @@
 				placeholder: this.msg( 'nodeparam-default' ),
 				disabled: true
 			} );
+			this.nodeInputValue = new OO.ui.TextInputWidget( {
+				placeholder: this.msg( 'nodeparam-value' ),
+				disabled: true
+			} );
 			this.deleteNodeButton = new OO.ui.ButtonWidget( {
 				label: this.msg( 'action-deletenode' ),
 				icon: 'trash',
@@ -155,6 +160,12 @@
 					help: this.msg( 'nodeparamhelp-default', [], true ),
 					disabled: true
 				} ).$element,
+				new OO.ui.FieldLayout( this.nodeInputValue, {
+					label: this.msg( 'nodeparam-value' ),
+					align: 'top',
+					help: this.msg( 'nodeparamhelp-value', [], true ),
+					disabled: true
+				} ).$element,
 				this.deleteNodeButton.$element
 			)
 		}
@@ -170,6 +181,7 @@
 			this.toggleNodeMenuWidget( this.nodeInputSource, supports.source, 'source' );
 			this.toggleNodeMenuWidget( this.nodeInputLabel, supports.label, 'label' );
 			this.toggleNodeMenuWidget( this.nodeInputDefault, supports.default, 'default' );
+			this.toggleNodeMenuWidget( this.nodeInputValue, supports.value, 'value' );
 		}
 
 		toggleNodeMenuWidget( widget, enabled, param ) {

resources/PortableInfoboxBuilderNodes.js

@@ -89,6 +89,10 @@
 					return new NodeTitle( markupDoc, params );
 				case 'media':
 					return new NodeMedia( markupDoc, params );
+				case 'header':
+					return new NodeHeader( markupDoc, params );
+				case 'navigation':
+					return new NodeNavigation( markupDoc, params );
 				case 'infobox':
 					throw new TypeError( 'Use new NodeInfobox() instead.' );
 				default:
@@ -183,11 +187,11 @@
 		}
 
 		validate() {
-			if ( this.params.source.match( /["|={}]/ ) ) {
+			if ( this.params.source?.match( /["|={}]/ ) ) {
 				throw new NodeValidationError( this.msg( 'nodeerror-invalidsource' ) );
 			}
 
-			if ( !this.params.source && !this.params.default ) {
+			if ( !this.params.source && !this.params.default && !this.params.value ) {
 				throw new NodeValidationWarning( this.msg( 'nodeerror-nosourceordefault' ) );
 			}
 
@@ -334,6 +338,67 @@
 			};
 		}
 	}
+
+	class NodeHeader extends PINode {
+		constructor( markupDoc, params ) {
+			super( markupDoc, params );
+			this.elementTag = 'h2';
+			this.elementClasses += 'pi-item-spacing pi-header pi-secondary-font pi-secondary-background';
+			this.markupTag = 'header';
+			this.markupContentTag = true;
+		}
+
+		getDefaultParams() {
+			return {
+				value: this.msg( 'node-header' )
+			};
+		}
+
+		html() {
+			super.html();
+
+			this.element.textContent = this.params.value === this.msg( 'node-header' ) ?
+				this.msg( 'node-header-value' ) : this.params.value;
+
+			return this.element;
+		}
+
+		supports() {
+			return {
+				value: true
+			};
+		}
+	}
+
+	class NodeNavigation extends PINode {
+		constructor( markupDoc, params ) {
+			super( markupDoc, params );
+			this.elementTag = 'nav';
+			this.elementClasses = 'pi-navigation pi-item-spacing pi-secondary-background pi-secondary-font';
+			this.markupTag = 'navigation';
+			this.markupContentTag = true;
+		}
+
+		getDefaultParams() {
+			return {
+				value: this.msg( 'node-navigation' )
+			};
+		}
+
+		html() {
+			super.html();
+
+			this.element.textContent = this.params.value;
+
+			return this.element;
+		}
+
+		supports() {
+			return {
+				value: true
+			};
+		}
+	}
 
 	class NodeInfobox extends PINode {
 		constructor( params ) {
@@ -430,6 +495,6 @@
 		NodeMedia: NodeMedia,
 		NodeTitle: NodeTitle,
 		NodeInfobox: NodeInfobox,
-		NODE_LIST: [ 'data', 'title', 'media' ]
+		NODE_LIST: [ 'data', 'title', 'media', 'header', 'navigation' ]
 	};
 })(window, jQuery);