Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix issue 784 slidesToShow #793

Merged
merged 5 commits into from
Dec 14, 2023
Merged

Fix issue 784 slidesToShow #793

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2de5d0d
fix params error, fix slidesToShow
thomas-topway-it Oct 27, 2023
b47f983
refactored styles
thomas-topway-it Oct 31, 2023
003cef1
update arrow color
thomas-topway-it Oct 31, 2023
1f4ef74
caption width
thomas-topway-it Oct 31, 2023
6bca9ca
fix test
thomas-topway-it Nov 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 67 additions & 39 deletions formats/carousel/Carousel.php
View file
Open in desktop
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
View file
Open in desktop
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
4 changes: 2 additions & 2 deletions tests/phpunit/Integration/JSONScript/TestCases/carousel-01.json
View file
Open in desktop
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
Loading