Rename NodeImage to NodeMedia

extension.json

@@ -6,7 +6,7 @@
 	],
 	"url": "https://github.com/Luqgreg/mediawiki-PortableInfobox",
 	"descriptionmsg": "portable-infobox-desc",
-	"version": "0.2.1",
+	"version": "0.2.1-audio_support",
 	"type": "parserhook",
 	"license-name": "GPL-3.0-or-later",
 	"config": {
@@ -54,7 +54,7 @@
 		"PortableInfobox\\Parser\\Nodes\\NodeNavigation": "includes/services/Parser/Nodes/NodeNavigation.php",
 		"PortableInfobox\\Parser\\Nodes\\NodeGroup": "includes/services/Parser/Nodes/NodeGroup.php",
 		"PortableInfobox\\Parser\\Nodes\\NodeHeader": "includes/services/Parser/Nodes/NodeHeader.php",
-		"PortableInfobox\\Parser\\Nodes\\NodeImage": "includes/services/Parser/Nodes/NodeImage.php",
+		"PortableInfobox\\Parser\\Nodes\\NodeMedia": "includes/services/Parser/Nodes/NodeMedia.php",
 		"PortableInfobox\\Parser\\Nodes\\NodeInfobox": "includes/services/Parser/Nodes/NodeInfobox.php",
 		"PortableInfobox\\Parser\\Nodes\\NodeData": "includes/services/Parser/Nodes/NodeData.php",
 		"PortableInfobox\\Parser\\Nodes\\NodeTitle": "includes/services/Parser/Nodes/NodeTitle.php",

includes/services/Helpers/PortableInfoboxImagesHelper.php

@@ -21,18 +21,20 @@ class PortableInfoboxImagesHelper {
 		$title = $data['name'];
 		$file = $this->getFileFromTitle( $title );
 
-		if (
-			!$file || !$file->exists() ||
-			!in_array( $file->getMediaType(), [ MEDIATYPE_BITMAP, MEDIATYPE_DRAWING, MEDIATYPE_VIDEO ] )
-		) {
+		if ( !$file || !$file->exists() ) {
 			return false;
 		}
 
-		// we don't need failing thumbnail creation for videos
-		if( $file->getMediaType() == MEDIATYPE_VIDEO ) {
-			return array_merge( $data, [
-				'ref' => ++self::$count
-			] );
+		$mediatype = $file->getMediaType();
+		$data['isImage'] = in_array( $mediatype, [ MEDIATYPE_BITMAP, MEDIATYPE_DRAWING ] );
+		$data['isVideo'] = $mediatype === MEDIATYPE_VIDEO;
+		$data['isAudio'] = $mediatype === MEDIATYPE_AUDIO;
+
+		$data['ref'] = ++self::$count;
+
+		// we don't need failing thumbnail creation for videos and audio files
+		if( !$data['isImage'] ) {
+			return $data;
 		}
 
 		// get dimensions
@@ -65,7 +67,6 @@ class PortableInfoboxImagesHelper {
 		}
 
 		return array_merge( $data, [
-			'ref' => ++self::$count,
 			'height' => intval( $imgTagDimensions['height'] ),
 			'width' => intval( $imgTagDimensions['width'] ),
 			'thumbnail' => $thumbnail->getUrl(),

includes/services/Helpers/PortableInfoboxTemplateEngine.php

@@ -13,13 +13,13 @@ class PortableInfoboxTemplateEngine {
 		'wrapper' => 'PortableInfoboxWrapper.hbs',
 		'title' => 'PortableInfoboxItemTitle.hbs',
 		'header' => 'PortableInfoboxItemHeader.hbs',
-		'image' => 'PortableInfoboxItemImage.hbs',
+		'media' => 'PortableInfoboxItemMedia.hbs',
 		'data' => 'PortableInfoboxItemData.hbs',
 		'group' => 'PortableInfoboxItemGroup.hbs',
 		'smart-group' => 'PortableInfoboxItemSmartGroup.hbs',
 		'horizontal-group-content' => 'PortableInfoboxHorizontalGroupContent.hbs',
 		'navigation' => 'PortableInfoboxItemNavigation.hbs',
-		'image-collection' => 'PortableInfoboxItemImageCollection.hbs',
+		'media-collection' => 'PortableInfoboxItemMediaCollection.hbs',
 		'xml-parse-error' => 'PortableInfoboxMarkupDebug.hbs'
 	];
 	
@@ -48,7 +48,7 @@ class PortableInfoboxTemplateEngine {
 		if ( !empty( self::$cache[ $type ] ) ) {
 			return self::$cache[ $type ];
 		}
-		
+
 		$path = self::getTemplatesDir() . DIRECTORY_SEPARATOR . self::$templates[ $type ];
 
 		// @see https://github.com/wikimedia/mediawiki-vendor/tree/master/zordius/lightncandy

includes/services/Parser/Nodes/NodeMedia.php

@@ -6,10 +6,14 @@ use PortableInfobox\Helpers\HtmlHelper;
 use PortableInfobox\Helpers\PortableInfoboxDataBag;
 use PortableInfobox\Sanitizers\SanitizerBuilder;
 
-class NodeImage extends Node {
+class NodeMedia extends Node {
 	const GALLERY = 'GALLERY';
 	const TABBER = 'TABBER';
 
+	const ALLOWIMAGE_ATTR_NAME = 'image';
+	const ALLOWVIDEO_ATTR_NAME = 'video';
+	const ALLOWAUDIO_ATTR_NAME = 'audio';
+
 	const ALT_TAG_NAME = 'alt';
 	const CAPTION_TAG_NAME = 'caption';
 
@@ -116,6 +120,10 @@ class NodeImage extends Node {
 		$titleObj = $title instanceof \Title ? $title : $this->getImageAsTitleObject( $title );
 		$fileObj = $this->getFileFromTitle( $titleObj );
 
+		if( !isset( $fileObj ) || !$this->isTypeAllowed( $fileObj->getMediaType() ) ) {
+			return [];
+		}
+
 		if ( $titleObj instanceof \Title ) {
 			$this->getExternalParser()->addImage( $titleObj->getDBkey() );
 		}
@@ -123,11 +131,9 @@ class NodeImage extends Node {
 		$image = [
 			'url' => $this->resolveImageUrl( $fileObj ),
 			'name' => $titleObj ? $titleObj->getText() : '',
-			'key' => $titleObj ? $titleObj->getDBKey() : '',
 			'alt' => $alt ?? ( $titleObj ? $titleObj->getText() : null ),
 			'caption' => SanitizerBuilder::createFromType( 'image' )
-				->sanitize( [ 'caption' => $caption ] )['caption'] ?: null,
-			'isVideo' => $this->isVideo( $fileObj )
+				->sanitize( [ 'caption' => $caption ] )['caption'] ?: null
 		];
 
 		return $image;
@@ -199,11 +205,48 @@ class NodeImage extends Node {
 	}
 
 	/**
-	 * @desc checks if file media type is VIDEO
-	 * @param File|null $file
+	 * @desc checks if file media type is allowed
+	 * @param string $type
 	 * @return bool
 	 */
-	private function isVideo( $file ) {
-		return $file ? $file->getMediaType() === MEDIATYPE_VIDEO : false;
+	private function isTypeAllowed( $type ) {
+		switch( $type ) {
+			case MEDIATYPE_BITMAP:
+			case MEDIATYPE_DRAWING:
+				return $this->allowImage();
+			case MEDIATYPE_VIDEO:
+				return $this->allowVideo();
+			case MEDIATYPE_AUDIO:
+				return $this->allowAudio();
+			default:
+				return false;
+		}
+	}
+
+	/**
+	 * @return bool
+	 */
+	protected function allowImage() {
+		$attr = $this->getXmlAttribute( $this->xmlNode, self::ALLOWIMAGE_ATTR_NAME );
+
+		return !( isset( $attr ) && strtolower( $attr ) === 'false' );
+	}
+
+	/**
+	 * @return bool
+	 */
+	protected function allowVideo() {
+		$attr = $this->getXmlAttribute( $this->xmlNode, self::ALLOWVIDEO_ATTR_NAME );
+
+		return !( isset( $attr ) && strtolower( $attr ) === 'false' );
+	}
+
+	/*
+	 * @return bool
+	 */
+	protected function allowAudio() {
+		$attr = $this->getXmlAttribute( $this->xmlNode, self::ALLOWAUDIO_ATTR_NAME );
+
+		return !( isset( $attr ) && strtolower( $attr ) === 'false' );
 	}
 }

includes/services/PortableInfoboxRenderService.class.php

@@ -82,8 +82,8 @@ class PortableInfoboxRenderService {
 			case 'header':
 				$result = $this->renderHeader( $data );
 				break;
-			case 'image':
-				$result = $this->renderImage( $data );
+			case 'media':
+				$result = $this->renderMedia( $data );
 				break;
 			case 'title':
 				$result = $this->renderTitle( $data );
@@ -104,7 +104,7 @@ class PortableInfoboxRenderService {
 	 * @return string - group HTML markup
 	 */
 	protected function renderGroup( $groupData ) {
-		$cssClasses = [ ];
+		$cssClasses = [];
 		$groupHTMLContent = '';
 		$children = $groupData['value'];
 		$layout = $groupData['layout'];
@@ -140,15 +140,13 @@ class PortableInfoboxRenderService {
 	 * @param $data
 	 * @return string
 	 */
-	protected function renderImage( $data ) {
+	protected function renderMedia( $data ) {
 		$helper = $this->getImageHelper();
 
-		$data = $this->filterImageData( $data );
-		$images = [ ];
+		$images = [];
 
 		foreach ( $data as $dataItem ) {
 			$extendedItem = $dataItem;
-			$extendedItem['context'] = null;
 			$extendedItem = $helper->extendImageData( $extendedItem, $this->imagesWidth, $this->infoboxWidth );
 
 			if ( !!$extendedItem ) {
@@ -162,11 +160,11 @@ class PortableInfoboxRenderService {
 
 		if ( count( $images ) === 1 ) {
 			$data = $images[0];
-			$templateName = 'image';
+			$templateName = 'media';
 		} else {
 			// More than one image means image collection
 			$data = $helper->extendImageCollectionData( $images );
-			$templateName = 'image-collection';
+			$templateName = 'media-collection';
 		}
 
 		return $this->render( $templateName, $data );
@@ -196,22 +194,6 @@ class PortableInfoboxRenderService {
 		return $result;
 	}
 
-	private function filterImageData( $data ) {
-		$dataWithCaption = array_filter($data, function( $item ) {
-			return !empty( $item['caption'] );
-		});
-
-		$result = [];
-
-		if ( !empty( $dataWithCaption ) ) {
-			$result = $dataWithCaption;
-		} elseif ( !empty( $data ) ) {
-			$result = [ $data[0] ];
-		}
-
-		return $result;
-	}
-
 	private function getInlineStyles( $accentColor, $accentColorText ) {
 		$backgroundColor = empty( $accentColor ) ? '' : "background-color:{$accentColor};";
 		$color = empty( $accentColorText ) ? '' : "color:{$accentColorText};";
@@ -221,8 +203,8 @@ class PortableInfoboxRenderService {
 
 	private function createHorizontalGroupData( $groupData ) {
 		$horizontalGroupData = [
-			'labels' => [ ],
-			'values' => [ ],
+			'labels' => [],
+			'values' => [],
 			'renderLabels' => false
 		];
 
@@ -246,9 +228,9 @@ class PortableInfoboxRenderService {
 	}
 
 	private function createSmartGroups( $groupData, $rowCapacity ) {
-		$result = [ ];
+		$result = [];
 		$rowSpan = 0;
-		$rowItems = [ ];
+		$rowItems = [];
 
 		foreach ( $groupData as $item ) {
 			$data = $item['data'];
@@ -258,7 +240,7 @@ class PortableInfoboxRenderService {
 				if ( !empty( $rowItems ) && $rowSpan + $data['span'] > $rowCapacity ) {
 					$result[] = $this->createSmartGroupItem( $rowItems, $rowSpan );
 					$rowSpan = 0;
-					$rowItems = [ ];
+					$rowItems = [];
 				}
 				$rowSpan += $data['span'];
 				$rowItems[] = $item;
@@ -298,6 +280,6 @@ class PortableInfoboxRenderService {
 			$result['values'][] = [ 'value' => $item['data']['value'], 'inlineStyles' => $styles ];
 
 			return $result;
-		}, [ 'labels' => [ ], 'values' => [ ], 'renderLabels' => false ] );
+		}, [ 'labels' => [], 'values' => [], 'renderLabels' => false ] );
 	}
 }

templates/PortableInfoboxItemImage.hbs

@@ -1,7 +0,0 @@
-<figure class="pi-item pi-image{{#if isVideo}} pi-video{{/if}}">
-	<a href="{{url}}" class="image image-thumbnail{{#isVideo}} video video-thumbnail{{/isVideo}}" title="{{alt}}">
-		{{#unless isVideo}}<img src="{{thumbnail}}" srcset="{{thumbnail}} 1x, {{thumbnail2x}} 2x" class="pi-image-thumbnail" alt="{{alt}}" width="{{{width}}}" height="{{{height}}}"/>
-		{{else}}<video src="{{url}}" class="pi-video-player" controls="true" controlsList="nodownload" preload="metadata">{{alt}}</video>{{/unless}}
-	</a>
-	{{#if caption}}<figcaption class="pi-item-spacing pi-caption">{{{caption}}}</figcaption>{{/if}}
-</figure>

templates/PortableInfoboxItemImageCollection.hbs

@@ -1,15 +0,0 @@
-<div class="pi-image-collection">
-	<ul class="pi-image-collection-tabs">
-		{{#each images}}<li class="pi-tab-link pi-item-spacing{{#if isFirst}} current{{/if}}" data-pi-tab="pi-tab-{{ref}}">{{{caption}}}</li>{{/each}}
-	</ul>
-	{{#each images}}
-		<div class="pi-image-collection-tab-content{{#if isFirst}} current{{/if}}" id="pi-tab-{{ref}}">
-			<figure class="pi-item pi-image{{#if isVideo}} pi-video{{/if}}">
-				<a href="{{url}}" class="image image-thumbnail{{#isVideo}} video video-thumbnail{{/isVideo}}" title="{{alt}}">
-					{{#unless isVideo}}<img src="{{thumbnail}}" srcset="{{thumbnail}} 1x, {{thumbnail2x}} 2x" class="pi-image-thumbnail" alt="{{alt}}" width="{{{width}}}" height="{{{height}}}"/>
-					{{else}}<video src="{{url}}" class="pi-video-player" controls="true" controlsList="nodownload" preload="metadata">{{alt}}</video>{{/unless}}
-				</a>
-			</figure>
-		</div>
-	{{/each}}
-</div>

templates/PortableInfoboxItemMedia.hbs

@@ -0,0 +1,7 @@
+<figure class="pi-item pi-image{{#if isVideo}} pi-video{{/if}}">
+	<a href="{{url}}" class="image image-thumbnail{{#isVideo}} video video-thumbnail{{/isVideo}}" title="{{alt}}">
+		{{#if isImage}}<img src="{{thumbnail}}" srcset="{{thumbnail}} 1x, {{thumbnail2x}} 2x" class="pi-image-thumbnail" alt="{{alt}}" width="{{{width}}}" height="{{{height}}}"/>
+		{{else}}{{#if isVideo}}<video src="{{url}}" class="pi-video-player" controls="true" controlsList="nodownload" preload="metadata">{{alt}}</video>{{else}}{{alt}}{{/if}}{{/if}}
+	</a>
+	{{#if caption}}<figcaption class="pi-item-spacing pi-caption">{{{caption}}}</figcaption>{{/if}}
+</figure>

templates/PortableInfoboxItemMediaCollection.hbs

@@ -0,0 +1,15 @@
+<div class="pi-image-collection">
+	<ul class="pi-image-collection-tabs">
+		{{#each images}}<li class="pi-tab-link pi-item-spacing{{#if isFirst}} current{{/if}}" data-pi-tab="pi-tab-{{ref}}">{{{caption}}}</li>{{/each}}
+	</ul>
+	{{#each images}}
+		<div class="pi-image-collection-tab-content{{#if isFirst}} current{{/if}}" id="pi-tab-{{ref}}">
+			<figure class="pi-item pi-image{{#if isVideo}} pi-video{{/if}}">
+				<a href="{{url}}" class="image image-thumbnail{{#if isVideo}} video video-thumbnail{{/if}}" title="{{alt}}">
+					{{#if isImage}}<img src="{{thumbnail}}" srcset="{{thumbnail}} 1x, {{thumbnail2x}} 2x" class="pi-image-thumbnail" alt="{{alt}}" width="{{{width}}}" height="{{{height}}}"/>
+					{{else}}{{#if isVideo}}<video src="{{url}}" class="pi-video-player" controls="true" controlsList="nodownload" preload="metadata">{{alt}}</video>{{else}}{{alt}}{{/if}}{{/if}}
+				</a>
+			</figure>
+		</div>
+	{{/each}}
+</div>