From 2de5d0d971f9411b56b13d70ccf3a479eacaf73a Mon Sep 17 00:00:00 2001 From: thomas-topway-it Date: Fri, 27 Oct 2023 21:20:28 +0400 Subject: [PATCH 1/5] fix params error, fix slidesToShow --- formats/carousel/Carousel.php | 51 ++++++++++++++++++++--------------- 1 file changed, 30 insertions(+), 21 deletions(-) diff --git a/formats/carousel/Carousel.php b/formats/carousel/Carousel.php index f7cd1e084..0c85dfb6c 100644 --- a/formats/carousel/Carousel.php +++ b/formats/carousel/Carousel.php @@ -4,7 +4,7 @@ * * @license GPL-2.0-or-later * - * @author thomas-topway-it + * @author thomas-topway-it for KM-A */ namespace SRF; @@ -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', @@ -406,8 +408,6 @@ protected function getResultText( SMWQueryResult $results, $outputmode ) { // or ... // SMWOutputs::requireResource( 'ext.srf.carousel' ); - // print_r($data); - /* * first retrieve explicitly set properties: * titleproperty, captionproperty, imageproperty, linkproperty @@ -422,6 +422,28 @@ protected function getResultText( SMWQueryResult $results, $outputmode ) { $printReqLabels[ $value['label'] ] = $value['typeid']; } + $slidestoshow = $this->params['slick-slidestoshow']; + + 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' ]; + + // @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 ) { @@ -430,18 +452,6 @@ protected function getResultText( SMWQueryResult $results, $outputmode ) { } } - 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 ); - $parser = MediaWikiServices::getInstance()->getParser(); $items = []; foreach( $data['query']['result']['results'] as $titleText => $value ) { @@ -529,7 +539,7 @@ protected function getResultText( SMWQueryResult $results, $outputmode ) { $innerContent = Html::rawElement( 'img', [ 'src' => $imageValue, 'alt' => ( $titleValue ?? $captionValue ? strip_tags( $captionValue ) : $title_->getText() ), - 'style' => $styleImg, + 'style' => implode( '; ', $styleImg ), 'class' => "slick-slide-content img" ] ); @@ -601,4 +611,3 @@ protected function getImage( $value ) { } } - From b47f98371b2d6830ea03aab1961d82fa45acf772 Mon Sep 17 00:00:00 2001 From: thomas-topway-it Date: Tue, 31 Oct 2023 22:06:15 +0400 Subject: [PATCH 2/5] refactored styles --- formats/carousel/Carousel.php | 101 ++++++++++++++++++++-------------- 1 file changed, 60 insertions(+), 41 deletions(-) diff --git a/formats/carousel/Carousel.php b/formats/carousel/Carousel.php index 0c85dfb6c..c17c3419b 100644 --- a/formats/carousel/Carousel.php +++ b/formats/carousel/Carousel.php @@ -400,14 +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' ); - /* * first retrieve explicitly set properties: * titleproperty, captionproperty, imageproperty, linkproperty @@ -422,35 +420,7 @@ protected function getResultText( SMWQueryResult $results, $outputmode ) { $printReqLabels[ $value['label'] ] = $value['typeid']; } - $slidestoshow = $this->params['slick-slidestoshow']; - - 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' ]; - - // @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]; - } - } + $inlineStyles = $this->getInlineStyles(); $parser = MediaWikiServices::getInstance()->getParser(); $items = []; @@ -536,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' => implode( '; ', $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' ], @@ -562,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 = []; @@ -582,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 @@ -594,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; From 003cef1250b6e6bd2bbe436cb4d2df21170e987a Mon Sep 17 00:00:00 2001 From: thomas-topway-it Date: Tue, 31 Oct 2023 22:06:49 +0400 Subject: [PATCH 3/5] update arrow color --- formats/carousel/resources/ext.srf.formats.carousel.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/formats/carousel/resources/ext.srf.formats.carousel.css b/formats/carousel/resources/ext.srf.formats.carousel.css index 86d514965..d50638f31 100644 --- a/formats/carousel/resources/ext.srf.formats.carousel.css +++ b/formats/carousel/resources/ext.srf.formats.carousel.css @@ -1,7 +1,7 @@ .slick-prev:before, .slick-next:before { - color: white; + color: #3498db; font-size: 30px; } From 1f4ef7457fcbc6ac6797b73cae5745bf0846ec2b Mon Sep 17 00:00:00 2001 From: thomas-topway-it Date: Tue, 31 Oct 2023 23:01:33 +0400 Subject: [PATCH 4/5] caption width --- formats/carousel/resources/ext.srf.formats.carousel.css | 1 + 1 file changed, 1 insertion(+) diff --git a/formats/carousel/resources/ext.srf.formats.carousel.css b/formats/carousel/resources/ext.srf.formats.carousel.css index d50638f31..3a0d6a5b2 100644 --- a/formats/carousel/resources/ext.srf.formats.carousel.css +++ b/formats/carousel/resources/ext.srf.formats.carousel.css @@ -26,6 +26,7 @@ background: rgba(0,0,0,.65); color: white; font-size: smaller; + width: 100%; } .slick-slide .slick-slide-content.caption-title { From 6bca9ca47cfa65118ccb675a4f6477a84391e11a Mon Sep 17 00:00:00 2001 From: thomas-topway-it Date: Wed, 8 Nov 2023 00:34:03 +0400 Subject: [PATCH 5/5] fix test --- .../phpunit/Integration/JSONScript/TestCases/carousel-01.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/phpunit/Integration/JSONScript/TestCases/carousel-01.json b/tests/phpunit/Integration/JSONScript/TestCases/carousel-01.json index c35802884..294cb0194 100644 --- a/tests/phpunit/Integration/JSONScript/TestCases/carousel-01.json +++ b/tests/phpunit/Integration/JSONScript/TestCases/carousel-01.json @@ -52,7 +52,7 @@ "subject": "Test/Carousel/T.1", "assert-output": { "to-contain": [ - "
\"caption
title a
caption a
" + "
\"caption
title a
caption a
" ] } @@ -63,7 +63,7 @@ "subject": "Test/Carousel/T.2", "assert-output": { "to-contain": [ - "
\"abc\"
Carousel test
abc
" + "
\"abc\".*
Carousel test
abc
" ] } }