Merge pull request #691 from magento-vanilla/MAGETWO-32170--JS-51

[Sky EPAM] Gallery
magento · Oct 14, 2015 · 9d31376 · 9d31376
2 parents 9ae5bba + 6e6bad7
commit 9d31376
Show file tree

Hide file tree

Showing 34 changed files with 2,295 additions and 680 deletions.
diff --git a/app/code/Magento/Catalog/Block/Product/View/Gallery.php b/app/code/Magento/Catalog/Block/Product/View/Gallery.php
@@ -12,6 +12,7 @@
 namespace Magento\Catalog\Block\Product\View;
 
 use Magento\Framework\Data\Collection;
+use Magento\Framework\Json\EncoderInterface;
 use Magento\Catalog\Helper\Image;
 
 class Gallery extends \Magento\Catalog\Block\Product\View\AbstractView
@@ -21,6 +22,27 @@ class Gallery extends \Magento\Catalog\Block\Product\View\AbstractView
      */
     protected $configView;
 
+    /**
+     * @var \Magento\Framework\Json\EncoderInterface
+     */
+    protected $jsonEncoder;
+
+    /**
+     * @param \Magento\Catalog\Block\Product\Context $context
+     * @param \Magento\Framework\Stdlib\ArrayUtils $arrayUtils
+     * @param EncoderInterface $jsonEncoder
+     * @param array $data
+     */
+    public function __construct(
+        \Magento\Catalog\Block\Product\Context $context,
+        \Magento\Framework\Stdlib\ArrayUtils $arrayUtils,
+        EncoderInterface $jsonEncoder,
+        array $data = []
+    ) {
+        $this->jsonEncoder = $jsonEncoder;
+        parent::__construct($context, $arrayUtils, $data);
+    }
+
     /**
      * Retrieve collection of gallery images
      *
@@ -42,12 +64,14 @@ public function getGalleryImages()
                 $image->setData(
                     'medium_image_url',
                     $this->_imageHelper->init($product, 'product_page_image_medium')
+                        ->constrainOnly(true)->keepAspectRatio(true)->keepFrame(false)
                         ->setImageFile($image->getFile())
                         ->getUrl()
                 );
                 $image->setData(
                     'large_image_url',
                     $this->_imageHelper->init($product, 'product_page_image_large')
+                        ->constrainOnly(true)->keepAspectRatio(true)->keepFrame(false)
                         ->setImageFile($image->getFile())
                         ->getUrl()
                 );
@@ -57,6 +81,26 @@ public function getGalleryImages()
         return $images;
     }
 
+    /**
+     * Return magnifier options
+     *
+     * @return string
+     */
+    public function getMagnifier()
+    {
+        return $this->jsonEncoder->encode($this->getVar('magnifier'));
+    }
+
+    /**
+     * Return breakpoints options
+     *
+     * @return string
+     */
+    public function getBreakpoints()
+    {
+        return $this->jsonEncoder->encode($this->getVar('breakpoints'));
+    }
+
     /**
      * Retrieve product images in JSON format
      *
@@ -69,12 +113,22 @@ public function getGalleryImagesJson()
             $imagesItems[] = [
                 'thumb' => $image->getData('small_image_url'),
                 'img' => $image->getData('medium_image_url'),
-                'original' => $image->getData('large_image_url'),
+                'full' => $image->getData('large_image_url'),
                 'caption' => $image->getLabel(),
                 'position' => $image->getPosition(),
                 'isMain' => $this->isMainImage($image),
             ];
         }
+        if (empty($imagesItems)) {
+            $imagesItems[] = [
+                'thumb' => $this->_imageHelper->getDefaultPlaceholderUrl('thumbnail'),
+                'img' => $this->_imageHelper->getDefaultPlaceholderUrl('image'),
+                'full' => $this->_imageHelper->getDefaultPlaceholderUrl('image'),
+                'caption' => '',
+                'position' => '0',
+                'isMain' => true,
+            ];
+        }
         return json_encode($imagesItems);
     }
 

diff --git a/app/code/Magento/Catalog/Helper/Image.php b/app/code/Magento/Catalog/Helper/Image.php
@@ -436,11 +436,13 @@ public function placeholder($fileName)
      */
     public function getPlaceholder($placeholder = null)
     {
-        if (!$this->_placeholder) {
-            $placeholder = $placeholder ? : $this->_getModel()->getDestinationSubdir();
-            $this->_placeholder = 'Magento_Catalog::images/product/placeholder/' . $placeholder . '.jpg';
+        if ($placeholder) {
+            $placeholderFullPath = 'Magento_Catalog::images/product/placeholder/' . $placeholder . '.jpg';
+        } else {
+            $placeholderFullPath = $this->_placeholder
+                ?: 'Magento_Catalog::images/product/placeholder/' . $this->_getModel()->getDestinationSubdir() . '.jpg';
         }
-        return $this->_placeholder;
+        return $placeholderFullPath;
     }
 
     /**
@@ -816,7 +818,7 @@ public function getWidth()
      */
     public function getHeight()
     {
-        return $this->getAttribute('height') ? : $this->getAttribute('width');
+        return $this->getAttribute('height') ?: $this->getAttribute('width');
     }
 
     /**

diff --git a/app/code/Magento/Catalog/Model/Product.php b/app/code/Magento/Catalog/Model/Product.php
@@ -19,6 +19,7 @@
  * Catalog product model
  *
  * @method Product setHasError(bool $value)
+ * @method \Magento\Catalog\Model\ResourceModel\Product getResource()
  * @method null|bool getHasError()
  * @method Product setAssociatedProductIds(array $productIds)
  * @method array getAssociatedProductIds()

diff --git a/app/code/Magento/Catalog/Model/Product/Image.php b/app/code/Magento/Catalog/Model/Product/Image.php
@@ -19,6 +19,9 @@
  * @SuppressWarnings(PHPMD.TooManyFields)
  * @SuppressWarnings(PHPMD.ExcessiveClassComplexity)
  * @SuppressWarnings(PHPMD.CouplingBetweenObjects)
+ * @method string getFile()
+ * @method string getLabel()
+ * @method string getPosition()
  */
 class Image extends \Magento\Framework\Model\AbstractModel
 {

diff --git a/app/code/Magento/Catalog/Test/Unit/Block/Product/View/GalleryTest.php b/app/code/Magento/Catalog/Test/Unit/Block/Product/View/GalleryTest.php
@@ -32,6 +32,11 @@ class GalleryTest extends \PHPUnit_Framework_TestCase
      */
     protected $registry;
 
+    /**
+     * @var \Magento\Framework\Json\EncoderInterface|\PHPUnit_Framework_MockObject_MockObject
+     */
+    protected $jsonEncoderMock;
+
     protected function setUp()
     {
         $this->mockContext();
@@ -40,9 +45,14 @@ protected function setUp()
             ->disableOriginalConstructor()
             ->getMock();
 
+        $this->jsonEncoderMock = $this->getMockBuilder('Magento\Framework\Json\EncoderInterface')
+            ->disableOriginalConstructor()
+            ->getMock();
+
         $this->model = new \Magento\Catalog\Block\Product\View\Gallery(
             $this->context,
-            $this->arrayUtils
+            $this->arrayUtils,
+            $this->jsonEncoderMock
         );
     }
 
@@ -103,7 +113,8 @@ public function testGetGalleryImages()
                 [$productMock, 'product_page_image_small', [], $this->imageHelper],
                 [$productMock, 'product_page_image_medium', [], $this->imageHelper],
                 [$productMock, 'product_page_image_large', [], $this->imageHelper],
-            ]);
+            ])
+            ->willReturnSelf();
         $this->imageHelper->expects($this->exactly(3))
             ->method('setImageFile')
             ->with('test_file')
