Merge pull request #70 from AnastasiaBuniakEPAM/JS-353

JS-353: Test/fix on touch devices Android/iOS
magento · Dec 11, 2015 · 237b54e · 237b54e
2 parents c1f7853 + b2f02e4
commit 237b54e
Show file tree

Hide file tree

Showing 10 changed files with 90 additions and 58 deletions.
diff --git a/.../ConfigurableProduct/view/frontend/templates/product/view/type/options/configurable.phtml b/.../ConfigurableProduct/view/frontend/templates/product/view/type/options/configurable.phtml
@@ -34,7 +34,7 @@ $_attributes = $block->decorateArray($block->getAllowAttributes());
             "#product_addtocart_form": {
                 "configurable": {
                     "spConfig": <?php /* @escapeNotVerified */ echo $block->getJsonConfig() ?>,
-                    "onlyMainImg": true
+                    "onlyMainImg": <?php /* @escapeNotVerified */ echo $block->getVar('change_only_base_image', 'Magento_ConfigurableProduct') ?: 'false'; ?>
                 }
             }
         }

diff --git a/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js b/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js
@@ -28,7 +28,8 @@ define([
             ' <%- data.finalPrice.formatted %>' +
             '<% } %>',
             mediaGallerySelector: '[data-gallery-role=gallery-placeholder]',
-            mediaGalleryInitial: null
+            mediaGalleryInitial: null,
+            onlyMainImg: false
         },
 
         /**
@@ -297,27 +298,32 @@ define([
         _changeProductImage: function () {
             var images,
                 initialImages = $.extend(true, [], this.options.mediaGalleryInitial),
-                galleryObject = $(this.options.mediaGallerySelector).data('gallery'),
-                updateGallery;
+                galleryObject = $(this.options.mediaGallerySelector).data('gallery');
 
             if (this.options.spConfig.images[this.simpleProduct]) {
                 images = $.extend(true, [], this.options.spConfig.images[this.simpleProduct]);
             }
 
-            updateGallery = function (imagesArr) {
+            function updateGallery(imagesArr) {
                 var mainImg = imagesArr.filter(function (img) {
                     return img.isMain;
                 });
+                !mainImg[0].type && (mainImg[0].type = 'image');
 
                 galleryObject.updateDataByIndex(0, mainImg[0]);
                 galleryObject.seek(1);
-            };
+            }
 
             if (galleryObject) {
                 if (images) {
-                    this.options.onlyMainImg ?
-                        updateGallery(images) :
-                        galleryObject.updateData(images);
+                    if (this.options.onlyMainImg) {
+                        updateGallery(images);
+                    } else {
+                        images.map(function (img) {
+                            img.type = 'image';
+                        });
+                        galleryObject.updateData(images)
+                    }
                 } else {
                     this.options.onlyMainImg ?
                         updateGallery(initialImages) :

diff --git a/app/code/Magento/ProductVideo/view/frontend/web/js/fotorama-add-video-events.js b/app/code/Magento/ProductVideo/view/frontend/web/js/fotorama-add-video-events.js
@@ -366,7 +366,8 @@ define([
                 t,
                 tmpVideoData,
                 currentItem,
-                iconClass = 'video-thumb-icon';
+                iconClass = 'video-thumb-icon',
+                videoContainerClass = 'fotorama-video-container';
 
             if (!fotorama.activeFrame.$navThumbFrame) {
                 $(this.element).on('fotorama:showend', $.proxy(function (evt, fotoramaData) {
@@ -381,6 +382,10 @@ define([
             thumbsParent = fotorama.activeFrame.$navThumbFrame.parent();
             thumbs = thumbsParent.find('.fotorama__nav__frame:visible');
 
+            fotorama.data.map($.proxy(function(item, i){
+                !item.type && (item.type = this.options.VideoData[i].mediaType);
+            }, this));
+
             for (t = 0; t < thumbs.length; t++) {
                 tmpVideoData = this.options.VideoData[t];
                 currentItem = thumbs.eq(t);
@@ -389,10 +394,12 @@ define([
                     currentItem.removeClass(iconClass);
                 }
 
-                if (tmpVideoData.mediaType === this.VID && fotorama.options.nav === 'thumbs') {
+                if (tmpVideoData.mediaType === this.VID && fotorama.options.nav === 'thumbs' &&
+                    fotorama.data[t].type ===  this.VID) {
                     currentItem.addClass(iconClass);
                 }
             }
+
             $(this.element).on('fotorama:showend', $.proxy(function (evt, fotoramaData) {
                 $(fotoramaData.activeFrame.$stageFrame).removeAttr('href');
             }, this));
@@ -445,6 +452,7 @@ define([
                 $image = fotorama.data[frameNumber - 1 + number];
 
             if ($image) {
+                if ($image.type !== 'video') return;
                 $image = $image.$stageFrame;
             }
 
@@ -565,23 +573,13 @@ define([
                             clearInterval(waitForFroogaloop);
                             fotorama.requestFullScreen();
                             $(this.element).data('fotorama').activeFrame.$stageFrame[0].click();
-                            /*$('.fotorama__fullscreen-icon').css({
-                                opacity: '1',
-                                visibility: 'visible',
-                                display: 'block'
-                            });*/
                             this.Base = false;
                         }
                     }, this), 50);
                 } else { //if not a vimeo - play it immediately with a little lag in case for fotorama fullscreen
                     setTimeout($.proxy(function () {
                         fotorama.requestFullScreen();
                         $(this.element).data('fotorama').activeFrame.$stageFrame[0].click();
-                        /*$('.fotorama__fullscreen-icon').css({
-                            opacity: '1',
-                            visibility: 'visible',
-                            display: 'block'
-                        });*/
                         this.Base = false;
                     }, this), 50);
                 }

