Add image collection support (tabber)

services/Helpers/PortableInfoboxImagesHelper.php

@@ -6,6 +6,8 @@ namespace Wikia\PortableInfobox\Helpers;
 class PortableInfoboxImagesHelper {
 	const MAX_DESKTOP_THUMBNAIL_HEIGHT = 500;
 
+	protected static $count = 0;
+
 	/**
 	 * extends image data
 	 *
@@ -56,23 +58,16 @@ class PortableInfoboxImagesHelper {
 		if ( !$thumbnail || $thumbnail->isError() || !$thumbnail2x || $thumbnail2x->isError() ) {
 			return false;
 		}
-		$ref = null;
-
-		$dataAttrs = [];
-		\Hooks::run( 'PortableInfoboxRenderServiceHelper::extendImageData', [ $data, &$ref, &$dataAttrs ] );
 
 		return array_merge( $data, [
-			'ref' => $ref,
+			'ref' => ++$this->count,
 			'height' => intval( $imgTagDimensions['height'] ),
 			'width' => intval( $imgTagDimensions['width'] ),
 			'originalHeight' => $dataAttrs['height'] ?? '',
 			'originalWidth' => $dataAttrs['width'] ?? '',
 			'thumbnail' => $thumbnail->getUrl(),
 			'thumbnail2x' => $thumbnail2x->getUrl(),
-			'key' => urlencode( $data['key'] ?? '' ),
+			'fileName' => $dataAttrs['fileName'] ?? ''
-			'media-type' => isset( $data['isVideo'] ) && $data['isVideo'] ? 'video' : 'image',
-			'fileName' => $dataAttrs['fileName'] ?? '',
-			'dataAttrs' => json_encode( $dataAttrs )
 		] );
 	}
 
@@ -81,13 +76,6 @@ class PortableInfoboxImagesHelper {
 	 * @return array
 	 */
 	public function extendImageCollectionData( $images ) {
-		$dataAttrs = array_map(
-			function ( $image ) {
-				return json_decode( $image['dataAttrs'] );
-			},
-			$images
-		);
-
 		$images = array_map(
 			function ( $image, $index ) {
 				$image['dataRef'] = $index;
@@ -99,12 +87,8 @@ class PortableInfoboxImagesHelper {
 		);
 
 		$images[0]['isFirst'] = true;
-		$images[count($images) - 1]['isLast'] = true;
 		return [
-			'images' => $images,
+			'images' => $images
-			'firstImage' => $images[0],
-			'dataAttrs' => json_encode( $dataAttrs ),
-			'menuControlIcon' => \DesignSystemHelper::renderSvg('wds-icons-menu-control', 'wds-icon')
 		];
 	}
 

services/Parser/Nodes/NodeImage.php

@@ -14,7 +14,7 @@ class NodeImage extends Node {
 	const MEDIA_TYPE_VIDEO = 'VIDEO';
 
 	public static function getMarkers( $value, $ext ) {
-		if ( preg_match_all('/\x7f\'"`UNIQ[A-Z0-9]*-' . $ext . '-[A-F0-9]{8}-QINU`"\'\x7f/is', $value, $out ) ) {
+		if ( preg_match_all('/' . \Parser::MARKER_PREFIX . '-' . $ext . '-[A-F0-9]{8}' . \Parser::MARKER_SUFFIX . '/is', $value, $out ) ) {
 			return $out[0];
 		} else {
 			return [];
@@ -37,8 +37,8 @@ class NodeImage extends Node {
 		$sxml = simplexml_import_dom( $doc );
 		$divs = $sxml->xpath( '//div[@class=\'tabbertab\']' );
 		foreach ( $divs as $div ) {
-			if ( preg_match( '/data-(video|image)-key="([^"]+)"/', $div->asXML(), $out ) ) {
+			if ( preg_match( '/ src="(?:[^"]*\/)?([^"]*?)"/', $div->asXML(), $out ) ) {
-				$data[] = array( 'label' => (string) $div['title'], 'title' => $out[2] );
+				$data[] = array( 'label' => (string) $div['title'], 'title' => $out[1] );
 			}
 		}
 		return $data;

styles/PortableInfobox.less

@@ -71,36 +71,44 @@
 			max-width: var(--pi-width);
 			height: auto;
 		}
-		&-collection-tabs {
+		&-collection {
-			list-style: none;
-			margin: 0 -1px -1px 0;
 			overflow: hidden;
-			padding: 0;
+			margin: var(--pi-item-spacing);
-			text-align: center;
+			margin-left: 0;
-			li {
+			margin-right: 0;
-				border: 1px solid var(--pi-border-color);
+			padding-top: 1px;
-				box-sizing: border-box;
+			& &-tabs {
-				cursor: pointer;
+				list-style: none;
-				display: inline-block;
+				margin: 0 -1px;
-				margin: -1px -1px 0 0;
+				padding: 1px 0;
-				max-width: 50%;
+				text-align: center;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				vertical-align: bottom;
-				white-space: nowrap;
 			}
-			li.current {
+			&-tabs {
-				background: var(--pi-border-color);
+				li {
-				font-weight: bold;
+					border: 1px solid var(--pi-secondary-background);
+					box-sizing: border-box;
+					cursor: pointer;
+					display: inline-block;
+					margin: -1px -1px 0 0;
+					max-width: 50%;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					vertical-align: bottom;
+					white-space: nowrap;
+				}
+				li.current {
+					background: var(--pi-secondary-background);
+					font-weight: bold;
+				}
 			}
-		}
+			&-tab-content {
-		&-collection-tab-content {
+				display: none;
-			display: none;
+				.video-thumbnail {
-			.video-thumbnail {
+					display: block;
-				display: block;
+				}
-			}
+				&.current {
-			&.current {
+					display: inherit;
-				display: inherit;
+				}
 			}
 		}
 	}
@@ -287,14 +295,25 @@
 		.skin-minerva & {
 			margin: 0 -16px;
 		}
-		
+	}
-		.pi-title {
+
-			text-align: center;
+	.pi-title {
-		}
+		text-align: center;
+	}
+
+	.pi-image-collection-tabs {
+		  display: flex;
+		  flex-wrap: wrap;
+
+		  li { flex: 1 50% }
 	}
 }
 
 .skin-minerva {
+	.pi-image-collection-tabs li {
+		margin-bottom: 0;
+	}
+
 	.pi-caption {
 		margin: var(--pi-item-spacing);
 	}

templates/PortableInfoboxItemImageCollection.mustache

@@ -1,16 +1,13 @@
 <div class="pi-image-collection">
 	<ul class="pi-image-collection-tabs">
-		{{#images}}<li class="pi-tab-link pi-item-spacing {{#isFirst}}current{{/isFirst}}" data-pi-tab="pi-tab-{{ref}}">
+		{{#images}}<li class="pi-tab-link pi-item-spacing{{#isFirst}} current{{/isFirst}}" data-pi-tab="pi-tab-{{ref}}">{{{caption}}}</li>{{/images}}
-			{{#caption}}{{{caption}}}{{/caption}}
-			{{^caption}}{{name}}{{/caption}}
-		</li>{{/images}}
 	</ul>
 
 	{{#images}}
-		<div class="pi-image-collection-tab-content {{#isFirst}}current{{/isFirst}}" id="pi-tab-{{ref}}">
+		<div class="pi-image-collection-tab-content{{#isFirst}} current{{/isFirst}}" id="pi-tab-{{ref}}">
 			<figure class="pi-item pi-image">
-				<a href="{{url}}" class="image image-thumbnail {{#isVideo}} video video-thumbnail small{{/isVideo}}" title="{{alt}}">
+				<a href="{{url}}" class="image image-thumbnail{{#isVideo}} video video-thumbnail small{{/isVideo}}" title="{{alt}}">
-					<img src="{{thumbnail}}" srcset="{{thumbnail}} 1x, {{thumbnail2x}} 2x" class="pi-image-thumbnail" alt="{{alt}}" width="{{{width}}}" height="{{{height}}}" data-{{media-type}}-key="{{name}}" data-{{media-type}}-name="{{name}}"/>
+					<img src="{{thumbnail}}" srcset="{{thumbnail}} 1x, {{thumbnail2x}} 2x" class="pi-image-thumbnail" alt="{{alt}}" width="{{{width}}}" height="{{{height}}}"/>
 					{{#isVideo}}
 						<span class="thumbnail-play-icon-container">
 							<svg class="thumbnail-play-icon" viewBox="0 0 180 180" width="100%" height="100%">