@@ -118,6 +129,19 @@ public function testGetGalleryImages()
             ->method('getUrl')
             ->willReturn('product_page_image_large_url');
 
+        $this->imageHelper->expects($this->exactly(2))
+            ->method('constrainOnly')
+            ->with(true)
+            ->willReturnSelf();
+        $this->imageHelper->expects($this->exactly(2))
+            ->method('keepAspectRatio')
+            ->with(true)
+            ->willReturnSelf();
+         $this->imageHelper->expects($this->exactly(2))
+            ->method('keepFrame')
+            ->with(false)
+            ->willReturnSelf();
+
         $images = $this->model->getGalleryImages();
         $this->assertInstanceOf('Magento\Framework\Data\Collection', $images);
     }

diff --git a/app/code/Magento/Catalog/view/frontend/templates/product/view/gallery.phtml b/app/code/Magento/Catalog/view/frontend/templates/product/view/gallery.phtml
@@ -12,49 +12,50 @@
  * @var $block \Magento\Catalog\Block\Product\View\Gallery
  */
 ?>
-<div class="gallery-placeholder"></div>
+<div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder">
+    <div data-role="loader" class="loading-mask">
+        <div class="loader">
+            <img src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>"
+                 alt="<?php /* @escapeNotVerified */ echo __('Loading...') ?>">
+        </div>
+    </div>
+</div>
 <script type="text/x-magento-init">
     {
-        ".gallery-placeholder": {
+        "[data-gallery-role=gallery-placeholder]": {
             "mage/gallery/gallery": {
                 "mixins":["magnifier/magnify"],
-                "magnifierOpts": {
-                    "enabled": <?php /* @escapeNotVerified */ echo $block->getVar("magnifier:enabled"); ?>,
-                    "eventType": "<?php /* @escapeNotVerified */ echo $block->getVar("magnifier:eventType"); ?>",
-                    "width": "<?php /* @escapeNotVerified */ echo $block->getVar("magnifier:width"); ?>",
-                    "height": "<?php /* @escapeNotVerified */ echo $block->getVar("magnifier:height"); ?>",
-                    "top": "<?php /* @escapeNotVerified */ echo $block->getVar("magnifier:top"); ?>",
-                    "left": "<?php /* @escapeNotVerified */ echo $block->getVar("magnifier:left"); ?>"
-                },
+                "magnifierOpts": <?php /* @escapeNotVerified */ echo $block->getMagnifier(); ?>,
                 "data": <?php /* @escapeNotVerified */ echo $block->getGalleryImagesJson(); ?>,
                 "options": {
-                    "nav": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery:nav"); ?>",
-                    "loop": <?php /* @escapeNotVerified */ echo $block->getVar("gallery:loop"); ?>,
-                    "keyboard": <?php /* @escapeNotVerified */ echo $block->getVar("gallery:keyboard"); ?>,
-                    "arrows": <?php /* @escapeNotVerified */ echo $block->getVar("gallery:arrows"); ?>,
-                    "showCaption": <?php /* @escapeNotVerified */ echo $block->getVar("gallery:showCaption"); ?>,
+                    "nav": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/nav"); ?>",
+                    "loop": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/loop"); ?>,
+                    "keyboard": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/keyboard"); ?>,
+                    "arrows": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/arrows"); ?>,
+                    "allowfullscreen": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/allowfullscreen"); ?>,
+                    "showCaption": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/caption"); ?>,
                     "width": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'width'); ?>,
                     "thumbwidth": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'width'); ?>,
                     "thumbheight": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'height')
                         ?: $block->getImageAttribute('product_page_image_small', 'width'); ?>,
                     "height": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'height')
-                        ?: $block->getImageAttribute('product_page_image_medium', 'width'); ?>
+                        ?: $block->getImageAttribute('product_page_image_medium', 'width'); ?>,
+                    "transitionduration": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/transition/duration"); ?>,
+                    "transition": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/transition/effect"); ?>",
+                    "navarrows": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/navarrows"); ?>,
+                    "navtype": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/navtype"); ?>",
+                    "navdir": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/navdir"); ?>"
+                },
+                "fullscreen": {
+                    "nav": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/nav"); ?>",
+                    "loop": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/loop"); ?>,
+                    "navdir": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/navdir"); ?>",
+                    "arrows": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/arrows"); ?>,
+                    "showCaption": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/caption"); ?>,
+                    "transitionduration": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/transition/duration"); ?>,
+                    "transition": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/transition/effect"); ?>"
                 },