diff --git a/app/code/Magento/Swatches/view/frontend/requirejs-config.js b/app/code/Magento/Swatches/view/frontend/requirejs-config.js
diff --git a/app/code/Magento/Swatches/view/frontend/templates/product/listing/renderer.phtml b/app/code/Magento/Swatches/view/frontend/templates/product/listing/renderer.phtml
@@ -5,17 +5,19 @@
  */
 ?>
 <?php /** @var $block \Magento\Swatches\Block\Product\Renderer\Configurable */ ?>
-<div class="swatch-opt-<?php /* @escapeNotVerified */ echo $block->getProduct()->getId() ?>"></div>
-<script>
-    require(["jquery", "jquery/ui", "swatchRenderer"], function ($) {
-        $('.swatch-opt-<?php /* @escapeNotVerified */ echo $block->getProduct()->getId() ?>').SwatchRenderer({
-            selectorProduct: '.product-item-details',
-            onlySwatches: true,
-            enableControlLabel: false,
-            numberToShow: <?php /* @escapeNotVerified */ echo $block->getNumberSwatchesPerProduct(); ?>,
-            jsonConfig: <?php /* @escapeNotVerified */ echo $swatchOptions = $block->getJsonConfig(); ?>,
-            jsonSwatchConfig: <?php /* @escapeNotVerified */ echo $swatchOptions = $block->getJsonSwatchConfig(); ?>,
-            mediaCallback: '<?php /* @escapeNotVerified */ echo $block->getMediaCallback() ?>'
-        });
-    });
+<div class="swatch-opt-listing" data-role="swatch-options-for-<?php /* @escapeNotVerified */ echo $block->getProduct()->getId() ?>"></div>
+<script type="text/x-magento-init">
+    {
+        "[data-role=swatch-options-for-<?php /* @escapeNotVerified */ echo $block->getProduct()->getId() ?>]": {
+            "Magento_Swatches/js/swatch-renderer": {
+                selectorProduct: '.product-item-details',
+                onlySwatches: true,
+                enableControlLabel: false,
+                numberToShow: <?php /* @escapeNotVerified */ echo $block->getNumberSwatchesPerProduct(); ?>,
+                jsonConfig: <?php /* @escapeNotVerified */ echo $swatchOptions = $block->getJsonConfig(); ?>,
+                jsonSwatchConfig: <?php /* @escapeNotVerified */ echo $swatchOptions = $block->getJsonSwatchConfig(); ?>,
+                mediaCallback: '<?php /* @escapeNotVerified */ echo $block->getMediaCallback() ?>'
+            }
+        }
+    }
 </script>
diff --git a/app/code/Magento/Swatches/view/frontend/templates/product/view/renderer.phtml b/app/code/Magento/Swatches/view/frontend/templates/product/view/renderer.phtml
@@ -3,19 +3,19 @@
  * Copyright © 2015 Magento. All rights reserved.
  * See COPYING.txt for license details.
  */
+//"swatchRenderer": {
 ?>
 <?php /** @var $block \Magento\Swatches\Block\Product\Renderer\Configurable */ ?>
