Skip to content

Commit

Permalink
Moved generating image tags to view helper
Browse files Browse the repository at this point in the history
  • Loading branch information
aimeos committed Feb 24, 2020
1 parent 4dbc3b5 commit a35b565
Show file tree
Hide file tree
Showing 12 changed files with 316 additions and 68 deletions.
38 changes: 4 additions & 34 deletions client/html/templates/catalog/detail/image-partial-bottom.php
Original file line number Diff line number Diff line change
Expand Up @@ -7,47 +7,31 @@
*/

/* Available data:
* - productItem : Product item incl. referenced items
* - params : Request parameters for this detail view
* - mediaItems : Media items incl. referenced items
*/

$enc = $this->encoder();

$getVariantData = function( \Aimeos\MShop\Media\Item\Iface $mediaItem ) use ( $enc )
{
$string = '';

foreach( $mediaItem->getRefItems( 'attribute', null, 'variant' ) as $id => $item ) {
$string .= ' data-variant-' . $item->getType() . '="' . $enc->attr( $id ) . '"';
}

return $string;
};


$detailTarget = $this->config( 'client/html/catalog/detail/url/target' );
$detailController = $this->config( 'client/html/catalog/detail/url/controller', 'catalog' );
$detailAction = $this->config( 'client/html/catalog/detail/url/action', 'detail' );
$detailConfig = $this->config( 'client/html/catalog/detail/url/config', [] );

$url = $enc->attr( $this->url( $detailTarget, $detailController, $detailAction, $this->get( 'params', [] ), [], $detailConfig ) );
$mediaItems = $this->get( 'mediaItems', [] );


?>
<div class="catalog-detail-image">

<?php if( ( $num = count( $mediaItems ) ) > 1 ) : $class = 'item selected'; ?>
<?php if( ( $num = count( $this->get( 'mediaItems', [] ) ) ) > 1 ) : $class = 'item selected'; ?>
<div class="image-thumbs thumbs-vertical" data-slick='{"slidesToShow": 4, "slidesToScroll": 4, "vertical": true, "verticalSwiping": true}'><!--
<?php if( $num > 4 ) : ?>
--><button type="button" class="slick-prev"><?= $enc->html( $this->translate( 'client', 'Previous' ) ); ?></button><!--
<?php endif ?>
--><div class="thumbs"><!--

<?php foreach( $mediaItems as $id => $mediaItem ) : ?>
<?php foreach( $this->get( 'mediaItems', [] ) as $id => $mediaItem ) : ?>
--><a class="<?= $class; ?>" style="background-image: url('<?= $enc->attr( $this->content( $mediaItem->getPreview() ) ); ?>')"
href="<?= $url . '#image-' . $enc->attr( $id ); ?>"
href="<?= $enc->attr( $this->url( $detailTarget, $detailController, $detailAction, $this->get( 'params', [] ), [], $detailConfig ) ) . '#image-' . $enc->attr( $id ); ?>"
></a><!--
<?php $class = 'item'; ?>
<?php endforeach; ?>
Expand All @@ -62,22 +46,8 @@
--><div class="image-single" data-pswp="{bgOpacity: 0.75, shareButtons: false}">

<?php foreach( $mediaItems as $id => $mediaItem ) : ?>
<?php
$sources = [];
foreach( $mediaItem->getPreviews() as $type => $path ) {
$sources[$type] = $this->content( $path );
}
?>
<div id="image-<?= $enc->attr( $id ); ?>" class="media-item">
<img class="item"
src="<?= $enc->attr( $this->content( $mediaItem->getPreview() ) ) ?>"
srcset="<?= $enc->attr( $this->imageset( $mediaItem->getPreviews() ) ) ?>"
itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject"
data-image="<?= $enc->attr( $this->content( $mediaItem->getPreview() ) ) ?>"
data-sources="<?= $enc->attr( json_encode( $sources, JSON_FORCE_OBJECT ) ) ?>"
alt="<?= $enc->html( $mediaItem->getName() ); ?>"
<?= $getVariantData( $mediaItem ); ?>
/>
<?= $this->image( $mediaItem ) ?>
</div>
<?php endforeach; ?>

Expand Down
38 changes: 4 additions & 34 deletions client/html/templates/catalog/detail/image-partial-standard.php
Original file line number Diff line number Diff line change
Expand Up @@ -7,62 +7,32 @@
*/

/* Available data:
* - productItem : Product item incl. referenced items
* - params : Request parameters for this detail view
* - mediaItems : Media items incl. referenced items
*/

$enc = $this->encoder();