-                "breakpoints": {
-                    "mobile": {
-                        "conditions": {
-                            "max-width": "767px"
-                        },
-                        "options": {
-                            "options": {
-                                "nav": "dots"
-                            },
-                            "magnifierOpts": {
-                                "enabled": false
-                            }
-                        }
-                    }
-                }
+                "breakpoints": <?php /* @escapeNotVerified */ echo $block->getBreakpoints(); ?>
             }
         }
     }

diff --git a/app/code/Magento/ConfigurableProduct/Block/Product/View/Type/Configurable.php b/app/code/Magento/ConfigurableProduct/Block/Product/View/Type/Configurable.php
@@ -198,6 +198,7 @@ public function getJsonConfig()
             'productId' => $currentProduct->getId(),
             'chooseText' => __('Choose an Option...'),
             'images' => isset($options['images']) ? $options['images'] : [],
+            'index' => isset($options['index']) ? $options['index'] : [],
         ];
 
         if ($currentProduct->hasPreconfiguredValues() && !empty($attributesData['defaultValues'])) {

diff --git a/app/code/Magento/ConfigurableProduct/Helper/Data.php b/app/code/Magento/ConfigurableProduct/Helper/Data.php
@@ -30,6 +30,44 @@ public function __construct(\Magento\Catalog\Helper\Image $imageHelper)
         $this->imageHelper = $imageHelper;
     }
 