-<div class="swatch-opt"></div>
+<div class="swatch-opt" data-role="swatch-options"></div>
 
 <script type="text/x-magento-init">
     {
-        ".swatch-opt": {
-            "jquery/ui":{},
-            "swatchRenderer": {
+        "[data-role=swatch-options]": {
+            "Magento_Swatches/js/swatch-renderer": {
                 "jsonConfig": <?php /* @escapeNotVerified */ echo $swatchOptions = $block->getJsonConfig(); ?>,
                 "jsonSwatchConfig": <?php /* @escapeNotVerified */ echo $swatchOptions = $block->getJsonSwatchConfig(); ?>,
                 "mediaCallback": "<?php /* @escapeNotVerified */ echo $block->getMediaCallback() ?>",
-                "onlyMainImg": true
+                "onlyMainImg": <?php /* @escapeNotVerified */ echo $block->getVar('change_only_base_image', 'Magento_Swatches') ?: 'false'; ?>
             }
         }
     }

diff --git a/app/code/Magento/Swatches/view/frontend/web/css/swatches.css b/app/code/Magento/Swatches/view/frontend/web/css/swatches.css
@@ -269,7 +269,7 @@
 }
 
 /* Bugfix for Add To Cart button */
-div[class^="swatch-opt-"] {
+.swatch-opt-listing {
     margin-bottom: 10px;
 }
 

diff --git a/...es/view/frontend/web/js/SwatchRenderer.js → ...s/view/frontend/web/js/swatch-renderer.js b/...es/view/frontend/web/js/SwatchRenderer.js → ...s/view/frontend/web/js/swatch-renderer.js
@@ -58,7 +58,7 @@ define([
      *  - option-tooltip-thumb
      *  - option-tooltip-value
      */
-    $.widget('custom.SwatchRendererTooltip', {
+    $.widget('mage.SwatchRendererTooltip', {
         options: {
             delay: 200,                             //how much ms before tooltip to show
             tooltipClass: 'swatch-option-tooltip'  //configurable, but remember about css
@@ -180,7 +180,7 @@ define([
      *  - selectorProduct (selector for product container)
      *  - selectorProductPrice (selector for change price)
      */
-    $.widget('custom.SwatchRenderer', {
+    $.widget('mage.SwatchRenderer', {
         options: {
             classes: {
                 attributeClass: 'swatch-attribute',
@@ -224,7 +224,10 @@ define([
             mediaCallback: '',
 
             // Cache for BaseProduct images. Needed when option unset
-            mediaGalleryInitial: [{}]
+            mediaGalleryInitial: [{}],
+
+            //
+            onlyMainImg: false
         },
 
         /**
@@ -883,6 +886,24 @@ define([
             this.updateBaseImage(images, $main, isProductViewExist);
         },
 
+        /**
+         * Check if images to update are initial and set their type
+         * @param {Array} images
+         */
+        _setImageType: function (images) {
+            var initial = this.options.mediaGalleryInitial[0].img;
+
+            if (images[0].img === initial) {
+                images = $.extend(true, [], this.options.mediaGalleryInitial);
+            } else {
+                images.map(function (img) {
+                    img.type = 'image';
+                });
+            }
+
+            return images;
+        },
+
         /**
          * Update [gallery-placeholder] or [product-image-photo]
          * @param {Array} images
@@ -891,14 +912,22 @@ define([
          */
         updateBaseImage: function (images, context, isProductViewExist) {
             var justAnImage = images[0],
+                imgs,
+                imgToUpdate,
                 gallery = context.find(this.options.mediaGallerySelector).data('gallery');
 
+            if (images) {
+                imgs = $.extend(true, [], images);
+                imgToUpdate = this._setImageType(imgs);
+            }
+
             if (isProductViewExist) {
                 if (this.options.onlyMainImg) {
-                    gallery.updateDataByIndex(0, images[0]);
+                    //to be refactored - main img instead of 0;
+                    gallery.updateDataByIndex(0, imgToUpdate[0]);
                     gallery.seek(1);
                 } else {
-                    gallery.updateData(images);
+                    gallery.updateData(imgToUpdate);
                 }
             } else if (justAnImage && justAnImage.img) {
                 context.find('.product-image-photo').attr('src', justAnImage.img);
@@ -936,5 +965,5 @@ define([
         }
     });
 
-    return $.custom.SwatchRenderer;
+    return $.mage.SwatchRenderer;
 });
diff --git a/app/design/frontend/Magento/luma/etc/view.xml b/app/design/frontend/Magento/luma/etc/view.xml
@@ -251,6 +251,14 @@
     <vars module="Magento_Bundle">
         <var name="product_summary_image_size">58</var>         <!-- New Product image size used for summary block-->
     </vars>
+
+    <vars module="Magento_ConfigurableProduct">
+        <var name="change_only_base_image">true</var>
+    </vars>
+    <vars module="Magento_Swatches">
+        <var name="change_only_base_image">true</var>
+    </vars>
+
     <vars module="Js_Bundle">
         <var name="bundle_size">1MB</var>
     </vars>

diff --git a/lib/web/fotorama/fotorama.js b/lib/web/fotorama/fotorama.js
@@ -2236,6 +2236,7 @@ fotoramaVersion = '4.6.4';
         }
 
         function loadImg(indexes, type, specialMeasures, again) {
+
             eachIndex(indexes, type, function (i, index, dataFrame, $frame, key, frameData) {
 
                 if (!$frame) return;