Universal-Omega/PortableInfobox
1
0
Fork 0
mirror of https://github.com/Universal-Omega/PortableInfobox.git synced 2024-11-15 03:35:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

XW-4654: data-attrs for galleries in PI

Browse source
This commit is contained in:
Mateusz Rybarski 2018-03-02 16:47:26 +01:00
parent 6226a58247
commit 9f9dc7ae79
7 changed files with 27 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
services/Helpers/PortableInfoboxImagesHelper.php
View file

@ -58,7 +58,8 @@ class PortableInfoboxImagesHelper {
}
$ref = null;
\Hooks::run( 'PortableInfoboxRenderServiceHelper::extendImageData', [ $data, &$ref ] );
$dataAttrs = [];
\Hooks::run( 'PortableInfoboxRenderServiceHelper::extendImageData', [ $data, &$ref, &$dataAttrs ] );
return array_merge( $data, [
'ref' => $ref,
@ -68,10 +69,7 @@ class PortableInfoboxImagesHelper {
'thumbnail2x' => $thumbnail2x->getUrl(),
'key' => urlencode( $data['key'] ?? '' ),
'media-type' => isset( $data['isVideo'] ) && $data['isVideo'] ? 'video' : 'image',
'mercuryComponentAttrs' => json_encode( [
'itemContext' => 'portable-infobox',
'ref' => $ref
] )
'dataAttrs' => json_encode( $dataAttrs ),
] );
}
@ -80,16 +78,28 @@ class PortableInfoboxImagesHelper {
* @return array
*/
public function extendImageCollectionData( $images ) {
$mercuryComponentAttrs = [
'refs' => array_map( function ( $image ) {
return $image['ref'];
}, $images )
];
$dataAttrs = array_map(
function ( $image ) {
return json_decode( $image['dataAttrs'] );
},
$images
);
$images = array_map(
function ( $image, $index ) {
$image['dataRef'] = $index;
return $image;
},
$images,
array_keys($images)
);
$images[0]['isFirst'] = true;
return [
'images' => $images,
'firstImage' => $images[0],
'mercuryComponentAttrs' => json_encode( $mercuryComponentAttrs )
'dataAttrs' => json_encode( $dataAttrs )
];
}

1
services/PortableInfoboxMobileRenderService.class.php
View file

@ -93,6 +93,7 @@ class PortableInfoboxMobileRenderService extends PortableInfoboxRenderService {
}
$data = SanitizerBuilder::createFromType( 'image' )->sanitize( $data );
return parent::render( $templateName, $data );
}

2
templates/PortableInfoboxItemHeroMobile.mustache
View file

@ -8,7 +8,7 @@
</hgroup>
{{/title}}
{{#image}}
<figure data-component="portable-infobox-hero-image" data-attrs="{{mercuryComponentAttrs}}">
<figure data-component="portable-infobox-hero-image" data-attrs="{{dataAttrs}}">
<a href="{{url}}">
<img class="article-media-placeholder"
src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 {{width}} {{height}}'%2F%3E"

6
templates/PortableInfoboxItemImageCollectionMobile.mustache
View file

@ -1,9 +1,9 @@
<div class="pi-image-collection"
<div class="pi-image-collection gallery"
data-component="portable-infobox-image-collection"
data-attrs="{{mercuryComponentAttrs}}">
data-attrs="{{dataAttrs}}">
{{#images}}
<figure class="pi-item pi-image">
<figure class="pi-item pi-image" data-ref="{{dataRef}}">
<a href="{{url}}">
<img class="article-media-placeholder lazyload"
src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 {{width}} {{height}}'%2F%3E"

2
templates/PortableInfoboxItemImageMobile.mustache
View file

@ -1,5 +1,5 @@
<div class="pi-item pi-image">
<figure class="article-media-thumbnail" data-component="article-media-thumbnail" data-attrs="{{mercuryComponentAttrs}}">
<figure class="article-media-thumbnail" data-component="article-media-thumbnail" data-attrs="{{dataAttrs}}">
<a href="{{url}}">
<img class="article-media-placeholder"
src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 {{width}} {{height}}'%2F%3E"

1
tests/PortableInfoboxImagesHelperTest.php
View file

@ -117,7 +117,6 @@ class PortableInfoboxImagesHelperTest extends WikiaBaseTest {
'thumbnail2x' => null,
'key' => '',
'media-type' => 'image',
'mercuryComponentAttrs' => '{"itemContext":"portable-infobox","ref":null}',
'width' => $resultDimensions[ 'width' ],
'height' => $resultDimensions[ 'height' ]
];

16
tests/PortableInfoboxMobileRenderServiceTest.php
View file

@ -553,10 +553,6 @@ class PortableInfoboxMobileRenderServiceTest extends WikiaBaseTest {
'thumbnail2x' => 'http://image2x.jpg',
'media-type' => 'image',
'isVideo' => false,
'mercuryComponentAttrs' => json_encode( [
'itemContext' => 'portable-infobox',
'ref' => 1
] )
]
]
],
@ -609,10 +605,6 @@ class PortableInfoboxMobileRenderServiceTest extends WikiaBaseTest {
'thumbnail2x' => 'thumbnail2x.jpg',
'isVideo' => false,
'media-type' => 'image',
'mercuryComponentAttrs' => json_encode( [
'itemContext' => 'portable-infobox',
'ref' => 44
] )
]
]
],
@ -717,10 +709,6 @@ class PortableInfoboxMobileRenderServiceTest extends WikiaBaseTest {
'thumbnail2x' => 'thumbnail2x.jpg',
'isVideo' => false,
'media-type' => 'image',
'mercuryComponentAttrs' => json_encode( [
'itemContext' => 'portable-infobox',
'ref' => 44
] )
]
]
],
@ -825,10 +813,6 @@ class PortableInfoboxMobileRenderServiceTest extends WikiaBaseTest {
'thumbnail2x' => 'thumbnail2x.jpg',
'isVideo' => false,
'media-type' => 'image',
'mercuryComponentAttrs' => json_encode( [
'itemContext' => 'portable-infobox',
'ref' => 44
] )
]
]
]