+    /**
+     * Retrieve collection of gallery images
+     *
+     * @param \Magento\Catalog\Api\Data\ProductInterface $product
+     * @return \Magento\Catalog\Model\Product\Image[]|null
+     */
+    public function getGalleryImages(\Magento\Catalog\Api\Data\ProductInterface $product)
+    {
+        $images = $product->getMediaGalleryImages();
+        if ($images instanceof \Magento\Framework\Data\Collection) {
+            foreach ($images as &$image) {
+                /** @var $image \Magento\Catalog\Model\Product\Image */
+                $image->setData(
+                    'small_image_url',
+                    $this->imageHelper->init($product, 'product_page_image_small')
+                        ->setImageFile($image->getFile())
+                        ->getUrl()
+                );
+                $image->setData(
+                    'medium_image_url',
+                    $this->imageHelper->init($product, 'product_page_image_medium')
+                        ->constrainOnly(true)->keepAspectRatio(true)->keepFrame(false)
+                        ->setImageFile($image->getFile())
+                        ->getUrl()
+                );
+                $image->setData(
+                    'large_image_url',
+                    $this->imageHelper->init($product, 'product_page_image_large')
+                        ->constrainOnly(true)->keepAspectRatio(true)->keepFrame(false)
+                        ->setImageFile($image->getFile())
+                        ->getUrl()
+                );
+            }
+        }
+
+        return $images;
+    }
+
     /**
      * Get Options for Configurable Product Options
      *
@@ -42,16 +80,27 @@ public function getOptions($currentProduct, $allowedProducts)
         $options = [];
         foreach ($allowedProducts as $product) {
             $productId = $product->getId();
+            $images = $this->getGalleryImages($product);
+            if ($images) {
+                foreach ($images as $image) {
+                    $options['images'][$productId][] =
+                        [
+                            'thumb' => $image->getData('small_image_url'),
+                            'img' => $image->getData('medium_image_url'),
+                            'full' => $image->getData('large_image_url'),
+                            'caption' => $image->getLabel(),
+                            'position' => $image->getPosition(),
+                            'isMain' => $image->getFile() == $product->getImage(),
+                        ];
+                }
+            }
             foreach ($this->getAllowAttributes($currentProduct) as $attribute) {
                 $productAttribute = $attribute->getProductAttribute();
                 $productAttributeId = $productAttribute->getId();
                 $attributeValue = $product->getData($productAttribute->getAttributeCode());
 
                 $options[$productAttributeId][$attributeValue][] = $productId;
-                $imageUrl = (!$product->getImage() || $product->getImage() === 'no_selection')
-                    ? $this->imageHelper->init($currentProduct, 'product_page_image_large')->getUrl()
-                    : $this->imageHelper->init($product, 'product_page_image_large')->getUrl();
-                $options['images'][$productAttributeId][$attributeValue][$productId] = $imageUrl;
+                $options['index'][$productId][$productAttributeId] = $attributeValue;
             }
         }
         return $options;

diff --git a/app/code/Magento/ConfigurableProduct/Model/Product/Type/Configurable.php b/app/code/Magento/ConfigurableProduct/Model/Product/Type/Configurable.php
@@ -440,7 +440,9 @@ public function getUsedProducts($product, $requiredAttributeIds = null)
             }
 
             $usedProducts = [];
-            $collection = $this->getUsedProductCollection($product)->addAttributeToSelect('*')
+            $collection = $this->getUsedProductCollection($product)
+                ->addAttributeToSelect('*')
+                ->addAttributeToSelect('media_gallery')
                 ->addFilterByRequiredOptions()
                 ->setStoreId($product->getStoreId());
 
@@ -454,6 +456,8 @@ public function getUsedProducts($product, $requiredAttributeIds = null)
             }
 
             foreach ($collection as $item) {
+                /** @var \Magento\Catalog\Model\Product $item */
+                $item->getResource()->getAttribute('media_gallery')->getBackend()->afterLoad($item);
                 $usedProducts[] = $item;
             }