$getVariantData = function( \Aimeos\MShop\Media\Item\Iface $mediaItem ) use ( $enc )
{
$string = '';

foreach( $mediaItem->getRefItems( 'attribute', null, 'variant' ) as $id => $item ) {
$string .= ' data-variant-' . $item->getType() . '="' . $enc->attr( $id ) . '"';
}

return $string;
};


$detailTarget = $this->config( 'client/html/catalog/detail/url/target' );
$detailController = $this->config( 'client/html/catalog/detail/url/controller', 'catalog' );
$detailAction = $this->config( 'client/html/catalog/detail/url/action', 'detail' );
$detailConfig = $this->config( 'client/html/catalog/detail/url/config', [] );

$url = $enc->attr( $this->url( $detailTarget, $detailController, $detailAction, $this->get( 'params', [] ), [], $detailConfig ) );
$mediaItems = $this->get( 'mediaItems', [] );


?>
<div class="catalog-detail-image">

<div class="image-single" data-pswp="{bgOpacity: 0.75, shareButtons: false}">

<?php foreach( $mediaItems as $id => $mediaItem ) : ?>
<?php
$sources = [];
foreach( $mediaItem->getPreviews() as $type => $path ) {
$sources[$type] = $this->content( $path );
}
?>
<?php foreach( $this->get( 'mediaItems', [] ) as $id => $mediaItem ) : ?>
<div id="image-<?= $enc->attr( $id ); ?>" class="media-item">
<img class="item"
src="<?= $enc->attr( $this->content( $mediaItem->getPreview() ) ) ?>"
srcset="<?= $enc->attr( $this->imageset( $mediaItem->getPreviews() ) ) ?>"
itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject"
data-image="<?= $enc->attr( $this->content( $mediaItem->getPreview() ) ) ?>"
data-sources="<?= $enc->attr( json_encode( $sources, JSON_FORCE_OBJECT ) ) ?>"
alt="<?= $enc->html( $mediaItem->getName() ); ?>"
<?= $getVariantData( $mediaItem ); ?>
/>
<?= $this->image( $mediaItem ) ?>
</div>
<?php endforeach; ?>

</div><!--

--><?php if( ( $num = count( $mediaItems ) ) > 1 ) : $class = 'item selected'; ?>
--><?php if( ( $num = count( $this->get( 'mediaItems', [] ) ) ) > 1 ) : $class = 'item selected'; ?>
<div class="image-thumbs thumbs-horizontal" data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'><!--
<?php if( $num > 4 ) : ?>
--><button type="button" class="slick-prev"><?= $enc->html( $this->translate( 'client', 'Previous' ) ); ?></button><!--
Expand All @@ -73,7 +43,7 @@
<?php $previewUrl = $enc->attr( $this->content( $mediaItem->getPreview() ) ); ?>

--><a class="<?= $class; ?>" style="background-image: url('<?= $previewUrl; ?>')"
href="<?= $url . '#image-' . $enc->attr( $id ); ?>"
href="<?= $enc->attr( $this->url( $detailTarget, $detailController, $detailAction, $this->get( 'params', [] ), [], $detailConfig ) ) . '#image-' . $enc->attr( $id ); ?>"
></a><!--

<?php $class = 'item'; ?>
Expand Down
38 changes: 38 additions & 0 deletions lib/custom/build.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<?xml version="1.0" encoding="UTF-8"?>

<project name="ai-client-html extension - custom library extensions" default="test">

<target name="test" description="Executes unit tests">
<echo msg="Executing unit tests" />
<delete file="tests/unittest.log" quiet="true" failonerror="false" />
<exec command="${bindir}phpunit -d memory_limit=-1 --include-path ${coredir} --configuration=phpunit.xml ."
dir="tests" checkreturn="true" logoutput="true" passthru="true" />
</target>

<target name="coverage" description="Generates code coverage report">
<echo msg="Generating code coverage report" />
<delete file="tests/unittests.log" quiet="true" failonerror="false" />
<delete dir="tests/coverage" quiet="true" failonerror="false" />
<exec command="${bindir}phpunit -d memory_limit=-1 --include-path ${coredir} --configuration=phpunit-coverage.xml ."
dir="tests" checkreturn="true" logoutput="true" passthru="true" />
</target>

<target name="check" description="Executes code sniffer">
<echo msg="Executing code sniffer" />
<exec command="${bindir}phpcs -n --standard=${codestddir}/Aimeos src tests/MW"
checkreturn="true" logoutput="true" passthru="true" />
</target>

