mirror of
https://github.com/Universal-Omega/PortableInfobox.git
synced 2024-11-15 11:59:56 +00:00
Add image collection support (tabber)
This commit is contained in:
Luqgreg
commit
4ac178c62f
|
|
@ -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'] ?? '' ),
|
||||
'media-type' => isset( $data['isVideo'] ) && $data['isVideo'] ? 'video' : 'image',
|
||||
'fileName' => $dataAttrs['fileName'] ?? '',
|
||||
'dataAttrs' => json_encode( $dataAttrs )
|
||||
'fileName' => $dataAttrs['fileName'] ?? ''
|
||||
] );
|
||||
}
|
||||
|
||||
|
|
@ -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,
|
||||
'firstImage' => $images[0],
|
||||
'dataAttrs' => json_encode( $dataAttrs ),
|
||||
'menuControlIcon' => \DesignSystemHelper::renderSvg('wds-icons-menu-control', 'wds-icon')
|
||||
'images' => $images
|
||||
];
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 ) ) {
|
||||
$data[] = array( 'label' => (string) $div['title'], 'title' => $out[2] );
|
||||
if ( preg_match( '/ src="(?:[^"]*\/)?([^"]*?)"/', $div->asXML(), $out ) ) {
|
||||
$data[] = array( 'label' => (string) $div['title'], 'title' => $out[1] );
|
||||
}
|
||||
}
|
||||
return $data;
|
||||
|
|
|
|||
|
|
@ -71,36 +71,44 @@
|
|||
max-width: var(--pi-width);
|
||||
height: auto;
|
||||
}
|
||||
&-collection-tabs {
|
||||
list-style: none;
|
||||
margin: 0 -1px -1px 0;
|
||||
&-collection {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
li {
|
||||
border: 1px solid var(--pi-border-color);
|
||||
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;
|
||||
margin: var(--pi-item-spacing);
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-top: 1px;
|
||||
& &-tabs {
|
||||
list-style: none;
|
||||
margin: 0 -1px;
|
||||
padding: 1px 0;
|
||||
text-align: center;
|
||||
}
|
||||
li.current {
|
||||
background: var(--pi-border-color);
|
||||
font-weight: bold;
|
||||
&-tabs {
|
||||
li {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-collection-tab-content {
|
||||
display: none;
|
||||
.video-thumbnail {
|
||||
display: block;
|
||||
}
|
||||
&.current {
|
||||
display: inherit;
|
||||
&-tab-content {
|
||||
display: none;
|
||||
.video-thumbnail {
|
||||
display: block;
|
||||
}
|
||||
&.current {
|
||||
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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}}">
|
||||
{{#caption}}{{{caption}}}{{/caption}}
|
||||
{{^caption}}{{name}}{{/caption}}
|
||||
</li>{{/images}}
|
||||
{{#images}}<li class="pi-tab-link pi-item-spacing{{#isFirst}} current{{/isFirst}}" data-pi-tab="pi-tab-{{ref}}">{{{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}}">
|
||||
<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}}"/>
|
||||
<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}}}"/>
|
||||
{{#isVideo}}
|
||||
<span class="thumbnail-play-icon-container">
|
||||
<svg class="thumbnail-play-icon" viewBox="0 0 180 180" width="100%" height="100%">
|
||||
|
|
|
|||
Loading…
Reference in a new issue