diff --git a/formats/carousel/Carousel.php b/formats/carousel/Carousel.php index 3e488628..b3fa0542 100644 --- a/formats/carousel/Carousel.php +++ b/formats/carousel/Carousel.php @@ -270,7 +270,12 @@ public function getParamDefinitions( array $definitions ) { $params['slick-rows'] = [ 'type' => 'integer', 'message' => 'srf-paramdesc-carousel-slick-option', - 'default' => 1, + // @see https://github.com/kenwheeler/slick/issues/3110 + // @see https://github.com/kenwheeler/slick/issues/3149 + // despite https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/VisualData/+/a75a24be65e17021a227ac2c3b8f6e02e13f7a90/includes/classes/formats/CarouselResultPrinter.php + // works well + 'default' => 0, + // 'default' => 1, ]; $params['slick-rtl'] = [ @@ -528,7 +533,8 @@ protected function getResultText( SMWQueryResult $results, $outputmode ) { 'div', [ 'class' => 'slick-slide', - 'data-url' => $linkValue + 'data-url' => $linkValue, + 'style' => $inlineStyles['slide'] ], $innerContent ); @@ -537,8 +543,8 @@ protected function getResultText( SMWQueryResult $results, $outputmode ) { $attr = [ 'class' => 'slick-slider' . ( empty( $this->params['class'] ) ? '' : ' ' . $this->params['class'] ) ]; - if ( !empty( $inlineStyles['div'] ) ) { - $attr['style'] = $inlineStyles['div']; + if ( !empty( $inlineStyles['container'] ) ) { + $attr['style'] = $inlineStyles['container']; } $slick_attr = []; @@ -564,9 +570,11 @@ private function getInlineStyles() { if ( empty( $this->params['width'] ) ) { $this->params['width'] = '100%'; } + $img = [ 'object-fit' => 'object-fit: cover' ]; + $container = []; + $slide = []; preg_match( '/^(\d+)(.+)?$/', $this->params['width'], $match ); - $styleImg = [ 'object-fit: cover' ]; $absoluteUnits = [ 'cm', 'mm', 'in', 'px', 'pt', 'pc' ]; $slidestoshow = $this->params['slick-slidestoshow']; @@ -576,21 +584,26 @@ private function getInlineStyles() { if ( empty( $match[2] ) ) { $match[2] = 'px'; } - $styleImg[] = 'max-width:' . ( in_array( $match[2], $absoluteUnits ) ? + $img['max-width'] = '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]; + $container[ $attr ] = "$attr: " . $this->params[$attr]; + + // *** use css inherit attribute instead + // $slide[$attr] = "$attr: " . $this->params[$attr]; } } - return [ 'div' => implode( '; ', $style ), - 'img' => implode( '; ', $styleImg ) ]; + return [ + 'container' => implode( '; ', $container ), + 'img' => implode( '; ', $img ), + 'slide' => implode( '; ', $slide ) + ]; } /** diff --git a/formats/carousel/resources/ext.srf.formats.carousel.css b/formats/carousel/resources/ext.srf.formats.carousel.css index fde144bc..51468713 100644 --- a/formats/carousel/resources/ext.srf.formats.carousel.css +++ b/formats/carousel/resources/ext.srf.formats.carousel.css @@ -41,6 +41,23 @@ text-decoration: underline; } +.slick-slider:not( .adaptiveHeight ) .slick-list, +.slick-slider:not( .adaptiveHeight ) .slick-track, +.slick-slider:not( .adaptiveHeight ) .slick-slide { + height: inherit !important; +} + +.slick-slider:not( .adaptiveHeight ) .slick-track { + display: flex !important; +} + +.slick-slider:not( .adaptiveHeight ) .slick-slide { + position: relative; + display: flex !important; + justify-content: center; + align-items: center; +} + @media screen and (max-width: 800px) { .slick-slide .slick-slide-content.caption-text { display: none; diff --git a/formats/carousel/resources/ext.srf.formats.carousel.js b/formats/carousel/resources/ext.srf.formats.carousel.js index 284b931f..a886c54b 100644 --- a/formats/carousel/resources/ext.srf.formats.carousel.js +++ b/formats/carousel/resources/ext.srf.formats.carousel.js @@ -79,8 +79,20 @@ srf.formats.carousel.prototype = { init: function ( $slide ) { $slide.slick( $slide.data().slick ); + + if ( $slide.data().slick.adaptiveHeight ) { + $slide.addClass( 'adaptiveHeight' ); + } $(".slick-slider .slick-slide").each(function () { + // hide caption frame if title is empty + // and screen < 800px + if ( $( window ).width() < 800 && !$( '.slick-slide-content.caption-title', $( this ) ).length ) { + $( '.slick-slide-content.caption', $( this ) ).hide(); + } else { + $( '.slick-slide-content.caption', $( this ) ).show(); + } + if ( $(this).attr('data-url') ) { // $(this).attr('title', $(this).attr('data-title') ) $(this).css('cursor', 'pointer') @@ -112,12 +124,24 @@ var carousel = new srf.formats.carousel(); $(document).ready(function () { - + + // hide caption frame if title is empty + // and screen < 800px + $( window ).on( 'resize', function () { + $( '.slick-slider' ).each( function () { + $( '.slick-slider .slick-slide' ).each( function () { + if ( $( window ).width() < 800 && !$( '.slick-slide-content.caption-title', $( this ) ).length ) { + $( '.slick-slide-content.caption', $( this ) ).hide(); + } else { + $( '.slick-slide-content.caption', $( this ) ).show(); + } + } ); + } ); + } ); + $(".slick-slider").each(function () { carousel.init( $(this) ); }); - }); })(jQuery, mediaWiki, semanticFormats); -