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

Add image collection support (tabber)

Browse source
This commit is contained in:
Luqgreg 2018-08-03 17:53:32 +02:00
parent 84a506791e 2e6f06c632
commit 4ac178c62f
4 changed files with 62 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
services/Helpers/PortableInfoboxImagesHelper.php
View file

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

6
services/Parser/Nodes/NodeImage.php
View file

@ -14,7 +14,7 @@ class NodeImage extends Node {
const MEDIA_TYPE_VIDEO = 'VIDEO'; const MEDIA_TYPE_VIDEO = 'VIDEO';
public static function getMarkers( $value, $ext ) { 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]; return $out[0];
} else { } else {
return []; return [];
@ -37,8 +37,8 @@ class NodeImage extends Node {
$sxml = simplexml_import_dom( $doc ); $sxml = simplexml_import_dom( $doc );
$divs = $sxml->xpath( '//div[@class=\'tabbertab\']' ); $divs = $sxml->xpath( '//div[@class=\'tabbertab\']' );
foreach ( $divs as $div ) { 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; return $data;

79
styles/PortableInfobox.less
View file

@ -71,36 +71,44 @@
max-width: var(--pi-width); max-width: var(--pi-width);
height: auto; height: auto;
} }
&-collection-tabs { &-collection {
list-style: none;
margin: 0 -1px -1px 0;
overflow: hidden; 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 & { .skin-minerva & {
margin: 0 -16px; margin: 0 -16px;
} }
}
.pi-title { .pi-title {
text-align: center; text-align: center;
} }
.pi-image-collection-tabs {
display: flex;
flex-wrap: wrap;
li { flex: 1 50% }
} }
} }
.skin-minerva { .skin-minerva {
.pi-image-collection-tabs li {
margin-bottom: 0;
}
.pi-caption { .pi-caption {
margin: var(--pi-item-spacing); margin: var(--pi-item-spacing);
} }

11
templates/PortableInfoboxItemImageCollection.mustache
View file

@ -1,16 +1,13 @@
<div class="pi-image-collection"> <div class="pi-image-collection">
<ul class="pi-image-collection-tabs"> <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> </ul>
{{#images}} {{#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"> <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}} {{#isVideo}}
<span class="thumbnail-play-icon-container"> <span class="thumbnail-play-icon-container">
<svg class="thumbnail-play-icon" viewBox="0 0 180 180" width="100%" height="100%"> <svg class="thumbnail-play-icon" viewBox="0 0 180 180" width="100%" height="100%">