<target name="clean" description="Cleans up temporary files">
<delete dir="tests/coverage" quiet="true" failonerror="false" />
<delete quiet="true" failonerror="false" >
<fileset dir="tests">
<include name="*.log" />
</fileset>
</delete>
</target>

<target name="all" depends="coverage,check" description="Builds all parts of the package">
</target>

</project>
29 changes: 29 additions & 0 deletions lib/custom/src/MW/View/Helper/Image/Iface.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<?php

/**
* @license LGPLv3, http://opensource.org/licenses/LGPL-3.0
* @copyright Aimeos (aimeos.org), 2019-2020
* @package MW
* @subpackage View
*/


namespace Aimeos\MW\View\Helper\Image;


/**
* View helper class for creating an HTML image tag
*
* @package MW
* @subpackage View
*/
interface Iface extends \Aimeos\MW\View\Helper\Iface
{
/**
* Returns the HTML image tag for the given media item
*
* @param \Aimeos\MShop\Media\Item\Iface $media Media item
* @return string HTML image tag
*/
public function transform( \Aimeos\MShop\Media\Item\Iface $media ) : string;
}
54 changes: 54 additions & 0 deletions lib/custom/src/MW/View/Helper/Image/Standard.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<?php

/**
* @license LGPLv3, http://opensource.org/licenses/LGPL-3.0
* @copyright Aimeos (aimeos.org), 2019-2020
* @package MW
* @subpackage View
*/


namespace Aimeos\MW\View\Helper\Image;


/**
* View helper class for creating an HTML image tag
*
* @package MW
* @subpackage View
*/
class Standard
extends \Aimeos\MW\View\Helper\Base
implements \Aimeos\MW\View\Helper\Image\Iface
{
/**
* Returns the HTML image tag for the given media item
*
* @param \Aimeos\MShop\Media\Item\Iface $media Media item
* @return string HTML image tag
*/
public function transform( \Aimeos\MShop\Media\Item\Iface $media ) : string
{
$view = $this->getView();
$enc = $view->encoder();

$sources = [];
foreach( $media->getPreviews() as $type => $path ) {
$sources[$type] = $this->content( $path );
}

$variant = '';
foreach( $media->getRefItems( 'attribute', null, 'variant' ) as $id => $item ) {
$variant .= ' data-variant-' . $item->getType() . '="' . $enc->attr( $id ) . '"';
}

return '<img class="item"
itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject"
src="' . $enc->attr( $view->content( $media->getPreview() ) ) . '"
srcset="' . $enc->attr( $view->imageset( $media->getPreviews() ) ) . '"
data-image="' . $enc->attr( $view->content( $media->getPreview() ) ) . '"
data-sources="' . $enc->attr( json_encode( $sources, JSON_FORCE_OBJECT ) ) . '"
alt="' . $enc->html( $media->getName() ) . '"' . $variant . '
/>';
}
}
51 changes: 51 additions & 0 deletions lib/custom/tests/MW/View/Helper/Image/StandardTest.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<?php

/**
* @license LGPLv3, http://opensource.org/licenses/LGPL-3.0
* @copyright Aimeos (aimeos.org), 2020
*/


namespace Aimeos\MW\View\Helper\Image;


class StandardTest extends \PHPUnit\Framework\TestCase
{
private $object;


protected function setUp() : void
{
$view = new \Aimeos\MW\View\Standard();
$view->addHelper( 'content', new \Aimeos\MW\View\Helper\Content\Standard( $view, '/path/to' ) );
$view->addHelper( 'encoder', new \Aimeos\MW\View\Helper\Encoder\Standard( $view ) );

$this->object = new \Aimeos\MW\View\Helper\Image\Standard( $view );
}


protected function tearDown() : void
{
unset( $this->object );
}


public function testTransform()
{
$context = \TestHelper::getContext();
$manager = \Aimeos\MShop::create( $context, 'media' );

$attrItem = \Aimeos\MShop::create( $context, 'attribute' )->createItem()->setType( 'color' )->setId( 123 );
$listItem = $manager->createListsItem()->setType( 'variant' );

$mediaItem = $manager->createItem()->setLabel( 'testimage' )
->setPreviews( ['100' => 'image-1.jpg', '200' => 'image-2.jpg'] )
->addListItem( 'attribute', $listItem, $attrItem );

$result = $this->object->transform( $mediaItem );

$this->assertStringContainsString( '/path/to/image-1.jpg 100w, /path/to/image-2.jpg 200w', $result );
$this->assertStringContainsString( 'src="/path/to/image-1.jpg"', $result );
$this->assertStringContainsString( 'data-variant-color="123"', $result );
}
}
Loading

0 comments on commit a35b565

Please sign in to comment.