diff --git a/extension.json b/extension.json index 862a895..d122297 100644 --- a/extension.json +++ b/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" ] } diff --git a/i18n/en.json b/i18n/en.json index bc5728c..30b138b 100644 --- a/i18n/en.json +++ b/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" } diff --git a/resources/PortableInfoboxBuilder.js b/resources/PortableInfoboxBuilder.js index b343dd1..e3e916a 100644 --- a/resources/PortableInfoboxBuilder.js +++ b/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 ) { diff --git a/resources/PortableInfoboxBuilderNodes.js b/resources/PortableInfoboxBuilderNodes.js index e505d8f..671f00c 100644 --- a/resources/PortableInfoboxBuilderNodes.js +++ b/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);