Skip to content

Commit

Permalink
Fix issue 784 slidesToShow (#793)
Browse files Browse the repository at this point in the history
* fix params error, fix slidesToShow
* refactored styles
* update arrow color
* caption width
* fix test
  • Loading branch information
thomas-topway-it committed Dec 14, 2023
1 parent c07e5be commit 8eb978e
Show file tree
Hide file tree
Showing 3 changed files with 71 additions and 42 deletions.
106 changes: 67 additions & 39 deletions formats/carousel/Carousel.php
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
*
* @license GPL-2.0-or-later
*
* @author thomas-topway-it <[email protected]>
* @author thomas-topway-it for KM-A
*/
namespace SRF;

Expand Down Expand Up @@ -261,10 +261,12 @@ public function getParamDefinitions( array $definitions ) {
'default' => "window",
];

$params['slick-responsive'] = [
'message' => 'srf-paramdesc-carousel-slick-option',
'default' => null,
];
// @see https://github.com/kenwheeler/slick/#responsive-option-example
// $params['slick-responsive'] = [
// 'type' => 'string',
// 'message' => 'srf-paramdesc-carousel-slick-option',
// 'default' => null,
// ];

$params['slick-rows'] = [
'type' => 'integer',
Expand Down Expand Up @@ -398,16 +400,12 @@ protected function getResultText( SMWQueryResult $results, $outputmode ) {

$this->isHTML = true;

// SMWOutputs::requireResource( 'ext.srf.carousel' );
$resourceFormatter->registerResources( [
'ext.srf.carousel',
'ext.srf.carousel.module'
] );

// or ...
// SMWOutputs::requireResource( 'ext.srf.carousel' );

// print_r($data);

/*
* first retrieve explicitly set properties:
* titleproperty, captionproperty, imageproperty, linkproperty
Expand All @@ -422,25 +420,7 @@ protected function getResultText( SMWQueryResult $results, $outputmode ) {
$printReqLabels[ $value['label'] ] = $value['typeid'];
}

$styleAttr = [ 'width', 'height' ];
$style = [];
foreach( $styleAttr as $attr ) {
if ( !empty( $this->params[$attr] ) ) {
$style[ $attr ] = "$attr: " . $this->params[$attr];
}
}

if ( !array_key_exists( 'width', $style ) ) {
$style[ 'width' ] = 'width: 100%';
}

$styleImg = array_map( static function ( $value ) {
// return 'max-' . $value;
return $value;
}, $style );

$styleImg[] = 'object-fit: cover';
$styleImg = implode( '; ', $styleImg );
$inlineStyles = $this->getInlineStyles();

$parser = MediaWikiServices::getInstance()->getParser();
$items = [];
Expand Down Expand Up @@ -526,12 +506,17 @@ protected function getResultText( SMWQueryResult $results, $outputmode ) {
$captionValue = $parser->recursiveTagParse( $captionValue );
}

$innerContent = Html::rawElement( 'img', [
'src' => $imageValue,
'alt' => ( $titleValue ?? $captionValue ? strip_tags( $captionValue ) : $title_->getText() ),
'style' => $styleImg,
'class' => "slick-slide-content img"
] );
$imgAttr = [
'src' => $imageValue,
'alt' => ( $titleValue ?? $captionValue ? strip_tags( $captionValue ) : $title_->getText() ),
'class' => "slick-slide-content img"
];

if ( !empty( $inlineStyles['img'] ) ) {
$imgAttr['style'] = $inlineStyles['img'];
}

$innerContent = Html::rawElement( 'img', $imgAttr );

if ( $titleValue || $captionValue ) {
$innerContent .= Html::rawElement( 'div', [ 'class' => 'slick-slide-content caption' ],
Expand All @@ -552,9 +537,9 @@ protected function getResultText( SMWQueryResult $results, $outputmode ) {
} // loop through pages

$attr = [ 'class' => 'slick-slider' . ( empty( $this->params['class'] ) ? '' : ' ' . $this->params['class'] ) ];

if ( count( $style ) ) {
$attr['style'] = implode( '; ', $style );
if ( !empty( $inlineStyles['div'] ) ) {
$attr['style'] = $inlineStyles['div'];
}

$slick_attr = [];
Expand All @@ -572,7 +557,47 @@ protected function getResultText( SMWQueryResult $results, $outputmode ) {
implode( $items )
);
}

/**
* @return array
*/
private function getInlineStyles() {
if ( empty( $this->params['width'] ) ) {
$this->params['width'] = '100%';
}

preg_match( '/^(\d+)(.+)?$/', $this->params['width'], $match );
$styleImg = [ 'object-fit: cover' ];

$absoluteUnits = [ 'cm', 'mm', 'in', 'px', 'pt', 'pc' ];
$slidestoshow = $this->params['slick-slidestoshow'];

// @see https://github.com/SemanticMediaWiki/SemanticResultFormats/issues/784
if ( !empty( $slidestoshow ) && is_int( $slidestoshow ) && !empty( $match[1] ) ) {
if ( empty( $match[2] ) ) {
$match[2] = 'px';
}
$styleImg[] = 'max-width:' . ( in_array( $match[2], $absoluteUnits ) ?
( $match[1] / $slidestoshow ) . $match[2]
: '100%' );
}

$styleAttr = [ 'width', 'height' ];
$style = [];
foreach( $styleAttr as $attr ) {
if ( !empty( $this->params[$attr] ) ) {
$style[ $attr ] = "$attr: " . $this->params[$attr];
}
}

return [ 'div' => implode( '; ', $style ),
'img' => implode( '; ', $styleImg ) ];
}

/**
* @param array $array
* @return string|null
*/
protected function getFirstValid( $array ) {
// *** or use array_filter with no arguments, then
// retrieve the first entry
Expand All @@ -584,6 +609,10 @@ protected function getFirstValid( $array ) {
return null;
}

/**
* @param array $value
* @return string|null
*/
protected function getImage( $value ) {
if ( !is_array( $value ) || !array_key_exists( 'fullurl', $value ) || $value['namespace'] !== NS_FILE ) {
return null;
Expand All @@ -601,4 +630,3 @@ protected function getImage( $value ) {
}

}

3 changes: 2 additions & 1 deletion formats/carousel/resources/ext.srf.formats.carousel.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@

.slick-prev:before,
.slick-next:before {
color: white;
color: #3498db;
font-size: 30px;
}

Expand All @@ -26,6 +26,7 @@
background: rgba(0,0,0,.65);
color: white;
font-size: smaller;
width: 100%;
}

.slick-slide .slick-slide-content.caption-title {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
"subject": "Test/Carousel/T.1",
"assert-output": {
"to-contain": [
"<div class=\"slick-slide\" data-url=\".*/index.php/File:Gallery01.png\"><img src=\".*/images/7/7f/Gallery01.png\" alt=\"caption a\" style=\"height: 400px; width: 100%; object-fit: cover\" class=\"slick-slide-content img\" /><div class=\"slick-slide-content caption\"><div class=\"slick-slide-content caption-title\">title a</div><div class=\"slick-slide-content caption-text\">caption a</div></div></div></div>"
"<div class=\"slick-slide\" data-url=\".*/index.php/File:Gallery01.png\"><img src=\".*/images/7/7f/Gallery01.png\" alt=\"caption a\".* class=\"slick-slide-content img\".*/><div class=\"slick-slide-content caption\"><div class=\"slick-slide-content caption-title\">title a</div><div class=\"slick-slide-content caption-text\">caption a</div></div></div></div>"
]
}

Expand All @@ -63,7 +63,7 @@
"subject": "Test/Carousel/T.2",
"assert-output": {
"to-contain": [
"<div class=\"slick-slide\" data-url=\".*/index.php/Test/Carousel_test\"><img src=\".*/images/7/7f/Gallery01.png\" alt=\"abc\" style=\"height: 400px; width: 100%; object-fit: cover\" class=\"slick-slide-content img\" /><div class=\"slick-slide-content caption\"><div class=\"slick-slide-content caption-title\">Carousel test</div><div class=\"slick-slide-content caption-text\">abc</div></div></div></div>"
"<div class=\"slick-slide\" data-url=\".*/index.php/Test/Carousel_test\"><img src=\".*/images/7/7f/Gallery01.png\" alt=\"abc\".* class=\"slick-slide-content img\".*/><div class=\"slick-slide-content caption\"><div class=\"slick-slide-content caption-title\">Carousel test</div><div class=\"slick-slide-content caption-text\">abc</div></div></div></div>"
]
}
}
Expand Down

0 comments on commit 8eb978e

Please sign in to comment.