From 851af121afd641d3d15f89c6fc0eb607fb3e081b Mon Sep 17 00:00:00 2001 From: Uladzislau Harbachou Date: Tue, 20 Oct 2015 16:35:33 +0400 Subject: [PATCH 001/214] JS-255: Stabilization fixes for magnifier and gallery --- lib/web/mage/gallery/gallery.html | 14 +- lib/web/mage/gallery/gallery.less | 29 +- lib/web/magnifier/magnifier.js | 411 +---------------------- lib/web/magnifier/magnify.js | 529 +++++++++++++++++++++++++++++- 4 files changed, 548 insertions(+), 435 deletions(-) diff --git a/lib/web/mage/gallery/gallery.html b/lib/web/mage/gallery/gallery.html index 34d26c812dae4..25acbc8f75bd7 100644 --- a/lib/web/mage/gallery/gallery.html +++ b/lib/web/mage/gallery/gallery.html @@ -7,7 +7,7 @@
-
+
@@ -18,19 +18,19 @@
-
-
+
+
-
-
+
+
-
+
@@ -38,4 +38,4 @@
-
+
\ No newline at end of file diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index f1a68415517b1..50718779c5a41 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -8,6 +8,7 @@ @fotorama_close_size: 30px; @size-fotorama-block: 50px; @fotorama-thumb-arrow: 30px; +@fotorama-fullscreen-zoom-time: 0.3s; @import '../../css/source/lib/_lib.less'; // Global lib @import '../../css/source/_theme.less'; // Theme overrides @@ -78,7 +79,6 @@ &:extend(.fotorama-sprite); background-position: 0 (-@size-fotorama-block) !important; } - .fotorama__zoom-in { top: 0; &:extend(.fotorama-sprite); @@ -86,6 +86,15 @@ } } +.circle { + position: absolute; + background-color: silver; + opacity: 0.7; + border-radius: 100%; + height: 1px; + width: 1px; +} + .fotorama__zoom-in, .fotorama__zoom-out { display: none; @@ -93,6 +102,7 @@ .fotorama__fullscreen { .fotorama__zoom-in, .fotorama__zoom-out { + overflow: hidden; position: absolute; width: 50px; height: 50px; @@ -725,8 +735,13 @@ display: none; } +.fotorama--fullscreen-icons { + .fotorama__fullscreen-icon { + display: none; + } +} + .fotorama__fullscreen-icon { - //display: none; &:focus { &:extend(.fotorama-focus); border-radius: 50%; @@ -736,7 +751,7 @@ .fotorama--fullscreen { .fotorama__fullscreen-icon { - //display: inline-block; + display: inline-block; background-position: (-@size-fotorama-block) 0; } } @@ -1083,6 +1098,8 @@ max-height: 100%; max-width: 100%; vertical-align: middle; + transition-duration: @fotorama-fullscreen-zoom-time; + transition-property: width, height, top, left; } } @@ -1227,9 +1244,7 @@ body.fotorama__fullscreen { .magnify-fullimage { display: inline-block; } - .fotorama__stage__shaft { - //.fotorama__img { - // display: none; - //} + .magnify-lens { + display: none !important; } } diff --git a/lib/web/magnifier/magnifier.js b/lib/web/magnifier/magnifier.js index 2a315a2b9bc6f..232579bb4f41e 100644 --- a/lib/web/magnifier/magnifier.js +++ b/lib/web/magnifier/magnifier.js @@ -4,11 +4,6 @@ */ ;(function ($) { - var onWheelCallback, - zoomWidthStep = 0, - zoomHeightStep = 0, - isDraggable = false; - $.fn.magnify = function (options) { 'use strict'; @@ -29,9 +24,8 @@ $thumb, that = this, largeWrapper = options.largeWrapper || ".magnifier-preview", - $largeWrapper = $(largeWrapper), - zoomShown = false, - curThumb = null, + $largeWrapper = $(largeWrapper); + curThumb = null, currentOpts = { x: 0, y: 0, @@ -564,161 +558,6 @@ } } - function toggleZoomButtons($image) { - var path = $image.attr("src"), - imgSize; - if (path) { - imgSize = getImageSize(path); - if ((imgSize.rh > $image.parent().height()) || (imgSize.rw > $image.parent().width())) { - $('.fotorama__zoom-in').show(); - $('.fotorama__zoom-out').show(); - zoomShown = true; - } else { - $('.fotorama__zoom-in').hide(); - $('.fotorama__zoom-out').hide(); - zoomShown = false; - } - } else { - $('.fotorama__zoom-in').hide(); - $('.fotorama__zoom-out').hide(); - zoomShown = false; - } - } - - function magnifierFullscreen () { - var isDragActive = false, - startX, - startY, - imagePosX, - imagePosY, - touch, - isTouchEnabled = 'ontouchstart' in document.documentElement; - - $('[data-gallery-role="gallery"]').on('fotorama:fullscreenenter fotorama:showend fotorama:load', function () { - var $preview = $('[data-gallery-role="stage-shaft"] [data-active="true"] img'), - $image = $('[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full'), - $imageContainer = $preview.parent(), - gallery = $('[data-gallery-role="gallery"]'); - - gallery.on('fotorama:fullscreenexit', function () { - $thumb.css({ - 'top': '', - 'left': '' - }); - }); - - if (gallery.data('fotorama').fullScreen) { - toggleZoomButtons($image); - resetVars($('[data-gallery-role="stage-shaft"] .fotorama__img--full')); - - $('.fotorama__stage__frame .fotorama__img--full').each(function () { - var path = $(this).attr("src"), - imgSize; - if (path) { - imgSize = getImageSize(path); - - if ((imgSize.rh > $(this).parent().height()) || (imgSize.rw > $(this).parent().width())) { - - if (imgSize.rh / imgSize.rw < $(this).parent().height() / $(this).parent().width()) { - $(this).width($(this).parent().width()); - $(this).height('auto'); - } else { - $(this).height($(this).parent().height()); - $(this).width('auto'); - } - - $(this).css({ - 'top': '', - 'left': '' - }); - } - } - }); - } - - $image - .off(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown') - .on(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown', function (e) { - if (gallery.data('fotorama').fullScreen && isDraggable) { - e.preventDefault(); - $image.css('cursor', 'move'); - imagePosY = $image.offset().top; - imagePosX = $image.offset().left; - - if (isTouchEnabled) { - touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; - e.clientX = touch.pageX; - e.clientY = touch.pageY; - } - startX = e.clientX || e.originalEvent.clientX; - startY = e.clientY || e.originalEvent.clientY; - isDragActive = true; - } - }); - - - - $image - .off(isTouchEnabled ? 'touchmove' : 'mousemove pointermove MSPointerMove') - .on(isTouchEnabled ? 'touchmove' : 'mousemove pointermove MSPointerMove', function (e) { - if (gallery.data('fotorama').fullScreen && isDragActive && isDraggable) { - - var top, - left, - startOffset = $image.offset(), - clientX = e.clientX || e.originalEvent.clientX, - clientY = e.clientY || e.originalEvent.clientY; - - - e.preventDefault(); - - if (isTouchEnabled) { - touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; - e.clientX = touch.pageX; - e.clientY = touch.pageY; - } - top = +imagePosY + (clientY - startY); - left = +imagePosX + (clientX - startX); - - if ($image.height() > $imageContainer.height()) { - - if (($imageContainer.offset().top + $imageContainer.height()) > (top + $image.height())) { - top = $imageContainer.offset().top + $imageContainer.height() - $image.height(); - } else { - top = ($imageContainer.offset().top < top) ? 0 : top; - } - $image.offset({ - 'top': top - }); - } - - if ($image.width() > $imageContainer.width()) { - - if (($imageContainer.offset().left + $imageContainer.width()) > (left + $image.width())) { - left = $imageContainer.offset().left + $imageContainer.width() - $image.width(); - } else { - left = ($imageContainer.offset().left < left) ? $imageContainer.offset().left : left; - } - $image.offset({ - 'left': left - }); - } - } - }); - - $image - .off(isTouchEnabled ? 'touchend' : 'mouseup pointerup MSPointerUp') - .on(isTouchEnabled ? 'touchend' : 'mouseup pointerup MSPointerUp', function (e) { - if (gallery.data('fotorama').fullScreen && isDragActive && isDraggable) { - isDragActive = false; - $image.css('cursor', 'pointer'); - - return false; - } - }); - }); - } - function onScroll() { if (curThumb !== null) { @@ -726,260 +565,14 @@ } } - if ($('.fotorama-item').data('fotorama').fullScreen) { - $('.fotorama__stage__frame .fotorama__img--full').each(function () { - var image = new Image(); - image.src = $(this).attr("src"); - - if ( (image.height > $(this).parent().height()) || (image.width > $(this).parent().width()) ) { - - if (image.height / image.width < $(this).parent().height() / $(this).parent().width()) { - $(this).width($(this).parent().width()); - $(this).height(''); - } else { - $(this).height($(this).parent().height()); - $(this).width(''); - } - } - }); - } $(window).on('scroll', onScroll); $(window).resize(function() { - - if ($('.fotorama-item').data('fotorama').fullScreen) { - - $('.fotorama__stage__frame .fotorama__img--full').each(function () { - var image = new Image(); - image.src = $(this).attr("src"); - - if ( (image.height > $(this).parent().height()) || (image.width > $(this).parent().width()) ) { - - if (image.height / image.width < $(this).parent().height() / $(this).parent().width()) { - $(this).width($(this).parent().width()); - $(this).height(''); - } else { - $(this).height($(this).parent().height()); - $(this).width(''); - } - } - }); - - toggleZoomButtons($('[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full')); - } - - _init($box, gOptions); - }); - function resetVars($image) { - zoomWidthStep = 0; - zoomHeightStep = 0; - isDraggable = false; - $image.css({ - top: 0, - left: 0, - right: 0, - bottom: 0, - cursor: '' - }); - } - - function checkFullscreenImagePosition(widthStep, heightStep) { - var $preview, $image, $imageContainer, gallery, top, left; - - if ($('[data-gallery-role="gallery"]').data('fotorama').fullScreen) { - - $preview = $('[data-gallery-role="stage-shaft"] [data-active="true"] img'); - $image = $('[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full'); - $imageContainer = $preview.parent(); - gallery = $('[data-gallery-role="gallery"]'); - top = $image.offset().top; - left = $image.offset().left; - - if ($image.height() > $imageContainer.height()) { - if ($imageContainer.offset().top + $imageContainer.height() > top + $image.height() + heightStep/2) { - top = $imageContainer.offset().top + $imageContainer.height() - $image.height() + heightStep/2; - } else { - top = ($imageContainer.offset().top <= top + heightStep/2 && heightStep > 0) ? 0 : top + heightStep/2; - } - $image.css({ - top: top, - bottom: 'auto' - }); - } else { - $image.css({ - top: 0, - bottom: 0 - }); - } - - if ($image.width() > $imageContainer.width()) { - if (($imageContainer.offset().left + $imageContainer.width()) > (left + $image.width() + widthStep/2)) { - left = $imageContainer.offset().left + $imageContainer.width() - $image.width() + widthStep/2; - } else { - left = ($imageContainer.offset().left <= left + widthStep/2 && widthStep > 0) ? 0 : left - $imageContainer.offset().left + widthStep/2; - } - $image.css({ - left: left, - right: 'auto' - }); - } else { - $image.css({ - left: 0, - right: 0 - }); - } - } - } - - function zoomIn(e) { - if (zoomShown) { - var $image = $('[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full'), - imgOriginalSize = $image.length ? getImageSize($image[0].src) : '', - widthResult, - heightResult; - - if (!zoomWidthStep) { - zoomWidthStep = Math.ceil((imgOriginalSize.rw - $image.width())/parseFloat(options.fullscreenzoom)); - zoomHeightStep = Math.ceil((imgOriginalSize.rh - $image.height())/parseFloat(options.fullscreenzoom)); - } - widthResult = $image.width() + zoomWidthStep; - heightResult = $image.height() + zoomHeightStep; - - if (widthResult >= imgOriginalSize.rw) { - widthResult = imgOriginalSize.rw; - } - if (heightResult >= imgOriginalSize.rh) { - heightResult = imgOriginalSize.rh; - } - - if ( zoomShown ) { - isDraggable = true; - } - - if ($image.width() >= $image.height() && $image.width() !== imgOriginalSize.rw) { - $image.css({ - width: widthResult, - height: 'auto' - }); - checkFullscreenImagePosition(-zoomWidthStep, -zoomHeightStep); - } else if ($image.width() < $image.height() && $image.height() !== imgOriginalSize.rh) { - $image.css({ - width: 'auto', - height: heightResult - }); - checkFullscreenImagePosition(-zoomWidthStep, -zoomHeightStep); - } - } - - return false; - } - - function zoomOut(e) { - if (zoomShown) { - var $image = $('[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full'), - setedResult = $image.width() - zoomWidthStep, - widthCheck = $image.width() - zoomWidthStep <= $image.parent().width(), - heightCheck = $image.height() - zoomHeightStep <= $image.parent().height(); - - e.preventDefault(); - - if (widthCheck && heightCheck) { - if ($image.width() >= $image.height()) { - $image.trigger('fotorama:load'); - - return false; - } else if ($image.width() < $image.height()) { - $image.trigger('fotorama:load'); - - return false; - } - } - - $image.css({'width': setedResult, height: 'auto'}); - checkFullscreenImagePosition(zoomWidthStep, zoomHeightStep); - } - - return false; - } - - /** - * Return width and height of original image - * @param src path for original image - * @returns {{rw: number, rh: number}} - */ - function getImageSize(src) { - var img = new Image(), - imgSize = { - rw: 0, - rh: 0 - }; - img.src = src; - imgSize.rw = img.width; - imgSize.rh = img.height; - return imgSize; - } - - - function setEventOnce() { - $('.fotorama__zoom-in') - .off('mouseup') - .on('mouseup', zoomIn); - $('.fotorama__zoom-out') - .off('mouseup') - .on('mouseup', zoomOut); - $('.fotorama__zoom-in') - .off('touchstart') - .on('touchstart', zoomIn); - $('.fotorama__zoom-out') - .off('touchstart') - .on('touchstart', zoomOut); - } - $(document).on('mousemove', onMousemove); _init($box, gOptions); - setEventOnce(); - magnifierFullscreen(); - - if (!onWheelCallback) { - onWheelCallback = function onWheel(e) { - if ($('[data-gallery-role="gallery"]').data('fotorama').fullScreen) { - e = e || window.event; - - - var delta = e.deltaY || e.detail || e.wheelDelta; - - if (delta > 0) { - zoomOut(e); - } else { - zoomIn(e); - } - - e.preventDefault ? e.preventDefault() : (e.returnValue = false); - } - }; - } - $('.fotorama-item').on('fotorama:load', function () { - if (document.querySelector('.fotorama__stage').addEventListener) { - if ('onwheel' in document) { - // IE9+, FF17+, Ch31+ - document.querySelector('.fotorama__stage').removeEventListener("wheel", onWheelCallback); - document.querySelector('.fotorama__stage').addEventListener("wheel", onWheelCallback); - } else if ('onmousewheel' in document) { - document.querySelector('.fotorama__stage').removeEventListener("mousewheel", onWheelCallback); - document.querySelector('.fotorama__stage').addEventListener("mousewheel", onWheelCallback); - } else { - // Firefox < 17 - document.querySelector('.fotorama__stage').removeEventListener("MozMousePixelScroll", onWheelCallback); - document.querySelector('.fotorama__stage').addEventListener("MozMousePixelScroll", onWheelCallback); - } - } else { // IE8- - document.querySelector('.fotorama__stage').detachEvent("onmousewheel", onWheelCallback); - document.querySelector('.fotorama__stage').attachEvent("onmousewheel", onWheelCallback); - } - }); } }(jQuery)); diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index 06a835ef9a2df..877a2683ecf76 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -14,9 +14,15 @@ define([ gallerySelector = '[data-gallery-role="gallery"]', magnifierSelector = '[data-gallery-role="magnifier"]', magnifierZoomSelector = '[data-gallery-role="magnifier-zoom"]', - fullScreenIcon = '[data-gallery-role="fotorama__fullscreen-icon"]', + zoomInButtonSelector = '[data-gallery-role="fotorama__zoom-in"]', + zoomOutButtonSelector = '[data-gallery-role="fotorama__zoom-out"]', + fullscreenImageSelector = '[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full', hideMagnifier, - behaveOnHover; + behaveOnHover, + zoomWidthStep, + zoomHeightStep, + zoomShown = true, + allowAnimating = true; if (isTouchEnabled) { $(element).on('fotorama:showend fotorama:load', function () { @@ -25,6 +31,448 @@ define([ }); } + /** + * Return width and height of original image + * @param src path for original image + * @returns {{rw: number, rh: number}} + */ + function getImageSize(src) { + var img = new Image(), + imgSize = { + rw: 0, + rh: 0 + }; + + img.src = src; + imgSize.rw = img.width; + imgSize.rh = img.height; + + return imgSize; + } + + function resetVars($image) { + zoomWidthStep = 0; + zoomHeightStep = 0; + allowAnimating = true; + $image.css({ + top: 0, + left: 0, + right: 0, + bottom: 0, + cursor: '', + width: 'auto', + height: 'auto', + maxWidth: '100%', + maxHeight: '100%' + }); + } + + function clickAnimation(e) { + + var roundRadius = 80, + clickAnimationDuration = 400; + + $('
').addClass('circle').offset({ + left: e.pageX - e.currentTarget.offsetLeft, + top: e.pageY - e.currentTarget.offsetTop + }).appendTo(e.currentTarget).animate( + { + height: roundRadius, + width: roundRadius, + left: e.pageX - roundRadius / 2 - e.currentTarget.offsetLeft, + top: e.pageY - roundRadius / 2 - e.currentTarget.offsetTop, + opacity: 0 + }, + clickAnimationDuration, + 'swing', + function () { + $(this).remove(); + } + ); + } + + function toggleZoomButtons($image) { + var path = $image.attr('src'), + imgSize; + + if (path) { + imgSize = getImageSize(path); + + if (imgSize.rh > $image.parent().height() || imgSize.rw > $image.parent().width()) { + $(zoomInButtonSelector).show(); + $(zoomOutButtonSelector).show(); + zoomShown = true; + } else { + $(zoomInButtonSelector).hide(); + $(zoomOutButtonSelector).hide(); + zoomShown = false; + } + } else { + $(zoomInButtonSelector).hide(); + $(zoomOutButtonSelector).hide(); + zoomShown = false; + } + } + + function checkFullscreenImagePosition($image, dimentions, widthStep, heightStep) { + var $imageContainer, settings, top, left, right, bottom, ratio; + + if ($(gallerySelector).data('fotorama').fullScreen && allowAnimating) { + + $imageContainer = $image.parent(); + top = $image.offset().top; + left = $image.offset().left; + ratio = $image.width() / $image.height(); + + if (!isNaN(dimentions.width)) { + dimentions.height = dimentions.width / ratio; + } + + if (!isNaN(dimentions.height)) { + dimentions.width = dimentions.height * ratio; + } + + if (dimentions.height >= $imageContainer.height()) { + top += heightStep / 2; + bottom = 0; + + top = top < $imageContainer.height() - dimentions.height ? + $imageContainer.height() - dimentions.height : top; + top = top > 0 ? 0 : top; + } else { + top = 0; + bottom = 0; + } + + if (dimentions.width >= $imageContainer.width()) { + left += -$imageContainer.parent().offset().left + widthStep / 2; + right = 0; + + left = left < $imageContainer.width() - dimentions.width ? + $imageContainer.width() - dimentions.width : left; + left = left > 0 ? 0 : left; + } else { + left = 0; + right = 0; + } + + settings = $.extend(dimentions, { + left: left, + top: top, + bottom: bottom, + right: right + }); + + //if (allowAnimating) { + //allowAnimating = false; + $image.css(settings); + //} + } + } + + function zoomIn(e) { + var $image, imgOriginalSize, widthResult, heightResult, dimentions = {}; + + if (zoomShown) { + $image = $(fullscreenImageSelector); + imgOriginalSize = getImageSize($image[0].src); + + e.preventDefault(); + + if (e.type === 'click' || e.type === 'touchstart') { + clickAnimation(e); + } + + if (!zoomWidthStep) { + zoomWidthStep = Math.ceil((imgOriginalSize.rw - $image.width()) / + parseFloat(config.magnifierOpts.fullscreenzoom)); + zoomHeightStep = Math.ceil((imgOriginalSize.rh - $image.height()) / + parseFloat(config.magnifierOpts.fullscreenzoom)); + } + + if ($image.css('maxHeight') !== 'none') { + dimentions = { + maxHeight: 'none', + maxWidth: 'none' + }; + } + + widthResult = $image.width() + zoomWidthStep; + heightResult = $image.height() + zoomHeightStep; + + if (widthResult >= imgOriginalSize.rw) { + widthResult = imgOriginalSize.rw; + } + + if (heightResult >= imgOriginalSize.rh) { + heightResult = imgOriginalSize.rh; + } + + if ($image.width() >= $image.height() && $image.width() !== imgOriginalSize.rw) { + dimentions = $.extend(dimentions, { + width: widthResult, + height: 'auto' + }); + checkFullscreenImagePosition($image, dimentions, -zoomWidthStep, -zoomHeightStep); + + } else if ($image.width() < $image.height() && $image.height() !== imgOriginalSize.rh) { + dimentions = $.extend(dimentions, { + width: 'auto', + height: heightResult + }); + checkFullscreenImagePosition($image, dimentions, -zoomWidthStep, -zoomHeightStep); + } + } + + return false; + } + + function zoomOut(e) { + var $image, widthResult, heightResult, dimentions, parentWidth, parentHeight; + + if (zoomShown) { + $image = $(fullscreenImageSelector); + widthResult = $image.width() - zoomWidthStep; + heightResult = $image.height() - zoomHeightStep; + parentWidth = $image.parent().width(); + parentHeight = $image.parent().height(); + + e.preventDefault(); + + if (e.type === 'click' || e.type === 'touchstart') { + clickAnimation(e); + } + + if ($image.width() > $image.height()) { + if (widthResult > parentWidth) { + dimentions = { + 'width': widthResult, + 'height': 'auto' + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } else { + if (heightResult > parentHeight) { + dimentions = { + 'width': widthResult, + 'height': 'auto' + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } else { + widthResult = parentWidth; + dimentions = { + 'width': widthResult, + 'height': 'auto' + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } + } + + } else { + if (heightResult > parentHeight) { + dimentions = { + width: 'auto', + height: heightResult + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } else { + if (widthResult > parentWidth) { + dimentions = { + width: 'auto', + height: heightResult + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } else { + if (parentHeight < parentWidth) { + heightResult = parentHeight; + dimentions = { + width: 'auto', + height: heightResult + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } else { + widthResult = parentWidth; + dimentions = { + 'width': widthResult, + 'height': 'auto' + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } + } + } + } + } + + return false; + } + + /** + * Bind event on scroll on active item in fotorama + * @param e + * @param fotorama - object of fotorama + */ + function mousewheel(e, fotorama, element) { + var $fotoramaStage = $(element).find('[data-fotorama-stage="fotorama__stage"]'), + fotoramaStage = $fotoramaStage.get(0); + + function onWheel(e) { + var delta = e.deltaY || e.detail || e.wheelDelta; + + if ($(gallerySelector).data('fotorama').fullScreen) { + e = e || window.event; + + if (delta > 0) { + zoomOut(e); + } else { + zoomIn(e); + } + + e.preventDefault ? e.preventDefault() : (e.returnValue = false); + } + } + + if (!$fotoramaStage.hasClass('magnify-wheel-loaded')) { + if (fotoramaStage && fotoramaStage.addEventListener) { + if ('onwheel' in document) { + fotoramaStage.addEventListener('wheel', onWheel); + } else if ('onmousewheel' in document) { + fotoramaStage.addEventListener('mousewheel', onWheel); + } else { + fotoramaStage.addEventListener('MozMousePixelScroll', onWheel); + } + $fotoramaStage.addClass('magnify-wheel-loaded'); + } + } + } + + /** + * Metod which makes draggable picture. Also work on touch devices. + */ + function magnifierFullscreen() { + var isDragActive = false, + startX, + startY, + imagePosX, + imagePosY, + touch, + $gallery = $(gallerySelector), + $image = $(fullscreenImageSelector, $gallery), + $imageContainer = $('[data-gallery-role="stage-shaft"] [data-active="true"]'), + gallery = $gallery.data('fotorama'); + + function shiftImage(dx, dy) { + var top = +imagePosY + dy; + var left = +imagePosX + dx; + + if ($image.height() > $imageContainer.height()) { + + if (($imageContainer.offset().top + $imageContainer.height()) > (top + $image.height())) { + top = $imageContainer.offset().top + $imageContainer.height() - $image.height(); + } else { + top = ($imageContainer.offset().top < top) ? 0 : top; + } + $image.offset({ + 'top': top + }); + } + + if ($image.width() > $imageContainer.width()) { + + if (($imageContainer.offset().left + $imageContainer.width()) > (left + $image.width())) { + left = $imageContainer.offset().left + $imageContainer.width() - $image.width(); + } else { + left = ($imageContainer.offset().left < left) ? $imageContainer.offset().left : left; + } + $image.offset({ + 'left': left + }); + } + } + + toggleZoomButtons($image); + + $image.on(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown', function (e) { + if (gallery.fullScreen) { + e.preventDefault(); + + $image.css('cursor', 'move'); + imagePosY = $image.offset().top; + imagePosX = $image.offset().left; + + if (isTouchEnabled) { + touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; + e.clientX = touch.pageX; + e.clientY = touch.pageY; + } + startX = e.clientX || e.originalEvent.clientX; + startY = e.clientY || e.originalEvent.clientY; + isDragActive = true; + + $image.css({ + transitionProperty: 'width, height' + }); + + } + }); + + $image.on(isTouchEnabled ? 'touchmove' : 'mousemove pointermove MSPointerMove', function (e) { + var top, left, clientX, clientY; + + if (gallery.fullScreen && isDragActive) { + + clientX = e.clientX || e.originalEvent.clientX; + clientY = e.clientY || e.originalEvent.clientY; + + e.preventDefault(); + + if (isTouchEnabled) { + touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; + e.clientX = touch.pageX; + e.clientY = touch.pageY; + } + shiftImage((clientX - startX), (clientY - startY)); + } + }); + + $(window).keyup(function (e) { + imagePosX = $(fullscreenImageSelector, $gallery).offset().left; + imagePosY = $(fullscreenImageSelector, $gallery).offset().top; + var step = 20; + + if (e.keyCode === 102) { + shiftImage(-step, 0); + } + if (e.keyCode === 98) { + shiftImage(0, step); + } + if (e.keyCode === 100) { + shiftImage(step, 0); + } + if (e.keyCode === 104) { + shiftImage(0, -step); + } + + }); + + $image.on('transitionend', function() { + allowAnimating = true; + }); + + $(document).on(isTouchEnabled ? 'touchend' : 'mouseup pointerup MSPointerUp', function () { + if (gallery.fullScreen) { + isDragActive = false; + $image.css({ + cursor: 'pointer', + transitionProperty: 'width, height, top, left' + }); + } + }); + + $image.css({ + width: $image.width(), + height: $image.height() + }); + } + /** * Hides magnifier preview and zoom blocks. */ @@ -39,7 +487,8 @@ define([ behaveOnHover = function (e, initPos) { var pos = [e.pageX, e.pageY], isArrow = $(e.target).data('gallery-role') === 'arrow', - isClick = initPos[0] === pos[0] && initPos[1] === pos[1]; + isClick = initPos[0] === pos[0] && initPos[1] === pos[1]; + if (isArrow || !isClick) { hideMagnifier(); } @@ -50,7 +499,6 @@ define([ } else if (config.magnifierOpts.eventType === 'hover') { $(element).on('pointerdown mousedown MSPointerDown', function (e) { var pos = [e.pageX, e.pageY]; - $(element).on('mousemove pointermove MSPointerMove', function (ev) { navigator.msPointerEnabled ? hideMagnifier() : behaveOnHover(ev, pos); }); @@ -62,7 +510,7 @@ define([ $.extend(config.magnifierOpts, { zoomable: false, - thumb: '.fotorama__img:not(".fotorama__img--full")', + thumb: '.fotorama__img', largeWrapper: '[data-gallery-role="magnifier"]', height: config.magnifierOpts.height || function () { return $('[data-active="true"]').height(); @@ -80,18 +528,75 @@ define([ } }); - $(element).on('fotorama:showend fotorama:load fotorama:fullscreenexit fotorama:ready', function (e, fotorama) { + $(element).on('fotorama:load fotorama:showend fotorama:fullscreenexit fotorama:ready', function (e, fotorama) { hideMagnifier(); config.magnifierOpts.large = $(gallerySelector).data('fotorama').activeFrame.img; - config.magnifierOpts.full = fotorama.data[fotorama.activeIndex].full; + config.magnifierOpts.full = fotorama.data[fotorama.activeIndex].original; $($(gallerySelector).data('fotorama').activeFrame.$stageFrame).magnify(config.magnifierOpts); }); - $(element).on('gallery:loaded', function () { - $(element).find(gallerySelector).on('fotorama:show fotorama:fullscreenenter ', function () { - hideMagnifier(); - }); + $(element).on('gallery:loaded', function (e) { + $(element).find(gallerySelector) + .on('fotorama:ready', function (e, fotorama) { + var $zoomIn = $(zoomInButtonSelector), + $zoomOut = $(zoomOutButtonSelector); + + if (!$zoomIn.hasClass('zoom-in-loaded')) { + $zoomIn.on('click touchstart', zoomIn); + + $zoomIn.keyup(function (e) { + + if (e.keyCode === 13) { + zoomIn(e); + } + }); + + $(window).keyup(function (e) { + + if (e.keyCode === 107 || fotorama.fullscreen) { + zoomIn(e); + } + }); + + $zoomIn.addClass('zoom-in-loaded'); + } + + if (!$zoomOut.hasClass('zoom-out-loaded')) { + $zoomOut.on('click touchstart', zoomOut); + + $zoomOut.keyup(function (e) { + + if (e.keyCode === 13) { + zoomOut(e); + } + }); + + $(window).keyup(function (e) { + + if (e.keyCode === 109 || fotorama.fullscreen) { + zoomOut(e); + } + }); + + $zoomOut.addClass('zoom-out-loaded'); + } + }) + .on('fotorama:fullscreenenter fotorama:showend', function (e, fotorama) { + hideMagnifier(); + $(element).data('gallery').updateOptions({ + swipe: false + }); + magnifierFullscreen(e, fotorama); + mousewheel(e, fotorama, element); + }) + .on('fotorama:load', function (e, fotorama) { + toggleZoomButtons($(fullscreenImageSelector)); + magnifierFullscreen(); + }) + .on('fotorama:show', function (e, fotorama) { + resetVars($(fullscreenImageSelector)); + }); }); return config; - }; + } }); From e6f67440f820a313802a39084a39902df6b875e3 Mon Sep 17 00:00:00 2001 From: Uladzislau Harbachou Date: Tue, 20 Oct 2015 16:35:33 +0400 Subject: [PATCH 002/214] JS-255: Stabilization fixes for magnifier and gallery --- lib/web/mage/gallery/gallery.html | 14 +- lib/web/mage/gallery/gallery.less | 29 +- lib/web/magnifier/magnifier.js | 411 +---------------------- lib/web/magnifier/magnify.js | 529 +++++++++++++++++++++++++++++- 4 files changed, 548 insertions(+), 435 deletions(-) diff --git a/lib/web/mage/gallery/gallery.html b/lib/web/mage/gallery/gallery.html index 34d26c812dae4..25acbc8f75bd7 100644 --- a/lib/web/mage/gallery/gallery.html +++ b/lib/web/mage/gallery/gallery.html @@ -7,7 +7,7 @@
-
+
@@ -18,19 +18,19 @@
-
-
+
+
-
-
+
+
-
+
@@ -38,4 +38,4 @@
-
+
\ No newline at end of file diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index f1a68415517b1..50718779c5a41 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -8,6 +8,7 @@ @fotorama_close_size: 30px; @size-fotorama-block: 50px; @fotorama-thumb-arrow: 30px; +@fotorama-fullscreen-zoom-time: 0.3s; @import '../../css/source/lib/_lib.less'; // Global lib @import '../../css/source/_theme.less'; // Theme overrides @@ -78,7 +79,6 @@ &:extend(.fotorama-sprite); background-position: 0 (-@size-fotorama-block) !important; } - .fotorama__zoom-in { top: 0; &:extend(.fotorama-sprite); @@ -86,6 +86,15 @@ } } +.circle { + position: absolute; + background-color: silver; + opacity: 0.7; + border-radius: 100%; + height: 1px; + width: 1px; +} + .fotorama__zoom-in, .fotorama__zoom-out { display: none; @@ -93,6 +102,7 @@ .fotorama__fullscreen { .fotorama__zoom-in, .fotorama__zoom-out { + overflow: hidden; position: absolute; width: 50px; height: 50px; @@ -725,8 +735,13 @@ display: none; } +.fotorama--fullscreen-icons { + .fotorama__fullscreen-icon { + display: none; + } +} + .fotorama__fullscreen-icon { - //display: none; &:focus { &:extend(.fotorama-focus); border-radius: 50%; @@ -736,7 +751,7 @@ .fotorama--fullscreen { .fotorama__fullscreen-icon { - //display: inline-block; + display: inline-block; background-position: (-@size-fotorama-block) 0; } } @@ -1083,6 +1098,8 @@ max-height: 100%; max-width: 100%; vertical-align: middle; + transition-duration: @fotorama-fullscreen-zoom-time; + transition-property: width, height, top, left; } } @@ -1227,9 +1244,7 @@ body.fotorama__fullscreen { .magnify-fullimage { display: inline-block; } - .fotorama__stage__shaft { - //.fotorama__img { - // display: none; - //} + .magnify-lens { + display: none !important; } } diff --git a/lib/web/magnifier/magnifier.js b/lib/web/magnifier/magnifier.js index 2a315a2b9bc6f..232579bb4f41e 100644 --- a/lib/web/magnifier/magnifier.js +++ b/lib/web/magnifier/magnifier.js @@ -4,11 +4,6 @@ */ ;(function ($) { - var onWheelCallback, - zoomWidthStep = 0, - zoomHeightStep = 0, - isDraggable = false; - $.fn.magnify = function (options) { 'use strict'; @@ -29,9 +24,8 @@ $thumb, that = this, largeWrapper = options.largeWrapper || ".magnifier-preview", - $largeWrapper = $(largeWrapper), - zoomShown = false, - curThumb = null, + $largeWrapper = $(largeWrapper); + curThumb = null, currentOpts = { x: 0, y: 0, @@ -564,161 +558,6 @@ } } - function toggleZoomButtons($image) { - var path = $image.attr("src"), - imgSize; - if (path) { - imgSize = getImageSize(path); - if ((imgSize.rh > $image.parent().height()) || (imgSize.rw > $image.parent().width())) { - $('.fotorama__zoom-in').show(); - $('.fotorama__zoom-out').show(); - zoomShown = true; - } else { - $('.fotorama__zoom-in').hide(); - $('.fotorama__zoom-out').hide(); - zoomShown = false; - } - } else { - $('.fotorama__zoom-in').hide(); - $('.fotorama__zoom-out').hide(); - zoomShown = false; - } - } - - function magnifierFullscreen () { - var isDragActive = false, - startX, - startY, - imagePosX, - imagePosY, - touch, - isTouchEnabled = 'ontouchstart' in document.documentElement; - - $('[data-gallery-role="gallery"]').on('fotorama:fullscreenenter fotorama:showend fotorama:load', function () { - var $preview = $('[data-gallery-role="stage-shaft"] [data-active="true"] img'), - $image = $('[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full'), - $imageContainer = $preview.parent(), - gallery = $('[data-gallery-role="gallery"]'); - - gallery.on('fotorama:fullscreenexit', function () { - $thumb.css({ - 'top': '', - 'left': '' - }); - }); - - if (gallery.data('fotorama').fullScreen) { - toggleZoomButtons($image); - resetVars($('[data-gallery-role="stage-shaft"] .fotorama__img--full')); - - $('.fotorama__stage__frame .fotorama__img--full').each(function () { - var path = $(this).attr("src"), - imgSize; - if (path) { - imgSize = getImageSize(path); - - if ((imgSize.rh > $(this).parent().height()) || (imgSize.rw > $(this).parent().width())) { - - if (imgSize.rh / imgSize.rw < $(this).parent().height() / $(this).parent().width()) { - $(this).width($(this).parent().width()); - $(this).height('auto'); - } else { - $(this).height($(this).parent().height()); - $(this).width('auto'); - } - - $(this).css({ - 'top': '', - 'left': '' - }); - } - } - }); - } - - $image - .off(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown') - .on(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown', function (e) { - if (gallery.data('fotorama').fullScreen && isDraggable) { - e.preventDefault(); - $image.css('cursor', 'move'); - imagePosY = $image.offset().top; - imagePosX = $image.offset().left; - - if (isTouchEnabled) { - touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; - e.clientX = touch.pageX; - e.clientY = touch.pageY; - } - startX = e.clientX || e.originalEvent.clientX; - startY = e.clientY || e.originalEvent.clientY; - isDragActive = true; - } - }); - - - - $image - .off(isTouchEnabled ? 'touchmove' : 'mousemove pointermove MSPointerMove') - .on(isTouchEnabled ? 'touchmove' : 'mousemove pointermove MSPointerMove', function (e) { - if (gallery.data('fotorama').fullScreen && isDragActive && isDraggable) { - - var top, - left, - startOffset = $image.offset(), - clientX = e.clientX || e.originalEvent.clientX, - clientY = e.clientY || e.originalEvent.clientY; - - - e.preventDefault(); - - if (isTouchEnabled) { - touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; - e.clientX = touch.pageX; - e.clientY = touch.pageY; - } - top = +imagePosY + (clientY - startY); - left = +imagePosX + (clientX - startX); - - if ($image.height() > $imageContainer.height()) { - - if (($imageContainer.offset().top + $imageContainer.height()) > (top + $image.height())) { - top = $imageContainer.offset().top + $imageContainer.height() - $image.height(); - } else { - top = ($imageContainer.offset().top < top) ? 0 : top; - } - $image.offset({ - 'top': top - }); - } - - if ($image.width() > $imageContainer.width()) { - - if (($imageContainer.offset().left + $imageContainer.width()) > (left + $image.width())) { - left = $imageContainer.offset().left + $imageContainer.width() - $image.width(); - } else { - left = ($imageContainer.offset().left < left) ? $imageContainer.offset().left : left; - } - $image.offset({ - 'left': left - }); - } - } - }); - - $image - .off(isTouchEnabled ? 'touchend' : 'mouseup pointerup MSPointerUp') - .on(isTouchEnabled ? 'touchend' : 'mouseup pointerup MSPointerUp', function (e) { - if (gallery.data('fotorama').fullScreen && isDragActive && isDraggable) { - isDragActive = false; - $image.css('cursor', 'pointer'); - - return false; - } - }); - }); - } - function onScroll() { if (curThumb !== null) { @@ -726,260 +565,14 @@ } } - if ($('.fotorama-item').data('fotorama').fullScreen) { - $('.fotorama__stage__frame .fotorama__img--full').each(function () { - var image = new Image(); - image.src = $(this).attr("src"); - - if ( (image.height > $(this).parent().height()) || (image.width > $(this).parent().width()) ) { - - if (image.height / image.width < $(this).parent().height() / $(this).parent().width()) { - $(this).width($(this).parent().width()); - $(this).height(''); - } else { - $(this).height($(this).parent().height()); - $(this).width(''); - } - } - }); - } $(window).on('scroll', onScroll); $(window).resize(function() { - - if ($('.fotorama-item').data('fotorama').fullScreen) { - - $('.fotorama__stage__frame .fotorama__img--full').each(function () { - var image = new Image(); - image.src = $(this).attr("src"); - - if ( (image.height > $(this).parent().height()) || (image.width > $(this).parent().width()) ) { - - if (image.height / image.width < $(this).parent().height() / $(this).parent().width()) { - $(this).width($(this).parent().width()); - $(this).height(''); - } else { - $(this).height($(this).parent().height()); - $(this).width(''); - } - } - }); - - toggleZoomButtons($('[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full')); - } - - _init($box, gOptions); - }); - function resetVars($image) { - zoomWidthStep = 0; - zoomHeightStep = 0; - isDraggable = false; - $image.css({ - top: 0, - left: 0, - right: 0, - bottom: 0, - cursor: '' - }); - } - - function checkFullscreenImagePosition(widthStep, heightStep) { - var $preview, $image, $imageContainer, gallery, top, left; - - if ($('[data-gallery-role="gallery"]').data('fotorama').fullScreen) { - - $preview = $('[data-gallery-role="stage-shaft"] [data-active="true"] img'); - $image = $('[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full'); - $imageContainer = $preview.parent(); - gallery = $('[data-gallery-role="gallery"]'); - top = $image.offset().top; - left = $image.offset().left; - - if ($image.height() > $imageContainer.height()) { - if ($imageContainer.offset().top + $imageContainer.height() > top + $image.height() + heightStep/2) { - top = $imageContainer.offset().top + $imageContainer.height() - $image.height() + heightStep/2; - } else { - top = ($imageContainer.offset().top <= top + heightStep/2 && heightStep > 0) ? 0 : top + heightStep/2; - } - $image.css({ - top: top, - bottom: 'auto' - }); - } else { - $image.css({ - top: 0, - bottom: 0 - }); - } - - if ($image.width() > $imageContainer.width()) { - if (($imageContainer.offset().left + $imageContainer.width()) > (left + $image.width() + widthStep/2)) { - left = $imageContainer.offset().left + $imageContainer.width() - $image.width() + widthStep/2; - } else { - left = ($imageContainer.offset().left <= left + widthStep/2 && widthStep > 0) ? 0 : left - $imageContainer.offset().left + widthStep/2; - } - $image.css({ - left: left, - right: 'auto' - }); - } else { - $image.css({ - left: 0, - right: 0 - }); - } - } - } - - function zoomIn(e) { - if (zoomShown) { - var $image = $('[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full'), - imgOriginalSize = $image.length ? getImageSize($image[0].src) : '', - widthResult, - heightResult; - - if (!zoomWidthStep) { - zoomWidthStep = Math.ceil((imgOriginalSize.rw - $image.width())/parseFloat(options.fullscreenzoom)); - zoomHeightStep = Math.ceil((imgOriginalSize.rh - $image.height())/parseFloat(options.fullscreenzoom)); - } - widthResult = $image.width() + zoomWidthStep; - heightResult = $image.height() + zoomHeightStep; - - if (widthResult >= imgOriginalSize.rw) { - widthResult = imgOriginalSize.rw; - } - if (heightResult >= imgOriginalSize.rh) { - heightResult = imgOriginalSize.rh; - } - - if ( zoomShown ) { - isDraggable = true; - } - - if ($image.width() >= $image.height() && $image.width() !== imgOriginalSize.rw) { - $image.css({ - width: widthResult, - height: 'auto' - }); - checkFullscreenImagePosition(-zoomWidthStep, -zoomHeightStep); - } else if ($image.width() < $image.height() && $image.height() !== imgOriginalSize.rh) { - $image.css({ - width: 'auto', - height: heightResult - }); - checkFullscreenImagePosition(-zoomWidthStep, -zoomHeightStep); - } - } - - return false; - } - - function zoomOut(e) { - if (zoomShown) { - var $image = $('[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full'), - setedResult = $image.width() - zoomWidthStep, - widthCheck = $image.width() - zoomWidthStep <= $image.parent().width(), - heightCheck = $image.height() - zoomHeightStep <= $image.parent().height(); - - e.preventDefault(); - - if (widthCheck && heightCheck) { - if ($image.width() >= $image.height()) { - $image.trigger('fotorama:load'); - - return false; - } else if ($image.width() < $image.height()) { - $image.trigger('fotorama:load'); - - return false; - } - } - - $image.css({'width': setedResult, height: 'auto'}); - checkFullscreenImagePosition(zoomWidthStep, zoomHeightStep); - } - - return false; - } - - /** - * Return width and height of original image - * @param src path for original image - * @returns {{rw: number, rh: number}} - */ - function getImageSize(src) { - var img = new Image(), - imgSize = { - rw: 0, - rh: 0 - }; - img.src = src; - imgSize.rw = img.width; - imgSize.rh = img.height; - return imgSize; - } - - - function setEventOnce() { - $('.fotorama__zoom-in') - .off('mouseup') - .on('mouseup', zoomIn); - $('.fotorama__zoom-out') - .off('mouseup') - .on('mouseup', zoomOut); - $('.fotorama__zoom-in') - .off('touchstart') - .on('touchstart', zoomIn); - $('.fotorama__zoom-out') - .off('touchstart') - .on('touchstart', zoomOut); - } - $(document).on('mousemove', onMousemove); _init($box, gOptions); - setEventOnce(); - magnifierFullscreen(); - - if (!onWheelCallback) { - onWheelCallback = function onWheel(e) { - if ($('[data-gallery-role="gallery"]').data('fotorama').fullScreen) { - e = e || window.event; - - - var delta = e.deltaY || e.detail || e.wheelDelta; - - if (delta > 0) { - zoomOut(e); - } else { - zoomIn(e); - } - - e.preventDefault ? e.preventDefault() : (e.returnValue = false); - } - }; - } - $('.fotorama-item').on('fotorama:load', function () { - if (document.querySelector('.fotorama__stage').addEventListener) { - if ('onwheel' in document) { - // IE9+, FF17+, Ch31+ - document.querySelector('.fotorama__stage').removeEventListener("wheel", onWheelCallback); - document.querySelector('.fotorama__stage').addEventListener("wheel", onWheelCallback); - } else if ('onmousewheel' in document) { - document.querySelector('.fotorama__stage').removeEventListener("mousewheel", onWheelCallback); - document.querySelector('.fotorama__stage').addEventListener("mousewheel", onWheelCallback); - } else { - // Firefox < 17 - document.querySelector('.fotorama__stage').removeEventListener("MozMousePixelScroll", onWheelCallback); - document.querySelector('.fotorama__stage').addEventListener("MozMousePixelScroll", onWheelCallback); - } - } else { // IE8- - document.querySelector('.fotorama__stage').detachEvent("onmousewheel", onWheelCallback); - document.querySelector('.fotorama__stage').attachEvent("onmousewheel", onWheelCallback); - } - }); } }(jQuery)); diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index 06a835ef9a2df..877a2683ecf76 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -14,9 +14,15 @@ define([ gallerySelector = '[data-gallery-role="gallery"]', magnifierSelector = '[data-gallery-role="magnifier"]', magnifierZoomSelector = '[data-gallery-role="magnifier-zoom"]', - fullScreenIcon = '[data-gallery-role="fotorama__fullscreen-icon"]', + zoomInButtonSelector = '[data-gallery-role="fotorama__zoom-in"]', + zoomOutButtonSelector = '[data-gallery-role="fotorama__zoom-out"]', + fullscreenImageSelector = '[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full', hideMagnifier, - behaveOnHover; + behaveOnHover, + zoomWidthStep, + zoomHeightStep, + zoomShown = true, + allowAnimating = true; if (isTouchEnabled) { $(element).on('fotorama:showend fotorama:load', function () { @@ -25,6 +31,448 @@ define([ }); } + /** + * Return width and height of original image + * @param src path for original image + * @returns {{rw: number, rh: number}} + */ + function getImageSize(src) { + var img = new Image(), + imgSize = { + rw: 0, + rh: 0 + }; + + img.src = src; + imgSize.rw = img.width; + imgSize.rh = img.height; + + return imgSize; + } + + function resetVars($image) { + zoomWidthStep = 0; + zoomHeightStep = 0; + allowAnimating = true; + $image.css({ + top: 0, + left: 0, + right: 0, + bottom: 0, + cursor: '', + width: 'auto', + height: 'auto', + maxWidth: '100%', + maxHeight: '100%' + }); + } + + function clickAnimation(e) { + + var roundRadius = 80, + clickAnimationDuration = 400; + + $('
').addClass('circle').offset({ + left: e.pageX - e.currentTarget.offsetLeft, + top: e.pageY - e.currentTarget.offsetTop + }).appendTo(e.currentTarget).animate( + { + height: roundRadius, + width: roundRadius, + left: e.pageX - roundRadius / 2 - e.currentTarget.offsetLeft, + top: e.pageY - roundRadius / 2 - e.currentTarget.offsetTop, + opacity: 0 + }, + clickAnimationDuration, + 'swing', + function () { + $(this).remove(); + } + ); + } + + function toggleZoomButtons($image) { + var path = $image.attr('src'), + imgSize; + + if (path) { + imgSize = getImageSize(path); + + if (imgSize.rh > $image.parent().height() || imgSize.rw > $image.parent().width()) { + $(zoomInButtonSelector).show(); + $(zoomOutButtonSelector).show(); + zoomShown = true; + } else { + $(zoomInButtonSelector).hide(); + $(zoomOutButtonSelector).hide(); + zoomShown = false; + } + } else { + $(zoomInButtonSelector).hide(); + $(zoomOutButtonSelector).hide(); + zoomShown = false; + } + } + + function checkFullscreenImagePosition($image, dimentions, widthStep, heightStep) { + var $imageContainer, settings, top, left, right, bottom, ratio; + + if ($(gallerySelector).data('fotorama').fullScreen && allowAnimating) { + + $imageContainer = $image.parent(); + top = $image.offset().top; + left = $image.offset().left; + ratio = $image.width() / $image.height(); + + if (!isNaN(dimentions.width)) { + dimentions.height = dimentions.width / ratio; + } + + if (!isNaN(dimentions.height)) { + dimentions.width = dimentions.height * ratio; + } + + if (dimentions.height >= $imageContainer.height()) { + top += heightStep / 2; + bottom = 0; + + top = top < $imageContainer.height() - dimentions.height ? + $imageContainer.height() - dimentions.height : top; + top = top > 0 ? 0 : top; + } else { + top = 0; + bottom = 0; + } + + if (dimentions.width >= $imageContainer.width()) { + left += -$imageContainer.parent().offset().left + widthStep / 2; + right = 0; + + left = left < $imageContainer.width() - dimentions.width ? + $imageContainer.width() - dimentions.width : left; + left = left > 0 ? 0 : left; + } else { + left = 0; + right = 0; + } + + settings = $.extend(dimentions, { + left: left, + top: top, + bottom: bottom, + right: right + }); + + //if (allowAnimating) { + //allowAnimating = false; + $image.css(settings); + //} + } + } + + function zoomIn(e) { + var $image, imgOriginalSize, widthResult, heightResult, dimentions = {}; + + if (zoomShown) { + $image = $(fullscreenImageSelector); + imgOriginalSize = getImageSize($image[0].src); + + e.preventDefault(); + + if (e.type === 'click' || e.type === 'touchstart') { + clickAnimation(e); + } + + if (!zoomWidthStep) { + zoomWidthStep = Math.ceil((imgOriginalSize.rw - $image.width()) / + parseFloat(config.magnifierOpts.fullscreenzoom)); + zoomHeightStep = Math.ceil((imgOriginalSize.rh - $image.height()) / + parseFloat(config.magnifierOpts.fullscreenzoom)); + } + + if ($image.css('maxHeight') !== 'none') { + dimentions = { + maxHeight: 'none', + maxWidth: 'none' + }; + } + + widthResult = $image.width() + zoomWidthStep; + heightResult = $image.height() + zoomHeightStep; + + if (widthResult >= imgOriginalSize.rw) { + widthResult = imgOriginalSize.rw; + } + + if (heightResult >= imgOriginalSize.rh) { + heightResult = imgOriginalSize.rh; + } + + if ($image.width() >= $image.height() && $image.width() !== imgOriginalSize.rw) { + dimentions = $.extend(dimentions, { + width: widthResult, + height: 'auto' + }); + checkFullscreenImagePosition($image, dimentions, -zoomWidthStep, -zoomHeightStep); + + } else if ($image.width() < $image.height() && $image.height() !== imgOriginalSize.rh) { + dimentions = $.extend(dimentions, { + width: 'auto', + height: heightResult + }); + checkFullscreenImagePosition($image, dimentions, -zoomWidthStep, -zoomHeightStep); + } + } + + return false; + } + + function zoomOut(e) { + var $image, widthResult, heightResult, dimentions, parentWidth, parentHeight; + + if (zoomShown) { + $image = $(fullscreenImageSelector); + widthResult = $image.width() - zoomWidthStep; + heightResult = $image.height() - zoomHeightStep; + parentWidth = $image.parent().width(); + parentHeight = $image.parent().height(); + + e.preventDefault(); + + if (e.type === 'click' || e.type === 'touchstart') { + clickAnimation(e); + } + + if ($image.width() > $image.height()) { + if (widthResult > parentWidth) { + dimentions = { + 'width': widthResult, + 'height': 'auto' + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } else { + if (heightResult > parentHeight) { + dimentions = { + 'width': widthResult, + 'height': 'auto' + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } else { + widthResult = parentWidth; + dimentions = { + 'width': widthResult, + 'height': 'auto' + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } + } + + } else { + if (heightResult > parentHeight) { + dimentions = { + width: 'auto', + height: heightResult + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } else { + if (widthResult > parentWidth) { + dimentions = { + width: 'auto', + height: heightResult + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } else { + if (parentHeight < parentWidth) { + heightResult = parentHeight; + dimentions = { + width: 'auto', + height: heightResult + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } else { + widthResult = parentWidth; + dimentions = { + 'width': widthResult, + 'height': 'auto' + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } + } + } + } + } + + return false; + } + + /** + * Bind event on scroll on active item in fotorama + * @param e + * @param fotorama - object of fotorama + */ + function mousewheel(e, fotorama, element) { + var $fotoramaStage = $(element).find('[data-fotorama-stage="fotorama__stage"]'), + fotoramaStage = $fotoramaStage.get(0); + + function onWheel(e) { + var delta = e.deltaY || e.detail || e.wheelDelta; + + if ($(gallerySelector).data('fotorama').fullScreen) { + e = e || window.event; + + if (delta > 0) { + zoomOut(e); + } else { + zoomIn(e); + } + + e.preventDefault ? e.preventDefault() : (e.returnValue = false); + } + } + + if (!$fotoramaStage.hasClass('magnify-wheel-loaded')) { + if (fotoramaStage && fotoramaStage.addEventListener) { + if ('onwheel' in document) { + fotoramaStage.addEventListener('wheel', onWheel); + } else if ('onmousewheel' in document) { + fotoramaStage.addEventListener('mousewheel', onWheel); + } else { + fotoramaStage.addEventListener('MozMousePixelScroll', onWheel); + } + $fotoramaStage.addClass('magnify-wheel-loaded'); + } + } + } + + /** + * Metod which makes draggable picture. Also work on touch devices. + */ + function magnifierFullscreen() { + var isDragActive = false, + startX, + startY, + imagePosX, + imagePosY, + touch, + $gallery = $(gallerySelector), + $image = $(fullscreenImageSelector, $gallery), + $imageContainer = $('[data-gallery-role="stage-shaft"] [data-active="true"]'), + gallery = $gallery.data('fotorama'); + + function shiftImage(dx, dy) { + var top = +imagePosY + dy; + var left = +imagePosX + dx; + + if ($image.height() > $imageContainer.height()) { + + if (($imageContainer.offset().top + $imageContainer.height()) > (top + $image.height())) { + top = $imageContainer.offset().top + $imageContainer.height() - $image.height(); + } else { + top = ($imageContainer.offset().top < top) ? 0 : top; + } + $image.offset({ + 'top': top + }); + } + + if ($image.width() > $imageContainer.width()) { + + if (($imageContainer.offset().left + $imageContainer.width()) > (left + $image.width())) { + left = $imageContainer.offset().left + $imageContainer.width() - $image.width(); + } else { + left = ($imageContainer.offset().left < left) ? $imageContainer.offset().left : left; + } + $image.offset({ + 'left': left + }); + } + } + + toggleZoomButtons($image); + + $image.on(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown', function (e) { + if (gallery.fullScreen) { + e.preventDefault(); + + $image.css('cursor', 'move'); + imagePosY = $image.offset().top; + imagePosX = $image.offset().left; + + if (isTouchEnabled) { + touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; + e.clientX = touch.pageX; + e.clientY = touch.pageY; + } + startX = e.clientX || e.originalEvent.clientX; + startY = e.clientY || e.originalEvent.clientY; + isDragActive = true; + + $image.css({ + transitionProperty: 'width, height' + }); + + } + }); + + $image.on(isTouchEnabled ? 'touchmove' : 'mousemove pointermove MSPointerMove', function (e) { + var top, left, clientX, clientY; + + if (gallery.fullScreen && isDragActive) { + + clientX = e.clientX || e.originalEvent.clientX; + clientY = e.clientY || e.originalEvent.clientY; + + e.preventDefault(); + + if (isTouchEnabled) { + touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; + e.clientX = touch.pageX; + e.clientY = touch.pageY; + } + shiftImage((clientX - startX), (clientY - startY)); + } + }); + + $(window).keyup(function (e) { + imagePosX = $(fullscreenImageSelector, $gallery).offset().left; + imagePosY = $(fullscreenImageSelector, $gallery).offset().top; + var step = 20; + + if (e.keyCode === 102) { + shiftImage(-step, 0); + } + if (e.keyCode === 98) { + shiftImage(0, step); + } + if (e.keyCode === 100) { + shiftImage(step, 0); + } + if (e.keyCode === 104) { + shiftImage(0, -step); + } + + }); + + $image.on('transitionend', function() { + allowAnimating = true; + }); + + $(document).on(isTouchEnabled ? 'touchend' : 'mouseup pointerup MSPointerUp', function () { + if (gallery.fullScreen) { + isDragActive = false; + $image.css({ + cursor: 'pointer', + transitionProperty: 'width, height, top, left' + }); + } + }); + + $image.css({ + width: $image.width(), + height: $image.height() + }); + } + /** * Hides magnifier preview and zoom blocks. */ @@ -39,7 +487,8 @@ define([ behaveOnHover = function (e, initPos) { var pos = [e.pageX, e.pageY], isArrow = $(e.target).data('gallery-role') === 'arrow', - isClick = initPos[0] === pos[0] && initPos[1] === pos[1]; + isClick = initPos[0] === pos[0] && initPos[1] === pos[1]; + if (isArrow || !isClick) { hideMagnifier(); } @@ -50,7 +499,6 @@ define([ } else if (config.magnifierOpts.eventType === 'hover') { $(element).on('pointerdown mousedown MSPointerDown', function (e) { var pos = [e.pageX, e.pageY]; - $(element).on('mousemove pointermove MSPointerMove', function (ev) { navigator.msPointerEnabled ? hideMagnifier() : behaveOnHover(ev, pos); }); @@ -62,7 +510,7 @@ define([ $.extend(config.magnifierOpts, { zoomable: false, - thumb: '.fotorama__img:not(".fotorama__img--full")', + thumb: '.fotorama__img', largeWrapper: '[data-gallery-role="magnifier"]', height: config.magnifierOpts.height || function () { return $('[data-active="true"]').height(); @@ -80,18 +528,75 @@ define([ } }); - $(element).on('fotorama:showend fotorama:load fotorama:fullscreenexit fotorama:ready', function (e, fotorama) { + $(element).on('fotorama:load fotorama:showend fotorama:fullscreenexit fotorama:ready', function (e, fotorama) { hideMagnifier(); config.magnifierOpts.large = $(gallerySelector).data('fotorama').activeFrame.img; - config.magnifierOpts.full = fotorama.data[fotorama.activeIndex].full; + config.magnifierOpts.full = fotorama.data[fotorama.activeIndex].original; $($(gallerySelector).data('fotorama').activeFrame.$stageFrame).magnify(config.magnifierOpts); }); - $(element).on('gallery:loaded', function () { - $(element).find(gallerySelector).on('fotorama:show fotorama:fullscreenenter ', function () { - hideMagnifier(); - }); + $(element).on('gallery:loaded', function (e) { + $(element).find(gallerySelector) + .on('fotorama:ready', function (e, fotorama) { + var $zoomIn = $(zoomInButtonSelector), + $zoomOut = $(zoomOutButtonSelector); + + if (!$zoomIn.hasClass('zoom-in-loaded')) { + $zoomIn.on('click touchstart', zoomIn); + + $zoomIn.keyup(function (e) { + + if (e.keyCode === 13) { + zoomIn(e); + } + }); + + $(window).keyup(function (e) { + + if (e.keyCode === 107 || fotorama.fullscreen) { + zoomIn(e); + } + }); + + $zoomIn.addClass('zoom-in-loaded'); + } + + if (!$zoomOut.hasClass('zoom-out-loaded')) { + $zoomOut.on('click touchstart', zoomOut); + + $zoomOut.keyup(function (e) { + + if (e.keyCode === 13) { + zoomOut(e); + } + }); + + $(window).keyup(function (e) { + + if (e.keyCode === 109 || fotorama.fullscreen) { + zoomOut(e); + } + }); + + $zoomOut.addClass('zoom-out-loaded'); + } + }) + .on('fotorama:fullscreenenter fotorama:showend', function (e, fotorama) { + hideMagnifier(); + $(element).data('gallery').updateOptions({ + swipe: false + }); + magnifierFullscreen(e, fotorama); + mousewheel(e, fotorama, element); + }) + .on('fotorama:load', function (e, fotorama) { + toggleZoomButtons($(fullscreenImageSelector)); + magnifierFullscreen(); + }) + .on('fotorama:show', function (e, fotorama) { + resetVars($(fullscreenImageSelector)); + }); }); return config; - }; + } }); From db9338375194d6ad1afccb55bdcaf74f04c745a2 Mon Sep 17 00:00:00 2001 From: Uladzislau Harbachou Date: Wed, 21 Oct 2015 15:04:27 +0300 Subject: [PATCH 003/214] JS-241: Various rendering bugs with fullscreen Gallery --- lib/web/mage/gallery/gallery.less | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index 50718779c5a41..a253728cc884b 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -1248,3 +1248,29 @@ body.fotorama__fullscreen { display: none !important; } } + +.fotorama--fullscreen { + .fotorama__stage__frame { + .fotorama__img { + display:none; + bottom: 0; + left: 0; + margin: auto; + max-height: inherit; + max-width: inherit; + position: absolute; + right: 0; + top: 0; + } + .fotorama__img--full { + display:block; + height: auto; + width: auto; + max-height: 100%; + max-width: 100%; + vertical-align: middle; + transition-duration: @fotorama-fullscreen-zoom-time; + transition-property: width, height, top, left; + } + } +} \ No newline at end of file From 919353602286e65b5fc73fba66d0155167d2e9a2 Mon Sep 17 00:00:00 2001 From: Uladzislau Harbachou Date: Tue, 20 Oct 2015 16:35:33 +0400 Subject: [PATCH 004/214] JS-255: Stabilization fixes for magnifier and gallery --- lib/web/mage/gallery/gallery.html | 14 +- lib/web/mage/gallery/gallery.less | 29 +- lib/web/magnifier/magnifier.js | 411 +---------------------- lib/web/magnifier/magnify.js | 529 +++++++++++++++++++++++++++++- 4 files changed, 548 insertions(+), 435 deletions(-) diff --git a/lib/web/mage/gallery/gallery.html b/lib/web/mage/gallery/gallery.html index 34d26c812dae4..25acbc8f75bd7 100644 --- a/lib/web/mage/gallery/gallery.html +++ b/lib/web/mage/gallery/gallery.html @@ -7,7 +7,7 @@
-
+
@@ -18,19 +18,19 @@
-
-
+
+
-
-
+
+
-
+
@@ -38,4 +38,4 @@
-
+
\ No newline at end of file diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index f1a68415517b1..50718779c5a41 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -8,6 +8,7 @@ @fotorama_close_size: 30px; @size-fotorama-block: 50px; @fotorama-thumb-arrow: 30px; +@fotorama-fullscreen-zoom-time: 0.3s; @import '../../css/source/lib/_lib.less'; // Global lib @import '../../css/source/_theme.less'; // Theme overrides @@ -78,7 +79,6 @@ &:extend(.fotorama-sprite); background-position: 0 (-@size-fotorama-block) !important; } - .fotorama__zoom-in { top: 0; &:extend(.fotorama-sprite); @@ -86,6 +86,15 @@ } } +.circle { + position: absolute; + background-color: silver; + opacity: 0.7; + border-radius: 100%; + height: 1px; + width: 1px; +} + .fotorama__zoom-in, .fotorama__zoom-out { display: none; @@ -93,6 +102,7 @@ .fotorama__fullscreen { .fotorama__zoom-in, .fotorama__zoom-out { + overflow: hidden; position: absolute; width: 50px; height: 50px; @@ -725,8 +735,13 @@ display: none; } +.fotorama--fullscreen-icons { + .fotorama__fullscreen-icon { + display: none; + } +} + .fotorama__fullscreen-icon { - //display: none; &:focus { &:extend(.fotorama-focus); border-radius: 50%; @@ -736,7 +751,7 @@ .fotorama--fullscreen { .fotorama__fullscreen-icon { - //display: inline-block; + display: inline-block; background-position: (-@size-fotorama-block) 0; } } @@ -1083,6 +1098,8 @@ max-height: 100%; max-width: 100%; vertical-align: middle; + transition-duration: @fotorama-fullscreen-zoom-time; + transition-property: width, height, top, left; } } @@ -1227,9 +1244,7 @@ body.fotorama__fullscreen { .magnify-fullimage { display: inline-block; } - .fotorama__stage__shaft { - //.fotorama__img { - // display: none; - //} + .magnify-lens { + display: none !important; } } diff --git a/lib/web/magnifier/magnifier.js b/lib/web/magnifier/magnifier.js index 2a315a2b9bc6f..232579bb4f41e 100644 --- a/lib/web/magnifier/magnifier.js +++ b/lib/web/magnifier/magnifier.js @@ -4,11 +4,6 @@ */ ;(function ($) { - var onWheelCallback, - zoomWidthStep = 0, - zoomHeightStep = 0, - isDraggable = false; - $.fn.magnify = function (options) { 'use strict'; @@ -29,9 +24,8 @@ $thumb, that = this, largeWrapper = options.largeWrapper || ".magnifier-preview", - $largeWrapper = $(largeWrapper), - zoomShown = false, - curThumb = null, + $largeWrapper = $(largeWrapper); + curThumb = null, currentOpts = { x: 0, y: 0, @@ -564,161 +558,6 @@ } } - function toggleZoomButtons($image) { - var path = $image.attr("src"), - imgSize; - if (path) { - imgSize = getImageSize(path); - if ((imgSize.rh > $image.parent().height()) || (imgSize.rw > $image.parent().width())) { - $('.fotorama__zoom-in').show(); - $('.fotorama__zoom-out').show(); - zoomShown = true; - } else { - $('.fotorama__zoom-in').hide(); - $('.fotorama__zoom-out').hide(); - zoomShown = false; - } - } else { - $('.fotorama__zoom-in').hide(); - $('.fotorama__zoom-out').hide(); - zoomShown = false; - } - } - - function magnifierFullscreen () { - var isDragActive = false, - startX, - startY, - imagePosX, - imagePosY, - touch, - isTouchEnabled = 'ontouchstart' in document.documentElement; - - $('[data-gallery-role="gallery"]').on('fotorama:fullscreenenter fotorama:showend fotorama:load', function () { - var $preview = $('[data-gallery-role="stage-shaft"] [data-active="true"] img'), - $image = $('[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full'), - $imageContainer = $preview.parent(), - gallery = $('[data-gallery-role="gallery"]'); - - gallery.on('fotorama:fullscreenexit', function () { - $thumb.css({ - 'top': '', - 'left': '' - }); - }); - - if (gallery.data('fotorama').fullScreen) { - toggleZoomButtons($image); - resetVars($('[data-gallery-role="stage-shaft"] .fotorama__img--full')); - - $('.fotorama__stage__frame .fotorama__img--full').each(function () { - var path = $(this).attr("src"), - imgSize; - if (path) { - imgSize = getImageSize(path); - - if ((imgSize.rh > $(this).parent().height()) || (imgSize.rw > $(this).parent().width())) { - - if (imgSize.rh / imgSize.rw < $(this).parent().height() / $(this).parent().width()) { - $(this).width($(this).parent().width()); - $(this).height('auto'); - } else { - $(this).height($(this).parent().height()); - $(this).width('auto'); - } - - $(this).css({ - 'top': '', - 'left': '' - }); - } - } - }); - } - - $image - .off(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown') - .on(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown', function (e) { - if (gallery.data('fotorama').fullScreen && isDraggable) { - e.preventDefault(); - $image.css('cursor', 'move'); - imagePosY = $image.offset().top; - imagePosX = $image.offset().left; - - if (isTouchEnabled) { - touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; - e.clientX = touch.pageX; - e.clientY = touch.pageY; - } - startX = e.clientX || e.originalEvent.clientX; - startY = e.clientY || e.originalEvent.clientY; - isDragActive = true; - } - }); - - - - $image - .off(isTouchEnabled ? 'touchmove' : 'mousemove pointermove MSPointerMove') - .on(isTouchEnabled ? 'touchmove' : 'mousemove pointermove MSPointerMove', function (e) { - if (gallery.data('fotorama').fullScreen && isDragActive && isDraggable) { - - var top, - left, - startOffset = $image.offset(), - clientX = e.clientX || e.originalEvent.clientX, - clientY = e.clientY || e.originalEvent.clientY; - - - e.preventDefault(); - - if (isTouchEnabled) { - touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; - e.clientX = touch.pageX; - e.clientY = touch.pageY; - } - top = +imagePosY + (clientY - startY); - left = +imagePosX + (clientX - startX); - - if ($image.height() > $imageContainer.height()) { - - if (($imageContainer.offset().top + $imageContainer.height()) > (top + $image.height())) { - top = $imageContainer.offset().top + $imageContainer.height() - $image.height(); - } else { - top = ($imageContainer.offset().top < top) ? 0 : top; - } - $image.offset({ - 'top': top - }); - } - - if ($image.width() > $imageContainer.width()) { - - if (($imageContainer.offset().left + $imageContainer.width()) > (left + $image.width())) { - left = $imageContainer.offset().left + $imageContainer.width() - $image.width(); - } else { - left = ($imageContainer.offset().left < left) ? $imageContainer.offset().left : left; - } - $image.offset({ - 'left': left - }); - } - } - }); - - $image - .off(isTouchEnabled ? 'touchend' : 'mouseup pointerup MSPointerUp') - .on(isTouchEnabled ? 'touchend' : 'mouseup pointerup MSPointerUp', function (e) { - if (gallery.data('fotorama').fullScreen && isDragActive && isDraggable) { - isDragActive = false; - $image.css('cursor', 'pointer'); - - return false; - } - }); - }); - } - function onScroll() { if (curThumb !== null) { @@ -726,260 +565,14 @@ } } - if ($('.fotorama-item').data('fotorama').fullScreen) { - $('.fotorama__stage__frame .fotorama__img--full').each(function () { - var image = new Image(); - image.src = $(this).attr("src"); - - if ( (image.height > $(this).parent().height()) || (image.width > $(this).parent().width()) ) { - - if (image.height / image.width < $(this).parent().height() / $(this).parent().width()) { - $(this).width($(this).parent().width()); - $(this).height(''); - } else { - $(this).height($(this).parent().height()); - $(this).width(''); - } - } - }); - } $(window).on('scroll', onScroll); $(window).resize(function() { - - if ($('.fotorama-item').data('fotorama').fullScreen) { - - $('.fotorama__stage__frame .fotorama__img--full').each(function () { - var image = new Image(); - image.src = $(this).attr("src"); - - if ( (image.height > $(this).parent().height()) || (image.width > $(this).parent().width()) ) { - - if (image.height / image.width < $(this).parent().height() / $(this).parent().width()) { - $(this).width($(this).parent().width()); - $(this).height(''); - } else { - $(this).height($(this).parent().height()); - $(this).width(''); - } - } - }); - - toggleZoomButtons($('[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full')); - } - - _init($box, gOptions); - }); - function resetVars($image) { - zoomWidthStep = 0; - zoomHeightStep = 0; - isDraggable = false; - $image.css({ - top: 0, - left: 0, - right: 0, - bottom: 0, - cursor: '' - }); - } - - function checkFullscreenImagePosition(widthStep, heightStep) { - var $preview, $image, $imageContainer, gallery, top, left; - - if ($('[data-gallery-role="gallery"]').data('fotorama').fullScreen) { - - $preview = $('[data-gallery-role="stage-shaft"] [data-active="true"] img'); - $image = $('[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full'); - $imageContainer = $preview.parent(); - gallery = $('[data-gallery-role="gallery"]'); - top = $image.offset().top; - left = $image.offset().left; - - if ($image.height() > $imageContainer.height()) { - if ($imageContainer.offset().top + $imageContainer.height() > top + $image.height() + heightStep/2) { - top = $imageContainer.offset().top + $imageContainer.height() - $image.height() + heightStep/2; - } else { - top = ($imageContainer.offset().top <= top + heightStep/2 && heightStep > 0) ? 0 : top + heightStep/2; - } - $image.css({ - top: top, - bottom: 'auto' - }); - } else { - $image.css({ - top: 0, - bottom: 0 - }); - } - - if ($image.width() > $imageContainer.width()) { - if (($imageContainer.offset().left + $imageContainer.width()) > (left + $image.width() + widthStep/2)) { - left = $imageContainer.offset().left + $imageContainer.width() - $image.width() + widthStep/2; - } else { - left = ($imageContainer.offset().left <= left + widthStep/2 && widthStep > 0) ? 0 : left - $imageContainer.offset().left + widthStep/2; - } - $image.css({ - left: left, - right: 'auto' - }); - } else { - $image.css({ - left: 0, - right: 0 - }); - } - } - } - - function zoomIn(e) { - if (zoomShown) { - var $image = $('[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full'), - imgOriginalSize = $image.length ? getImageSize($image[0].src) : '', - widthResult, - heightResult; - - if (!zoomWidthStep) { - zoomWidthStep = Math.ceil((imgOriginalSize.rw - $image.width())/parseFloat(options.fullscreenzoom)); - zoomHeightStep = Math.ceil((imgOriginalSize.rh - $image.height())/parseFloat(options.fullscreenzoom)); - } - widthResult = $image.width() + zoomWidthStep; - heightResult = $image.height() + zoomHeightStep; - - if (widthResult >= imgOriginalSize.rw) { - widthResult = imgOriginalSize.rw; - } - if (heightResult >= imgOriginalSize.rh) { - heightResult = imgOriginalSize.rh; - } - - if ( zoomShown ) { - isDraggable = true; - } - - if ($image.width() >= $image.height() && $image.width() !== imgOriginalSize.rw) { - $image.css({ - width: widthResult, - height: 'auto' - }); - checkFullscreenImagePosition(-zoomWidthStep, -zoomHeightStep); - } else if ($image.width() < $image.height() && $image.height() !== imgOriginalSize.rh) { - $image.css({ - width: 'auto', - height: heightResult - }); - checkFullscreenImagePosition(-zoomWidthStep, -zoomHeightStep); - } - } - - return false; - } - - function zoomOut(e) { - if (zoomShown) { - var $image = $('[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full'), - setedResult = $image.width() - zoomWidthStep, - widthCheck = $image.width() - zoomWidthStep <= $image.parent().width(), - heightCheck = $image.height() - zoomHeightStep <= $image.parent().height(); - - e.preventDefault(); - - if (widthCheck && heightCheck) { - if ($image.width() >= $image.height()) { - $image.trigger('fotorama:load'); - - return false; - } else if ($image.width() < $image.height()) { - $image.trigger('fotorama:load'); - - return false; - } - } - - $image.css({'width': setedResult, height: 'auto'}); - checkFullscreenImagePosition(zoomWidthStep, zoomHeightStep); - } - - return false; - } - - /** - * Return width and height of original image - * @param src path for original image - * @returns {{rw: number, rh: number}} - */ - function getImageSize(src) { - var img = new Image(), - imgSize = { - rw: 0, - rh: 0 - }; - img.src = src; - imgSize.rw = img.width; - imgSize.rh = img.height; - return imgSize; - } - - - function setEventOnce() { - $('.fotorama__zoom-in') - .off('mouseup') - .on('mouseup', zoomIn); - $('.fotorama__zoom-out') - .off('mouseup') - .on('mouseup', zoomOut); - $('.fotorama__zoom-in') - .off('touchstart') - .on('touchstart', zoomIn); - $('.fotorama__zoom-out') - .off('touchstart') - .on('touchstart', zoomOut); - } - $(document).on('mousemove', onMousemove); _init($box, gOptions); - setEventOnce(); - magnifierFullscreen(); - - if (!onWheelCallback) { - onWheelCallback = function onWheel(e) { - if ($('[data-gallery-role="gallery"]').data('fotorama').fullScreen) { - e = e || window.event; - - - var delta = e.deltaY || e.detail || e.wheelDelta; - - if (delta > 0) { - zoomOut(e); - } else { - zoomIn(e); - } - - e.preventDefault ? e.preventDefault() : (e.returnValue = false); - } - }; - } - $('.fotorama-item').on('fotorama:load', function () { - if (document.querySelector('.fotorama__stage').addEventListener) { - if ('onwheel' in document) { - // IE9+, FF17+, Ch31+ - document.querySelector('.fotorama__stage').removeEventListener("wheel", onWheelCallback); - document.querySelector('.fotorama__stage').addEventListener("wheel", onWheelCallback); - } else if ('onmousewheel' in document) { - document.querySelector('.fotorama__stage').removeEventListener("mousewheel", onWheelCallback); - document.querySelector('.fotorama__stage').addEventListener("mousewheel", onWheelCallback); - } else { - // Firefox < 17 - document.querySelector('.fotorama__stage').removeEventListener("MozMousePixelScroll", onWheelCallback); - document.querySelector('.fotorama__stage').addEventListener("MozMousePixelScroll", onWheelCallback); - } - } else { // IE8- - document.querySelector('.fotorama__stage').detachEvent("onmousewheel", onWheelCallback); - document.querySelector('.fotorama__stage').attachEvent("onmousewheel", onWheelCallback); - } - }); } }(jQuery)); diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index 06a835ef9a2df..877a2683ecf76 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -14,9 +14,15 @@ define([ gallerySelector = '[data-gallery-role="gallery"]', magnifierSelector = '[data-gallery-role="magnifier"]', magnifierZoomSelector = '[data-gallery-role="magnifier-zoom"]', - fullScreenIcon = '[data-gallery-role="fotorama__fullscreen-icon"]', + zoomInButtonSelector = '[data-gallery-role="fotorama__zoom-in"]', + zoomOutButtonSelector = '[data-gallery-role="fotorama__zoom-out"]', + fullscreenImageSelector = '[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full', hideMagnifier, - behaveOnHover; + behaveOnHover, + zoomWidthStep, + zoomHeightStep, + zoomShown = true, + allowAnimating = true; if (isTouchEnabled) { $(element).on('fotorama:showend fotorama:load', function () { @@ -25,6 +31,448 @@ define([ }); } + /** + * Return width and height of original image + * @param src path for original image + * @returns {{rw: number, rh: number}} + */ + function getImageSize(src) { + var img = new Image(), + imgSize = { + rw: 0, + rh: 0 + }; + + img.src = src; + imgSize.rw = img.width; + imgSize.rh = img.height; + + return imgSize; + } + + function resetVars($image) { + zoomWidthStep = 0; + zoomHeightStep = 0; + allowAnimating = true; + $image.css({ + top: 0, + left: 0, + right: 0, + bottom: 0, + cursor: '', + width: 'auto', + height: 'auto', + maxWidth: '100%', + maxHeight: '100%' + }); + } + + function clickAnimation(e) { + + var roundRadius = 80, + clickAnimationDuration = 400; + + $('
').addClass('circle').offset({ + left: e.pageX - e.currentTarget.offsetLeft, + top: e.pageY - e.currentTarget.offsetTop + }).appendTo(e.currentTarget).animate( + { + height: roundRadius, + width: roundRadius, + left: e.pageX - roundRadius / 2 - e.currentTarget.offsetLeft, + top: e.pageY - roundRadius / 2 - e.currentTarget.offsetTop, + opacity: 0 + }, + clickAnimationDuration, + 'swing', + function () { + $(this).remove(); + } + ); + } + + function toggleZoomButtons($image) { + var path = $image.attr('src'), + imgSize; + + if (path) { + imgSize = getImageSize(path); + + if (imgSize.rh > $image.parent().height() || imgSize.rw > $image.parent().width()) { + $(zoomInButtonSelector).show(); + $(zoomOutButtonSelector).show(); + zoomShown = true; + } else { + $(zoomInButtonSelector).hide(); + $(zoomOutButtonSelector).hide(); + zoomShown = false; + } + } else { + $(zoomInButtonSelector).hide(); + $(zoomOutButtonSelector).hide(); + zoomShown = false; + } + } + + function checkFullscreenImagePosition($image, dimentions, widthStep, heightStep) { + var $imageContainer, settings, top, left, right, bottom, ratio; + + if ($(gallerySelector).data('fotorama').fullScreen && allowAnimating) { + + $imageContainer = $image.parent(); + top = $image.offset().top; + left = $image.offset().left; + ratio = $image.width() / $image.height(); + + if (!isNaN(dimentions.width)) { + dimentions.height = dimentions.width / ratio; + } + + if (!isNaN(dimentions.height)) { + dimentions.width = dimentions.height * ratio; + } + + if (dimentions.height >= $imageContainer.height()) { + top += heightStep / 2; + bottom = 0; + + top = top < $imageContainer.height() - dimentions.height ? + $imageContainer.height() - dimentions.height : top; + top = top > 0 ? 0 : top; + } else { + top = 0; + bottom = 0; + } + + if (dimentions.width >= $imageContainer.width()) { + left += -$imageContainer.parent().offset().left + widthStep / 2; + right = 0; + + left = left < $imageContainer.width() - dimentions.width ? + $imageContainer.width() - dimentions.width : left; + left = left > 0 ? 0 : left; + } else { + left = 0; + right = 0; + } + + settings = $.extend(dimentions, { + left: left, + top: top, + bottom: bottom, + right: right + }); + + //if (allowAnimating) { + //allowAnimating = false; + $image.css(settings); + //} + } + } + + function zoomIn(e) { + var $image, imgOriginalSize, widthResult, heightResult, dimentions = {}; + + if (zoomShown) { + $image = $(fullscreenImageSelector); + imgOriginalSize = getImageSize($image[0].src); + + e.preventDefault(); + + if (e.type === 'click' || e.type === 'touchstart') { + clickAnimation(e); + } + + if (!zoomWidthStep) { + zoomWidthStep = Math.ceil((imgOriginalSize.rw - $image.width()) / + parseFloat(config.magnifierOpts.fullscreenzoom)); + zoomHeightStep = Math.ceil((imgOriginalSize.rh - $image.height()) / + parseFloat(config.magnifierOpts.fullscreenzoom)); + } + + if ($image.css('maxHeight') !== 'none') { + dimentions = { + maxHeight: 'none', + maxWidth: 'none' + }; + } + + widthResult = $image.width() + zoomWidthStep; + heightResult = $image.height() + zoomHeightStep; + + if (widthResult >= imgOriginalSize.rw) { + widthResult = imgOriginalSize.rw; + } + + if (heightResult >= imgOriginalSize.rh) { + heightResult = imgOriginalSize.rh; + } + + if ($image.width() >= $image.height() && $image.width() !== imgOriginalSize.rw) { + dimentions = $.extend(dimentions, { + width: widthResult, + height: 'auto' + }); + checkFullscreenImagePosition($image, dimentions, -zoomWidthStep, -zoomHeightStep); + + } else if ($image.width() < $image.height() && $image.height() !== imgOriginalSize.rh) { + dimentions = $.extend(dimentions, { + width: 'auto', + height: heightResult + }); + checkFullscreenImagePosition($image, dimentions, -zoomWidthStep, -zoomHeightStep); + } + } + + return false; + } + + function zoomOut(e) { + var $image, widthResult, heightResult, dimentions, parentWidth, parentHeight; + + if (zoomShown) { + $image = $(fullscreenImageSelector); + widthResult = $image.width() - zoomWidthStep; + heightResult = $image.height() - zoomHeightStep; + parentWidth = $image.parent().width(); + parentHeight = $image.parent().height(); + + e.preventDefault(); + + if (e.type === 'click' || e.type === 'touchstart') { + clickAnimation(e); + } + + if ($image.width() > $image.height()) { + if (widthResult > parentWidth) { + dimentions = { + 'width': widthResult, + 'height': 'auto' + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } else { + if (heightResult > parentHeight) { + dimentions = { + 'width': widthResult, + 'height': 'auto' + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } else { + widthResult = parentWidth; + dimentions = { + 'width': widthResult, + 'height': 'auto' + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } + } + + } else { + if (heightResult > parentHeight) { + dimentions = { + width: 'auto', + height: heightResult + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } else { + if (widthResult > parentWidth) { + dimentions = { + width: 'auto', + height: heightResult + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } else { + if (parentHeight < parentWidth) { + heightResult = parentHeight; + dimentions = { + width: 'auto', + height: heightResult + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } else { + widthResult = parentWidth; + dimentions = { + 'width': widthResult, + 'height': 'auto' + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } + } + } + } + } + + return false; + } + + /** + * Bind event on scroll on active item in fotorama + * @param e + * @param fotorama - object of fotorama + */ + function mousewheel(e, fotorama, element) { + var $fotoramaStage = $(element).find('[data-fotorama-stage="fotorama__stage"]'), + fotoramaStage = $fotoramaStage.get(0); + + function onWheel(e) { + var delta = e.deltaY || e.detail || e.wheelDelta; + + if ($(gallerySelector).data('fotorama').fullScreen) { + e = e || window.event; + + if (delta > 0) { + zoomOut(e); + } else { + zoomIn(e); + } + + e.preventDefault ? e.preventDefault() : (e.returnValue = false); + } + } + + if (!$fotoramaStage.hasClass('magnify-wheel-loaded')) { + if (fotoramaStage && fotoramaStage.addEventListener) { + if ('onwheel' in document) { + fotoramaStage.addEventListener('wheel', onWheel); + } else if ('onmousewheel' in document) { + fotoramaStage.addEventListener('mousewheel', onWheel); + } else { + fotoramaStage.addEventListener('MozMousePixelScroll', onWheel); + } + $fotoramaStage.addClass('magnify-wheel-loaded'); + } + } + } + + /** + * Metod which makes draggable picture. Also work on touch devices. + */ + function magnifierFullscreen() { + var isDragActive = false, + startX, + startY, + imagePosX, + imagePosY, + touch, + $gallery = $(gallerySelector), + $image = $(fullscreenImageSelector, $gallery), + $imageContainer = $('[data-gallery-role="stage-shaft"] [data-active="true"]'), + gallery = $gallery.data('fotorama'); + + function shiftImage(dx, dy) { + var top = +imagePosY + dy; + var left = +imagePosX + dx; + + if ($image.height() > $imageContainer.height()) { + + if (($imageContainer.offset().top + $imageContainer.height()) > (top + $image.height())) { + top = $imageContainer.offset().top + $imageContainer.height() - $image.height(); + } else { + top = ($imageContainer.offset().top < top) ? 0 : top; + } + $image.offset({ + 'top': top + }); + } + + if ($image.width() > $imageContainer.width()) { + + if (($imageContainer.offset().left + $imageContainer.width()) > (left + $image.width())) { + left = $imageContainer.offset().left + $imageContainer.width() - $image.width(); + } else { + left = ($imageContainer.offset().left < left) ? $imageContainer.offset().left : left; + } + $image.offset({ + 'left': left + }); + } + } + + toggleZoomButtons($image); + + $image.on(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown', function (e) { + if (gallery.fullScreen) { + e.preventDefault(); + + $image.css('cursor', 'move'); + imagePosY = $image.offset().top; + imagePosX = $image.offset().left; + + if (isTouchEnabled) { + touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; + e.clientX = touch.pageX; + e.clientY = touch.pageY; + } + startX = e.clientX || e.originalEvent.clientX; + startY = e.clientY || e.originalEvent.clientY; + isDragActive = true; + + $image.css({ + transitionProperty: 'width, height' + }); + + } + }); + + $image.on(isTouchEnabled ? 'touchmove' : 'mousemove pointermove MSPointerMove', function (e) { + var top, left, clientX, clientY; + + if (gallery.fullScreen && isDragActive) { + + clientX = e.clientX || e.originalEvent.clientX; + clientY = e.clientY || e.originalEvent.clientY; + + e.preventDefault(); + + if (isTouchEnabled) { + touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; + e.clientX = touch.pageX; + e.clientY = touch.pageY; + } + shiftImage((clientX - startX), (clientY - startY)); + } + }); + + $(window).keyup(function (e) { + imagePosX = $(fullscreenImageSelector, $gallery).offset().left; + imagePosY = $(fullscreenImageSelector, $gallery).offset().top; + var step = 20; + + if (e.keyCode === 102) { + shiftImage(-step, 0); + } + if (e.keyCode === 98) { + shiftImage(0, step); + } + if (e.keyCode === 100) { + shiftImage(step, 0); + } + if (e.keyCode === 104) { + shiftImage(0, -step); + } + + }); + + $image.on('transitionend', function() { + allowAnimating = true; + }); + + $(document).on(isTouchEnabled ? 'touchend' : 'mouseup pointerup MSPointerUp', function () { + if (gallery.fullScreen) { + isDragActive = false; + $image.css({ + cursor: 'pointer', + transitionProperty: 'width, height, top, left' + }); + } + }); + + $image.css({ + width: $image.width(), + height: $image.height() + }); + } + /** * Hides magnifier preview and zoom blocks. */ @@ -39,7 +487,8 @@ define([ behaveOnHover = function (e, initPos) { var pos = [e.pageX, e.pageY], isArrow = $(e.target).data('gallery-role') === 'arrow', - isClick = initPos[0] === pos[0] && initPos[1] === pos[1]; + isClick = initPos[0] === pos[0] && initPos[1] === pos[1]; + if (isArrow || !isClick) { hideMagnifier(); } @@ -50,7 +499,6 @@ define([ } else if (config.magnifierOpts.eventType === 'hover') { $(element).on('pointerdown mousedown MSPointerDown', function (e) { var pos = [e.pageX, e.pageY]; - $(element).on('mousemove pointermove MSPointerMove', function (ev) { navigator.msPointerEnabled ? hideMagnifier() : behaveOnHover(ev, pos); }); @@ -62,7 +510,7 @@ define([ $.extend(config.magnifierOpts, { zoomable: false, - thumb: '.fotorama__img:not(".fotorama__img--full")', + thumb: '.fotorama__img', largeWrapper: '[data-gallery-role="magnifier"]', height: config.magnifierOpts.height || function () { return $('[data-active="true"]').height(); @@ -80,18 +528,75 @@ define([ } }); - $(element).on('fotorama:showend fotorama:load fotorama:fullscreenexit fotorama:ready', function (e, fotorama) { + $(element).on('fotorama:load fotorama:showend fotorama:fullscreenexit fotorama:ready', function (e, fotorama) { hideMagnifier(); config.magnifierOpts.large = $(gallerySelector).data('fotorama').activeFrame.img; - config.magnifierOpts.full = fotorama.data[fotorama.activeIndex].full; + config.magnifierOpts.full = fotorama.data[fotorama.activeIndex].original; $($(gallerySelector).data('fotorama').activeFrame.$stageFrame).magnify(config.magnifierOpts); }); - $(element).on('gallery:loaded', function () { - $(element).find(gallerySelector).on('fotorama:show fotorama:fullscreenenter ', function () { - hideMagnifier(); - }); + $(element).on('gallery:loaded', function (e) { + $(element).find(gallerySelector) + .on('fotorama:ready', function (e, fotorama) { + var $zoomIn = $(zoomInButtonSelector), + $zoomOut = $(zoomOutButtonSelector); + + if (!$zoomIn.hasClass('zoom-in-loaded')) { + $zoomIn.on('click touchstart', zoomIn); + + $zoomIn.keyup(function (e) { + + if (e.keyCode === 13) { + zoomIn(e); + } + }); + + $(window).keyup(function (e) { + + if (e.keyCode === 107 || fotorama.fullscreen) { + zoomIn(e); + } + }); + + $zoomIn.addClass('zoom-in-loaded'); + } + + if (!$zoomOut.hasClass('zoom-out-loaded')) { + $zoomOut.on('click touchstart', zoomOut); + + $zoomOut.keyup(function (e) { + + if (e.keyCode === 13) { + zoomOut(e); + } + }); + + $(window).keyup(function (e) { + + if (e.keyCode === 109 || fotorama.fullscreen) { + zoomOut(e); + } + }); + + $zoomOut.addClass('zoom-out-loaded'); + } + }) + .on('fotorama:fullscreenenter fotorama:showend', function (e, fotorama) { + hideMagnifier(); + $(element).data('gallery').updateOptions({ + swipe: false + }); + magnifierFullscreen(e, fotorama); + mousewheel(e, fotorama, element); + }) + .on('fotorama:load', function (e, fotorama) { + toggleZoomButtons($(fullscreenImageSelector)); + magnifierFullscreen(); + }) + .on('fotorama:show', function (e, fotorama) { + resetVars($(fullscreenImageSelector)); + }); }); return config; - }; + } }); From 16d862be7dbed2edd5b0133b956df7d724833fab Mon Sep 17 00:00:00 2001 From: Uladzislau Harbachou Date: Wed, 21 Oct 2015 15:04:27 +0300 Subject: [PATCH 005/214] JS-241: Various rendering bugs with fullscreen Gallery --- lib/web/mage/gallery/gallery.less | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index 50718779c5a41..a253728cc884b 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -1248,3 +1248,29 @@ body.fotorama__fullscreen { display: none !important; } } + +.fotorama--fullscreen { + .fotorama__stage__frame { + .fotorama__img { + display:none; + bottom: 0; + left: 0; + margin: auto; + max-height: inherit; + max-width: inherit; + position: absolute; + right: 0; + top: 0; + } + .fotorama__img--full { + display:block; + height: auto; + width: auto; + max-height: 100%; + max-width: 100%; + vertical-align: middle; + transition-duration: @fotorama-fullscreen-zoom-time; + transition-property: width, height, top, left; + } + } +} \ No newline at end of file From 0dcb3d0ad86bd061a6258b5a4e171642633cf792 Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Thu, 22 Oct 2015 15:23:19 +0300 Subject: [PATCH 006/214] JS-268: Reset of original image in fullscreen --- lib/web/mage/gallery/gallery.less | 36 +++------ lib/web/magnifier/magnify.js | 130 +++++++++++++----------------- 2 files changed, 66 insertions(+), 100 deletions(-) diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index a253728cc884b..0df007d7e886b 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -1141,6 +1141,16 @@ right: 0; top: 0; } + .fotorama__img--full { + display:block; + height: auto; + width: auto; + max-height: 100%; + max-width: 100%; + vertical-align: middle; + transition-duration: @fotorama-fullscreen-zoom-time; + transition-property: width, height, top, left; + } } } @@ -1248,29 +1258,3 @@ body.fotorama__fullscreen { display: none !important; } } - -.fotorama--fullscreen { - .fotorama__stage__frame { - .fotorama__img { - display:none; - bottom: 0; - left: 0; - margin: auto; - max-height: inherit; - max-width: inherit; - position: absolute; - right: 0; - top: 0; - } - .fotorama__img--full { - display:block; - height: auto; - width: auto; - max-height: 100%; - max-width: 100%; - vertical-align: middle; - transition-duration: @fotorama-fullscreen-zoom-time; - transition-property: width, height, top, left; - } - } -} \ No newline at end of file diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index 877a2683ecf76..09a3d9dacd44d 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -22,6 +22,8 @@ define([ zoomWidthStep, zoomHeightStep, zoomShown = true, + allowZoomOut = false, + allowZoomIn = true, allowAnimating = true; if (isTouchEnabled) { @@ -51,14 +53,12 @@ define([ } function resetVars($image) { - zoomWidthStep = 0; - zoomHeightStep = 0; - allowAnimating = true; + zoomWidthStep = zoomHeightStep = 0; + allowAnimating = allowZoomIn = true; + allowZoomOut = false; $image.css({ top: 0, left: 0, - right: 0, - bottom: 0, cursor: '', width: 'auto', height: 'auto', @@ -115,7 +115,7 @@ define([ } function checkFullscreenImagePosition($image, dimentions, widthStep, heightStep) { - var $imageContainer, settings, top, left, right, bottom, ratio; + var $imageContainer, settings, top, left, ratio; if ($(gallerySelector).data('fotorama').fullScreen && allowAnimating) { @@ -134,33 +134,27 @@ define([ if (dimentions.height >= $imageContainer.height()) { top += heightStep / 2; - bottom = 0; top = top < $imageContainer.height() - dimentions.height ? $imageContainer.height() - dimentions.height : top; top = top > 0 ? 0 : top; } else { top = 0; - bottom = 0; } if (dimentions.width >= $imageContainer.width()) { left += -$imageContainer.parent().offset().left + widthStep / 2; - right = 0; left = left < $imageContainer.width() - dimentions.width ? $imageContainer.width() - dimentions.width : left; left = left > 0 ? 0 : left; } else { left = 0; - right = 0; } settings = $.extend(dimentions, { left: left, - top: top, - bottom: bottom, - right: right + top: top }); //if (allowAnimating) { @@ -172,10 +166,10 @@ define([ function zoomIn(e) { var $image, imgOriginalSize, widthResult, heightResult, dimentions = {}; - - if (zoomShown) { + if (zoomShown && allowZoomIn) { $image = $(fullscreenImageSelector); imgOriginalSize = getImageSize($image[0].src); + allowZoomOut = true; e.preventDefault(); @@ -190,13 +184,6 @@ define([ parseFloat(config.magnifierOpts.fullscreenzoom)); } - if ($image.css('maxHeight') !== 'none') { - dimentions = { - maxHeight: 'none', - maxWidth: 'none' - }; - } - widthResult = $image.width() + zoomWidthStep; heightResult = $image.height() + zoomHeightStep; @@ -208,6 +195,10 @@ define([ heightResult = imgOriginalSize.rh; } + if (heightResult === imgOriginalSize.rh || widthResult === imgOriginalSize.rw) { + allowZoomIn = false; + } + if ($image.width() >= $image.height() && $image.width() !== imgOriginalSize.rw) { dimentions = $.extend(dimentions, { width: widthResult, @@ -228,14 +219,18 @@ define([ } function zoomOut(e) { - var $image, widthResult, heightResult, dimentions, parentWidth, parentHeight; + var $image, widthResult, heightResult, dimentions, + parentWidth, parentHeight, imageWidth, imageHeight, fitIntoParent; - if (zoomShown) { + if (zoomShown && allowZoomOut) { + allowZoomIn = true; $image = $(fullscreenImageSelector); widthResult = $image.width() - zoomWidthStep; heightResult = $image.height() - zoomHeightStep; parentWidth = $image.parent().width(); parentHeight = $image.parent().height(); + imageWidth = $image.width(); + imageHeight = $image.height(); e.preventDefault(); @@ -243,61 +238,44 @@ define([ clickAnimation(e); } - if ($image.width() > $image.height()) { - if (widthResult > parentWidth) { + fitIntoParent = function () { + if (parentHeight - imageHeight > parentWidth - imageWidth) { + widthResult = parentWidth; dimentions = { - 'width': widthResult, - 'height': 'auto' + width: widthResult, + height: 'auto' }; - checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); } else { - if (heightResult > parentHeight) { - dimentions = { - 'width': widthResult, - 'height': 'auto' - }; - checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); - } else { - widthResult = parentWidth; - dimentions = { - 'width': widthResult, - 'height': 'auto' - }; - checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); - } + heightResult = parentHeight; + dimentions = { + width: 'auto', + height: heightResult + }; } + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + }; + if (imageWidth > imageHeight) { + if (widthResult > parentWidth || heightResult > parentHeight) { + dimentions = { + width: widthResult, + height: 'auto' + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } else { + allowZoomOut = false; + fitIntoParent(); + } } else { - if (heightResult > parentHeight) { + if (heightResult > parentHeight || widthResult > parentWidth) { dimentions = { width: 'auto', height: heightResult }; checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); } else { - if (widthResult > parentWidth) { - dimentions = { - width: 'auto', - height: heightResult - }; - checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); - } else { - if (parentHeight < parentWidth) { - heightResult = parentHeight; - dimentions = { - width: 'auto', - height: heightResult - }; - checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); - } else { - widthResult = parentWidth; - dimentions = { - 'width': widthResult, - 'height': 'auto' - }; - checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); - } - } + allowZoomOut = false; + fitIntoParent(); } } } @@ -453,9 +431,9 @@ define([ }); - $image.on('transitionend', function() { - allowAnimating = true; - }); + //$image.on('transitionend', function() { + // allowAnimating = true; + //}); $(document).on(isTouchEnabled ? 'touchend' : 'mouseup pointerup MSPointerUp', function () { if (gallery.fullScreen) { @@ -467,10 +445,14 @@ define([ } }); - $image.css({ - width: $image.width(), - height: $image.height() - }); + if (zoomShown) { + $image.css({ + width: $image.width(), + height: $image.height(), + maxWidth: 'none', + maxHeight: 'none' + }); + } } /** From 5928d4c1b6292fd60d44d6f70710a9459564194b Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Fri, 23 Oct 2015 11:12:37 +0300 Subject: [PATCH 007/214] JS-268: Reset of original image in fullscreen --- lib/web/mage/gallery/gallery.less | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index 0df007d7e886b..afc34086af400 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -1143,7 +1143,6 @@ } .fotorama__img--full { display:block; - height: auto; width: auto; max-height: 100%; max-width: 100%; From 099802706a4a85bfe39175578a37665f86ea82f2 Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Fri, 23 Oct 2015 11:12:46 +0300 Subject: [PATCH 008/214] JS-270: Magnifier has wrong indents from above and from below --- lib/web/magnifier/magnifier.js | 41 ++++++++++++++++------------------ 1 file changed, 19 insertions(+), 22 deletions(-) diff --git a/lib/web/magnifier/magnifier.js b/lib/web/magnifier/magnifier.js index 232579bb4f41e..649d9ba3c454f 100644 --- a/lib/web/magnifier/magnifier.js +++ b/lib/web/magnifier/magnifier.js @@ -153,7 +153,7 @@ lens.addClass(MagnifyCls.magnifyHidden); lens.html(""); large.id = idx + '-large'; - large.style.width = Math.round(data[idx].largeW * rate) + 'px'; + large.style.width = data[idx].largeW * rate + 'px'; large.style.height = data[idx].largeH + 'px'; large.className = 'magnifier-large magnify-hidden'; @@ -167,7 +167,7 @@ data[idx].lensH = data[idx].lensH > $thumb.height() ? $thumb.height() : data[idx].lensH; lens.css({ width: data[idx].lensW + 1 + 'px', - height: data[idx].lensH + 0.5 + 'px' + height: data[idx].lensH + 'px' }); } @@ -179,8 +179,8 @@ inBounds = ( xPos < 0 || yPos < 0 || xPos > currentOpts.w || yPos > currentOpts.h ) ? false : true; - l = xPos - Math.round(currentOpts.lensW / 2); - t = yPos - Math.round(currentOpts.lensH / 2); + l = xPos - currentOpts.lensW / 2; + t = yPos - currentOpts.lensH / 2; if (currentOpts.mode !== 'inside') { if (xPos < currentOpts.lensW / 2) { @@ -196,21 +196,21 @@ } if (yPos - currentOpts.h + Math.ceil(currentOpts.lensH / 2) > 0) { - t = currentOpts.h - Math.ceil(currentOpts.lensH + 2); + t = currentOpts.h - Math.ceil(currentOpts.lensH); } - pos.l = Math.round(l); - pos.t = Math.round(t); + pos.l = l; + pos.t = t; - currentOpts.lensBgX = pos.l + 1; - currentOpts.lensBgY = pos.t + 1; + currentOpts.lensBgX = pos.l; + currentOpts.lensBgY = pos.t; if (currentOpts.mode === 'inside') { - currentOpts.largeL = Math.round(xPos * (currentOpts.zoom - (currentOpts.lensW / currentOpts.w))); - currentOpts.largeT = Math.round(yPos * (currentOpts.zoom - (currentOpts.lensH / currentOpts.h))); + currentOpts.largeL = xPos * (currentOpts.zoom - (currentOpts.lensW / currentOpts.w)); + currentOpts.largeT = yPos * (currentOpts.zoom - (currentOpts.lensH / currentOpts.h)); } else { - currentOpts.largeL = Math.round(currentOpts.lensBgX * currentOpts.zoom * (currentOpts.largeWrapperW / currentOpts.w) * rate); - currentOpts.largeT = Math.round(currentOpts.lensBgY * currentOpts.zoom * (currentOpts.largeWrapperH / currentOpts.h)); + currentOpts.largeL = currentOpts.lensBgX * currentOpts.zoom * (currentOpts.largeWrapperW / currentOpts.w) * rate; + currentOpts.largeT = currentOpts.lensBgY * currentOpts.zoom * (currentOpts.largeWrapperH / currentOpts.h); } } } @@ -277,12 +277,9 @@ } pos.t = pos.t <= 0 ? 0 : pos.t; - pos.t = pos.t > 0 ? pos.t: pos.t; - pos.l = pos.l <= 0 ? 0 : pos.l; - //pos.l = pos.l > 0 ? pos.l : pos.l; curLens.css({ left: pos.l + paddingX +'px', - top: pos.t + paddingY + 1.75 + 'px' + top: pos.t + paddingY + 'px' }); if (lensbg) { @@ -318,8 +315,8 @@ thumbData.x = thumbBounds.left; thumbData.y = thumbBounds.top; - thumbData.w = Math.round(thumbBounds.right - thumbData.x); - thumbData.h = Math.round(thumbBounds.bottom - thumbData.y); + thumbData.w = thumbBounds.right - thumbData.x; + thumbData.h = thumbBounds.bottom - thumbData.y; if (thumbData.mode === 'inside') { w = thumbData.w; @@ -329,8 +326,8 @@ h = thumbData.largeWrapperH; } - thumbData.largeW = Math.round(thumbData.zoom * w); - thumbData.largeH = Math.round(thumbData.zoom * h); + thumbData.largeW = thumbData.zoom * w; + thumbData.largeH = thumbData.zoom * h; thumbData.lensW = (thumbData.w / thumbData.zoom) / rate; thumbData.lensH = thumbData.h / thumbData.zoom; @@ -461,7 +458,7 @@ ? options.onthumbmove : currentOpts.onthumbmove; - largeUrl = gOptions.full || $thumb.attr('src'); + largeUrl = $thumb.data("original") || gOptions.full || $thumb.attr('src'); if (thumb.id === '') { idx = thumb.id = 'magnifier-item-' + gId; From 2a6a96c6229b4e49b6d7c7c36883394d540b9c02 Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Fri, 23 Oct 2015 11:15:58 +0300 Subject: [PATCH 009/214] JS-273: Gallery magnifier shows preview image instead of original size image --- lib/web/fotorama/fotorama.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/lib/web/fotorama/fotorama.js b/lib/web/fotorama/fotorama.js index 445fe7d30c52c..21f599c2e9b4b 100644 --- a/lib/web/fotorama/fotorama.js +++ b/lib/web/fotorama/fotorama.js @@ -2775,6 +2775,10 @@ fotoramaVersion = '4.6.4'; img.alt = frameData.data.caption || ""; } + if (frameData.data.full) { + $(img).data("original", frameData.data.full); + } + if (UTIL.isExpectedCaption(dataFrame, opts.showcaption)) { $(img).attr('aria-labelledby', dataFrame.labelledby); } From 035a6c830f521a80a2d6afc36487f79c5d46168a Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Fri, 23 Oct 2015 11:28:46 +0300 Subject: [PATCH 010/214] JS-273: Gallery magnifier shows preview image instead of original size image - replace double quotes with single quotes --- lib/web/fotorama/fotorama.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/web/fotorama/fotorama.js b/lib/web/fotorama/fotorama.js index 21f599c2e9b4b..a63c21bb4c29b 100644 --- a/lib/web/fotorama/fotorama.js +++ b/lib/web/fotorama/fotorama.js @@ -2776,7 +2776,7 @@ fotoramaVersion = '4.6.4'; } if (frameData.data.full) { - $(img).data("original", frameData.data.full); + $(img).data('original', frameData.data.full); } if (UTIL.isExpectedCaption(dataFrame, opts.showcaption)) { From 69670e0cb419b1f9ce25a79da99e1240ea3ff8d1 Mon Sep 17 00:00:00 2001 From: Uladzislau Harbachou Date: Tue, 20 Oct 2015 16:35:33 +0400 Subject: [PATCH 011/214] JS-255: Stabilization fixes for magnifier and gallery --- lib/web/mage/gallery/gallery.html | 14 +- lib/web/mage/gallery/gallery.less | 29 +- lib/web/magnifier/magnifier.js | 411 +---------------------- lib/web/magnifier/magnify.js | 529 +++++++++++++++++++++++++++++- 4 files changed, 548 insertions(+), 435 deletions(-) diff --git a/lib/web/mage/gallery/gallery.html b/lib/web/mage/gallery/gallery.html index 34d26c812dae4..25acbc8f75bd7 100644 --- a/lib/web/mage/gallery/gallery.html +++ b/lib/web/mage/gallery/gallery.html @@ -7,7 +7,7 @@
-
+
@@ -18,19 +18,19 @@
-
-
+
+
-
-
+
+
-
+
@@ -38,4 +38,4 @@
-
+
\ No newline at end of file diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index f1a68415517b1..50718779c5a41 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -8,6 +8,7 @@ @fotorama_close_size: 30px; @size-fotorama-block: 50px; @fotorama-thumb-arrow: 30px; +@fotorama-fullscreen-zoom-time: 0.3s; @import '../../css/source/lib/_lib.less'; // Global lib @import '../../css/source/_theme.less'; // Theme overrides @@ -78,7 +79,6 @@ &:extend(.fotorama-sprite); background-position: 0 (-@size-fotorama-block) !important; } - .fotorama__zoom-in { top: 0; &:extend(.fotorama-sprite); @@ -86,6 +86,15 @@ } } +.circle { + position: absolute; + background-color: silver; + opacity: 0.7; + border-radius: 100%; + height: 1px; + width: 1px; +} + .fotorama__zoom-in, .fotorama__zoom-out { display: none; @@ -93,6 +102,7 @@ .fotorama__fullscreen { .fotorama__zoom-in, .fotorama__zoom-out { + overflow: hidden; position: absolute; width: 50px; height: 50px; @@ -725,8 +735,13 @@ display: none; } +.fotorama--fullscreen-icons { + .fotorama__fullscreen-icon { + display: none; + } +} + .fotorama__fullscreen-icon { - //display: none; &:focus { &:extend(.fotorama-focus); border-radius: 50%; @@ -736,7 +751,7 @@ .fotorama--fullscreen { .fotorama__fullscreen-icon { - //display: inline-block; + display: inline-block; background-position: (-@size-fotorama-block) 0; } } @@ -1083,6 +1098,8 @@ max-height: 100%; max-width: 100%; vertical-align: middle; + transition-duration: @fotorama-fullscreen-zoom-time; + transition-property: width, height, top, left; } } @@ -1227,9 +1244,7 @@ body.fotorama__fullscreen { .magnify-fullimage { display: inline-block; } - .fotorama__stage__shaft { - //.fotorama__img { - // display: none; - //} + .magnify-lens { + display: none !important; } } diff --git a/lib/web/magnifier/magnifier.js b/lib/web/magnifier/magnifier.js index 2a315a2b9bc6f..232579bb4f41e 100644 --- a/lib/web/magnifier/magnifier.js +++ b/lib/web/magnifier/magnifier.js @@ -4,11 +4,6 @@ */ ;(function ($) { - var onWheelCallback, - zoomWidthStep = 0, - zoomHeightStep = 0, - isDraggable = false; - $.fn.magnify = function (options) { 'use strict'; @@ -29,9 +24,8 @@ $thumb, that = this, largeWrapper = options.largeWrapper || ".magnifier-preview", - $largeWrapper = $(largeWrapper), - zoomShown = false, - curThumb = null, + $largeWrapper = $(largeWrapper); + curThumb = null, currentOpts = { x: 0, y: 0, @@ -564,161 +558,6 @@ } } - function toggleZoomButtons($image) { - var path = $image.attr("src"), - imgSize; - if (path) { - imgSize = getImageSize(path); - if ((imgSize.rh > $image.parent().height()) || (imgSize.rw > $image.parent().width())) { - $('.fotorama__zoom-in').show(); - $('.fotorama__zoom-out').show(); - zoomShown = true; - } else { - $('.fotorama__zoom-in').hide(); - $('.fotorama__zoom-out').hide(); - zoomShown = false; - } - } else { - $('.fotorama__zoom-in').hide(); - $('.fotorama__zoom-out').hide(); - zoomShown = false; - } - } - - function magnifierFullscreen () { - var isDragActive = false, - startX, - startY, - imagePosX, - imagePosY, - touch, - isTouchEnabled = 'ontouchstart' in document.documentElement; - - $('[data-gallery-role="gallery"]').on('fotorama:fullscreenenter fotorama:showend fotorama:load', function () { - var $preview = $('[data-gallery-role="stage-shaft"] [data-active="true"] img'), - $image = $('[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full'), - $imageContainer = $preview.parent(), - gallery = $('[data-gallery-role="gallery"]'); - - gallery.on('fotorama:fullscreenexit', function () { - $thumb.css({ - 'top': '', - 'left': '' - }); - }); - - if (gallery.data('fotorama').fullScreen) { - toggleZoomButtons($image); - resetVars($('[data-gallery-role="stage-shaft"] .fotorama__img--full')); - - $('.fotorama__stage__frame .fotorama__img--full').each(function () { - var path = $(this).attr("src"), - imgSize; - if (path) { - imgSize = getImageSize(path); - - if ((imgSize.rh > $(this).parent().height()) || (imgSize.rw > $(this).parent().width())) { - - if (imgSize.rh / imgSize.rw < $(this).parent().height() / $(this).parent().width()) { - $(this).width($(this).parent().width()); - $(this).height('auto'); - } else { - $(this).height($(this).parent().height()); - $(this).width('auto'); - } - - $(this).css({ - 'top': '', - 'left': '' - }); - } - } - }); - } - - $image - .off(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown') - .on(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown', function (e) { - if (gallery.data('fotorama').fullScreen && isDraggable) { - e.preventDefault(); - $image.css('cursor', 'move'); - imagePosY = $image.offset().top; - imagePosX = $image.offset().left; - - if (isTouchEnabled) { - touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; - e.clientX = touch.pageX; - e.clientY = touch.pageY; - } - startX = e.clientX || e.originalEvent.clientX; - startY = e.clientY || e.originalEvent.clientY; - isDragActive = true; - } - }); - - - - $image - .off(isTouchEnabled ? 'touchmove' : 'mousemove pointermove MSPointerMove') - .on(isTouchEnabled ? 'touchmove' : 'mousemove pointermove MSPointerMove', function (e) { - if (gallery.data('fotorama').fullScreen && isDragActive && isDraggable) { - - var top, - left, - startOffset = $image.offset(), - clientX = e.clientX || e.originalEvent.clientX, - clientY = e.clientY || e.originalEvent.clientY; - - - e.preventDefault(); - - if (isTouchEnabled) { - touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; - e.clientX = touch.pageX; - e.clientY = touch.pageY; - } - top = +imagePosY + (clientY - startY); - left = +imagePosX + (clientX - startX); - - if ($image.height() > $imageContainer.height()) { - - if (($imageContainer.offset().top + $imageContainer.height()) > (top + $image.height())) { - top = $imageContainer.offset().top + $imageContainer.height() - $image.height(); - } else { - top = ($imageContainer.offset().top < top) ? 0 : top; - } - $image.offset({ - 'top': top - }); - } - - if ($image.width() > $imageContainer.width()) { - - if (($imageContainer.offset().left + $imageContainer.width()) > (left + $image.width())) { - left = $imageContainer.offset().left + $imageContainer.width() - $image.width(); - } else { - left = ($imageContainer.offset().left < left) ? $imageContainer.offset().left : left; - } - $image.offset({ - 'left': left - }); - } - } - }); - - $image - .off(isTouchEnabled ? 'touchend' : 'mouseup pointerup MSPointerUp') - .on(isTouchEnabled ? 'touchend' : 'mouseup pointerup MSPointerUp', function (e) { - if (gallery.data('fotorama').fullScreen && isDragActive && isDraggable) { - isDragActive = false; - $image.css('cursor', 'pointer'); - - return false; - } - }); - }); - } - function onScroll() { if (curThumb !== null) { @@ -726,260 +565,14 @@ } } - if ($('.fotorama-item').data('fotorama').fullScreen) { - $('.fotorama__stage__frame .fotorama__img--full').each(function () { - var image = new Image(); - image.src = $(this).attr("src"); - - if ( (image.height > $(this).parent().height()) || (image.width > $(this).parent().width()) ) { - - if (image.height / image.width < $(this).parent().height() / $(this).parent().width()) { - $(this).width($(this).parent().width()); - $(this).height(''); - } else { - $(this).height($(this).parent().height()); - $(this).width(''); - } - } - }); - } $(window).on('scroll', onScroll); $(window).resize(function() { - - if ($('.fotorama-item').data('fotorama').fullScreen) { - - $('.fotorama__stage__frame .fotorama__img--full').each(function () { - var image = new Image(); - image.src = $(this).attr("src"); - - if ( (image.height > $(this).parent().height()) || (image.width > $(this).parent().width()) ) { - - if (image.height / image.width < $(this).parent().height() / $(this).parent().width()) { - $(this).width($(this).parent().width()); - $(this).height(''); - } else { - $(this).height($(this).parent().height()); - $(this).width(''); - } - } - }); - - toggleZoomButtons($('[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full')); - } - - _init($box, gOptions); - }); - function resetVars($image) { - zoomWidthStep = 0; - zoomHeightStep = 0; - isDraggable = false; - $image.css({ - top: 0, - left: 0, - right: 0, - bottom: 0, - cursor: '' - }); - } - - function checkFullscreenImagePosition(widthStep, heightStep) { - var $preview, $image, $imageContainer, gallery, top, left; - - if ($('[data-gallery-role="gallery"]').data('fotorama').fullScreen) { - - $preview = $('[data-gallery-role="stage-shaft"] [data-active="true"] img'); - $image = $('[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full'); - $imageContainer = $preview.parent(); - gallery = $('[data-gallery-role="gallery"]'); - top = $image.offset().top; - left = $image.offset().left; - - if ($image.height() > $imageContainer.height()) { - if ($imageContainer.offset().top + $imageContainer.height() > top + $image.height() + heightStep/2) { - top = $imageContainer.offset().top + $imageContainer.height() - $image.height() + heightStep/2; - } else { - top = ($imageContainer.offset().top <= top + heightStep/2 && heightStep > 0) ? 0 : top + heightStep/2; - } - $image.css({ - top: top, - bottom: 'auto' - }); - } else { - $image.css({ - top: 0, - bottom: 0 - }); - } - - if ($image.width() > $imageContainer.width()) { - if (($imageContainer.offset().left + $imageContainer.width()) > (left + $image.width() + widthStep/2)) { - left = $imageContainer.offset().left + $imageContainer.width() - $image.width() + widthStep/2; - } else { - left = ($imageContainer.offset().left <= left + widthStep/2 && widthStep > 0) ? 0 : left - $imageContainer.offset().left + widthStep/2; - } - $image.css({ - left: left, - right: 'auto' - }); - } else { - $image.css({ - left: 0, - right: 0 - }); - } - } - } - - function zoomIn(e) { - if (zoomShown) { - var $image = $('[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full'), - imgOriginalSize = $image.length ? getImageSize($image[0].src) : '', - widthResult, - heightResult; - - if (!zoomWidthStep) { - zoomWidthStep = Math.ceil((imgOriginalSize.rw - $image.width())/parseFloat(options.fullscreenzoom)); - zoomHeightStep = Math.ceil((imgOriginalSize.rh - $image.height())/parseFloat(options.fullscreenzoom)); - } - widthResult = $image.width() + zoomWidthStep; - heightResult = $image.height() + zoomHeightStep; - - if (widthResult >= imgOriginalSize.rw) { - widthResult = imgOriginalSize.rw; - } - if (heightResult >= imgOriginalSize.rh) { - heightResult = imgOriginalSize.rh; - } - - if ( zoomShown ) { - isDraggable = true; - } - - if ($image.width() >= $image.height() && $image.width() !== imgOriginalSize.rw) { - $image.css({ - width: widthResult, - height: 'auto' - }); - checkFullscreenImagePosition(-zoomWidthStep, -zoomHeightStep); - } else if ($image.width() < $image.height() && $image.height() !== imgOriginalSize.rh) { - $image.css({ - width: 'auto', - height: heightResult - }); - checkFullscreenImagePosition(-zoomWidthStep, -zoomHeightStep); - } - } - - return false; - } - - function zoomOut(e) { - if (zoomShown) { - var $image = $('[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full'), - setedResult = $image.width() - zoomWidthStep, - widthCheck = $image.width() - zoomWidthStep <= $image.parent().width(), - heightCheck = $image.height() - zoomHeightStep <= $image.parent().height(); - - e.preventDefault(); - - if (widthCheck && heightCheck) { - if ($image.width() >= $image.height()) { - $image.trigger('fotorama:load'); - - return false; - } else if ($image.width() < $image.height()) { - $image.trigger('fotorama:load'); - - return false; - } - } - - $image.css({'width': setedResult, height: 'auto'}); - checkFullscreenImagePosition(zoomWidthStep, zoomHeightStep); - } - - return false; - } - - /** - * Return width and height of original image - * @param src path for original image - * @returns {{rw: number, rh: number}} - */ - function getImageSize(src) { - var img = new Image(), - imgSize = { - rw: 0, - rh: 0 - }; - img.src = src; - imgSize.rw = img.width; - imgSize.rh = img.height; - return imgSize; - } - - - function setEventOnce() { - $('.fotorama__zoom-in') - .off('mouseup') - .on('mouseup', zoomIn); - $('.fotorama__zoom-out') - .off('mouseup') - .on('mouseup', zoomOut); - $('.fotorama__zoom-in') - .off('touchstart') - .on('touchstart', zoomIn); - $('.fotorama__zoom-out') - .off('touchstart') - .on('touchstart', zoomOut); - } - $(document).on('mousemove', onMousemove); _init($box, gOptions); - setEventOnce(); - magnifierFullscreen(); - - if (!onWheelCallback) { - onWheelCallback = function onWheel(e) { - if ($('[data-gallery-role="gallery"]').data('fotorama').fullScreen) { - e = e || window.event; - - - var delta = e.deltaY || e.detail || e.wheelDelta; - - if (delta > 0) { - zoomOut(e); - } else { - zoomIn(e); - } - - e.preventDefault ? e.preventDefault() : (e.returnValue = false); - } - }; - } - $('.fotorama-item').on('fotorama:load', function () { - if (document.querySelector('.fotorama__stage').addEventListener) { - if ('onwheel' in document) { - // IE9+, FF17+, Ch31+ - document.querySelector('.fotorama__stage').removeEventListener("wheel", onWheelCallback); - document.querySelector('.fotorama__stage').addEventListener("wheel", onWheelCallback); - } else if ('onmousewheel' in document) { - document.querySelector('.fotorama__stage').removeEventListener("mousewheel", onWheelCallback); - document.querySelector('.fotorama__stage').addEventListener("mousewheel", onWheelCallback); - } else { - // Firefox < 17 - document.querySelector('.fotorama__stage').removeEventListener("MozMousePixelScroll", onWheelCallback); - document.querySelector('.fotorama__stage').addEventListener("MozMousePixelScroll", onWheelCallback); - } - } else { // IE8- - document.querySelector('.fotorama__stage').detachEvent("onmousewheel", onWheelCallback); - document.querySelector('.fotorama__stage').attachEvent("onmousewheel", onWheelCallback); - } - }); } }(jQuery)); diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index 06a835ef9a2df..877a2683ecf76 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -14,9 +14,15 @@ define([ gallerySelector = '[data-gallery-role="gallery"]', magnifierSelector = '[data-gallery-role="magnifier"]', magnifierZoomSelector = '[data-gallery-role="magnifier-zoom"]', - fullScreenIcon = '[data-gallery-role="fotorama__fullscreen-icon"]', + zoomInButtonSelector = '[data-gallery-role="fotorama__zoom-in"]', + zoomOutButtonSelector = '[data-gallery-role="fotorama__zoom-out"]', + fullscreenImageSelector = '[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full', hideMagnifier, - behaveOnHover; + behaveOnHover, + zoomWidthStep, + zoomHeightStep, + zoomShown = true, + allowAnimating = true; if (isTouchEnabled) { $(element).on('fotorama:showend fotorama:load', function () { @@ -25,6 +31,448 @@ define([ }); } + /** + * Return width and height of original image + * @param src path for original image + * @returns {{rw: number, rh: number}} + */ + function getImageSize(src) { + var img = new Image(), + imgSize = { + rw: 0, + rh: 0 + }; + + img.src = src; + imgSize.rw = img.width; + imgSize.rh = img.height; + + return imgSize; + } + + function resetVars($image) { + zoomWidthStep = 0; + zoomHeightStep = 0; + allowAnimating = true; + $image.css({ + top: 0, + left: 0, + right: 0, + bottom: 0, + cursor: '', + width: 'auto', + height: 'auto', + maxWidth: '100%', + maxHeight: '100%' + }); + } + + function clickAnimation(e) { + + var roundRadius = 80, + clickAnimationDuration = 400; + + $('
').addClass('circle').offset({ + left: e.pageX - e.currentTarget.offsetLeft, + top: e.pageY - e.currentTarget.offsetTop + }).appendTo(e.currentTarget).animate( + { + height: roundRadius, + width: roundRadius, + left: e.pageX - roundRadius / 2 - e.currentTarget.offsetLeft, + top: e.pageY - roundRadius / 2 - e.currentTarget.offsetTop, + opacity: 0 + }, + clickAnimationDuration, + 'swing', + function () { + $(this).remove(); + } + ); + } + + function toggleZoomButtons($image) { + var path = $image.attr('src'), + imgSize; + + if (path) { + imgSize = getImageSize(path); + + if (imgSize.rh > $image.parent().height() || imgSize.rw > $image.parent().width()) { + $(zoomInButtonSelector).show(); + $(zoomOutButtonSelector).show(); + zoomShown = true; + } else { + $(zoomInButtonSelector).hide(); + $(zoomOutButtonSelector).hide(); + zoomShown = false; + } + } else { + $(zoomInButtonSelector).hide(); + $(zoomOutButtonSelector).hide(); + zoomShown = false; + } + } + + function checkFullscreenImagePosition($image, dimentions, widthStep, heightStep) { + var $imageContainer, settings, top, left, right, bottom, ratio; + + if ($(gallerySelector).data('fotorama').fullScreen && allowAnimating) { + + $imageContainer = $image.parent(); + top = $image.offset().top; + left = $image.offset().left; + ratio = $image.width() / $image.height(); + + if (!isNaN(dimentions.width)) { + dimentions.height = dimentions.width / ratio; + } + + if (!isNaN(dimentions.height)) { + dimentions.width = dimentions.height * ratio; + } + + if (dimentions.height >= $imageContainer.height()) { + top += heightStep / 2; + bottom = 0; + + top = top < $imageContainer.height() - dimentions.height ? + $imageContainer.height() - dimentions.height : top; + top = top > 0 ? 0 : top; + } else { + top = 0; + bottom = 0; + } + + if (dimentions.width >= $imageContainer.width()) { + left += -$imageContainer.parent().offset().left + widthStep / 2; + right = 0; + + left = left < $imageContainer.width() - dimentions.width ? + $imageContainer.width() - dimentions.width : left; + left = left > 0 ? 0 : left; + } else { + left = 0; + right = 0; + } + + settings = $.extend(dimentions, { + left: left, + top: top, + bottom: bottom, + right: right + }); + + //if (allowAnimating) { + //allowAnimating = false; + $image.css(settings); + //} + } + } + + function zoomIn(e) { + var $image, imgOriginalSize, widthResult, heightResult, dimentions = {}; + + if (zoomShown) { + $image = $(fullscreenImageSelector); + imgOriginalSize = getImageSize($image[0].src); + + e.preventDefault(); + + if (e.type === 'click' || e.type === 'touchstart') { + clickAnimation(e); + } + + if (!zoomWidthStep) { + zoomWidthStep = Math.ceil((imgOriginalSize.rw - $image.width()) / + parseFloat(config.magnifierOpts.fullscreenzoom)); + zoomHeightStep = Math.ceil((imgOriginalSize.rh - $image.height()) / + parseFloat(config.magnifierOpts.fullscreenzoom)); + } + + if ($image.css('maxHeight') !== 'none') { + dimentions = { + maxHeight: 'none', + maxWidth: 'none' + }; + } + + widthResult = $image.width() + zoomWidthStep; + heightResult = $image.height() + zoomHeightStep; + + if (widthResult >= imgOriginalSize.rw) { + widthResult = imgOriginalSize.rw; + } + + if (heightResult >= imgOriginalSize.rh) { + heightResult = imgOriginalSize.rh; + } + + if ($image.width() >= $image.height() && $image.width() !== imgOriginalSize.rw) { + dimentions = $.extend(dimentions, { + width: widthResult, + height: 'auto' + }); + checkFullscreenImagePosition($image, dimentions, -zoomWidthStep, -zoomHeightStep); + + } else if ($image.width() < $image.height() && $image.height() !== imgOriginalSize.rh) { + dimentions = $.extend(dimentions, { + width: 'auto', + height: heightResult + }); + checkFullscreenImagePosition($image, dimentions, -zoomWidthStep, -zoomHeightStep); + } + } + + return false; + } + + function zoomOut(e) { + var $image, widthResult, heightResult, dimentions, parentWidth, parentHeight; + + if (zoomShown) { + $image = $(fullscreenImageSelector); + widthResult = $image.width() - zoomWidthStep; + heightResult = $image.height() - zoomHeightStep; + parentWidth = $image.parent().width(); + parentHeight = $image.parent().height(); + + e.preventDefault(); + + if (e.type === 'click' || e.type === 'touchstart') { + clickAnimation(e); + } + + if ($image.width() > $image.height()) { + if (widthResult > parentWidth) { + dimentions = { + 'width': widthResult, + 'height': 'auto' + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } else { + if (heightResult > parentHeight) { + dimentions = { + 'width': widthResult, + 'height': 'auto' + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } else { + widthResult = parentWidth; + dimentions = { + 'width': widthResult, + 'height': 'auto' + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } + } + + } else { + if (heightResult > parentHeight) { + dimentions = { + width: 'auto', + height: heightResult + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } else { + if (widthResult > parentWidth) { + dimentions = { + width: 'auto', + height: heightResult + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } else { + if (parentHeight < parentWidth) { + heightResult = parentHeight; + dimentions = { + width: 'auto', + height: heightResult + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } else { + widthResult = parentWidth; + dimentions = { + 'width': widthResult, + 'height': 'auto' + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } + } + } + } + } + + return false; + } + + /** + * Bind event on scroll on active item in fotorama + * @param e + * @param fotorama - object of fotorama + */ + function mousewheel(e, fotorama, element) { + var $fotoramaStage = $(element).find('[data-fotorama-stage="fotorama__stage"]'), + fotoramaStage = $fotoramaStage.get(0); + + function onWheel(e) { + var delta = e.deltaY || e.detail || e.wheelDelta; + + if ($(gallerySelector).data('fotorama').fullScreen) { + e = e || window.event; + + if (delta > 0) { + zoomOut(e); + } else { + zoomIn(e); + } + + e.preventDefault ? e.preventDefault() : (e.returnValue = false); + } + } + + if (!$fotoramaStage.hasClass('magnify-wheel-loaded')) { + if (fotoramaStage && fotoramaStage.addEventListener) { + if ('onwheel' in document) { + fotoramaStage.addEventListener('wheel', onWheel); + } else if ('onmousewheel' in document) { + fotoramaStage.addEventListener('mousewheel', onWheel); + } else { + fotoramaStage.addEventListener('MozMousePixelScroll', onWheel); + } + $fotoramaStage.addClass('magnify-wheel-loaded'); + } + } + } + + /** + * Metod which makes draggable picture. Also work on touch devices. + */ + function magnifierFullscreen() { + var isDragActive = false, + startX, + startY, + imagePosX, + imagePosY, + touch, + $gallery = $(gallerySelector), + $image = $(fullscreenImageSelector, $gallery), + $imageContainer = $('[data-gallery-role="stage-shaft"] [data-active="true"]'), + gallery = $gallery.data('fotorama'); + + function shiftImage(dx, dy) { + var top = +imagePosY + dy; + var left = +imagePosX + dx; + + if ($image.height() > $imageContainer.height()) { + + if (($imageContainer.offset().top + $imageContainer.height()) > (top + $image.height())) { + top = $imageContainer.offset().top + $imageContainer.height() - $image.height(); + } else { + top = ($imageContainer.offset().top < top) ? 0 : top; + } + $image.offset({ + 'top': top + }); + } + + if ($image.width() > $imageContainer.width()) { + + if (($imageContainer.offset().left + $imageContainer.width()) > (left + $image.width())) { + left = $imageContainer.offset().left + $imageContainer.width() - $image.width(); + } else { + left = ($imageContainer.offset().left < left) ? $imageContainer.offset().left : left; + } + $image.offset({ + 'left': left + }); + } + } + + toggleZoomButtons($image); + + $image.on(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown', function (e) { + if (gallery.fullScreen) { + e.preventDefault(); + + $image.css('cursor', 'move'); + imagePosY = $image.offset().top; + imagePosX = $image.offset().left; + + if (isTouchEnabled) { + touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; + e.clientX = touch.pageX; + e.clientY = touch.pageY; + } + startX = e.clientX || e.originalEvent.clientX; + startY = e.clientY || e.originalEvent.clientY; + isDragActive = true; + + $image.css({ + transitionProperty: 'width, height' + }); + + } + }); + + $image.on(isTouchEnabled ? 'touchmove' : 'mousemove pointermove MSPointerMove', function (e) { + var top, left, clientX, clientY; + + if (gallery.fullScreen && isDragActive) { + + clientX = e.clientX || e.originalEvent.clientX; + clientY = e.clientY || e.originalEvent.clientY; + + e.preventDefault(); + + if (isTouchEnabled) { + touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; + e.clientX = touch.pageX; + e.clientY = touch.pageY; + } + shiftImage((clientX - startX), (clientY - startY)); + } + }); + + $(window).keyup(function (e) { + imagePosX = $(fullscreenImageSelector, $gallery).offset().left; + imagePosY = $(fullscreenImageSelector, $gallery).offset().top; + var step = 20; + + if (e.keyCode === 102) { + shiftImage(-step, 0); + } + if (e.keyCode === 98) { + shiftImage(0, step); + } + if (e.keyCode === 100) { + shiftImage(step, 0); + } + if (e.keyCode === 104) { + shiftImage(0, -step); + } + + }); + + $image.on('transitionend', function() { + allowAnimating = true; + }); + + $(document).on(isTouchEnabled ? 'touchend' : 'mouseup pointerup MSPointerUp', function () { + if (gallery.fullScreen) { + isDragActive = false; + $image.css({ + cursor: 'pointer', + transitionProperty: 'width, height, top, left' + }); + } + }); + + $image.css({ + width: $image.width(), + height: $image.height() + }); + } + /** * Hides magnifier preview and zoom blocks. */ @@ -39,7 +487,8 @@ define([ behaveOnHover = function (e, initPos) { var pos = [e.pageX, e.pageY], isArrow = $(e.target).data('gallery-role') === 'arrow', - isClick = initPos[0] === pos[0] && initPos[1] === pos[1]; + isClick = initPos[0] === pos[0] && initPos[1] === pos[1]; + if (isArrow || !isClick) { hideMagnifier(); } @@ -50,7 +499,6 @@ define([ } else if (config.magnifierOpts.eventType === 'hover') { $(element).on('pointerdown mousedown MSPointerDown', function (e) { var pos = [e.pageX, e.pageY]; - $(element).on('mousemove pointermove MSPointerMove', function (ev) { navigator.msPointerEnabled ? hideMagnifier() : behaveOnHover(ev, pos); }); @@ -62,7 +510,7 @@ define([ $.extend(config.magnifierOpts, { zoomable: false, - thumb: '.fotorama__img:not(".fotorama__img--full")', + thumb: '.fotorama__img', largeWrapper: '[data-gallery-role="magnifier"]', height: config.magnifierOpts.height || function () { return $('[data-active="true"]').height(); @@ -80,18 +528,75 @@ define([ } }); - $(element).on('fotorama:showend fotorama:load fotorama:fullscreenexit fotorama:ready', function (e, fotorama) { + $(element).on('fotorama:load fotorama:showend fotorama:fullscreenexit fotorama:ready', function (e, fotorama) { hideMagnifier(); config.magnifierOpts.large = $(gallerySelector).data('fotorama').activeFrame.img; - config.magnifierOpts.full = fotorama.data[fotorama.activeIndex].full; + config.magnifierOpts.full = fotorama.data[fotorama.activeIndex].original; $($(gallerySelector).data('fotorama').activeFrame.$stageFrame).magnify(config.magnifierOpts); }); - $(element).on('gallery:loaded', function () { - $(element).find(gallerySelector).on('fotorama:show fotorama:fullscreenenter ', function () { - hideMagnifier(); - }); + $(element).on('gallery:loaded', function (e) { + $(element).find(gallerySelector) + .on('fotorama:ready', function (e, fotorama) { + var $zoomIn = $(zoomInButtonSelector), + $zoomOut = $(zoomOutButtonSelector); + + if (!$zoomIn.hasClass('zoom-in-loaded')) { + $zoomIn.on('click touchstart', zoomIn); + + $zoomIn.keyup(function (e) { + + if (e.keyCode === 13) { + zoomIn(e); + } + }); + + $(window).keyup(function (e) { + + if (e.keyCode === 107 || fotorama.fullscreen) { + zoomIn(e); + } + }); + + $zoomIn.addClass('zoom-in-loaded'); + } + + if (!$zoomOut.hasClass('zoom-out-loaded')) { + $zoomOut.on('click touchstart', zoomOut); + + $zoomOut.keyup(function (e) { + + if (e.keyCode === 13) { + zoomOut(e); + } + }); + + $(window).keyup(function (e) { + + if (e.keyCode === 109 || fotorama.fullscreen) { + zoomOut(e); + } + }); + + $zoomOut.addClass('zoom-out-loaded'); + } + }) + .on('fotorama:fullscreenenter fotorama:showend', function (e, fotorama) { + hideMagnifier(); + $(element).data('gallery').updateOptions({ + swipe: false + }); + magnifierFullscreen(e, fotorama); + mousewheel(e, fotorama, element); + }) + .on('fotorama:load', function (e, fotorama) { + toggleZoomButtons($(fullscreenImageSelector)); + magnifierFullscreen(); + }) + .on('fotorama:show', function (e, fotorama) { + resetVars($(fullscreenImageSelector)); + }); }); return config; - }; + } }); From 43819677f3fa5c9ffbfe9001278c55f039fd8063 Mon Sep 17 00:00:00 2001 From: Uladzislau Harbachou Date: Wed, 21 Oct 2015 15:04:27 +0300 Subject: [PATCH 012/214] JS-241: Various rendering bugs with fullscreen Gallery --- lib/web/mage/gallery/gallery.less | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index 50718779c5a41..a253728cc884b 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -1248,3 +1248,29 @@ body.fotorama__fullscreen { display: none !important; } } + +.fotorama--fullscreen { + .fotorama__stage__frame { + .fotorama__img { + display:none; + bottom: 0; + left: 0; + margin: auto; + max-height: inherit; + max-width: inherit; + position: absolute; + right: 0; + top: 0; + } + .fotorama__img--full { + display:block; + height: auto; + width: auto; + max-height: 100%; + max-width: 100%; + vertical-align: middle; + transition-duration: @fotorama-fullscreen-zoom-time; + transition-property: width, height, top, left; + } + } +} \ No newline at end of file From f0cb1797c01a9810acf230406d81d46786a0c915 Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Thu, 22 Oct 2015 15:23:19 +0300 Subject: [PATCH 013/214] JS-268: Reset of original image in fullscreen --- lib/web/mage/gallery/gallery.less | 36 +++------ lib/web/magnifier/magnify.js | 130 +++++++++++++----------------- 2 files changed, 66 insertions(+), 100 deletions(-) diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index a253728cc884b..0df007d7e886b 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -1141,6 +1141,16 @@ right: 0; top: 0; } + .fotorama__img--full { + display:block; + height: auto; + width: auto; + max-height: 100%; + max-width: 100%; + vertical-align: middle; + transition-duration: @fotorama-fullscreen-zoom-time; + transition-property: width, height, top, left; + } } } @@ -1248,29 +1258,3 @@ body.fotorama__fullscreen { display: none !important; } } - -.fotorama--fullscreen { - .fotorama__stage__frame { - .fotorama__img { - display:none; - bottom: 0; - left: 0; - margin: auto; - max-height: inherit; - max-width: inherit; - position: absolute; - right: 0; - top: 0; - } - .fotorama__img--full { - display:block; - height: auto; - width: auto; - max-height: 100%; - max-width: 100%; - vertical-align: middle; - transition-duration: @fotorama-fullscreen-zoom-time; - transition-property: width, height, top, left; - } - } -} \ No newline at end of file diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index 877a2683ecf76..09a3d9dacd44d 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -22,6 +22,8 @@ define([ zoomWidthStep, zoomHeightStep, zoomShown = true, + allowZoomOut = false, + allowZoomIn = true, allowAnimating = true; if (isTouchEnabled) { @@ -51,14 +53,12 @@ define([ } function resetVars($image) { - zoomWidthStep = 0; - zoomHeightStep = 0; - allowAnimating = true; + zoomWidthStep = zoomHeightStep = 0; + allowAnimating = allowZoomIn = true; + allowZoomOut = false; $image.css({ top: 0, left: 0, - right: 0, - bottom: 0, cursor: '', width: 'auto', height: 'auto', @@ -115,7 +115,7 @@ define([ } function checkFullscreenImagePosition($image, dimentions, widthStep, heightStep) { - var $imageContainer, settings, top, left, right, bottom, ratio; + var $imageContainer, settings, top, left, ratio; if ($(gallerySelector).data('fotorama').fullScreen && allowAnimating) { @@ -134,33 +134,27 @@ define([ if (dimentions.height >= $imageContainer.height()) { top += heightStep / 2; - bottom = 0; top = top < $imageContainer.height() - dimentions.height ? $imageContainer.height() - dimentions.height : top; top = top > 0 ? 0 : top; } else { top = 0; - bottom = 0; } if (dimentions.width >= $imageContainer.width()) { left += -$imageContainer.parent().offset().left + widthStep / 2; - right = 0; left = left < $imageContainer.width() - dimentions.width ? $imageContainer.width() - dimentions.width : left; left = left > 0 ? 0 : left; } else { left = 0; - right = 0; } settings = $.extend(dimentions, { left: left, - top: top, - bottom: bottom, - right: right + top: top }); //if (allowAnimating) { @@ -172,10 +166,10 @@ define([ function zoomIn(e) { var $image, imgOriginalSize, widthResult, heightResult, dimentions = {}; - - if (zoomShown) { + if (zoomShown && allowZoomIn) { $image = $(fullscreenImageSelector); imgOriginalSize = getImageSize($image[0].src); + allowZoomOut = true; e.preventDefault(); @@ -190,13 +184,6 @@ define([ parseFloat(config.magnifierOpts.fullscreenzoom)); } - if ($image.css('maxHeight') !== 'none') { - dimentions = { - maxHeight: 'none', - maxWidth: 'none' - }; - } - widthResult = $image.width() + zoomWidthStep; heightResult = $image.height() + zoomHeightStep; @@ -208,6 +195,10 @@ define([ heightResult = imgOriginalSize.rh; } + if (heightResult === imgOriginalSize.rh || widthResult === imgOriginalSize.rw) { + allowZoomIn = false; + } + if ($image.width() >= $image.height() && $image.width() !== imgOriginalSize.rw) { dimentions = $.extend(dimentions, { width: widthResult, @@ -228,14 +219,18 @@ define([ } function zoomOut(e) { - var $image, widthResult, heightResult, dimentions, parentWidth, parentHeight; + var $image, widthResult, heightResult, dimentions, + parentWidth, parentHeight, imageWidth, imageHeight, fitIntoParent; - if (zoomShown) { + if (zoomShown && allowZoomOut) { + allowZoomIn = true; $image = $(fullscreenImageSelector); widthResult = $image.width() - zoomWidthStep; heightResult = $image.height() - zoomHeightStep; parentWidth = $image.parent().width(); parentHeight = $image.parent().height(); + imageWidth = $image.width(); + imageHeight = $image.height(); e.preventDefault(); @@ -243,61 +238,44 @@ define([ clickAnimation(e); } - if ($image.width() > $image.height()) { - if (widthResult > parentWidth) { + fitIntoParent = function () { + if (parentHeight - imageHeight > parentWidth - imageWidth) { + widthResult = parentWidth; dimentions = { - 'width': widthResult, - 'height': 'auto' + width: widthResult, + height: 'auto' }; - checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); } else { - if (heightResult > parentHeight) { - dimentions = { - 'width': widthResult, - 'height': 'auto' - }; - checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); - } else { - widthResult = parentWidth; - dimentions = { - 'width': widthResult, - 'height': 'auto' - }; - checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); - } + heightResult = parentHeight; + dimentions = { + width: 'auto', + height: heightResult + }; } + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + }; + if (imageWidth > imageHeight) { + if (widthResult > parentWidth || heightResult > parentHeight) { + dimentions = { + width: widthResult, + height: 'auto' + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } else { + allowZoomOut = false; + fitIntoParent(); + } } else { - if (heightResult > parentHeight) { + if (heightResult > parentHeight || widthResult > parentWidth) { dimentions = { width: 'auto', height: heightResult }; checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); } else { - if (widthResult > parentWidth) { - dimentions = { - width: 'auto', - height: heightResult - }; - checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); - } else { - if (parentHeight < parentWidth) { - heightResult = parentHeight; - dimentions = { - width: 'auto', - height: heightResult - }; - checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); - } else { - widthResult = parentWidth; - dimentions = { - 'width': widthResult, - 'height': 'auto' - }; - checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); - } - } + allowZoomOut = false; + fitIntoParent(); } } } @@ -453,9 +431,9 @@ define([ }); - $image.on('transitionend', function() { - allowAnimating = true; - }); + //$image.on('transitionend', function() { + // allowAnimating = true; + //}); $(document).on(isTouchEnabled ? 'touchend' : 'mouseup pointerup MSPointerUp', function () { if (gallery.fullScreen) { @@ -467,10 +445,14 @@ define([ } }); - $image.css({ - width: $image.width(), - height: $image.height() - }); + if (zoomShown) { + $image.css({ + width: $image.width(), + height: $image.height(), + maxWidth: 'none', + maxHeight: 'none' + }); + } } /** From 03310fca66fc67040494e7c24deff1fc448229d5 Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Fri, 23 Oct 2015 11:12:37 +0300 Subject: [PATCH 014/214] JS-268: Reset of original image in fullscreen --- lib/web/mage/gallery/gallery.less | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index 0df007d7e886b..afc34086af400 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -1143,7 +1143,6 @@ } .fotorama__img--full { display:block; - height: auto; width: auto; max-height: 100%; max-width: 100%; From 80da0fd0c8f740656eee1e5fdc50b10d76945d78 Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Fri, 23 Oct 2015 11:12:46 +0300 Subject: [PATCH 015/214] JS-270: Magnifier has wrong indents from above and from below --- lib/web/magnifier/magnifier.js | 41 ++++++++++++++++------------------ 1 file changed, 19 insertions(+), 22 deletions(-) diff --git a/lib/web/magnifier/magnifier.js b/lib/web/magnifier/magnifier.js index 232579bb4f41e..649d9ba3c454f 100644 --- a/lib/web/magnifier/magnifier.js +++ b/lib/web/magnifier/magnifier.js @@ -153,7 +153,7 @@ lens.addClass(MagnifyCls.magnifyHidden); lens.html(""); large.id = idx + '-large'; - large.style.width = Math.round(data[idx].largeW * rate) + 'px'; + large.style.width = data[idx].largeW * rate + 'px'; large.style.height = data[idx].largeH + 'px'; large.className = 'magnifier-large magnify-hidden'; @@ -167,7 +167,7 @@ data[idx].lensH = data[idx].lensH > $thumb.height() ? $thumb.height() : data[idx].lensH; lens.css({ width: data[idx].lensW + 1 + 'px', - height: data[idx].lensH + 0.5 + 'px' + height: data[idx].lensH + 'px' }); } @@ -179,8 +179,8 @@ inBounds = ( xPos < 0 || yPos < 0 || xPos > currentOpts.w || yPos > currentOpts.h ) ? false : true; - l = xPos - Math.round(currentOpts.lensW / 2); - t = yPos - Math.round(currentOpts.lensH / 2); + l = xPos - currentOpts.lensW / 2; + t = yPos - currentOpts.lensH / 2; if (currentOpts.mode !== 'inside') { if (xPos < currentOpts.lensW / 2) { @@ -196,21 +196,21 @@ } if (yPos - currentOpts.h + Math.ceil(currentOpts.lensH / 2) > 0) { - t = currentOpts.h - Math.ceil(currentOpts.lensH + 2); + t = currentOpts.h - Math.ceil(currentOpts.lensH); } - pos.l = Math.round(l); - pos.t = Math.round(t); + pos.l = l; + pos.t = t; - currentOpts.lensBgX = pos.l + 1; - currentOpts.lensBgY = pos.t + 1; + currentOpts.lensBgX = pos.l; + currentOpts.lensBgY = pos.t; if (currentOpts.mode === 'inside') { - currentOpts.largeL = Math.round(xPos * (currentOpts.zoom - (currentOpts.lensW / currentOpts.w))); - currentOpts.largeT = Math.round(yPos * (currentOpts.zoom - (currentOpts.lensH / currentOpts.h))); + currentOpts.largeL = xPos * (currentOpts.zoom - (currentOpts.lensW / currentOpts.w)); + currentOpts.largeT = yPos * (currentOpts.zoom - (currentOpts.lensH / currentOpts.h)); } else { - currentOpts.largeL = Math.round(currentOpts.lensBgX * currentOpts.zoom * (currentOpts.largeWrapperW / currentOpts.w) * rate); - currentOpts.largeT = Math.round(currentOpts.lensBgY * currentOpts.zoom * (currentOpts.largeWrapperH / currentOpts.h)); + currentOpts.largeL = currentOpts.lensBgX * currentOpts.zoom * (currentOpts.largeWrapperW / currentOpts.w) * rate; + currentOpts.largeT = currentOpts.lensBgY * currentOpts.zoom * (currentOpts.largeWrapperH / currentOpts.h); } } } @@ -277,12 +277,9 @@ } pos.t = pos.t <= 0 ? 0 : pos.t; - pos.t = pos.t > 0 ? pos.t: pos.t; - pos.l = pos.l <= 0 ? 0 : pos.l; - //pos.l = pos.l > 0 ? pos.l : pos.l; curLens.css({ left: pos.l + paddingX +'px', - top: pos.t + paddingY + 1.75 + 'px' + top: pos.t + paddingY + 'px' }); if (lensbg) { @@ -318,8 +315,8 @@ thumbData.x = thumbBounds.left; thumbData.y = thumbBounds.top; - thumbData.w = Math.round(thumbBounds.right - thumbData.x); - thumbData.h = Math.round(thumbBounds.bottom - thumbData.y); + thumbData.w = thumbBounds.right - thumbData.x; + thumbData.h = thumbBounds.bottom - thumbData.y; if (thumbData.mode === 'inside') { w = thumbData.w; @@ -329,8 +326,8 @@ h = thumbData.largeWrapperH; } - thumbData.largeW = Math.round(thumbData.zoom * w); - thumbData.largeH = Math.round(thumbData.zoom * h); + thumbData.largeW = thumbData.zoom * w; + thumbData.largeH = thumbData.zoom * h; thumbData.lensW = (thumbData.w / thumbData.zoom) / rate; thumbData.lensH = thumbData.h / thumbData.zoom; @@ -461,7 +458,7 @@ ? options.onthumbmove : currentOpts.onthumbmove; - largeUrl = gOptions.full || $thumb.attr('src'); + largeUrl = $thumb.data("original") || gOptions.full || $thumb.attr('src'); if (thumb.id === '') { idx = thumb.id = 'magnifier-item-' + gId; From ad4cf24859238f36fd234b2410c348470e70668f Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Fri, 23 Oct 2015 11:15:58 +0300 Subject: [PATCH 016/214] JS-273: Gallery magnifier shows preview image instead of original size image --- lib/web/fotorama/fotorama.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/lib/web/fotorama/fotorama.js b/lib/web/fotorama/fotorama.js index 445fe7d30c52c..21f599c2e9b4b 100644 --- a/lib/web/fotorama/fotorama.js +++ b/lib/web/fotorama/fotorama.js @@ -2775,6 +2775,10 @@ fotoramaVersion = '4.6.4'; img.alt = frameData.data.caption || ""; } + if (frameData.data.full) { + $(img).data("original", frameData.data.full); + } + if (UTIL.isExpectedCaption(dataFrame, opts.showcaption)) { $(img).attr('aria-labelledby', dataFrame.labelledby); } From d57cfc7b1472458f974a270a1b2ef3ad4ae77791 Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Fri, 23 Oct 2015 11:28:46 +0300 Subject: [PATCH 017/214] JS-273: Gallery magnifier shows preview image instead of original size image - replace double quotes with single quotes --- lib/web/fotorama/fotorama.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/web/fotorama/fotorama.js b/lib/web/fotorama/fotorama.js index 21f599c2e9b4b..a63c21bb4c29b 100644 --- a/lib/web/fotorama/fotorama.js +++ b/lib/web/fotorama/fotorama.js @@ -2776,7 +2776,7 @@ fotoramaVersion = '4.6.4'; } if (frameData.data.full) { - $(img).data("original", frameData.data.full); + $(img).data('original', frameData.data.full); } if (UTIL.isExpectedCaption(dataFrame, opts.showcaption)) { From 04a117f6d000137aafc5b646cfce11764758a192 Mon Sep 17 00:00:00 2001 From: Uladzislau Harbachou Date: Fri, 23 Oct 2015 15:24:19 +0300 Subject: [PATCH 018/214] JS-269: Preview image is absent when exit from fullscreen - Removed duplicated classes --- lib/web/fotorama/fotorama.js | 2 +- lib/web/magnifier/magnify.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/web/fotorama/fotorama.js b/lib/web/fotorama/fotorama.js index a63c21bb4c29b..89a874c10d45b 100644 --- a/lib/web/fotorama/fotorama.js +++ b/lib/web/fotorama/fotorama.js @@ -2708,7 +2708,7 @@ fotoramaVersion = '4.6.4'; $img .off('load error') - .addClass(imgClass + (fullFLAG ? ' ' + imgFullClass : '')) + .addClass('' + (fullFLAG ? imgFullClass: imgClass)) .prependTo($frame); if ($frame.hasClass(stageFrameClass) && !$frame.hasClass(videoContainerClass)) { diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index 09a3d9dacd44d..a48671c65081b 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -323,7 +323,7 @@ define([ } /** - * Metod which makes draggable picture. Also work on touch devices. + * Method which makes draggable picture. Also work on touch devices. */ function magnifierFullscreen() { var isDragActive = false, @@ -546,7 +546,7 @@ define([ $zoomOut.on('click touchstart', zoomOut); $zoomOut.keyup(function (e) { - + if (e.keyCode === 13) { zoomOut(e); } From 5bd3fd5a3bf135ecfb121849e594117b3a94834e Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Fri, 23 Oct 2015 17:50:08 +0300 Subject: [PATCH 019/214] JS-267: ZoomIn & ZoomOut didn't work in fullscreen --- lib/web/mage/gallery/gallery.less | 4 +-- lib/web/magnifier/magnify.js | 50 ++++++++++++++++++------------- 2 files changed, 32 insertions(+), 22 deletions(-) diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index afc34086af400..e0a5baea542c0 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -1131,7 +1131,7 @@ .fotorama--fullscreen { .fotorama__stage__frame { - .fotorama__img { + .fotorama__img, .fotorama__img--full { bottom: 0; left: 0; margin: auto; @@ -1142,7 +1142,7 @@ top: 0; } .fotorama__img--full { - display:block; + display: block; width: auto; max-height: 100%; max-width: 100%; diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index a48671c65081b..baf8b272608c9 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -115,36 +115,32 @@ define([ } function checkFullscreenImagePosition($image, dimentions, widthStep, heightStep) { - var $imageContainer, settings, top, left, ratio; + var $imageContainer, + settings, + top, + left, + ratio; if ($(gallerySelector).data('fotorama').fullScreen && allowAnimating) { $imageContainer = $image.parent(); - top = $image.offset().top; - left = $image.offset().left; + top = $image.position().top; + left = $image.position().left; ratio = $image.width() / $image.height(); - - if (!isNaN(dimentions.width)) { - dimentions.height = dimentions.width / ratio; - } - - if (!isNaN(dimentions.height)) { - dimentions.width = dimentions.height * ratio; - } + dimentions.height = isNaN(dimentions.height) ? dimentions.width / ratio : dimentions.height; + dimentions.width = isNaN(dimentions.width) ? dimentions.height * ratio : dimentions.width; if (dimentions.height >= $imageContainer.height()) { - top += heightStep / 2; - + top -= heightStep / 4; top = top < $imageContainer.height() - dimentions.height ? $imageContainer.height() - dimentions.height : top; - top = top > 0 ? 0 : top; + top = top > dimentions.height - $imageContainer.height() ? dimentions.height - $imageContainer.height() : top; } else { top = 0; } if (dimentions.width >= $imageContainer.width()) { - left += -$imageContainer.parent().offset().left + widthStep / 2; - + left += widthStep / 2; left = left < $imageContainer.width() - dimentions.width ? $imageContainer.width() - dimentions.width : left; left = left > 0 ? 0 : left; @@ -165,7 +161,12 @@ define([ } function zoomIn(e) { - var $image, imgOriginalSize, widthResult, heightResult, dimentions = {}; + var $image, + imgOriginalSize, + widthResult, + heightResult, + dimentions = {}; + if (zoomShown && allowZoomIn) { $image = $(fullscreenImageSelector); imgOriginalSize = getImageSize($image[0].src); @@ -219,8 +220,15 @@ define([ } function zoomOut(e) { - var $image, widthResult, heightResult, dimentions, - parentWidth, parentHeight, imageWidth, imageHeight, fitIntoParent; + var $image, + widthResult, + heightResult, + dimentions, + parentWidth, + parentHeight, + imageWidth, + imageHeight, + fitIntoParent; if (zoomShown && allowZoomOut) { allowZoomIn = true; @@ -256,6 +264,7 @@ define([ }; if (imageWidth > imageHeight) { + if (widthResult > parentWidth || heightResult > parentHeight) { dimentions = { width: widthResult, @@ -267,6 +276,7 @@ define([ fitIntoParent(); } } else { + if (heightResult > parentHeight || widthResult > parentWidth) { dimentions = { width: 'auto', @@ -289,7 +299,7 @@ define([ * @param fotorama - object of fotorama */ function mousewheel(e, fotorama, element) { - var $fotoramaStage = $(element).find('[data-fotorama-stage="fotorama__stage"]'), + var $fotoramaStage = fotorama.activeFrame.$stageFrame, fotoramaStage = $fotoramaStage.get(0); function onWheel(e) { From 27351969ea6675377c123191b9b6b4d17e03d932 Mon Sep 17 00:00:00 2001 From: Uladzislau Harbachou Date: Mon, 26 Oct 2015 13:37:17 +0300 Subject: [PATCH 020/214] JS-263: Fullscreen Gallery Safari bug -fixed preview in fullscreen -fixed position in fullscreen --- lib/web/mage/gallery/gallery.less | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index e0a5baea542c0..1978b83ddc023 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -1131,7 +1131,11 @@ .fotorama--fullscreen { .fotorama__stage__frame { - .fotorama__img, .fotorama__img--full { + .fotorama__img { + display: none; + } + .fotorama__img, + .fotorama__img--full { bottom: 0; left: 0; margin: auto; @@ -1149,6 +1153,7 @@ vertical-align: middle; transition-duration: @fotorama-fullscreen-zoom-time; transition-property: width, height, top, left; + margin: auto; } } } From 0f8e84b37c881f34878061cf15d5573af839e749 Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Tue, 27 Oct 2015 18:11:47 +0200 Subject: [PATCH 021/214] JS-262: Fullscreen zoom minus button not working as expected --- lib/web/magnifier/magnify.js | 47 ++++++++++++++++++++---------------- 1 file changed, 26 insertions(+), 21 deletions(-) diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index baf8b272608c9..c69b79585ef6f 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -23,8 +23,7 @@ define([ zoomHeightStep, zoomShown = true, allowZoomOut = false, - allowZoomIn = true, - allowAnimating = true; + allowZoomIn = true; if (isTouchEnabled) { $(element).on('fotorama:showend fotorama:load', function () { @@ -54,7 +53,7 @@ define([ function resetVars($image) { zoomWidthStep = zoomHeightStep = 0; - allowAnimating = allowZoomIn = true; + allowZoomIn = true; allowZoomOut = false; $image.css({ top: 0, @@ -63,7 +62,8 @@ define([ width: 'auto', height: 'auto', maxWidth: '100%', - maxHeight: '100%' + maxHeight: '100%', + margin: 'auto' }); } @@ -121,8 +121,7 @@ define([ left, ratio; - if ($(gallerySelector).data('fotorama').fullScreen && allowAnimating) { - + if ($(gallerySelector).data('fotorama').fullScreen) { $imageContainer = $image.parent(); top = $image.position().top; left = $image.position().left; @@ -131,11 +130,17 @@ define([ dimentions.width = isNaN(dimentions.width) ? dimentions.height * ratio : dimentions.width; if (dimentions.height >= $imageContainer.height()) { - top -= heightStep / 4; + top += heightStep / 2; + settings = { + marginTop: 0 + }; top = top < $imageContainer.height() - dimentions.height ? $imageContainer.height() - dimentions.height : top; - top = top > dimentions.height - $imageContainer.height() ? dimentions.height - $imageContainer.height() : top; + top = top > 0 ? 0 : top; } else { + settings = { + marginTop: 'auto' + }; top = 0; } @@ -148,15 +153,12 @@ define([ left = 0; } - settings = $.extend(dimentions, { + settings = $.extend(settings, dimentions, { left: left, top: top }); - //if (allowAnimating) { - //allowAnimating = false; $image.css(settings); - //} } } @@ -303,15 +305,22 @@ define([ fotoramaStage = $fotoramaStage.get(0); function onWheel(e) { - var delta = e.deltaY || e.detail || e.wheelDelta; + var delta = e.deltaY || e.wheelDelta; if ($(gallerySelector).data('fotorama').fullScreen) { - e = e || window.event; - if (delta > 0) { - zoomOut(e); + if (e.deltaY) { + if (delta > 0) { + zoomOut(e || window.event); + } else { + zoomIn(e || window.event); + } } else { - zoomIn(e); + if (delta > 0) { + zoomIn(e || window.event); + } else { + zoomOut(e || window.event); + } } e.preventDefault ? e.preventDefault() : (e.returnValue = false); @@ -441,10 +450,6 @@ define([ }); - //$image.on('transitionend', function() { - // allowAnimating = true; - //}); - $(document).on(isTouchEnabled ? 'touchend' : 'mouseup pointerup MSPointerUp', function () { if (gallery.fullScreen) { isDragActive = false; From a47462652f23f48b285db5d80bbbe6df20908c33 Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Wed, 28 Oct 2015 11:53:32 +0300 Subject: [PATCH 022/214] JS-229: CLONE - Next/prev thumbnail on the end of drag event when keyboard is used --- lib/web/magnifier/magnify.js | 91 +++++++++++++++++++++++++++++------- 1 file changed, 73 insertions(+), 18 deletions(-) diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index baf8b272608c9..7db1e3c51bf3e 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -339,17 +339,33 @@ define([ var isDragActive = false, startX, startY, + endX, imagePosX, imagePosY, touch, + pressed = false, $gallery = $(gallerySelector), $image = $(fullscreenImageSelector, $gallery), $imageContainer = $('[data-gallery-role="stage-shaft"] [data-active="true"]'), gallery = $gallery.data('fotorama'); - function shiftImage(dx, dy) { - var top = +imagePosY + dy; - var left = +imagePosX + dx; + function shiftImage(dx, dy, e) { + var top = imagePosY + dy, + left = imagePosX + dx; + + if (($image.offset().left === $imageContainer.offset().left + $imageContainer.width() - $image.width() && e.type !== 'mousemove') || + (endX === $imageContainer.offset().left + $imageContainer.width() - $image.width() && dx < 0 && e.type === 'mousemove')) { + endX = null; + $(gallerySelector).data('fotorama').show('>'); + return; + } + + if (($image.offset().left === $imageContainer.offset().left && dx !== 0 && e.type !== 'mousemove') || + (endX === $imageContainer.offset().left && dx > 0 && e.type === 'mousemove')) { + endX = null; + $(gallerySelector).data('fotorama').show('<'); + return; + } if ($image.height() > $imageContainer.height()) { @@ -373,6 +389,11 @@ define([ $image.offset({ 'left': left }); + } else { + if ((dy === 0 && e.type !== 'mousemove') || (dy === 0 && e.type === 'mousemove' && pressed)) { + pressed = false; + dx < 0 ? $(gallerySelector).data('fotorama').show('>') : $(gallerySelector).data('fotorama').show('<'); + } } } @@ -394,6 +415,7 @@ define([ startX = e.clientX || e.originalEvent.clientX; startY = e.clientY || e.originalEvent.clientY; isDragActive = true; + pressed = true; $image.css({ transitionProperty: 'width, height' @@ -417,36 +439,69 @@ define([ e.clientX = touch.pageX; e.clientY = touch.pageY; } - shiftImage((clientX - startX), (clientY - startY)); + shiftImage((clientX - startX), (clientY - startY), e); } }); - $(window).keyup(function (e) { - imagePosX = $(fullscreenImageSelector, $gallery).offset().left; - imagePosY = $(fullscreenImageSelector, $gallery).offset().top; - var step = 20; + var keyboardNavigation = function (e) { + var step = 20, + isFullScreen = $(gallerySelector).data('fotorama').fullScreen; - if (e.keyCode === 102) { - shiftImage(-step, 0); + if (isFullScreen) { + imagePosX = $(fullscreenImageSelector, $(gallerySelector)).offset().left; + imagePosY = $(fullscreenImageSelector, $(gallerySelector)).offset().top; } - if (e.keyCode === 98) { - shiftImage(0, step); + + if (e.keyCode === 39) { + + if (isFullScreen) { + shiftImage(-step, 0, e); + } else { + $(gallerySelector).data('fotorama').show('>'); + } } - if (e.keyCode === 100) { - shiftImage(step, 0); + + if (e.keyCode === 38) { + + if (isFullScreen) { + shiftImage(0, step, e); + } else { + $(gallerySelector).data('fotorama').show('<'); + } } - if (e.keyCode === 104) { - shiftImage(0, -step); + + if (e.keyCode === 37) { + + if (isFullScreen) { + shiftImage(step, 0, e); + } else { + $(gallerySelector).data('fotorama').show('<'); + } } - }); + if (e.keyCode === 40) { + e.preventDefault(); + if (isFullScreen) { + shiftImage(0, -step, e); + } else { + $(gallerySelector).data('fotorama').show('>'); + } + } + }; + $(document).unbind('keydown'); + $(document).keydown(keyboardNavigation); //$image.on('transitionend', function() { // allowAnimating = true; //}); - $(document).on(isTouchEnabled ? 'touchend' : 'mouseup pointerup MSPointerUp', function () { + $(document).on(isTouchEnabled ? 'touchend' : 'mouseup pointerup MSPointerUp', function (e) { if (gallery.fullScreen) { + + if ($image.offset()) { + endX = $image.offset().left; + } + isDragActive = false; $image.css({ cursor: 'pointer', From 185946a58dd9d728a61b58566e04d8a2fe3c2a0a Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Wed, 28 Oct 2015 16:33:30 +0300 Subject: [PATCH 023/214] JS-229: CLONE - Next/prev thumbnail on the end of drag event when keyboard is used - turn on/off swipe event on fullscreen --- lib/web/magnifier/magnify.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index 7db1e3c51bf3e..9f65831cb61d8 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -214,6 +214,10 @@ define([ }); checkFullscreenImagePosition($image, dimentions, -zoomWidthStep, -zoomHeightStep); } + + $(gallerySelector).data('fotorama').setOptions({ + swipe: false + }); } return false; @@ -261,6 +265,10 @@ define([ }; } checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + + $(gallerySelector).data('fotorama').setOptions({ + swipe: true + }); }; if (imageWidth > imageHeight) { @@ -390,8 +398,7 @@ define([ 'left': left }); } else { - if ((dy === 0 && e.type !== 'mousemove') || (dy === 0 && e.type === 'mousemove' && pressed)) { - pressed = false; + if (dy === 0 && e.type !== 'mousemove') { dx < 0 ? $(gallerySelector).data('fotorama').show('>') : $(gallerySelector).data('fotorama').show('<'); } } @@ -630,7 +637,7 @@ define([ .on('fotorama:fullscreenenter fotorama:showend', function (e, fotorama) { hideMagnifier(); $(element).data('gallery').updateOptions({ - swipe: false + swipe: true }); magnifierFullscreen(e, fotorama); mousewheel(e, fotorama, element); From 4585bb9713073ad7e9ae01b34ff137182f8db5a3 Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Thu, 29 Oct 2015 15:14:21 +0300 Subject: [PATCH 024/214] JS-232: CLONE - Test/fix accessibility features on Chrome/Windows --- lib/web/fotorama/fotorama.js | 6 +++++- lib/web/mage/gallery/gallery.html | 8 ++++---- lib/web/mage/gallery/gallery.js | 3 +-- lib/web/magnifier/magnify.js | 13 +++++++++---- 4 files changed, 19 insertions(+), 11 deletions(-) diff --git a/lib/web/fotorama/fotorama.js b/lib/web/fotorama/fotorama.js index 89a874c10d45b..84dea26297c10 100644 --- a/lib/web/fotorama/fotorama.js +++ b/lib/web/fotorama/fotorama.js @@ -3192,7 +3192,11 @@ fotoramaVersion = '4.6.4'; addEnterUp($stageShaft[0], function () { if (!$fotorama.hasClass(fullscreenClass)) { that.requestFullScreen(); - $(fullscreenIcon).trigger('focus'); + $(fullscreenIcon).css({ + opacity: 1, + visibility: 'visible', + display: 'block' + }).focus(); } }); } diff --git a/lib/web/mage/gallery/gallery.html b/lib/web/mage/gallery/gallery.html index 25acbc8f75bd7..f15324d8478b5 100644 --- a/lib/web/mage/gallery/gallery.html +++ b/lib/web/mage/gallery/gallery.html @@ -4,8 +4,8 @@ * See COPYING.txt for license details. */ --> -
-
+
+
@@ -24,13 +24,13 @@
-
+
-
+
diff --git a/lib/web/mage/gallery/gallery.js b/lib/web/mage/gallery/gallery.js index 245f08f824bd9..17fb66f6f3a43 100644 --- a/lib/web/mage/gallery/gallery.js +++ b/lib/web/mage/gallery/gallery.js @@ -96,7 +96,7 @@ define([ opacity: 1, visibility: 'visible', display: 'block' - }); + }).focus(); }); }, @@ -116,7 +116,6 @@ define([ settings.fullscreenConfig.swipe = true; settings.$gallery.on('fotorama:fullscreenenter', function () { - settings.$gallery.focus(); settings.focusableStart.bind('focusin', self._focusSwitcher); settings.focusableEnd.bind('focusin', self._focusSwitcher); settings.api.updateOptions(settings.defaultConfig.options, true); diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index baf8b272608c9..eeaa9f538f2a3 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -527,6 +527,7 @@ define([ $($(gallerySelector).data('fotorama').activeFrame.$stageFrame).magnify(config.magnifierOpts); }); $(element).on('gallery:loaded', function (e) { + var prevIndex; $(element).find(gallerySelector) .on('fotorama:ready', function (e, fotorama) { var $zoomIn = $(zoomInButtonSelector), @@ -573,19 +574,23 @@ define([ } }) .on('fotorama:fullscreenenter fotorama:showend', function (e, fotorama) { + prevIndex = $(gallerySelector).data('fotorama').activeFrame.i; hideMagnifier(); - $(element).data('gallery').updateOptions({ - swipe: false - }); magnifierFullscreen(e, fotorama); mousewheel(e, fotorama, element); + + if (e.type === 'fotorama:fullscreenenter') { + resetVars($(fullscreenImageSelector)); + } }) .on('fotorama:load', function (e, fotorama) { toggleZoomButtons($(fullscreenImageSelector)); magnifierFullscreen(); }) .on('fotorama:show', function (e, fotorama) { - resetVars($(fullscreenImageSelector)); + if (prevIndex !== $(gallerySelector).data('fotorama').activeFrame.i) { + resetVars($(fullscreenImageSelector)); + } }); }); From b8f8790c92bc3a297e8763193612d3e28089d2fe Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Thu, 29 Oct 2015 15:13:10 +0200 Subject: [PATCH 025/214] JS-280: Zoom doesn't work smooth --- lib/web/mage/gallery/gallery.less | 1 + lib/web/magnifier/magnify.js | 45 ++++++++++++++++++------------- 2 files changed, 27 insertions(+), 19 deletions(-) diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index 1978b83ddc023..2e56b9686fb58 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -1151,6 +1151,7 @@ max-height: 100%; max-width: 100%; vertical-align: middle; + transition-timing-function: linear; transition-duration: @fotorama-fullscreen-zoom-time; transition-property: width, height, top, left; margin: auto; diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index c69b79585ef6f..06134d2e03c6c 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -21,6 +21,7 @@ define([ behaveOnHover, zoomWidthStep, zoomHeightStep, + dragFlag, zoomShown = true, allowZoomOut = false, allowZoomIn = true; @@ -54,7 +55,7 @@ define([ function resetVars($image) { zoomWidthStep = zoomHeightStep = 0; allowZoomIn = true; - allowZoomOut = false; + allowZoomOut = dragFlag = false; $image.css({ top: 0, left: 0, @@ -130,17 +131,19 @@ define([ dimentions.width = isNaN(dimentions.width) ? dimentions.height * ratio : dimentions.width; if (dimentions.height >= $imageContainer.height()) { - top += heightStep / 2; - settings = { - marginTop: 0 - }; - top = top < $imageContainer.height() - dimentions.height ? - $imageContainer.height() - dimentions.height : top; - top = top > 0 ? 0 : top; + if (parseInt($image.css('marginTop')) || parseInt($image.css('marginLeft'))) { + top = dragFlag ? top - heightStep/4 : 0; + top = top < $imageContainer.height() - dimentions.height ? + $imageContainer.height() - dimentions.height : top; + top = top > dimentions.height - $imageContainer.height() ? + dimentions.height - $imageContainer.height() : top; + } else { + top += heightStep / 2; + top = top < $imageContainer.height() - dimentions.height ? + $imageContainer.height() - dimentions.height : top; + top = top > 0 ? 0 : top; + } } else { - settings = { - marginTop: 'auto' - }; top = 0; } @@ -153,12 +156,13 @@ define([ left = 0; } - settings = $.extend(settings, dimentions, { + settings = $.extend(dimentions, { left: left, top: top }); $image.css(settings); + } } @@ -274,7 +278,7 @@ define([ }; checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); } else { - allowZoomOut = false; + allowZoomOut = dragFlag = false; fitIntoParent(); } } else { @@ -286,7 +290,7 @@ define([ }; checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); } else { - allowZoomOut = false; + allowZoomOut = dragFlag = false; fitIntoParent(); } } @@ -305,21 +309,22 @@ define([ fotoramaStage = $fotoramaStage.get(0); function onWheel(e) { - var delta = e.deltaY || e.wheelDelta; + var delta = e.deltaY || e.wheelDelta, + ev = e || window.event; if ($(gallerySelector).data('fotorama').fullScreen) { if (e.deltaY) { if (delta > 0) { - zoomOut(e || window.event); + zoomOut(ev); } else { - zoomIn(e || window.event); + zoomIn(ev); } } else { if (delta > 0) { - zoomIn(e || window.event); + zoomIn(ev); } else { - zoomOut(e || window.event); + zoomOut(ev); } } @@ -360,6 +365,8 @@ define([ var top = +imagePosY + dy; var left = +imagePosX + dx; + dragFlag = true; + if ($image.height() > $imageContainer.height()) { if (($imageContainer.offset().top + $imageContainer.height()) > (top + $image.height())) { From 4ea2ae7cb5ab22919b8b736d98e47d72d12aafe9 Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Thu, 29 Oct 2015 15:59:13 +0200 Subject: [PATCH 026/214] JS-280: Zoom doesn't work smooth --- lib/web/mage/gallery/gallery.less | 3 +-- lib/web/magnifier/magnify.js | 35 ++++++++++++++++++------------- 2 files changed, 21 insertions(+), 17 deletions(-) diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index 2e56b9686fb58..01b6f136a3f96 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -1151,8 +1151,7 @@ max-height: 100%; max-width: 100%; vertical-align: middle; - transition-timing-function: linear; - transition-duration: @fotorama-fullscreen-zoom-time; + transition: @fotorama-fullscreen-zoom-time linear; transition-property: width, height, top, left; margin: auto; } diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index 06134d2e03c6c..a6b27ab0b058f 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -120,7 +120,8 @@ define([ settings, top, left, - ratio; + ratio, + getTopValue; if ($(gallerySelector).data('fotorama').fullScreen) { $imageContainer = $image.parent(); @@ -130,9 +131,9 @@ define([ dimentions.height = isNaN(dimentions.height) ? dimentions.width / ratio : dimentions.height; dimentions.width = isNaN(dimentions.width) ? dimentions.height * ratio : dimentions.width; - if (dimentions.height >= $imageContainer.height()) { + getTopValue = function () { if (parseInt($image.css('marginTop')) || parseInt($image.css('marginLeft'))) { - top = dragFlag ? top - heightStep/4 : 0; + top = dragFlag ? top - heightStep / 4 : 0; top = top < $imageContainer.height() - dimentions.height ? $imageContainer.height() - dimentions.height : top; top = top > dimentions.height - $imageContainer.height() ? @@ -140,9 +141,13 @@ define([ } else { top += heightStep / 2; top = top < $imageContainer.height() - dimentions.height ? - $imageContainer.height() - dimentions.height : top; + $imageContainer.height() - dimentions.height : top; top = top > 0 ? 0 : top; } + }; + + if (dimentions.height >= $imageContainer.height()) { + getTopValue(); } else { top = 0; } @@ -162,7 +167,6 @@ define([ }); $image.css(settings); - } } @@ -328,7 +332,7 @@ define([ } } - e.preventDefault ? e.preventDefault() : (e.returnValue = false); + e.preventDefault ? e.preventDefault() : e.returnValue = false; } } @@ -362,17 +366,17 @@ define([ gallery = $gallery.data('fotorama'); function shiftImage(dx, dy) { - var top = +imagePosY + dy; - var left = +imagePosX + dx; + var top = +imagePosY + dy, + left = +imagePosX + dx; dragFlag = true; if ($image.height() > $imageContainer.height()) { - if (($imageContainer.offset().top + $imageContainer.height()) > (top + $image.height())) { + if ($imageContainer.offset().top + $imageContainer.height() > top + $image.height()) { top = $imageContainer.offset().top + $imageContainer.height() - $image.height(); } else { - top = ($imageContainer.offset().top < top) ? 0 : top; + top = $imageContainer.offset().top < top ? 0 : top; } $image.offset({ 'top': top @@ -381,10 +385,10 @@ define([ if ($image.width() > $imageContainer.width()) { - if (($imageContainer.offset().left + $imageContainer.width()) > (left + $image.width())) { + if ($imageContainer.offset().left + $imageContainer.width() > left + $image.width()) { left = $imageContainer.offset().left + $imageContainer.width() - $image.width(); } else { - left = ($imageContainer.offset().left < left) ? $imageContainer.offset().left : left; + left = $imageContainer.offset().left < left ? $imageContainer.offset().left : left; } $image.offset({ 'left': left @@ -419,7 +423,8 @@ define([ }); $image.on(isTouchEnabled ? 'touchmove' : 'mousemove pointermove MSPointerMove', function (e) { - var top, left, clientX, clientY; + var clientX, + clientY; if (gallery.fullScreen && isDragActive) { @@ -433,7 +438,7 @@ define([ e.clientX = touch.pageX; e.clientY = touch.pageY; } - shiftImage((clientX - startX), (clientY - startY)); + shiftImage(clientX - startX, clientY - startY); } }); @@ -602,5 +607,5 @@ define([ }); return config; - } + }; }); From 7df109c1600c1e5c4ca0ab11c54cd36d1f8d0eeb Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Thu, 29 Oct 2015 17:29:41 +0200 Subject: [PATCH 027/214] JS-268: Reset of original image in fullscreen --- lib/web/mage/gallery/gallery.less | 10 +++++++ lib/web/magnifier/magnify.js | 44 +++++++++++++++---------------- 2 files changed, 31 insertions(+), 23 deletions(-) diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index 01b6f136a3f96..010bd908294ae 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -1154,6 +1154,16 @@ transition: @fotorama-fullscreen-zoom-time linear; transition-property: width, height, top, left; margin: auto; + cursor: default; + &.fotorama__img--zoommable { + cursor: pointer; + max-width: none; + max-height: none; + } + &.fotorama__img--draggable { + cursor: move; + transition-property: width, height; + } } } } diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index a6b27ab0b058f..9b05ec7f0141e 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -17,6 +17,8 @@ define([ zoomInButtonSelector = '[data-gallery-role="fotorama__zoom-in"]', zoomOutButtonSelector = '[data-gallery-role="fotorama__zoom-out"]', fullscreenImageSelector = '[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full', + imageDraggableClass = 'fotorama__img--draggable', + imageZoommable = 'fotorama__img--zoommable', hideMagnifier, behaveOnHover, zoomWidthStep, @@ -56,16 +58,12 @@ define([ zoomWidthStep = zoomHeightStep = 0; allowZoomIn = true; allowZoomOut = dragFlag = false; - $image.css({ - top: 0, - left: 0, - cursor: '', - width: 'auto', - height: 'auto', - maxWidth: '100%', - maxHeight: '100%', - margin: 'auto' - }); + + if ($image.hasClass(imageDraggableClass)) { + $image.removeClass(imageDraggableClass); + } else if($image.hasClass(imageZoommable)) { + $image.removeClass(imageZoommable); + } } function clickAnimation(e) { @@ -157,6 +155,10 @@ define([ left = left < $imageContainer.width() - dimentions.width ? $imageContainer.width() - dimentions.width : left; left = left > 0 ? 0 : left; + if (!dragFlag && widthStep < 0) { + left = left < ($imageContainer.width() - dimentions.width) / 2 ? + ($imageContainer.width() - dimentions.width) / 2 : left; + } } else { left = 0; } @@ -402,7 +404,9 @@ define([ if (gallery.fullScreen) { e.preventDefault(); - $image.css('cursor', 'move'); + if (zoomShown && allowZoomOut) { + $image.addClass(imageDraggableClass); + } imagePosY = $image.offset().top; imagePosX = $image.offset().left; @@ -415,10 +419,6 @@ define([ startY = e.clientY || e.originalEvent.clientY; isDragActive = true; - $image.css({ - transitionProperty: 'width, height' - }); - } }); @@ -465,20 +465,18 @@ define([ $(document).on(isTouchEnabled ? 'touchend' : 'mouseup pointerup MSPointerUp', function () { if (gallery.fullScreen) { isDragActive = false; - $image.css({ - cursor: 'pointer', - transitionProperty: 'width, height, top, left' - }); + + if (zoomShown) { + $image.removeClass(imageDraggableClass).addClass(imageZoommable); + } } }); if (zoomShown) { $image.css({ width: $image.width(), - height: $image.height(), - maxWidth: 'none', - maxHeight: 'none' - }); + height: $image.height() + }).addClass(imageZoommable); } } From f4bdb5dfd8641627b74eadcb0d52087a63e67b01 Mon Sep 17 00:00:00 2001 From: Uladzislau Harbachou Date: Tue, 20 Oct 2015 16:35:33 +0400 Subject: [PATCH 028/214] JS-255: Stabilization fixes for magnifier and gallery --- lib/web/mage/gallery/gallery.html | 14 +- lib/web/mage/gallery/gallery.less | 29 +- lib/web/magnifier/magnifier.js | 411 +---------------------- lib/web/magnifier/magnify.js | 529 +++++++++++++++++++++++++++++- 4 files changed, 548 insertions(+), 435 deletions(-) diff --git a/lib/web/mage/gallery/gallery.html b/lib/web/mage/gallery/gallery.html index 34d26c812dae4..25acbc8f75bd7 100644 --- a/lib/web/mage/gallery/gallery.html +++ b/lib/web/mage/gallery/gallery.html @@ -7,7 +7,7 @@
-
+
@@ -18,19 +18,19 @@
-
-
+
+
-
-
+
+
-
+
@@ -38,4 +38,4 @@
-
+
\ No newline at end of file diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index b4a20fe03cd37..c9e97917bb78e 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -8,6 +8,7 @@ @fotorama_close_size: 30px; @size-fotorama-block: 50px; @fotorama-thumb-arrow: 30px; +@fotorama-fullscreen-zoom-time: 0.3s; @import '../../css/source/lib/_lib.less'; // Global lib @import '../../css/source/_theme.less'; // Theme overrides @@ -78,7 +79,6 @@ &:extend(.fotorama-sprite); background-position: 0 (-@size-fotorama-block) !important; } - .fotorama__zoom-in { top: 0; &:extend(.fotorama-sprite); @@ -86,6 +86,15 @@ } } +.circle { + position: absolute; + background-color: silver; + opacity: 0.7; + border-radius: 100%; + height: 1px; + width: 1px; +} + .fotorama__zoom-in, .fotorama__zoom-out { display: none; @@ -93,6 +102,7 @@ .fotorama__fullscreen { .fotorama__zoom-in, .fotorama__zoom-out { + overflow: hidden; position: absolute; width: 50px; height: 50px; @@ -725,8 +735,13 @@ display: none; } +.fotorama--fullscreen-icons { + .fotorama__fullscreen-icon { + display: none; + } +} + .fotorama__fullscreen-icon { - //display: none; &:focus { &:extend(.fotorama-focus); border-radius: 50%; @@ -736,7 +751,7 @@ .fotorama--fullscreen { .fotorama__fullscreen-icon { - //display: inline-block; + display: inline-block; background-position: (-@size-fotorama-block) 0; } } @@ -1083,6 +1098,8 @@ max-height: 100%; max-width: 100%; vertical-align: middle; + transition-duration: @fotorama-fullscreen-zoom-time; + transition-property: width, height, top, left; } } @@ -1235,9 +1252,7 @@ body.fotorama__fullscreen { .magnify-fullimage { display: inline-block; } - .fotorama__stage__shaft { - //.fotorama__img { - // display: none; - //} + .magnify-lens { + display: none !important; } } diff --git a/lib/web/magnifier/magnifier.js b/lib/web/magnifier/magnifier.js index 2a315a2b9bc6f..232579bb4f41e 100644 --- a/lib/web/magnifier/magnifier.js +++ b/lib/web/magnifier/magnifier.js @@ -4,11 +4,6 @@ */ ;(function ($) { - var onWheelCallback, - zoomWidthStep = 0, - zoomHeightStep = 0, - isDraggable = false; - $.fn.magnify = function (options) { 'use strict'; @@ -29,9 +24,8 @@ $thumb, that = this, largeWrapper = options.largeWrapper || ".magnifier-preview", - $largeWrapper = $(largeWrapper), - zoomShown = false, - curThumb = null, + $largeWrapper = $(largeWrapper); + curThumb = null, currentOpts = { x: 0, y: 0, @@ -564,161 +558,6 @@ } } - function toggleZoomButtons($image) { - var path = $image.attr("src"), - imgSize; - if (path) { - imgSize = getImageSize(path); - if ((imgSize.rh > $image.parent().height()) || (imgSize.rw > $image.parent().width())) { - $('.fotorama__zoom-in').show(); - $('.fotorama__zoom-out').show(); - zoomShown = true; - } else { - $('.fotorama__zoom-in').hide(); - $('.fotorama__zoom-out').hide(); - zoomShown = false; - } - } else { - $('.fotorama__zoom-in').hide(); - $('.fotorama__zoom-out').hide(); - zoomShown = false; - } - } - - function magnifierFullscreen () { - var isDragActive = false, - startX, - startY, - imagePosX, - imagePosY, - touch, - isTouchEnabled = 'ontouchstart' in document.documentElement; - - $('[data-gallery-role="gallery"]').on('fotorama:fullscreenenter fotorama:showend fotorama:load', function () { - var $preview = $('[data-gallery-role="stage-shaft"] [data-active="true"] img'), - $image = $('[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full'), - $imageContainer = $preview.parent(), - gallery = $('[data-gallery-role="gallery"]'); - - gallery.on('fotorama:fullscreenexit', function () { - $thumb.css({ - 'top': '', - 'left': '' - }); - }); - - if (gallery.data('fotorama').fullScreen) { - toggleZoomButtons($image); - resetVars($('[data-gallery-role="stage-shaft"] .fotorama__img--full')); - - $('.fotorama__stage__frame .fotorama__img--full').each(function () { - var path = $(this).attr("src"), - imgSize; - if (path) { - imgSize = getImageSize(path); - - if ((imgSize.rh > $(this).parent().height()) || (imgSize.rw > $(this).parent().width())) { - - if (imgSize.rh / imgSize.rw < $(this).parent().height() / $(this).parent().width()) { - $(this).width($(this).parent().width()); - $(this).height('auto'); - } else { - $(this).height($(this).parent().height()); - $(this).width('auto'); - } - - $(this).css({ - 'top': '', - 'left': '' - }); - } - } - }); - } - - $image - .off(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown') - .on(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown', function (e) { - if (gallery.data('fotorama').fullScreen && isDraggable) { - e.preventDefault(); - $image.css('cursor', 'move'); - imagePosY = $image.offset().top; - imagePosX = $image.offset().left; - - if (isTouchEnabled) { - touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; - e.clientX = touch.pageX; - e.clientY = touch.pageY; - } - startX = e.clientX || e.originalEvent.clientX; - startY = e.clientY || e.originalEvent.clientY; - isDragActive = true; - } - }); - - - - $image - .off(isTouchEnabled ? 'touchmove' : 'mousemove pointermove MSPointerMove') - .on(isTouchEnabled ? 'touchmove' : 'mousemove pointermove MSPointerMove', function (e) { - if (gallery.data('fotorama').fullScreen && isDragActive && isDraggable) { - - var top, - left, - startOffset = $image.offset(), - clientX = e.clientX || e.originalEvent.clientX, - clientY = e.clientY || e.originalEvent.clientY; - - - e.preventDefault(); - - if (isTouchEnabled) { - touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; - e.clientX = touch.pageX; - e.clientY = touch.pageY; - } - top = +imagePosY + (clientY - startY); - left = +imagePosX + (clientX - startX); - - if ($image.height() > $imageContainer.height()) { - - if (($imageContainer.offset().top + $imageContainer.height()) > (top + $image.height())) { - top = $imageContainer.offset().top + $imageContainer.height() - $image.height(); - } else { - top = ($imageContainer.offset().top < top) ? 0 : top; - } - $image.offset({ - 'top': top - }); - } - - if ($image.width() > $imageContainer.width()) { - - if (($imageContainer.offset().left + $imageContainer.width()) > (left + $image.width())) { - left = $imageContainer.offset().left + $imageContainer.width() - $image.width(); - } else { - left = ($imageContainer.offset().left < left) ? $imageContainer.offset().left : left; - } - $image.offset({ - 'left': left - }); - } - } - }); - - $image - .off(isTouchEnabled ? 'touchend' : 'mouseup pointerup MSPointerUp') - .on(isTouchEnabled ? 'touchend' : 'mouseup pointerup MSPointerUp', function (e) { - if (gallery.data('fotorama').fullScreen && isDragActive && isDraggable) { - isDragActive = false; - $image.css('cursor', 'pointer'); - - return false; - } - }); - }); - } - function onScroll() { if (curThumb !== null) { @@ -726,260 +565,14 @@ } } - if ($('.fotorama-item').data('fotorama').fullScreen) { - $('.fotorama__stage__frame .fotorama__img--full').each(function () { - var image = new Image(); - image.src = $(this).attr("src"); - - if ( (image.height > $(this).parent().height()) || (image.width > $(this).parent().width()) ) { - - if (image.height / image.width < $(this).parent().height() / $(this).parent().width()) { - $(this).width($(this).parent().width()); - $(this).height(''); - } else { - $(this).height($(this).parent().height()); - $(this).width(''); - } - } - }); - } $(window).on('scroll', onScroll); $(window).resize(function() { - - if ($('.fotorama-item').data('fotorama').fullScreen) { - - $('.fotorama__stage__frame .fotorama__img--full').each(function () { - var image = new Image(); - image.src = $(this).attr("src"); - - if ( (image.height > $(this).parent().height()) || (image.width > $(this).parent().width()) ) { - - if (image.height / image.width < $(this).parent().height() / $(this).parent().width()) { - $(this).width($(this).parent().width()); - $(this).height(''); - } else { - $(this).height($(this).parent().height()); - $(this).width(''); - } - } - }); - - toggleZoomButtons($('[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full')); - } - - _init($box, gOptions); - }); - function resetVars($image) { - zoomWidthStep = 0; - zoomHeightStep = 0; - isDraggable = false; - $image.css({ - top: 0, - left: 0, - right: 0, - bottom: 0, - cursor: '' - }); - } - - function checkFullscreenImagePosition(widthStep, heightStep) { - var $preview, $image, $imageContainer, gallery, top, left; - - if ($('[data-gallery-role="gallery"]').data('fotorama').fullScreen) { - - $preview = $('[data-gallery-role="stage-shaft"] [data-active="true"] img'); - $image = $('[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full'); - $imageContainer = $preview.parent(); - gallery = $('[data-gallery-role="gallery"]'); - top = $image.offset().top; - left = $image.offset().left; - - if ($image.height() > $imageContainer.height()) { - if ($imageContainer.offset().top + $imageContainer.height() > top + $image.height() + heightStep/2) { - top = $imageContainer.offset().top + $imageContainer.height() - $image.height() + heightStep/2; - } else { - top = ($imageContainer.offset().top <= top + heightStep/2 && heightStep > 0) ? 0 : top + heightStep/2; - } - $image.css({ - top: top, - bottom: 'auto' - }); - } else { - $image.css({ - top: 0, - bottom: 0 - }); - } - - if ($image.width() > $imageContainer.width()) { - if (($imageContainer.offset().left + $imageContainer.width()) > (left + $image.width() + widthStep/2)) { - left = $imageContainer.offset().left + $imageContainer.width() - $image.width() + widthStep/2; - } else { - left = ($imageContainer.offset().left <= left + widthStep/2 && widthStep > 0) ? 0 : left - $imageContainer.offset().left + widthStep/2; - } - $image.css({ - left: left, - right: 'auto' - }); - } else { - $image.css({ - left: 0, - right: 0 - }); - } - } - } - - function zoomIn(e) { - if (zoomShown) { - var $image = $('[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full'), - imgOriginalSize = $image.length ? getImageSize($image[0].src) : '', - widthResult, - heightResult; - - if (!zoomWidthStep) { - zoomWidthStep = Math.ceil((imgOriginalSize.rw - $image.width())/parseFloat(options.fullscreenzoom)); - zoomHeightStep = Math.ceil((imgOriginalSize.rh - $image.height())/parseFloat(options.fullscreenzoom)); - } - widthResult = $image.width() + zoomWidthStep; - heightResult = $image.height() + zoomHeightStep; - - if (widthResult >= imgOriginalSize.rw) { - widthResult = imgOriginalSize.rw; - } - if (heightResult >= imgOriginalSize.rh) { - heightResult = imgOriginalSize.rh; - } - - if ( zoomShown ) { - isDraggable = true; - } - - if ($image.width() >= $image.height() && $image.width() !== imgOriginalSize.rw) { - $image.css({ - width: widthResult, - height: 'auto' - }); - checkFullscreenImagePosition(-zoomWidthStep, -zoomHeightStep); - } else if ($image.width() < $image.height() && $image.height() !== imgOriginalSize.rh) { - $image.css({ - width: 'auto', - height: heightResult - }); - checkFullscreenImagePosition(-zoomWidthStep, -zoomHeightStep); - } - } - - return false; - } - - function zoomOut(e) { - if (zoomShown) { - var $image = $('[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full'), - setedResult = $image.width() - zoomWidthStep, - widthCheck = $image.width() - zoomWidthStep <= $image.parent().width(), - heightCheck = $image.height() - zoomHeightStep <= $image.parent().height(); - - e.preventDefault(); - - if (widthCheck && heightCheck) { - if ($image.width() >= $image.height()) { - $image.trigger('fotorama:load'); - - return false; - } else if ($image.width() < $image.height()) { - $image.trigger('fotorama:load'); - - return false; - } - } - - $image.css({'width': setedResult, height: 'auto'}); - checkFullscreenImagePosition(zoomWidthStep, zoomHeightStep); - } - - return false; - } - - /** - * Return width and height of original image - * @param src path for original image - * @returns {{rw: number, rh: number}} - */ - function getImageSize(src) { - var img = new Image(), - imgSize = { - rw: 0, - rh: 0 - }; - img.src = src; - imgSize.rw = img.width; - imgSize.rh = img.height; - return imgSize; - } - - - function setEventOnce() { - $('.fotorama__zoom-in') - .off('mouseup') - .on('mouseup', zoomIn); - $('.fotorama__zoom-out') - .off('mouseup') - .on('mouseup', zoomOut); - $('.fotorama__zoom-in') - .off('touchstart') - .on('touchstart', zoomIn); - $('.fotorama__zoom-out') - .off('touchstart') - .on('touchstart', zoomOut); - } - $(document).on('mousemove', onMousemove); _init($box, gOptions); - setEventOnce(); - magnifierFullscreen(); - - if (!onWheelCallback) { - onWheelCallback = function onWheel(e) { - if ($('[data-gallery-role="gallery"]').data('fotorama').fullScreen) { - e = e || window.event; - - - var delta = e.deltaY || e.detail || e.wheelDelta; - - if (delta > 0) { - zoomOut(e); - } else { - zoomIn(e); - } - - e.preventDefault ? e.preventDefault() : (e.returnValue = false); - } - }; - } - $('.fotorama-item').on('fotorama:load', function () { - if (document.querySelector('.fotorama__stage').addEventListener) { - if ('onwheel' in document) { - // IE9+, FF17+, Ch31+ - document.querySelector('.fotorama__stage').removeEventListener("wheel", onWheelCallback); - document.querySelector('.fotorama__stage').addEventListener("wheel", onWheelCallback); - } else if ('onmousewheel' in document) { - document.querySelector('.fotorama__stage').removeEventListener("mousewheel", onWheelCallback); - document.querySelector('.fotorama__stage').addEventListener("mousewheel", onWheelCallback); - } else { - // Firefox < 17 - document.querySelector('.fotorama__stage').removeEventListener("MozMousePixelScroll", onWheelCallback); - document.querySelector('.fotorama__stage').addEventListener("MozMousePixelScroll", onWheelCallback); - } - } else { // IE8- - document.querySelector('.fotorama__stage').detachEvent("onmousewheel", onWheelCallback); - document.querySelector('.fotorama__stage').attachEvent("onmousewheel", onWheelCallback); - } - }); } }(jQuery)); diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index 06a835ef9a2df..877a2683ecf76 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -14,9 +14,15 @@ define([ gallerySelector = '[data-gallery-role="gallery"]', magnifierSelector = '[data-gallery-role="magnifier"]', magnifierZoomSelector = '[data-gallery-role="magnifier-zoom"]', - fullScreenIcon = '[data-gallery-role="fotorama__fullscreen-icon"]', + zoomInButtonSelector = '[data-gallery-role="fotorama__zoom-in"]', + zoomOutButtonSelector = '[data-gallery-role="fotorama__zoom-out"]', + fullscreenImageSelector = '[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full', hideMagnifier, - behaveOnHover; + behaveOnHover, + zoomWidthStep, + zoomHeightStep, + zoomShown = true, + allowAnimating = true; if (isTouchEnabled) { $(element).on('fotorama:showend fotorama:load', function () { @@ -25,6 +31,448 @@ define([ }); } + /** + * Return width and height of original image + * @param src path for original image + * @returns {{rw: number, rh: number}} + */ + function getImageSize(src) { + var img = new Image(), + imgSize = { + rw: 0, + rh: 0 + }; + + img.src = src; + imgSize.rw = img.width; + imgSize.rh = img.height; + + return imgSize; + } + + function resetVars($image) { + zoomWidthStep = 0; + zoomHeightStep = 0; + allowAnimating = true; + $image.css({ + top: 0, + left: 0, + right: 0, + bottom: 0, + cursor: '', + width: 'auto', + height: 'auto', + maxWidth: '100%', + maxHeight: '100%' + }); + } + + function clickAnimation(e) { + + var roundRadius = 80, + clickAnimationDuration = 400; + + $('
').addClass('circle').offset({ + left: e.pageX - e.currentTarget.offsetLeft, + top: e.pageY - e.currentTarget.offsetTop + }).appendTo(e.currentTarget).animate( + { + height: roundRadius, + width: roundRadius, + left: e.pageX - roundRadius / 2 - e.currentTarget.offsetLeft, + top: e.pageY - roundRadius / 2 - e.currentTarget.offsetTop, + opacity: 0 + }, + clickAnimationDuration, + 'swing', + function () { + $(this).remove(); + } + ); + } + + function toggleZoomButtons($image) { + var path = $image.attr('src'), + imgSize; + + if (path) { + imgSize = getImageSize(path); + + if (imgSize.rh > $image.parent().height() || imgSize.rw > $image.parent().width()) { + $(zoomInButtonSelector).show(); + $(zoomOutButtonSelector).show(); + zoomShown = true; + } else { + $(zoomInButtonSelector).hide(); + $(zoomOutButtonSelector).hide(); + zoomShown = false; + } + } else { + $(zoomInButtonSelector).hide(); + $(zoomOutButtonSelector).hide(); + zoomShown = false; + } + } + + function checkFullscreenImagePosition($image, dimentions, widthStep, heightStep) { + var $imageContainer, settings, top, left, right, bottom, ratio; + + if ($(gallerySelector).data('fotorama').fullScreen && allowAnimating) { + + $imageContainer = $image.parent(); + top = $image.offset().top; + left = $image.offset().left; + ratio = $image.width() / $image.height(); + + if (!isNaN(dimentions.width)) { + dimentions.height = dimentions.width / ratio; + } + + if (!isNaN(dimentions.height)) { + dimentions.width = dimentions.height * ratio; + } + + if (dimentions.height >= $imageContainer.height()) { + top += heightStep / 2; + bottom = 0; + + top = top < $imageContainer.height() - dimentions.height ? + $imageContainer.height() - dimentions.height : top; + top = top > 0 ? 0 : top; + } else { + top = 0; + bottom = 0; + } + + if (dimentions.width >= $imageContainer.width()) { + left += -$imageContainer.parent().offset().left + widthStep / 2; + right = 0; + + left = left < $imageContainer.width() - dimentions.width ? + $imageContainer.width() - dimentions.width : left; + left = left > 0 ? 0 : left; + } else { + left = 0; + right = 0; + } + + settings = $.extend(dimentions, { + left: left, + top: top, + bottom: bottom, + right: right + }); + + //if (allowAnimating) { + //allowAnimating = false; + $image.css(settings); + //} + } + } + + function zoomIn(e) { + var $image, imgOriginalSize, widthResult, heightResult, dimentions = {}; + + if (zoomShown) { + $image = $(fullscreenImageSelector); + imgOriginalSize = getImageSize($image[0].src); + + e.preventDefault(); + + if (e.type === 'click' || e.type === 'touchstart') { + clickAnimation(e); + } + + if (!zoomWidthStep) { + zoomWidthStep = Math.ceil((imgOriginalSize.rw - $image.width()) / + parseFloat(config.magnifierOpts.fullscreenzoom)); + zoomHeightStep = Math.ceil((imgOriginalSize.rh - $image.height()) / + parseFloat(config.magnifierOpts.fullscreenzoom)); + } + + if ($image.css('maxHeight') !== 'none') { + dimentions = { + maxHeight: 'none', + maxWidth: 'none' + }; + } + + widthResult = $image.width() + zoomWidthStep; + heightResult = $image.height() + zoomHeightStep; + + if (widthResult >= imgOriginalSize.rw) { + widthResult = imgOriginalSize.rw; + } + + if (heightResult >= imgOriginalSize.rh) { + heightResult = imgOriginalSize.rh; + } + + if ($image.width() >= $image.height() && $image.width() !== imgOriginalSize.rw) { + dimentions = $.extend(dimentions, { + width: widthResult, + height: 'auto' + }); + checkFullscreenImagePosition($image, dimentions, -zoomWidthStep, -zoomHeightStep); + + } else if ($image.width() < $image.height() && $image.height() !== imgOriginalSize.rh) { + dimentions = $.extend(dimentions, { + width: 'auto', + height: heightResult + }); + checkFullscreenImagePosition($image, dimentions, -zoomWidthStep, -zoomHeightStep); + } + } + + return false; + } + + function zoomOut(e) { + var $image, widthResult, heightResult, dimentions, parentWidth, parentHeight; + + if (zoomShown) { + $image = $(fullscreenImageSelector); + widthResult = $image.width() - zoomWidthStep; + heightResult = $image.height() - zoomHeightStep; + parentWidth = $image.parent().width(); + parentHeight = $image.parent().height(); + + e.preventDefault(); + + if (e.type === 'click' || e.type === 'touchstart') { + clickAnimation(e); + } + + if ($image.width() > $image.height()) { + if (widthResult > parentWidth) { + dimentions = { + 'width': widthResult, + 'height': 'auto' + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } else { + if (heightResult > parentHeight) { + dimentions = { + 'width': widthResult, + 'height': 'auto' + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } else { + widthResult = parentWidth; + dimentions = { + 'width': widthResult, + 'height': 'auto' + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } + } + + } else { + if (heightResult > parentHeight) { + dimentions = { + width: 'auto', + height: heightResult + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } else { + if (widthResult > parentWidth) { + dimentions = { + width: 'auto', + height: heightResult + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } else { + if (parentHeight < parentWidth) { + heightResult = parentHeight; + dimentions = { + width: 'auto', + height: heightResult + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } else { + widthResult = parentWidth; + dimentions = { + 'width': widthResult, + 'height': 'auto' + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } + } + } + } + } + + return false; + } + + /** + * Bind event on scroll on active item in fotorama + * @param e + * @param fotorama - object of fotorama + */ + function mousewheel(e, fotorama, element) { + var $fotoramaStage = $(element).find('[data-fotorama-stage="fotorama__stage"]'), + fotoramaStage = $fotoramaStage.get(0); + + function onWheel(e) { + var delta = e.deltaY || e.detail || e.wheelDelta; + + if ($(gallerySelector).data('fotorama').fullScreen) { + e = e || window.event; + + if (delta > 0) { + zoomOut(e); + } else { + zoomIn(e); + } + + e.preventDefault ? e.preventDefault() : (e.returnValue = false); + } + } + + if (!$fotoramaStage.hasClass('magnify-wheel-loaded')) { + if (fotoramaStage && fotoramaStage.addEventListener) { + if ('onwheel' in document) { + fotoramaStage.addEventListener('wheel', onWheel); + } else if ('onmousewheel' in document) { + fotoramaStage.addEventListener('mousewheel', onWheel); + } else { + fotoramaStage.addEventListener('MozMousePixelScroll', onWheel); + } + $fotoramaStage.addClass('magnify-wheel-loaded'); + } + } + } + + /** + * Metod which makes draggable picture. Also work on touch devices. + */ + function magnifierFullscreen() { + var isDragActive = false, + startX, + startY, + imagePosX, + imagePosY, + touch, + $gallery = $(gallerySelector), + $image = $(fullscreenImageSelector, $gallery), + $imageContainer = $('[data-gallery-role="stage-shaft"] [data-active="true"]'), + gallery = $gallery.data('fotorama'); + + function shiftImage(dx, dy) { + var top = +imagePosY + dy; + var left = +imagePosX + dx; + + if ($image.height() > $imageContainer.height()) { + + if (($imageContainer.offset().top + $imageContainer.height()) > (top + $image.height())) { + top = $imageContainer.offset().top + $imageContainer.height() - $image.height(); + } else { + top = ($imageContainer.offset().top < top) ? 0 : top; + } + $image.offset({ + 'top': top + }); + } + + if ($image.width() > $imageContainer.width()) { + + if (($imageContainer.offset().left + $imageContainer.width()) > (left + $image.width())) { + left = $imageContainer.offset().left + $imageContainer.width() - $image.width(); + } else { + left = ($imageContainer.offset().left < left) ? $imageContainer.offset().left : left; + } + $image.offset({ + 'left': left + }); + } + } + + toggleZoomButtons($image); + + $image.on(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown', function (e) { + if (gallery.fullScreen) { + e.preventDefault(); + + $image.css('cursor', 'move'); + imagePosY = $image.offset().top; + imagePosX = $image.offset().left; + + if (isTouchEnabled) { + touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; + e.clientX = touch.pageX; + e.clientY = touch.pageY; + } + startX = e.clientX || e.originalEvent.clientX; + startY = e.clientY || e.originalEvent.clientY; + isDragActive = true; + + $image.css({ + transitionProperty: 'width, height' + }); + + } + }); + + $image.on(isTouchEnabled ? 'touchmove' : 'mousemove pointermove MSPointerMove', function (e) { + var top, left, clientX, clientY; + + if (gallery.fullScreen && isDragActive) { + + clientX = e.clientX || e.originalEvent.clientX; + clientY = e.clientY || e.originalEvent.clientY; + + e.preventDefault(); + + if (isTouchEnabled) { + touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; + e.clientX = touch.pageX; + e.clientY = touch.pageY; + } + shiftImage((clientX - startX), (clientY - startY)); + } + }); + + $(window).keyup(function (e) { + imagePosX = $(fullscreenImageSelector, $gallery).offset().left; + imagePosY = $(fullscreenImageSelector, $gallery).offset().top; + var step = 20; + + if (e.keyCode === 102) { + shiftImage(-step, 0); + } + if (e.keyCode === 98) { + shiftImage(0, step); + } + if (e.keyCode === 100) { + shiftImage(step, 0); + } + if (e.keyCode === 104) { + shiftImage(0, -step); + } + + }); + + $image.on('transitionend', function() { + allowAnimating = true; + }); + + $(document).on(isTouchEnabled ? 'touchend' : 'mouseup pointerup MSPointerUp', function () { + if (gallery.fullScreen) { + isDragActive = false; + $image.css({ + cursor: 'pointer', + transitionProperty: 'width, height, top, left' + }); + } + }); + + $image.css({ + width: $image.width(), + height: $image.height() + }); + } + /** * Hides magnifier preview and zoom blocks. */ @@ -39,7 +487,8 @@ define([ behaveOnHover = function (e, initPos) { var pos = [e.pageX, e.pageY], isArrow = $(e.target).data('gallery-role') === 'arrow', - isClick = initPos[0] === pos[0] && initPos[1] === pos[1]; + isClick = initPos[0] === pos[0] && initPos[1] === pos[1]; + if (isArrow || !isClick) { hideMagnifier(); } @@ -50,7 +499,6 @@ define([ } else if (config.magnifierOpts.eventType === 'hover') { $(element).on('pointerdown mousedown MSPointerDown', function (e) { var pos = [e.pageX, e.pageY]; - $(element).on('mousemove pointermove MSPointerMove', function (ev) { navigator.msPointerEnabled ? hideMagnifier() : behaveOnHover(ev, pos); }); @@ -62,7 +510,7 @@ define([ $.extend(config.magnifierOpts, { zoomable: false, - thumb: '.fotorama__img:not(".fotorama__img--full")', + thumb: '.fotorama__img', largeWrapper: '[data-gallery-role="magnifier"]', height: config.magnifierOpts.height || function () { return $('[data-active="true"]').height(); @@ -80,18 +528,75 @@ define([ } }); - $(element).on('fotorama:showend fotorama:load fotorama:fullscreenexit fotorama:ready', function (e, fotorama) { + $(element).on('fotorama:load fotorama:showend fotorama:fullscreenexit fotorama:ready', function (e, fotorama) { hideMagnifier(); config.magnifierOpts.large = $(gallerySelector).data('fotorama').activeFrame.img; - config.magnifierOpts.full = fotorama.data[fotorama.activeIndex].full; + config.magnifierOpts.full = fotorama.data[fotorama.activeIndex].original; $($(gallerySelector).data('fotorama').activeFrame.$stageFrame).magnify(config.magnifierOpts); }); - $(element).on('gallery:loaded', function () { - $(element).find(gallerySelector).on('fotorama:show fotorama:fullscreenenter ', function () { - hideMagnifier(); - }); + $(element).on('gallery:loaded', function (e) { + $(element).find(gallerySelector) + .on('fotorama:ready', function (e, fotorama) { + var $zoomIn = $(zoomInButtonSelector), + $zoomOut = $(zoomOutButtonSelector); + + if (!$zoomIn.hasClass('zoom-in-loaded')) { + $zoomIn.on('click touchstart', zoomIn); + + $zoomIn.keyup(function (e) { + + if (e.keyCode === 13) { + zoomIn(e); + } + }); + + $(window).keyup(function (e) { + + if (e.keyCode === 107 || fotorama.fullscreen) { + zoomIn(e); + } + }); + + $zoomIn.addClass('zoom-in-loaded'); + } + + if (!$zoomOut.hasClass('zoom-out-loaded')) { + $zoomOut.on('click touchstart', zoomOut); + + $zoomOut.keyup(function (e) { + + if (e.keyCode === 13) { + zoomOut(e); + } + }); + + $(window).keyup(function (e) { + + if (e.keyCode === 109 || fotorama.fullscreen) { + zoomOut(e); + } + }); + + $zoomOut.addClass('zoom-out-loaded'); + } + }) + .on('fotorama:fullscreenenter fotorama:showend', function (e, fotorama) { + hideMagnifier(); + $(element).data('gallery').updateOptions({ + swipe: false + }); + magnifierFullscreen(e, fotorama); + mousewheel(e, fotorama, element); + }) + .on('fotorama:load', function (e, fotorama) { + toggleZoomButtons($(fullscreenImageSelector)); + magnifierFullscreen(); + }) + .on('fotorama:show', function (e, fotorama) { + resetVars($(fullscreenImageSelector)); + }); }); return config; - }; + } }); From cc7d5e9c5727a21ee52d9d0cbff3a6961b52f7b5 Mon Sep 17 00:00:00 2001 From: Uladzislau Harbachou Date: Wed, 21 Oct 2015 15:04:27 +0300 Subject: [PATCH 029/214] JS-241: Various rendering bugs with fullscreen Gallery --- lib/web/mage/gallery/gallery.less | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index c9e97917bb78e..566552baca2a0 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -1256,3 +1256,29 @@ body.fotorama__fullscreen { display: none !important; } } + +.fotorama--fullscreen { + .fotorama__stage__frame { + .fotorama__img { + display:none; + bottom: 0; + left: 0; + margin: auto; + max-height: inherit; + max-width: inherit; + position: absolute; + right: 0; + top: 0; + } + .fotorama__img--full { + display:block; + height: auto; + width: auto; + max-height: 100%; + max-width: 100%; + vertical-align: middle; + transition-duration: @fotorama-fullscreen-zoom-time; + transition-property: width, height, top, left; + } + } +} \ No newline at end of file From e115864542e59edc2c774c7f9019501a6b3daaef Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Thu, 22 Oct 2015 15:23:19 +0300 Subject: [PATCH 030/214] JS-268: Reset of original image in fullscreen --- lib/web/mage/gallery/gallery.less | 36 +++------ lib/web/magnifier/magnify.js | 130 +++++++++++++----------------- 2 files changed, 66 insertions(+), 100 deletions(-) diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index 566552baca2a0..e56899482e988 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -1141,6 +1141,16 @@ right: 0; top: 0; } + .fotorama__img--full { + display:block; + height: auto; + width: auto; + max-height: 100%; + max-width: 100%; + vertical-align: middle; + transition-duration: @fotorama-fullscreen-zoom-time; + transition-property: width, height, top, left; + } } } @@ -1256,29 +1266,3 @@ body.fotorama__fullscreen { display: none !important; } } - -.fotorama--fullscreen { - .fotorama__stage__frame { - .fotorama__img { - display:none; - bottom: 0; - left: 0; - margin: auto; - max-height: inherit; - max-width: inherit; - position: absolute; - right: 0; - top: 0; - } - .fotorama__img--full { - display:block; - height: auto; - width: auto; - max-height: 100%; - max-width: 100%; - vertical-align: middle; - transition-duration: @fotorama-fullscreen-zoom-time; - transition-property: width, height, top, left; - } - } -} \ No newline at end of file diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index 877a2683ecf76..09a3d9dacd44d 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -22,6 +22,8 @@ define([ zoomWidthStep, zoomHeightStep, zoomShown = true, + allowZoomOut = false, + allowZoomIn = true, allowAnimating = true; if (isTouchEnabled) { @@ -51,14 +53,12 @@ define([ } function resetVars($image) { - zoomWidthStep = 0; - zoomHeightStep = 0; - allowAnimating = true; + zoomWidthStep = zoomHeightStep = 0; + allowAnimating = allowZoomIn = true; + allowZoomOut = false; $image.css({ top: 0, left: 0, - right: 0, - bottom: 0, cursor: '', width: 'auto', height: 'auto', @@ -115,7 +115,7 @@ define([ } function checkFullscreenImagePosition($image, dimentions, widthStep, heightStep) { - var $imageContainer, settings, top, left, right, bottom, ratio; + var $imageContainer, settings, top, left, ratio; if ($(gallerySelector).data('fotorama').fullScreen && allowAnimating) { @@ -134,33 +134,27 @@ define([ if (dimentions.height >= $imageContainer.height()) { top += heightStep / 2; - bottom = 0; top = top < $imageContainer.height() - dimentions.height ? $imageContainer.height() - dimentions.height : top; top = top > 0 ? 0 : top; } else { top = 0; - bottom = 0; } if (dimentions.width >= $imageContainer.width()) { left += -$imageContainer.parent().offset().left + widthStep / 2; - right = 0; left = left < $imageContainer.width() - dimentions.width ? $imageContainer.width() - dimentions.width : left; left = left > 0 ? 0 : left; } else { left = 0; - right = 0; } settings = $.extend(dimentions, { left: left, - top: top, - bottom: bottom, - right: right + top: top }); //if (allowAnimating) { @@ -172,10 +166,10 @@ define([ function zoomIn(e) { var $image, imgOriginalSize, widthResult, heightResult, dimentions = {}; - - if (zoomShown) { + if (zoomShown && allowZoomIn) { $image = $(fullscreenImageSelector); imgOriginalSize = getImageSize($image[0].src); + allowZoomOut = true; e.preventDefault(); @@ -190,13 +184,6 @@ define([ parseFloat(config.magnifierOpts.fullscreenzoom)); } - if ($image.css('maxHeight') !== 'none') { - dimentions = { - maxHeight: 'none', - maxWidth: 'none' - }; - } - widthResult = $image.width() + zoomWidthStep; heightResult = $image.height() + zoomHeightStep; @@ -208,6 +195,10 @@ define([ heightResult = imgOriginalSize.rh; } + if (heightResult === imgOriginalSize.rh || widthResult === imgOriginalSize.rw) { + allowZoomIn = false; + } + if ($image.width() >= $image.height() && $image.width() !== imgOriginalSize.rw) { dimentions = $.extend(dimentions, { width: widthResult, @@ -228,14 +219,18 @@ define([ } function zoomOut(e) { - var $image, widthResult, heightResult, dimentions, parentWidth, parentHeight; + var $image, widthResult, heightResult, dimentions, + parentWidth, parentHeight, imageWidth, imageHeight, fitIntoParent; - if (zoomShown) { + if (zoomShown && allowZoomOut) { + allowZoomIn = true; $image = $(fullscreenImageSelector); widthResult = $image.width() - zoomWidthStep; heightResult = $image.height() - zoomHeightStep; parentWidth = $image.parent().width(); parentHeight = $image.parent().height(); + imageWidth = $image.width(); + imageHeight = $image.height(); e.preventDefault(); @@ -243,61 +238,44 @@ define([ clickAnimation(e); } - if ($image.width() > $image.height()) { - if (widthResult > parentWidth) { + fitIntoParent = function () { + if (parentHeight - imageHeight > parentWidth - imageWidth) { + widthResult = parentWidth; dimentions = { - 'width': widthResult, - 'height': 'auto' + width: widthResult, + height: 'auto' }; - checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); } else { - if (heightResult > parentHeight) { - dimentions = { - 'width': widthResult, - 'height': 'auto' - }; - checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); - } else { - widthResult = parentWidth; - dimentions = { - 'width': widthResult, - 'height': 'auto' - }; - checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); - } + heightResult = parentHeight; + dimentions = { + width: 'auto', + height: heightResult + }; } + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + }; + if (imageWidth > imageHeight) { + if (widthResult > parentWidth || heightResult > parentHeight) { + dimentions = { + width: widthResult, + height: 'auto' + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } else { + allowZoomOut = false; + fitIntoParent(); + } } else { - if (heightResult > parentHeight) { + if (heightResult > parentHeight || widthResult > parentWidth) { dimentions = { width: 'auto', height: heightResult }; checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); } else { - if (widthResult > parentWidth) { - dimentions = { - width: 'auto', - height: heightResult - }; - checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); - } else { - if (parentHeight < parentWidth) { - heightResult = parentHeight; - dimentions = { - width: 'auto', - height: heightResult - }; - checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); - } else { - widthResult = parentWidth; - dimentions = { - 'width': widthResult, - 'height': 'auto' - }; - checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); - } - } + allowZoomOut = false; + fitIntoParent(); } } } @@ -453,9 +431,9 @@ define([ }); - $image.on('transitionend', function() { - allowAnimating = true; - }); + //$image.on('transitionend', function() { + // allowAnimating = true; + //}); $(document).on(isTouchEnabled ? 'touchend' : 'mouseup pointerup MSPointerUp', function () { if (gallery.fullScreen) { @@ -467,10 +445,14 @@ define([ } }); - $image.css({ - width: $image.width(), - height: $image.height() - }); + if (zoomShown) { + $image.css({ + width: $image.width(), + height: $image.height(), + maxWidth: 'none', + maxHeight: 'none' + }); + } } /** From 5644b1ba0cc4d9ef428a226d1164deb0f168c7c9 Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Fri, 23 Oct 2015 11:12:37 +0300 Subject: [PATCH 031/214] JS-268: Reset of original image in fullscreen --- lib/web/mage/gallery/gallery.less | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index e56899482e988..e62b4b9d895c6 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -1143,7 +1143,6 @@ } .fotorama__img--full { display:block; - height: auto; width: auto; max-height: 100%; max-width: 100%; From 2a8b176ca8fa9b7e471ec04328de9393d34f9bc6 Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Fri, 23 Oct 2015 11:12:46 +0300 Subject: [PATCH 032/214] JS-270: Magnifier has wrong indents from above and from below --- lib/web/magnifier/magnifier.js | 41 ++++++++++++++++------------------ 1 file changed, 19 insertions(+), 22 deletions(-) diff --git a/lib/web/magnifier/magnifier.js b/lib/web/magnifier/magnifier.js index 232579bb4f41e..649d9ba3c454f 100644 --- a/lib/web/magnifier/magnifier.js +++ b/lib/web/magnifier/magnifier.js @@ -153,7 +153,7 @@ lens.addClass(MagnifyCls.magnifyHidden); lens.html(""); large.id = idx + '-large'; - large.style.width = Math.round(data[idx].largeW * rate) + 'px'; + large.style.width = data[idx].largeW * rate + 'px'; large.style.height = data[idx].largeH + 'px'; large.className = 'magnifier-large magnify-hidden'; @@ -167,7 +167,7 @@ data[idx].lensH = data[idx].lensH > $thumb.height() ? $thumb.height() : data[idx].lensH; lens.css({ width: data[idx].lensW + 1 + 'px', - height: data[idx].lensH + 0.5 + 'px' + height: data[idx].lensH + 'px' }); } @@ -179,8 +179,8 @@ inBounds = ( xPos < 0 || yPos < 0 || xPos > currentOpts.w || yPos > currentOpts.h ) ? false : true; - l = xPos - Math.round(currentOpts.lensW / 2); - t = yPos - Math.round(currentOpts.lensH / 2); + l = xPos - currentOpts.lensW / 2; + t = yPos - currentOpts.lensH / 2; if (currentOpts.mode !== 'inside') { if (xPos < currentOpts.lensW / 2) { @@ -196,21 +196,21 @@ } if (yPos - currentOpts.h + Math.ceil(currentOpts.lensH / 2) > 0) { - t = currentOpts.h - Math.ceil(currentOpts.lensH + 2); + t = currentOpts.h - Math.ceil(currentOpts.lensH); } - pos.l = Math.round(l); - pos.t = Math.round(t); + pos.l = l; + pos.t = t; - currentOpts.lensBgX = pos.l + 1; - currentOpts.lensBgY = pos.t + 1; + currentOpts.lensBgX = pos.l; + currentOpts.lensBgY = pos.t; if (currentOpts.mode === 'inside') { - currentOpts.largeL = Math.round(xPos * (currentOpts.zoom - (currentOpts.lensW / currentOpts.w))); - currentOpts.largeT = Math.round(yPos * (currentOpts.zoom - (currentOpts.lensH / currentOpts.h))); + currentOpts.largeL = xPos * (currentOpts.zoom - (currentOpts.lensW / currentOpts.w)); + currentOpts.largeT = yPos * (currentOpts.zoom - (currentOpts.lensH / currentOpts.h)); } else { - currentOpts.largeL = Math.round(currentOpts.lensBgX * currentOpts.zoom * (currentOpts.largeWrapperW / currentOpts.w) * rate); - currentOpts.largeT = Math.round(currentOpts.lensBgY * currentOpts.zoom * (currentOpts.largeWrapperH / currentOpts.h)); + currentOpts.largeL = currentOpts.lensBgX * currentOpts.zoom * (currentOpts.largeWrapperW / currentOpts.w) * rate; + currentOpts.largeT = currentOpts.lensBgY * currentOpts.zoom * (currentOpts.largeWrapperH / currentOpts.h); } } } @@ -277,12 +277,9 @@ } pos.t = pos.t <= 0 ? 0 : pos.t; - pos.t = pos.t > 0 ? pos.t: pos.t; - pos.l = pos.l <= 0 ? 0 : pos.l; - //pos.l = pos.l > 0 ? pos.l : pos.l; curLens.css({ left: pos.l + paddingX +'px', - top: pos.t + paddingY + 1.75 + 'px' + top: pos.t + paddingY + 'px' }); if (lensbg) { @@ -318,8 +315,8 @@ thumbData.x = thumbBounds.left; thumbData.y = thumbBounds.top; - thumbData.w = Math.round(thumbBounds.right - thumbData.x); - thumbData.h = Math.round(thumbBounds.bottom - thumbData.y); + thumbData.w = thumbBounds.right - thumbData.x; + thumbData.h = thumbBounds.bottom - thumbData.y; if (thumbData.mode === 'inside') { w = thumbData.w; @@ -329,8 +326,8 @@ h = thumbData.largeWrapperH; } - thumbData.largeW = Math.round(thumbData.zoom * w); - thumbData.largeH = Math.round(thumbData.zoom * h); + thumbData.largeW = thumbData.zoom * w; + thumbData.largeH = thumbData.zoom * h; thumbData.lensW = (thumbData.w / thumbData.zoom) / rate; thumbData.lensH = thumbData.h / thumbData.zoom; @@ -461,7 +458,7 @@ ? options.onthumbmove : currentOpts.onthumbmove; - largeUrl = gOptions.full || $thumb.attr('src'); + largeUrl = $thumb.data("original") || gOptions.full || $thumb.attr('src'); if (thumb.id === '') { idx = thumb.id = 'magnifier-item-' + gId; From 8922176b3dc7ab67cdbaa7804fa3ada50c292344 Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Fri, 23 Oct 2015 11:15:58 +0300 Subject: [PATCH 033/214] JS-273: Gallery magnifier shows preview image instead of original size image --- lib/web/fotorama/fotorama.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/lib/web/fotorama/fotorama.js b/lib/web/fotorama/fotorama.js index 9aba3a85f0065..c1ab05c5a8cab 100644 --- a/lib/web/fotorama/fotorama.js +++ b/lib/web/fotorama/fotorama.js @@ -2770,6 +2770,10 @@ fotoramaVersion = '4.6.4'; img.alt = frameData.data.caption || ""; } + if (frameData.data.full) { + $(img).data("original", frameData.data.full); + } + if (UTIL.isExpectedCaption(dataFrame, opts.showcaption)) { $(img).attr('aria-labelledby', dataFrame.labelledby); } From c1702e9f0a1f6dcccbb24b9f34247b39e8006569 Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Fri, 23 Oct 2015 11:28:46 +0300 Subject: [PATCH 034/214] JS-273: Gallery magnifier shows preview image instead of original size image - replace double quotes with single quotes --- lib/web/fotorama/fotorama.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/web/fotorama/fotorama.js b/lib/web/fotorama/fotorama.js index c1ab05c5a8cab..75e51d8368428 100644 --- a/lib/web/fotorama/fotorama.js +++ b/lib/web/fotorama/fotorama.js @@ -2771,7 +2771,7 @@ fotoramaVersion = '4.6.4'; } if (frameData.data.full) { - $(img).data("original", frameData.data.full); + $(img).data('original', frameData.data.full); } if (UTIL.isExpectedCaption(dataFrame, opts.showcaption)) { From 778d689ea1febea3982b131fea34220a2466c458 Mon Sep 17 00:00:00 2001 From: Uladzislau Harbachou Date: Fri, 23 Oct 2015 15:24:19 +0300 Subject: [PATCH 035/214] JS-269: Preview image is absent when exit from fullscreen - Removed duplicated classes --- lib/web/fotorama/fotorama.js | 2 +- lib/web/magnifier/magnify.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/web/fotorama/fotorama.js b/lib/web/fotorama/fotorama.js index 75e51d8368428..c33c6251b4aff 100644 --- a/lib/web/fotorama/fotorama.js +++ b/lib/web/fotorama/fotorama.js @@ -2703,7 +2703,7 @@ fotoramaVersion = '4.6.4'; $img .off('load error') - .addClass(imgClass + (fullFLAG ? ' ' + imgFullClass : '')) + .addClass('' + (fullFLAG ? imgFullClass: imgClass)) .prependTo($frame); if ($frame.hasClass(stageFrameClass) && !$frame.hasClass(videoContainerClass)) { diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index 09a3d9dacd44d..a48671c65081b 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -323,7 +323,7 @@ define([ } /** - * Metod which makes draggable picture. Also work on touch devices. + * Method which makes draggable picture. Also work on touch devices. */ function magnifierFullscreen() { var isDragActive = false, @@ -546,7 +546,7 @@ define([ $zoomOut.on('click touchstart', zoomOut); $zoomOut.keyup(function (e) { - + if (e.keyCode === 13) { zoomOut(e); } From 9cd2cae24c045157eafed294e63de27de00275a5 Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Fri, 23 Oct 2015 17:50:08 +0300 Subject: [PATCH 036/214] JS-267: ZoomIn & ZoomOut didn't work in fullscreen --- lib/web/mage/gallery/gallery.less | 4 +-- lib/web/magnifier/magnify.js | 50 ++++++++++++++++++------------- 2 files changed, 32 insertions(+), 22 deletions(-) diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index e62b4b9d895c6..395c9f6d6da41 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -1131,7 +1131,7 @@ .fotorama--fullscreen { .fotorama__stage__frame { - .fotorama__img { + .fotorama__img, .fotorama__img--full { bottom: 0; left: 0; margin: auto; @@ -1142,7 +1142,7 @@ top: 0; } .fotorama__img--full { - display:block; + display: block; width: auto; max-height: 100%; max-width: 100%; diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index a48671c65081b..baf8b272608c9 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -115,36 +115,32 @@ define([ } function checkFullscreenImagePosition($image, dimentions, widthStep, heightStep) { - var $imageContainer, settings, top, left, ratio; + var $imageContainer, + settings, + top, + left, + ratio; if ($(gallerySelector).data('fotorama').fullScreen && allowAnimating) { $imageContainer = $image.parent(); - top = $image.offset().top; - left = $image.offset().left; + top = $image.position().top; + left = $image.position().left; ratio = $image.width() / $image.height(); - - if (!isNaN(dimentions.width)) { - dimentions.height = dimentions.width / ratio; - } - - if (!isNaN(dimentions.height)) { - dimentions.width = dimentions.height * ratio; - } + dimentions.height = isNaN(dimentions.height) ? dimentions.width / ratio : dimentions.height; + dimentions.width = isNaN(dimentions.width) ? dimentions.height * ratio : dimentions.width; if (dimentions.height >= $imageContainer.height()) { - top += heightStep / 2; - + top -= heightStep / 4; top = top < $imageContainer.height() - dimentions.height ? $imageContainer.height() - dimentions.height : top; - top = top > 0 ? 0 : top; + top = top > dimentions.height - $imageContainer.height() ? dimentions.height - $imageContainer.height() : top; } else { top = 0; } if (dimentions.width >= $imageContainer.width()) { - left += -$imageContainer.parent().offset().left + widthStep / 2; - + left += widthStep / 2; left = left < $imageContainer.width() - dimentions.width ? $imageContainer.width() - dimentions.width : left; left = left > 0 ? 0 : left; @@ -165,7 +161,12 @@ define([ } function zoomIn(e) { - var $image, imgOriginalSize, widthResult, heightResult, dimentions = {}; + var $image, + imgOriginalSize, + widthResult, + heightResult, + dimentions = {}; + if (zoomShown && allowZoomIn) { $image = $(fullscreenImageSelector); imgOriginalSize = getImageSize($image[0].src); @@ -219,8 +220,15 @@ define([ } function zoomOut(e) { - var $image, widthResult, heightResult, dimentions, - parentWidth, parentHeight, imageWidth, imageHeight, fitIntoParent; + var $image, + widthResult, + heightResult, + dimentions, + parentWidth, + parentHeight, + imageWidth, + imageHeight, + fitIntoParent; if (zoomShown && allowZoomOut) { allowZoomIn = true; @@ -256,6 +264,7 @@ define([ }; if (imageWidth > imageHeight) { + if (widthResult > parentWidth || heightResult > parentHeight) { dimentions = { width: widthResult, @@ -267,6 +276,7 @@ define([ fitIntoParent(); } } else { + if (heightResult > parentHeight || widthResult > parentWidth) { dimentions = { width: 'auto', @@ -289,7 +299,7 @@ define([ * @param fotorama - object of fotorama */ function mousewheel(e, fotorama, element) { - var $fotoramaStage = $(element).find('[data-fotorama-stage="fotorama__stage"]'), + var $fotoramaStage = fotorama.activeFrame.$stageFrame, fotoramaStage = $fotoramaStage.get(0); function onWheel(e) { From 508377dea7a3ef9b88bfbca615a21793b91e1ad3 Mon Sep 17 00:00:00 2001 From: Uladzislau Harbachou Date: Mon, 26 Oct 2015 13:37:17 +0300 Subject: [PATCH 037/214] JS-263: Fullscreen Gallery Safari bug -fixed preview in fullscreen -fixed position in fullscreen --- lib/web/mage/gallery/gallery.less | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index 395c9f6d6da41..dc59d1820dfeb 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -1131,7 +1131,11 @@ .fotorama--fullscreen { .fotorama__stage__frame { - .fotorama__img, .fotorama__img--full { + .fotorama__img { + display: none; + } + .fotorama__img, + .fotorama__img--full { bottom: 0; left: 0; margin: auto; @@ -1149,6 +1153,7 @@ vertical-align: middle; transition-duration: @fotorama-fullscreen-zoom-time; transition-property: width, height, top, left; + margin: auto; } } } From e61cb624845c65b6ef70f5ce45b8ca3f6f856800 Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Fri, 30 Oct 2015 13:23:55 +0200 Subject: [PATCH 038/214] JS-268: Reset of original image in fullscreen --- lib/web/magnifier/magnify.js | 27 +++++++++++++++++---------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index 9b05ec7f0141e..49ed2c829a5ae 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -61,7 +61,9 @@ define([ if ($image.hasClass(imageDraggableClass)) { $image.removeClass(imageDraggableClass); - } else if($image.hasClass(imageZoommable)) { + } + + if ($image.hasClass(imageZoommable)) { $image.removeClass(imageZoommable); } } @@ -119,7 +121,8 @@ define([ top, left, ratio, - getTopValue; + getTopValue, + getLeftValue; if ($(gallerySelector).data('fotorama').fullScreen) { $imageContainer = $image.parent(); @@ -144,21 +147,25 @@ define([ } }; - if (dimentions.height >= $imageContainer.height()) { - getTopValue(); - } else { - top = 0; - } - - if (dimentions.width >= $imageContainer.width()) { + getLeftValue = function() { left += widthStep / 2; left = left < $imageContainer.width() - dimentions.width ? $imageContainer.width() - dimentions.width : left; left = left > 0 ? 0 : left; if (!dragFlag && widthStep < 0) { left = left < ($imageContainer.width() - dimentions.width) / 2 ? - ($imageContainer.width() - dimentions.width) / 2 : left; + ($imageContainer.width() - dimentions.width) / 2 : left; } + }; + + if (dimentions.height >= $imageContainer.height()) { + getTopValue(); + } else { + top = 0; + } + + if (dimentions.width >= $imageContainer.width()) { + getLeftValue(); } else { left = 0; } From 7d1498ee2eff6dd8a4d7528aa3930319737cd13b Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Fri, 30 Oct 2015 17:11:08 +0200 Subject: [PATCH 039/214] JS-267: ZoomIn & ZoomOut didn't work in fullscreen --- lib/web/magnifier/magnify.js | 82 +++++++++++++++++++----------------- 1 file changed, 43 insertions(+), 39 deletions(-) diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index 063966a1e910a..95098a9633e11 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -115,60 +115,64 @@ define([ } } + function getTopValue($image, topProp, step, height, containerHeight) { + var top; + + if (parseInt($image.css('marginTop')) || parseInt($image.css('marginLeft'))) { + top = dragFlag ? topProp - step / 4 : 0; + top = top < containerHeight - height ? containerHeight - height : top; + top = top > height - containerHeight ? height - containerHeight : top; + } else { + top = topProp + step / 2; + top = top < containerHeight - height ? containerHeight - height : top; + top = top > 0 ? 0 : top; + + if (!dragFlag && step < 0) { + top = top < (containerHeight - height) / 2 ? (containerHeight - height) / 2 : top; + } + } + + return top; + } + + function getLeftValue(leftProp, step, width, containerWidth) { + var left; + + left = leftProp + step / 2; + left = left < containerWidth - width ? containerWidth - width : left; + left = left > 0 ? 0 : left; + + if (!dragFlag && step < 0) { + left = left < (containerWidth - width) / 2 ? (containerWidth - width) / 2 : left; + } + + return left; + } + function checkFullscreenImagePosition($image, dimentions, widthStep, heightStep) { var $imageContainer, + containerWidth, + containerHeight, settings, top, left, - ratio, - getTopValue, - getLeftValue; + ratio; if ($(gallerySelector).data('fotorama').fullScreen) { $imageContainer = $image.parent(); + containerWidth = $imageContainer.width(); + containerHeight = $imageContainer.height(); top = $image.position().top; left = $image.position().left; ratio = $image.width() / $image.height(); dimentions.height = isNaN(dimentions.height) ? dimentions.width / ratio : dimentions.height; dimentions.width = isNaN(dimentions.width) ? dimentions.height * ratio : dimentions.width; - getTopValue = function () { - if (parseInt($image.css('marginTop')) || parseInt($image.css('marginLeft'))) { - top = dragFlag ? top - heightStep / 4 : 0; - top = top < $imageContainer.height() - dimentions.height ? - $imageContainer.height() - dimentions.height : top; - top = top > dimentions.height - $imageContainer.height() ? - dimentions.height - $imageContainer.height() : top; - } else { - top += heightStep / 2; - top = top < $imageContainer.height() - dimentions.height ? - $imageContainer.height() - dimentions.height : top; - top = top > 0 ? 0 : top; - } - }; - - getLeftValue = function() { - left += widthStep / 2; - left = left < $imageContainer.width() - dimentions.width ? - $imageContainer.width() - dimentions.width : left; - left = left > 0 ? 0 : left; - if (!dragFlag && widthStep < 0) { - left = left < ($imageContainer.width() - dimentions.width) / 2 ? - ($imageContainer.width() - dimentions.width) / 2 : left; - } - }; - - if (dimentions.height >= $imageContainer.height()) { - getTopValue(); - } else { - top = 0; - } + top = dimentions.height >= containerHeight ? + getTopValue($image, top, heightStep, dimentions.height, containerHeight) : 0; - if (dimentions.width >= $imageContainer.width()) { - getLeftValue(); - } else { - left = 0; - } + left = dimentions.width >= containerWidth ? + getLeftValue(left, widthStep, dimentions.width, containerWidth) : 0; settings = $.extend(dimentions, { left: left, From fdfbdddb6488e975d790a964c92df20311763eb0 Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Mon, 2 Nov 2015 15:31:22 +0300 Subject: [PATCH 040/214] JS-279: Double click in full-screen view --- lib/web/magnifier/magnify.js | 42 ++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index baf8b272608c9..ea9cdfa060d85 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -347,6 +347,12 @@ define([ $imageContainer = $('[data-gallery-role="stage-shaft"] [data-active="true"]'), gallery = $gallery.data('fotorama'); + /** + * Moves image + * @param dx - horizontal step + * @param dy - verticle step + * @param e - event object + */ function shiftImage(dx, dy) { var top = +imagePosY + dy; var left = +imagePosX + dx; @@ -376,8 +382,43 @@ define([ } } + /** + * Sets image size to original + * @param e - event object + */ + function setImageFullSize (e) { + var imgOriginalSize = getImageSize($image[0].src), + dimentions = {}, + zoomWidthStepTemp = imgOriginalSize.rw - $image.width(), + zoomHeightStepTemp = imgOriginalSize.rh - $image.height(); + + zoomWidthStep = Math.ceil((imgOriginalSize.rw - $image.width()) / parseFloat(config.magnifierOpts.fullscreenzoom)); + zoomHeightStep = Math.ceil((imgOriginalSize.rh - $image.height()) / parseFloat(config.magnifierOpts.fullscreenzoom)); + + if ($image.width() >= $image.height() && $image.width() !== imgOriginalSize.rw) { + dimentions = $.extend(dimentions, { + width: imgOriginalSize.rw, + height: 'auto' + }); + checkFullscreenImagePosition($image, dimentions, -zoomWidthStepTemp, -zoomHeightStepTemp); + + } else if ($image.width() < $image.height() && $image.height() !== imgOriginalSize.rh) { + dimentions = $.extend(dimentions, { + width: 'auto', + height: imgOriginalSize.rh + }); + checkFullscreenImagePosition($image, dimentions, -zoomWidthStepTemp, -zoomHeightStepTemp); + } + allowZoomIn = false; + allowZoomOut = true; + } + + $image.unbind('dblclick'); + $image.dblclick(setImageFullSize); + toggleZoomButtons($image); + $image.unbind('touchstart mousedown pointerdown MSPointerDown'); $image.on(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown', function (e) { if (gallery.fullScreen) { e.preventDefault(); @@ -402,6 +443,7 @@ define([ } }); + $image.unbind('touchmove mousemove pointermove MSPointerMove'); $image.on(isTouchEnabled ? 'touchmove' : 'mousemove pointermove MSPointerMove', function (e) { var top, left, clientX, clientY; From b1a69b7badb862db507dc12192f6fe92558b1778 Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Mon, 2 Nov 2015 16:48:54 +0300 Subject: [PATCH 041/214] JS-279: Double click in full-screen view - code refactoring --- lib/web/magnifier/magnify.js | 58 ++++++++++++++++++++---------------- 1 file changed, 32 insertions(+), 26 deletions(-) diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index ea9cdfa060d85..7b760cf5cf5a6 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -50,7 +50,26 @@ define([ imgSize.rh = img.height; return imgSize; - } + }; + + function getDimension($image) { + if ($image) { + var imgOriginalSize = getImageSize($image[0].src) + + if ($image.width() >= $image.height() && $image.width() !== imgOriginalSize.rw) { + return { + width: imgOriginalSize.rw, + height: 'auto' + }); + + } else if ($image.width() < $image.height() && $image.height() !== imgOriginalSize.rh) { + return { + width: 'auto', + height: imgOriginalSize.rh + }); + } + } + }; function resetVars($image) { zoomWidthStep = zoomHeightStep = 0; @@ -65,7 +84,7 @@ define([ maxWidth: '100%', maxHeight: '100%' }); - } + }; function clickAnimation(e) { @@ -89,7 +108,7 @@ define([ $(this).remove(); } ); - } + }; function toggleZoomButtons($image) { var path = $image.attr('src'), @@ -112,7 +131,7 @@ define([ $(zoomOutButtonSelector).hide(); zoomShown = false; } - } + }; function checkFullscreenImagePosition($image, dimentions, widthStep, heightStep) { var $imageContainer, @@ -158,7 +177,7 @@ define([ $image.css(settings); //} } - } + }; function zoomIn(e) { var $image, @@ -217,7 +236,7 @@ define([ } return false; - } + }; function zoomOut(e) { var $image, @@ -291,7 +310,7 @@ define([ } return false; - } + }; /** * Bind event on scroll on active item in fotorama @@ -330,7 +349,7 @@ define([ $fotoramaStage.addClass('magnify-wheel-loaded'); } } - } + }; /** * Method which makes draggable picture. Also work on touch devices. @@ -380,7 +399,7 @@ define([ 'left': left }); } - } + }; /** * Sets image size to original @@ -388,37 +407,24 @@ define([ */ function setImageFullSize (e) { var imgOriginalSize = getImageSize($image[0].src), - dimentions = {}, zoomWidthStepTemp = imgOriginalSize.rw - $image.width(), zoomHeightStepTemp = imgOriginalSize.rh - $image.height(); zoomWidthStep = Math.ceil((imgOriginalSize.rw - $image.width()) / parseFloat(config.magnifierOpts.fullscreenzoom)); zoomHeightStep = Math.ceil((imgOriginalSize.rh - $image.height()) / parseFloat(config.magnifierOpts.fullscreenzoom)); - if ($image.width() >= $image.height() && $image.width() !== imgOriginalSize.rw) { - dimentions = $.extend(dimentions, { - width: imgOriginalSize.rw, - height: 'auto' - }); - checkFullscreenImagePosition($image, dimentions, -zoomWidthStepTemp, -zoomHeightStepTemp); + checkFullscreenImagePosition($image, getDimension($image), -zoomWidthStepTemp, -zoomHeightStepTemp); - } else if ($image.width() < $image.height() && $image.height() !== imgOriginalSize.rh) { - dimentions = $.extend(dimentions, { - width: 'auto', - height: imgOriginalSize.rh - }); - checkFullscreenImagePosition($image, dimentions, -zoomWidthStepTemp, -zoomHeightStepTemp); - } allowZoomIn = false; allowZoomOut = true; - } + }; $image.unbind('dblclick'); $image.dblclick(setImageFullSize); toggleZoomButtons($image); - $image.unbind('touchstart mousedown pointerdown MSPointerDown'); + $image.off('touchstart mousedown pointerdown MSPointerDown'); $image.on(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown', function (e) { if (gallery.fullScreen) { e.preventDefault(); @@ -443,7 +449,7 @@ define([ } }); - $image.unbind('touchmove mousemove pointermove MSPointerMove'); + $image.off('touchmove mousemove pointermove MSPointerMove'); $image.on(isTouchEnabled ? 'touchmove' : 'mousemove pointermove MSPointerMove', function (e) { var top, left, clientX, clientY; From 43e8e959f69f410a2e2044bbc1aa1fefdb83bde0 Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Mon, 2 Nov 2015 15:49:35 +0200 Subject: [PATCH 042/214] JS-282: Change zooming speed to 20% for one step --- .../frontend/Magento/blank/etc/view.xml | 2 +- app/design/frontend/Magento/luma/etc/view.xml | 2 +- lib/web/mage/gallery/gallery.less | 5 +- lib/web/magnifier/magnify.js | 162 ++++++++++++------ 4 files changed, 115 insertions(+), 56 deletions(-) diff --git a/app/design/frontend/Magento/blank/etc/view.xml b/app/design/frontend/Magento/blank/etc/view.xml index 2e036c02197d6..a8d725f501448 100644 --- a/app/design/frontend/Magento/blank/etc/view.xml +++ b/app/design/frontend/Magento/blank/etc/view.xml @@ -215,7 +215,7 @@ - 5 + 20 diff --git a/app/design/frontend/Magento/luma/etc/view.xml b/app/design/frontend/Magento/luma/etc/view.xml index e4f42fabb5c33..c72f9e5b4d600 100644 --- a/app/design/frontend/Magento/luma/etc/view.xml +++ b/app/design/frontend/Magento/luma/etc/view.xml @@ -219,7 +219,7 @@ - 5 + 20 diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index 4b004e955fda6..f3acf9b43b347 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -1148,17 +1148,20 @@ .fotorama__img--full { display: block; width: auto; + height: auto; max-height: 100%; max-width: 100%; + top: 0; + left: 0; vertical-align: middle; transition: @fotorama-fullscreen-zoom-time linear; - transition-property: width, height, top, left; margin: auto; cursor: default; &.fotorama__img--zoommable { cursor: pointer; max-width: none; max-height: none; + transition-property: width, height, top, left; } &.fotorama__img--draggable { cursor: move; diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index 95098a9633e11..9089b7be1af7b 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -21,8 +21,6 @@ define([ imageZoommable = 'fotorama__img--zoommable', hideMagnifier, behaveOnHover, - zoomWidthStep, - zoomHeightStep, dragFlag, zoomShown = true, allowZoomOut = false, @@ -54,18 +52,27 @@ define([ return imgSize; } + function toggleZoomable($image, flag) { + if (flag) { + $image.css({ + width: $image.width(), + height: $image.height() + }).addClass(imageZoommable); + } else { + $image.css({ + width: '', + height: '', + top: '', + left: '' + }).removeClass(imageZoommable); + } + } + function resetVars($image) { - zoomWidthStep = zoomHeightStep = 0; allowZoomIn = true; allowZoomOut = dragFlag = false; - - if ($image.hasClass(imageDraggableClass)) { - $image.removeClass(imageDraggableClass); - } - - if ($image.hasClass(imageZoommable)) { - $image.removeClass(imageZoommable); - } + $image.hasClass(imageDraggableClass) && $image.removeClass(imageDraggableClass); + toggleZoomable($image, false); } function clickAnimation(e) { @@ -186,51 +193,66 @@ define([ function zoomIn(e) { var $image, imgOriginalSize, + imageWidth, + imageHeight, + zoomWidthStep, + zoomHeightStep, widthResult, heightResult, + ratio, dimentions = {}; if (zoomShown && allowZoomIn) { + $image = $(fullscreenImageSelector); imgOriginalSize = getImageSize($image[0].src); + imageWidth = $image.width(); + imageHeight = $image.height(); + ratio = imageWidth / imageHeight; allowZoomOut = true; + if (!$image.hasClass(imageZoommable)) { + toggleZoomable($image, true); + } + e.preventDefault(); if (e.type === 'click' || e.type === 'touchstart') { clickAnimation(e); } - if (!zoomWidthStep) { - zoomWidthStep = Math.ceil((imgOriginalSize.rw - $image.width()) / - parseFloat(config.magnifierOpts.fullscreenzoom)); - zoomHeightStep = Math.ceil((imgOriginalSize.rh - $image.height()) / - parseFloat(config.magnifierOpts.fullscreenzoom)); - } - - widthResult = $image.width() + zoomWidthStep; - heightResult = $image.height() + zoomHeightStep; - - if (widthResult >= imgOriginalSize.rw) { - widthResult = imgOriginalSize.rw; - } + if (imageWidth >= imageHeight) { + zoomWidthStep = Math.ceil(imageWidth * parseFloat(config.magnifierOpts.fullscreenzoom) / 100); + widthResult = imageWidth + zoomWidthStep; - if (heightResult >= imgOriginalSize.rh) { - heightResult = imgOriginalSize.rh; - } + if (widthResult >= imgOriginalSize.rw) { + widthResult = imgOriginalSize.rw; + zoomWidthStep = widthResult - imageWidth; + allowZoomIn = false; + } + heightResult = widthResult / ratio; + zoomHeightStep = heightResult - imageHeight; + } else { + zoomHeightStep = Math.ceil(imageHeight * parseFloat(config.magnifierOpts.fullscreenzoom) / 100); + heightResult = imageHeight + zoomHeightStep; - if (heightResult === imgOriginalSize.rh || widthResult === imgOriginalSize.rw) { - allowZoomIn = false; + if (heightResult >= imgOriginalSize.rh) { + heightResult = imgOriginalSize.rh; + zoomHeightStep = heightResult - imageHeight; + allowZoomIn = false; + } + widthResult = heightResult * ratio; + zoomWidthStep = widthResult - imageWidth; } - if ($image.width() >= $image.height() && $image.width() !== imgOriginalSize.rw) { + if (imageWidth >= imageHeight && imageWidth !== imgOriginalSize.rw) { dimentions = $.extend(dimentions, { width: widthResult, height: 'auto' }); checkFullscreenImagePosition($image, dimentions, -zoomWidthStep, -zoomHeightStep); - } else if ($image.width() < $image.height() && $image.height() !== imgOriginalSize.rh) { + } else if (imageWidth < imageHeight && imageHeight !== imgOriginalSize.rh) { dimentions = $.extend(dimentions, { width: 'auto', height: heightResult @@ -251,17 +273,19 @@ define([ parentHeight, imageWidth, imageHeight, + zoomWidthStep, + zoomHeightStep, + ratio, fitIntoParent; if (zoomShown && allowZoomOut) { allowZoomIn = true; $image = $(fullscreenImageSelector); - widthResult = $image.width() - zoomWidthStep; - heightResult = $image.height() - zoomHeightStep; parentWidth = $image.parent().width(); parentHeight = $image.parent().height(); imageWidth = $image.width(); imageHeight = $image.height(); + ratio = imageWidth / imageHeight; e.preventDefault(); @@ -269,15 +293,33 @@ define([ clickAnimation(e); } + if (imageWidth >= imageHeight) { + zoomWidthStep = Math.ceil(imageWidth * parseFloat(config.magnifierOpts.fullscreenzoom) / 100); + widthResult = imageWidth - zoomWidthStep; + heightResult = widthResult / ratio; + zoomHeightStep = imageHeight - heightResult; + } else { + zoomHeightStep = Math.ceil(imageHeight * parseFloat(config.magnifierOpts.fullscreenzoom) / 100); + heightResult = imageHeight - zoomHeightStep; + widthResult = heightResult * ratio; + zoomWidthStep = imageWidth - widthResult; + } + fitIntoParent = function () { - if (parentHeight - imageHeight > parentWidth - imageWidth) { + if (ratio > parentWidth/parentHeight) { widthResult = parentWidth; + zoomWidthStep = imageWidth - widthResult; + heightResult = widthResult / ratio; + zoomHeightStep = imageHeight - heightResult; dimentions = { width: widthResult, height: 'auto' }; } else { heightResult = parentHeight; + zoomHeightStep = imageHeight - heightResult; + widthResult = heightResult * ratio; + zoomWidthStep = imageWidth - widthResult; dimentions = { width: 'auto', height: heightResult @@ -286,29 +328,43 @@ define([ checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); }; - if (imageWidth > imageHeight) { - - if (widthResult > parentWidth || heightResult > parentHeight) { + if (imageWidth >= imageHeight) { + if (widthResult > parentWidth) { dimentions = { width: widthResult, height: 'auto' }; checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); } else { - allowZoomOut = dragFlag = false; - fitIntoParent(); + if (heightResult > parentHeight) { + dimentions = { + width: widthResult, + height: 'auto' + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } else { + allowZoomOut = dragFlag = false; + fitIntoParent(); + } } } else { - - if (heightResult > parentHeight || widthResult > parentWidth) { + if (heightResult > parentHeight) { dimentions = { width: 'auto', height: heightResult }; checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); } else { - allowZoomOut = dragFlag = false; - fitIntoParent(); + if (widthResult > parentWidth) { + dimentions = { + width: 'auto', + height: heightResult + }; + checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); + } else { + allowZoomOut = dragFlag = false; + fitIntoParent(); + } } } } @@ -473,22 +529,22 @@ define([ }); - $(document).on(isTouchEnabled ? 'touchend' : 'mouseup pointerup MSPointerUp', function () { + $(document).on(isTouchEnabled ? 'touchend' : 'mouseup pointerup MSPointerUp', function (e) { if (gallery.fullScreen) { isDragActive = false; - - if (zoomShown) { - $image.removeClass(imageDraggableClass).addClass(imageZoommable); - } + $image.removeClass(imageDraggableClass); } }); if (zoomShown) { - $image.css({ - width: $image.width(), - height: $image.height() - }).addClass(imageZoommable); + toggleZoomable($image, true); } + + $(window).resize(function () { + if ($image.hasClass(imageZoommable) && !allowZoomOut) { + resetVars($image); + } + }); } /** @@ -610,7 +666,7 @@ define([ toggleZoomButtons($(fullscreenImageSelector)); magnifierFullscreen(); }) - .on('fotorama:show', function (e, fotorama) { + .on('fotorama:show fotorama:fullscreenexit', function (e, fotorama) { resetVars($(fullscreenImageSelector)); }); }); From a60a1c66484da653a489c69e00d614ee2dd71f43 Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Mon, 2 Nov 2015 16:57:43 +0300 Subject: [PATCH 043/214] JS-279: Double click in full-screen view - remove useless brackets --- lib/web/magnifier/magnify.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index 7b760cf5cf5a6..5df60b0152416 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -60,13 +60,13 @@ define([ return { width: imgOriginalSize.rw, height: 'auto' - }); + }; } else if ($image.width() < $image.height() && $image.height() !== imgOriginalSize.rh) { return { width: 'auto', height: imgOriginalSize.rh - }); + }; } } }; From 2bf3580b2649460b29cb96d638fa41e8ed330907 Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Wed, 4 Nov 2015 16:35:52 +0300 Subject: [PATCH 044/214] JS-229: CLONE - Next/prev thumbnail on the end of drag event when keyboard is used --- lib/web/magnifier/magnify.js | 49 ++++++++++++++++++------------------ 1 file changed, 25 insertions(+), 24 deletions(-) diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index d0753dfa6ce58..e07709e8cf54e 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -4,8 +4,9 @@ */ define([ 'jquery', + 'underscore', 'magnifier/magnifier' -], function ($) { +], function ($, _) { 'use strict'; return function (config, element) { @@ -237,10 +238,6 @@ define([ }); checkFullscreenImagePosition($image, dimentions, -zoomWidthStep, -zoomHeightStep); } - - $(gallerySelector).data('fotorama').setOptions({ - swipe: false - }); } return false; @@ -288,10 +285,6 @@ define([ }; } checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); - - $(gallerySelector).data('fotorama').setOptions({ - swipe: true - }); }; if (imageWidth > imageHeight) { @@ -382,29 +375,33 @@ define([ imagePosX, imagePosY, touch, - pressed = false, $gallery = $(gallerySelector), $image = $(fullscreenImageSelector, $gallery), $imageContainer = $('[data-gallery-role="stage-shaft"] [data-active="true"]'), gallery = $gallery.data('fotorama'); + + var swipeSlide = _.throttle(function (direction) { + $(gallerySelector).data('fotorama').show(direction) + }, 500, {trailing: false}); + function shiftImage(dx, dy, e) { - var top = imagePosY + dy, - left = imagePosX + dx; + var top = +imagePosY + dy, + left = +imagePosX + dx; dragFlag = true; - if (($image.offset().left === $imageContainer.offset().left + $imageContainer.width() - $image.width() && e.type !== 'mousemove') || + if (($image.offset().left === $imageContainer.offset().left + $imageContainer.width() - $image.width() && e.keyCode === 39) || (endX === $imageContainer.offset().left + $imageContainer.width() - $image.width() && dx < 0 && e.type === 'mousemove')) { endX = null; - $(gallerySelector).data('fotorama').show('>'); + swipeSlide('>'); return; } - if (($image.offset().left === $imageContainer.offset().left && dx !== 0 && e.type !== 'mousemove') || + if (($image.offset().left === $imageContainer.offset().left && dx !== 0 && e.keyCode === 37) || (endX === $imageContainer.offset().left && dx > 0 && e.type === 'mousemove')) { endX = null; - $(gallerySelector).data('fotorama').show('<'); + swipeSlide('<'); return; } @@ -430,15 +427,18 @@ define([ $image.offset({ 'left': left }); - } else { - if (dy === 0 && e.type !== 'mousemove') { - dx < 0 ? $(gallerySelector).data('fotorama').show('>') : $(gallerySelector).data('fotorama').show('<'); - } + } else if (Math.abs(dy) === 0 && e.type !== 'mousemove') { + dx < 0 ? $(gallerySelector).data('fotorama').show('>') : $(gallerySelector).data('fotorama').show('<'); + } + + if ($image.width() <= $imageContainer.width() && e.type === 'mousemove' && Math.abs(dx) > Math.abs(dy)) { + dx < 0 ? swipeSlide('>') : swipeSlide('<'); } } toggleZoomButtons($image); + $image.off(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown') $image.on(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown', function (e) { if (gallery.fullScreen) { e.preventDefault(); @@ -457,11 +457,11 @@ define([ startX = e.clientX || e.originalEvent.clientX; startY = e.clientY || e.originalEvent.clientY; isDragActive = true; - pressed = true; } }); + $image.off(isTouchEnabled ? 'touchmove' : 'mousemove pointermove MSPointerMove'); $image.on(isTouchEnabled ? 'touchmove' : 'mousemove pointermove MSPointerMove', function (e) { var clientX, clientY; @@ -484,7 +484,7 @@ define([ }); var keyboardNavigation = function (e) { - var step = 20, + var step = 40, isFullScreen = $(gallerySelector).data('fotorama').fullScreen; if (isFullScreen) { @@ -667,10 +667,11 @@ define([ } }) .on('fotorama:fullscreenenter fotorama:showend', function (e, fotorama) { - hideMagnifier(); $(element).data('gallery').updateOptions({ - swipe: true + swipe: false }); + hideMagnifier(); + resetVars($(fullscreenImageSelector)); magnifierFullscreen(e, fotorama); mousewheel(e, fotorama, element); }) From 31f8aa02c96f38b069119b472a958b70c2e97b31 Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Wed, 4 Nov 2015 16:00:05 +0200 Subject: [PATCH 045/214] JS-284: Fix magnifier appearance after thumbnails drag --- lib/web/magnifier/magnify.js | 109 ++++++++++++----------------------- 1 file changed, 38 insertions(+), 71 deletions(-) diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index a7b1491f2efbe..7e78594261632 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -50,26 +50,7 @@ define([ imgSize.rh = img.height; return imgSize; - }; - - function getDimension($image) { - if ($image) { - var imgOriginalSize = getImageSize($image[0].src) - - if ($image.width() >= $image.height() && $image.width() !== imgOriginalSize.rw) { - return { - width: imgOriginalSize.rw, - height: 'auto' - }; - - } else if ($image.width() < $image.height() && $image.height() !== imgOriginalSize.rh) { - return { - width: 'auto', - height: imgOriginalSize.rh - }; - } - } - }; + } function toggleZoomable($image, flag) { if (flag) { @@ -94,30 +75,6 @@ define([ toggleZoomable($image, false); } - function clickAnimation(e) { - - var roundRadius = 80, - clickAnimationDuration = 400; - - $('
').addClass('circle').offset({ - left: e.pageX - e.currentTarget.offsetLeft, - top: e.pageY - e.currentTarget.offsetTop - }).appendTo(e.currentTarget).animate( - { - height: roundRadius, - width: roundRadius, - left: e.pageX - roundRadius / 2 - e.currentTarget.offsetLeft, - top: e.pageY - roundRadius / 2 - e.currentTarget.offsetTop, - opacity: 0 - }, - clickAnimationDuration, - 'swing', - function () { - $(this).remove(); - } - ); - }; - function toggleZoomButtons($image) { var path = $image.attr('src'), imgSize; @@ -139,7 +96,7 @@ define([ $(zoomOutButtonSelector).hide(); zoomShown = false; } - }; + } function getTopValue($image, topProp, step, height, containerHeight) { var top; @@ -207,7 +164,7 @@ define([ $image.css(settings); } - }; + } function zoomIn(e) { var $image, @@ -236,10 +193,6 @@ define([ e.preventDefault(); - if (e.type === 'click' || e.type === 'touchstart') { - clickAnimation(e); - } - if (imageWidth >= imageHeight) { zoomWidthStep = Math.ceil(imageWidth * parseFloat(config.magnifierOpts.fullscreenzoom) / 100); widthResult = imageWidth + zoomWidthStep; @@ -281,7 +234,7 @@ define([ } return false; - }; + } function zoomOut(e) { var $image, @@ -308,10 +261,6 @@ define([ e.preventDefault(); - if (e.type === 'click' || e.type === 'touchstart') { - clickAnimation(e); - } - if (imageWidth >= imageHeight) { zoomWidthStep = Math.ceil(imageWidth * parseFloat(config.magnifierOpts.fullscreenzoom) / 100); widthResult = imageWidth - zoomWidthStep; @@ -325,7 +274,7 @@ define([ } fitIntoParent = function () { - if (ratio > parentWidth/parentHeight) { + if (ratio > parentWidth / parentHeight) { widthResult = parentWidth; zoomWidthStep = imageWidth - widthResult; heightResult = widthResult / ratio; @@ -389,7 +338,7 @@ define([ } return false; - }; + } /** * Bind event on scroll on active item in fotorama @@ -436,7 +385,7 @@ define([ $fotoramaStage.addClass('magnify-wheel-loaded'); } } - }; + } /** * Method which makes draggable picture. Also work on touch devices. @@ -488,25 +437,42 @@ define([ 'left': left }); } - }; + } /** * Sets image size to original * @param e - event object */ - function setImageFullSize (e) { + function setImageFullSize(e) { var imgOriginalSize = getImageSize($image[0].src), - zoomWidthStepTemp = imgOriginalSize.rw - $image.width(), - zoomHeightStepTemp = imgOriginalSize.rh - $image.height(); + zoomWidthStep = imgOriginalSize.rw - $image.width(), + zoomHeightStep = imgOriginalSize.rh - $image.height(), + ratio = $image.width() / $image.height(), + dimentions = {}; + + if (zoomShown && allowZoomIn) { + if (!$image.hasClass(imageZoommable)) { + toggleZoomable($image, true); + }; - zoomWidthStep = Math.ceil((imgOriginalSize.rw - $image.width()) / parseFloat(config.magnifierOpts.fullscreenzoom)); - zoomHeightStep = Math.ceil((imgOriginalSize.rh - $image.height()) / parseFloat(config.magnifierOpts.fullscreenzoom)); + if (ratio >= 1) { + dimentions = { + width: imgOriginalSize.rw, + height: 'auto' + }; + } else { + dimentions = { + height: imgOriginalSize.rh, + width: 'auto' + }; + } - checkFullscreenImagePosition($image, getDimension($image), -zoomWidthStepTemp, -zoomHeightStepTemp); + checkFullscreenImagePosition($image, dimentions, -zoomWidthStep, -zoomHeightStep); - allowZoomIn = false; - allowZoomOut = true; - }; + allowZoomIn = false; + allowZoomOut = true; + } + } $image.unbind('dblclick'); $image.dblclick(setImageFullSize); @@ -609,9 +575,10 @@ define([ behaveOnHover = function (e, initPos) { var pos = [e.pageX, e.pageY], isArrow = $(e.target).data('gallery-role') === 'arrow', - isClick = initPos[0] === pos[0] && initPos[1] === pos[1]; + isClick = initPos[0] === pos[0] && initPos[1] === pos[1], + isImg = $(e.target).parent().data('active'); - if (isArrow || !isClick) { + if ((isImg && !isClick) || isArrow) { hideMagnifier(); } }; @@ -703,7 +670,6 @@ define([ } }) .on('fotorama:fullscreenenter fotorama:showend', function (e, fotorama) { - hideMagnifier(); $(element).data('gallery').updateOptions({ swipe: false }); @@ -715,6 +681,7 @@ define([ magnifierFullscreen(); }) .on('fotorama:show fotorama:fullscreenexit', function (e, fotorama) { + hideMagnifier(); resetVars($(fullscreenImageSelector)); }); }); From 3be89efd534702c4248643724b0c39c5814817c1 Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Wed, 4 Nov 2015 17:21:43 +0300 Subject: [PATCH 046/214] JS-229: CLONE - Next/prev thumbnail on the end of drag event when keyboard is used - touch and ie events --- lib/web/magnifier/magnify.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index 6f152ae36d0db..a7464f462e40f 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -466,14 +466,16 @@ define([ dragFlag = true; if (($image.offset().left === $imageContainer.offset().left + $imageContainer.width() - $image.width() && e.keyCode === 39) || - (endX === $imageContainer.offset().left + $imageContainer.width() - $image.width() && dx < 0 && e.type === 'mousemove')) { + (endX === $imageContainer.offset().left + $imageContainer.width() - $image.width() && dx < 0 && + (e.type === 'mousemove' || e.type === 'touchmove' || e.type === 'pointermove' || e.type === 'MSPointerMove'))) { endX = null; swipeSlide('>'); return; } if (($image.offset().left === $imageContainer.offset().left && dx !== 0 && e.keyCode === 37) || - (endX === $imageContainer.offset().left && dx > 0 && e.type === 'mousemove')) { + (endX === $imageContainer.offset().left && dx > 0 && + (e.type === 'mousemove' || e.type === 'touchmove' || e.type === 'pointermove' || e.type === 'MSPointerMove'))) { endX = null; swipeSlide('<'); return; @@ -501,11 +503,14 @@ define([ $image.offset({ 'left': left }); - } else if (Math.abs(dy) === 0 && e.type !== 'mousemove') { + } else if (Math.abs(dy) === 0 && + !(e.type === 'mousemove' || e.type === 'touchmove' || e.type === 'pointermove' || e.type === 'MSPointerMove')) { dx < 0 ? $(gallerySelector).data('fotorama').show('>') : $(gallerySelector).data('fotorama').show('<'); } - if ($image.width() <= $imageContainer.width() && e.type === 'mousemove' && Math.abs(dx) > Math.abs(dy)) { + if ($image.width() <= $imageContainer.width() && + (e.type === 'mousemove' || e.type === 'touchmove' || e.type === 'pointermove' || e.type === 'MSPointerMove') && + Math.abs(dx) > Math.abs(dy)) { dx < 0 ? swipeSlide('>') : swipeSlide('<'); } }; From bb82f541717d14ddf304ca00cb2d5efb135e3538 Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Wed, 4 Nov 2015 17:33:31 +0300 Subject: [PATCH 047/214] JS-232: CLONE - Test/fix accessibility features on Chrome/Windows - reset variables for fullscreenexit --- lib/web/magnifier/magnify.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index de49d80483da2..754d00251f5ca 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -715,7 +715,7 @@ define([ toggleZoomButtons($(fullscreenImageSelector)); magnifierFullscreen(); }) - .on('fotorama:show', function (e, fotorama) { + .on('fotorama:show fotorama:fullscreenexit', function (e, fotorama) { resetVars($(fullscreenImageSelector)); }); }); From 7cc8f09bb85ba9205890abc7d1d17dcc2337583b Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Wed, 4 Nov 2015 18:34:32 +0300 Subject: [PATCH 048/214] JS-232: CLONE - Test/fix accessibility features on Chrome/Windows - code refactoring --- lib/web/mage/gallery/gallery.html | 4 ++-- lib/web/mage/gallery/gallery.js | 6 +++++- lib/web/magnifier/magnify.js | 11 ++++++++--- 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/lib/web/mage/gallery/gallery.html b/lib/web/mage/gallery/gallery.html index f15324d8478b5..77549e3e6aad3 100644 --- a/lib/web/mage/gallery/gallery.html +++ b/lib/web/mage/gallery/gallery.html @@ -5,7 +5,7 @@ */ -->
-
+
@@ -36,6 +36,6 @@
-
+
\ No newline at end of file diff --git a/lib/web/mage/gallery/gallery.js b/lib/web/mage/gallery/gallery.js index 7896bbfee7334..0c76337db820f 100644 --- a/lib/web/mage/gallery/gallery.js +++ b/lib/web/mage/gallery/gallery.js @@ -118,6 +118,8 @@ define([ settings.fullscreenConfig.swipe = true; settings.$gallery.on('fotorama:fullscreenenter', function () { + settings.focusableStart.attr('tabindex', '0'); + settings.focusableEnd.attr('tabindex', '0'); settings.focusableStart.bind('focusin', self._focusSwitcher); settings.focusableEnd.bind('focusin', self._focusSwitcher); settings.api.updateOptions(settings.defaultConfig.options, true); @@ -130,6 +132,8 @@ define([ }); settings.$gallery.on('fotorama:fullscreenexit', function () { + settings.focusableStart.attr('tabindex', '-1'); + settings.focusableEnd.attr('tabindex', '-1'); settings.api.updateOptions(settings.defaultConfig.options, true); settings.focusableStart.unbind('focusin', this._focusSwitcher); settings.focusableEnd.unbind('focusin', this._focusSwitcher); @@ -177,7 +181,7 @@ define([ if (position === 'end') { settings.$gallery.find(settings.closeIcon).focus(); } else if (position === 'start') { - infelicity = 2; //Constant for find last focusable element + infelicity = 3; //Constant for find last focusable element focusableElements = settings.$gallery.find(':focusable'); focusableElements.eq(focusableElements.length - infelicity).focus(); } diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index de49d80483da2..977b0e5a96a15 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -558,20 +558,25 @@ define([ }); $(window).keyup(function (e) { - imagePosX = $(fullscreenImageSelector, $gallery).offset().left; - imagePosY = $(fullscreenImageSelector, $gallery).offset().top; - var step = 20; + var step = 20, + initVars = function () { + imagePosX = $(fullscreenImageSelector, $gallery).offset().left; + imagePosY = $(fullscreenImageSelector, $gallery).offset().top; if (e.keyCode === 102) { + initVars(); shiftImage(-step, 0); } if (e.keyCode === 98) { + initVars(); shiftImage(0, step); } if (e.keyCode === 100) { + initVars(); shiftImage(step, 0); } if (e.keyCode === 104) { + initVars(); shiftImage(0, -step); } From 822f21d94158c777722412a011784d115dc2a6e7 Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Wed, 4 Nov 2015 18:40:58 +0300 Subject: [PATCH 049/214] JS-229: CLONE - Next/prev thumbnail on the end of drag event when keyboard is used - code refactoring --- lib/web/magnifier/magnify.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index a7464f462e40f..f9dd6553053b7 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -579,7 +579,7 @@ define([ e.clientY = touch.pageY; } - shiftImage((clientX - startX), (clientY - startY), e); + shiftImage(clientX - startX, clientY - startY, e); } }); @@ -631,9 +631,6 @@ define([ }; $(document).unbind('keydown'); $(document).keydown(keyboardNavigation); - //$image.on('transitionend', function() { - // allowAnimating = true; - //}); $(document).on(isTouchEnabled ? 'touchend' : 'mouseup pointerup MSPointerUp', function (e) { From bbeda29c7082c21d8f9b39e56e293e89b130d675 Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Wed, 4 Nov 2015 18:44:00 +0300 Subject: [PATCH 050/214] JS-232: CLONE - Test/fix accessibility features on Chrome/Windows - code refactoring (2) --- lib/web/magnifier/magnify.js | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index db9219ef0b9d5..b07625abf8eee 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -562,6 +562,7 @@ define([ initVars = function () { imagePosX = $(fullscreenImageSelector, $gallery).offset().left; imagePosY = $(fullscreenImageSelector, $gallery).offset().top; + }); if (e.keyCode === 102) { initVars(); From 17974eca7236ce8b07ade7439a27095fe13755be Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Thu, 5 Nov 2015 11:37:03 +0300 Subject: [PATCH 051/214] JS-236: CLONE - Non-regression testing for mobile devices --- lib/web/mage/gallery/gallery.js | 6 ++++++ lib/web/magnifier/magnifier.js | 4 ++-- lib/web/magnifier/magnify.js | 7 ++++--- 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/lib/web/mage/gallery/gallery.js b/lib/web/mage/gallery/gallery.js index 0c76337db820f..895baf20ca52d 100644 --- a/lib/web/mage/gallery/gallery.js +++ b/lib/web/mage/gallery/gallery.js @@ -129,6 +129,9 @@ define([ settings.api.updateOptions(settings.activeBreakpoint.options, true); } settings.isFullscreen = true; + settings.$element.data('gallery').updateOptions({ + swipe: false + }); }); settings.$gallery.on('fotorama:fullscreenexit', function () { @@ -143,6 +146,9 @@ define([ } settings.isFullscreen = false; settings.$fullscreenIcon.hide(); + settings.$element.data('gallery').updateOptions({ + swipe: true + }); }); }, diff --git a/lib/web/magnifier/magnifier.js b/lib/web/magnifier/magnifier.js index 328418a71de2c..aa8b195807c1a 100644 --- a/lib/web/magnifier/magnifier.js +++ b/lib/web/magnifier/magnifier.js @@ -167,7 +167,7 @@ data[idx].lensH = data[idx].lensH > $thumb.height() ? $thumb.height() : data[idx].lensH; lens.css({ width: data[idx].lensW + 1 + 'px', - height: data[idx].lensH + 'px' + height: data[idx].lensH - 1 + 'px' }); } @@ -279,7 +279,7 @@ pos.t = pos.t <= 0 ? 0 : pos.t; curLens.css({ left: pos.l + paddingX +'px', - top: pos.t + paddingY + 'px' + top: pos.t + 1 + paddingY + 'px' }); if (lensbg) { diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index b5991fa56a328..de1145c5286da 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -602,6 +602,10 @@ define([ $(gallerySelector).data('fotorama').show('>'); } } + + if (e.keyCode === 27 && isFullScreen) { + $(gallerySelector).data('fotorama').cancelFullScreen(); + } }; $(document).unbind('keydown'); @@ -740,9 +744,6 @@ define([ } }) .on('fotorama:fullscreenenter fotorama:showend', function (e, fotorama) { - $(element).data('gallery').updateOptions({ - swipe: false - }); hideMagnifier(); resetVars($(fullscreenImageSelector)); magnifierFullscreen(e, fotorama); From 9b6af7579800a59ea277ff04bcd777fbb680ad5f Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Thu, 5 Nov 2015 13:46:48 +0200 Subject: [PATCH 052/214] JS-238: CLONE - Test/fix Windows System screen reader support --- lib/web/fotorama/fotorama.js | 19 ++++--------------- lib/web/mage/gallery/gallery.js | 11 ----------- lib/web/mage/gallery/gallery.less | 15 +++++---------- 3 files changed, 9 insertions(+), 36 deletions(-) diff --git a/lib/web/fotorama/fotorama.js b/lib/web/fotorama/fotorama.js index e40e0bb194ba2..32fd79b9ef444 100644 --- a/lib/web/fotorama/fotorama.js +++ b/lib/web/fotorama/fotorama.js @@ -3187,11 +3187,7 @@ fotoramaVersion = '4.6.4'; addEnterUp($stageShaft[0], function () { if (!$fotorama.hasClass(fullscreenClass)) { that.requestFullScreen(); - $(fullscreenIcon).css({ - opacity: 1, - visibility: 'visible', - display: 'block' - }).focus(); + $(fullscreenIcon).focus(); } }); } @@ -3869,15 +3865,8 @@ fotoramaVersion = '4.6.4'; } else if ($videoPlaying) { target === videoClose && unloadVideo($videoPlaying, true, true); } else { - if (toggleControlsFLAG) { - toggleControlsClass(); - } else if (opts.click) { - - clickToShow({ - index: e.shiftKey || getDirectionSign(getDirection(e._x)), - slow: e.altKey, - user: true - }); + if ($target.parent().data('active') && !$fotorama.hasClass(fullscreenClass)) { + that.requestFullScreen(); } } } @@ -4063,7 +4052,7 @@ fotoramaVersion = '4.6.4'; addEnterUp(fullscreenIcon, function () { that.toggleFullScreen(); - $(fullscreenIcon).trigger('focus'); + $(fullscreenIcon).focus(); }); addFocusOnControls(fullscreenIcon); diff --git a/lib/web/mage/gallery/gallery.js b/lib/web/mage/gallery/gallery.js index 0c76337db820f..23f0b4289f4bd 100644 --- a/lib/web/mage/gallery/gallery.js +++ b/lib/web/mage/gallery/gallery.js @@ -90,16 +90,6 @@ define([ this.initApi(); this.setupBreakpoints(); this.initFullscreenSettings(); - this.settings.$element.on('mouseup', '.fotorama__stage__frame', function () { - if (!$(this).parents('.fotorama__shadows--left').length) { - $('[data-gallery-role="gallery"]').data('fotorama').requestFullScreen(); - $('[data-gallery-role="fotorama__fullscreen-icon"]').css({ - opacity: 1, - visibility: 'visible', - display: 'block' - }).focus(); - } - }); }, /** @@ -142,7 +132,6 @@ define([ settings.api.updateOptions(settings.activeBreakpoint.options, true); } settings.isFullscreen = false; - settings.$fullscreenIcon.hide(); }); }, diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index f3acf9b43b347..e909708237391 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -86,15 +86,6 @@ } } -.circle { - position: absolute; - background-color: silver; - opacity: 0.7; - border-radius: 100%; - height: 1px; - width: 1px; -} - .fotorama__zoom-in, .fotorama__zoom-out { display: none; @@ -199,6 +190,8 @@ .fotorama__fullscreen-icon:focus:after, .fotorama__nav__frame:focus .fotorama__dot:after, .fotorama__nav__frame:focus .fotorama__thumb:after, +.fotorama__zoom-out:focus:after, +.fotorama__zoom-in:focus:after, .fotorama__stage__shaft:focus .fotorama__stage__frame.fotorama__active:after { background-color: rgba(0, 175, 234, .5); border-radius: inherit; @@ -741,7 +734,9 @@ } } -.fotorama__fullscreen-icon { +.fotorama__fullscreen-icon, +.fotorama__zoom-out, +.fotorama__zoom-in { &:focus { &:extend(.fotorama-focus); border-radius: 50%; From 936cb2807c5149f400f147508cbf8fc429504841 Mon Sep 17 00:00:00 2001 From: Uladzislau Harbachou Date: Thu, 5 Nov 2015 15:53:27 +0300 Subject: [PATCH 053/214] JS-266: Double loader on product page --- lib/web/fotorama/fotorama.js | 422 +----------------------------- lib/web/mage/gallery/gallery.html | 1 + lib/web/mage/gallery/gallery.less | 16 ++ 3 files changed, 29 insertions(+), 410 deletions(-) diff --git a/lib/web/fotorama/fotorama.js b/lib/web/fotorama/fotorama.js index 9aba3a85f0065..99d371d4346e9 100644 --- a/lib/web/fotorama/fotorama.js +++ b/lib/web/fotorama/fotorama.js @@ -86,10 +86,11 @@ fotoramaVersion = '4.6.4'; videoPlayClass = videoClass + '-play', videoCloseClass = videoClass + '-close', - spinnerClass = _fotoramaClass + '__spinner', horizontalImageClass = _fotoramaClass + '_horizontal_ratio', - verticalImageClass = _fotoramaClass + '_vertical_ratio'; + verticalImageClass = _fotoramaClass + '_vertical_ratio', + + spinnerShowClass = _fotoramaClass + '_spinner'; var JQUERY_VERSION = $ && $.fn.jquery.split('.'); if (!JQUERY_VERSION @@ -436,390 +437,6 @@ fotoramaVersion = '4.6.4'; return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen'](); }; } -//fgnass.github.com/spin.js#v1.3.2 - - /** - * Copyright (c) 2011-2013 Felix Gnass - * Licensed under the MIT license - */ - - var Spinner, - spinnerDefaults = { - lines: 12, // The number of lines to draw - length: 5, // The length of each line - width: 2, // The line thickness - radius: 7, // The radius of the inner circle - corners: 1, // Corner roundness (0..1) - rotate: 15, // The rotation offset - color: 'rgba(128, 128, 128, .75)', - hwaccel: true - }, - spinnerOverride = { - top: 'auto', - left: 'auto', - className: '' - }; - - (function (root, factory) { - - /* CommonJS */ - //if (typeof exports == 'object') module.exports = factory() - - /* AMD module */ - //else if (typeof define == 'function' && define.amd) define(factory) - - /* Browser global */ - //else root.Spinner = factory() - - Spinner = factory(); - } - (this, function () { - "use strict"; - - var prefixes = ['webkit', 'Moz', 'ms', 'O'] /* Vendor prefixes */ - , animations = {} /* Animation rules keyed by their name */ - , useCssAnimations - /* Whether to use CSS animations or setTimeout */ - - /** - * Utility function to create elements. If no tag name is given, - * a DIV is created. Optionally properties can be passed. - */ - function createEl(tag, prop) { - var el = document.createElement(tag || 'div') - , n - - for (n in prop) el[n] = prop[n] - return el - } - - /** - * Appends children and returns the parent. - */ - function ins(parent /* child1, child2, ...*/) { - for (var i = 1, n = arguments.length; i < n; i++) - parent.appendChild(arguments[i]) - - return parent - } - - /** - * Insert a new stylesheet to hold the @keyframe or VML rules. - */ - var sheet = (function () { - var el = createEl('style', {type: 'text/css'}) - ins(document.getElementsByTagName('head')[0], el) - return el.sheet || el.styleSheet - }()) - - /** - * Creates an opacity keyframe animation rule and returns its name. - * Since most mobile Webkits have timing issues with animation-delay, - * we create separate rules for each line/segment. - */ - function addAnimation(alpha, trail, i, lines) { - var name = ['opacity', trail, ~~(alpha * 100), i, lines].join('-') - , start = 0.01 + i / lines * 100 - , z = Math.max(1 - (1 - alpha) / trail * (100 - start), alpha) - , prefix = useCssAnimations.substring(0, useCssAnimations.indexOf('Animation')).toLowerCase() - , pre = prefix && '-' + prefix + '-' || '' - - if (!animations[name]) { - sheet.insertRule( - '@' + pre + 'keyframes ' + name + '{' + - '0%{opacity:' + z + '}' + - start + '%{opacity:' + alpha + '}' + - (start + 0.01) + '%{opacity:1}' + - (start + trail) % 100 + '%{opacity:' + alpha + '}' + - '100%{opacity:' + z + '}' + - '}', sheet.cssRules.length) - - animations[name] = 1 - } - - return name - } - - /** - * Tries various vendor prefixes and returns the first supported property. - */ - function vendor(el, prop) { - var s = el.style - , pp - , i - - prop = prop.charAt(0).toUpperCase() + prop.slice(1) - for (i = 0; i < prefixes.length; i++) { - pp = prefixes[i] + prop - if (s[pp] !== undefined) return pp - } - if (s[prop] !== undefined) return prop - } - - /** - * Sets multiple style properties at once. - */ - function css(el, prop) { - for (var n in prop) - el.style[vendor(el, n) || n] = prop[n] - - return el - } - - /** - * Fills in default values. - */ - function merge(obj) { - for (var i = 1; i < arguments.length; i++) { - var def = arguments[i] - for (var n in def) - if (obj[n] === undefined) obj[n] = def[n] - } - return obj - } - - /** - * Returns the absolute page-offset of the given element. - */ - function pos(el) { - var o = {x: el.offsetLeft, y: el.offsetTop} - while ((el = el.offsetParent)) - o.x += el.offsetLeft, o.y += el.offsetTop - - return o - } - - /** - * Returns the line color from the given string or array. - */ - function getColor(color, idx) { - return typeof color == 'string' ? color : color[idx % color.length] - } - - // Built-in defaults - - var defaults = { - lines: 12, // The number of lines to draw - length: 7, // The length of each line - width: 5, // The line thickness - radius: 10, // The radius of the inner circle - rotate: 0, // Rotation offset - corners: 1, // Roundness (0..1) - color: '#000', // #rgb or #rrggbb - direction: 1, // 1: clockwise, -1: counterclockwise - speed: 1, // Rounds per second - trail: 100, // Afterglow percentage - opacity: 1 / 4, // Opacity of the lines - fps: 20, // Frames per second when using setTimeout() - zIndex: 2e9, // Use a high z-index by default - className: 'spinner', // CSS class to assign to the element - top: 'auto', // center vertically - left: 'auto', // center horizontally - position: 'relative' // element position - } - - /** The constructor */ - function Spinner(o) { - if (typeof this == 'undefined') return new Spinner(o) - this.opts = merge(o || {}, Spinner.defaults, defaults) - } - - // Global defaults that override the built-ins: - Spinner.defaults = {} - - merge(Spinner.prototype, { - - /** - * Adds the spinner to the given target element. If this instance is already - * spinning, it is automatically removed from its previous target b calling - * stop() internally. - */ - spin: function (target) { - this.stop() - - var self = this - , o = self.opts - , el = self.el = css(createEl(0, {className: o.className}), { - position: o.position, - width: 0, - zIndex: o.zIndex - }) - , mid = o.radius + o.length + o.width - , ep // element position - , tp // target position - - if (target) { - target.insertBefore(el, target.firstChild || null) - tp = pos(target) - ep = pos(el) - css(el, { - left: (o.left == 'auto' ? tp.x - ep.x + (target.offsetWidth >> 1) : parseInt(o.left, 10) + mid) + 'px', - top: (o.top == 'auto' ? tp.y - ep.y + (target.offsetHeight >> 1) : parseInt(o.top, 10) + mid) + 'px' - }) - } - - el.setAttribute('role', 'progressbar') - self.lines(el, self.opts) - - if (!useCssAnimations) { - // No CSS animation support, use setTimeout() instead - var i = 0 - , start = (o.lines - 1) * (1 - o.direction) / 2 - , alpha - , fps = o.fps - , f = fps / o.speed - , ostep = (1 - o.opacity) / (f * o.trail / 100) - , astep = f / o.lines - - ; - (function anim() { - i++; - for (var j = 0; j < o.lines; j++) { - alpha = Math.max(1 - (i + (o.lines - j) * astep) % f * ostep, o.opacity) - - self.opacity(el, j * o.direction + start, alpha, o) - } - self.timeout = self.el && setTimeout(anim, ~~(1000 / fps)) - })() - } - return self - }, - - /** - * Stops and removes the Spinner. - */ - stop: function () { - var el = this.el - if (el) { - clearTimeout(this.timeout) - if (el.parentNode) el.parentNode.removeChild(el) - this.el = undefined - } - return this - }, - - /** - * Internal method that draws the individual lines. Will be overwritten - * in VML fallback mode below. - */ - lines: function (el, o) { - var i = 0 - , start = (o.lines - 1) * (1 - o.direction) / 2 - , seg - - function fill(color, shadow) { - return css(createEl(), { - position: 'absolute', - width: (o.length + o.width) + 'px', - height: o.width + 'px', - background: color, - boxShadow: shadow, - transformOrigin: 'left', - transform: 'rotate(' + ~~(360 / o.lines * i + o.rotate) + 'deg) translate(' + o.radius + 'px' + ',0)', - borderRadius: (o.corners * o.width >> 1) + 'px' - }) - } - - for (; i < o.lines; i++) { - seg = css(createEl(), { - position: 'absolute', - top: 1 + ~(o.width / 2) + 'px', - transform: o.hwaccel ? 'translate3d(0,0,0)' : '', - opacity: o.opacity, - animation: useCssAnimations && addAnimation(o.opacity, o.trail, start + i * o.direction, o.lines) + ' ' + 1 / o.speed + 's linear infinite' - }) - - if (o.shadow) ins(seg, css(fill('#000', '0 0 4px ' + '#000'), {top: 2 + 'px'})) - ins(el, ins(seg, fill(getColor(o.color, i), '0 0 1px rgba(0,0,0,.1)'))) - } - return el - }, - - /** - * Internal method that adjusts the opacity of a single line. - * Will be overwritten in VML fallback mode below. - */ - opacity: function (el, i, val) { - if (i < el.childNodes.length) el.childNodes[i].style.opacity = val - } - - }) - - - function initVML() { - - /* Utility function to create a VML tag */ - function vml(tag, attr) { - return createEl('<' + tag + ' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">', attr) - } - - // No CSS transforms but VML support, add a CSS rule for VML elements: - sheet.addRule('.spin-vml', 'behavior:url(#default#VML)') - - Spinner.prototype.lines = function (el, o) { - var r = o.length + o.width - , s = 2 * r - - function grp() { - return css( - vml('group', { - coordsize: s + ' ' + s, - coordorigin: -r + ' ' + -r - }), - {width: s, height: s} - ) - } - - var margin = -(o.width + o.length) * 2 + 'px' - , g = css(grp(), {position: 'absolute', top: margin, left: margin}) - , i - - function seg(i, dx, filter) { - ins(g, - ins(css(grp(), {rotation: 360 / o.lines * i + 'deg', left: ~~dx}), - ins(css(vml('roundrect', {arcsize: o.corners}), { - width: r, - height: o.width, - left: o.radius, - top: -o.width >> 1, - filter: filter - }), - vml('fill', {color: getColor(o.color, i), opacity: o.opacity}), - vml('stroke', {opacity: 0}) // transparent stroke to fix color bleeding upon opacity change - ) - ) - ) - } - - if (o.shadow) - for (i = 1; i <= o.lines; i++) - seg(i, -2, 'progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)') - - for (i = 1; i <= o.lines; i++) seg(i) - return ins(el, g) - } - - Spinner.prototype.opacity = function (el, i, val, o) { - var c = el.firstChild - o = o.shadow && o.lines || 0 - if (c && i + o < c.childNodes.length) { - c = c.childNodes[i + o]; - c = c && c.firstChild; - c = c && c.firstChild - if (c) c.opacity = val - } - } - } - - var probe = css(createEl('group'), {behavior: 'url(#default#VML)'}) - - if (!vendor(probe, 'transform') && probe.adj) initVML() - else useCssAnimations = vendor(probe, 'animation') - - return Spinner - - })); - /* Bez v1.0.10-g5ae0136 * http://github.com/rdallasgray/bez * @@ -1000,7 +617,7 @@ fotoramaVersion = '4.6.4'; direction: 'ltr', // 'rtl' shadows: true, - spinner: null, + showcaption: true, /** @@ -2169,8 +1786,7 @@ fotoramaVersion = '4.6.4'; $videoClose = $fotorama.find(cls(videoCloseClass)), videoClose = $videoClose[0], - spinner, - $spinner = $(div(spinnerClass)), + $spinner = $fotorama.find('.fotorama_spin'), $videoPlaying, @@ -2338,7 +1954,7 @@ fotoramaVersion = '4.6.4'; $DOCUMENT .on(keyupLocal, function (e) { if (that.longPress.inProgress) { - that.showEndLongPress({user:true}); + that.showEndLongPress({user: true}); } that.longPress.reset(); }); @@ -2465,9 +2081,6 @@ fotoramaVersion = '4.6.4'; $arrs.hide(); } - spinnerStop(); - spinner = new Spinner($.extend(spinnerDefaults, opts.spinner, spinnerOverride, {direction: o_rtl ? -1 : 1})); - arrsUpdate(); stageWheelUpdate(); thumbArrUpdate(); @@ -2776,23 +2389,14 @@ fotoramaVersion = '4.6.4'; }); } - function spinnerSpin($el) { - $spinner.append(spinner.spin().el).appendTo($el); - } - - function spinnerStop() { - $spinner.detach(); - spinner && spinner.stop(); - } - function updateFotoramaState() { var $frame = activeFrame[STAGE_FRAME_KEY]; if ($frame && !$frame.data().state) { - spinnerSpin($frame); + $spinner.addClass(spinnerShowClass); $frame.on('f:load f:error', function () { $frame.off('f:load f:error'); - spinnerStop(); + $spinner.removeClass(spinnerShowClass); }); } } @@ -3325,14 +2929,13 @@ fotoramaVersion = '4.6.4'; }; that.showWhileLongPress = function (options) { - if (that.longPress.singlePressInProgress) - { + if (that.longPress.singlePressInProgress) { return; } var index = calcActiveIndex(options); calcGlobalIndexes(index); - var time = calcTime(options)/50; + var time = calcTime(options) / 50; var _activeFrame = activeFrame; that.activeFrame = activeFrame = data[activeIndex]; var silent = _activeFrame === activeFrame && !options.user; @@ -3343,14 +2946,13 @@ fotoramaVersion = '4.6.4'; }; that.showEndLongPress = function (options) { - if (that.longPress.singlePressInProgress) - { + if (that.longPress.singlePressInProgress) { return; } var index = calcActiveIndex(options); calcGlobalIndexes(index); - var time = calcTime(options)/50; + var time = calcTime(options) / 50; var _activeFrame = activeFrame; that.activeFrame = activeFrame = data[activeIndex]; diff --git a/lib/web/mage/gallery/gallery.html b/lib/web/mage/gallery/gallery.html index 34d26c812dae4..b648715184c72 100644 --- a/lib/web/mage/gallery/gallery.html +++ b/lib/web/mage/gallery/gallery.html @@ -20,6 +20,7 @@
+
diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index b4a20fe03cd37..cd60a38f8768e 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -14,6 +14,22 @@ @import '../../css/source/_variables.less'; // Local theme variables @import '../../css/source/lib/_responsive.less'; +.fotorama_spin { + display: none; + &.fotorama_spinner { + display: block; + width: 64px; + height: 64px; + background-image: url('@{baseDir}../images/loader-1.gif'); + bottom: 0; + left: 0; + margin: auto; + position: absolute; + right: 0; + top: 0; + z-index: @z-index-1; + } +} .fotorama-translate3d(@x; @y; @z) { -webkit-transform: translate3d(@x, @y, @z); From b1a5c52655c2e99eb44e0493c83825096f672635 Mon Sep 17 00:00:00 2001 From: Uladzislau Harbachou Date: Thu, 5 Nov 2015 16:07:46 +0300 Subject: [PATCH 054/214] JS-266: Double loader on product page - fix from merge --- lib/web/mage/gallery/gallery.html | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/web/mage/gallery/gallery.html b/lib/web/mage/gallery/gallery.html index 77549e3e6aad3..242b7aa7fce56 100644 --- a/lib/web/mage/gallery/gallery.html +++ b/lib/web/mage/gallery/gallery.html @@ -20,6 +20,7 @@
+
From 8ada39a8c1d8df0cc6a3895c5f65dcde66cad495 Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Thu, 5 Nov 2015 16:27:28 +0300 Subject: [PATCH 055/214] JS-236: CLONE - Non-regression testing for mobile devices - delay variables reset for fullscreen image --- lib/web/magnifier/magnify.js | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index b5991fa56a328..ebcc4b87985f4 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -459,7 +459,7 @@ define([ if ($image.width() <= $imageContainer.width() && (e.type === 'mousemove' || e.type === 'touchmove' || e.type === 'pointermove' || e.type === 'MSPointerMove') && - Math.abs(dx) > Math.abs(dy)) { + Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 50) { dx < 0 ? swipeSlide('>') : swipeSlide('<'); } } @@ -563,9 +563,9 @@ define([ } if (e.keyCode === 39) { - initVars(); if (isFullScreen) { + initVars(); shiftImage(-step, 0, e); } else { $(gallerySelector).data('fotorama').show('>'); @@ -573,9 +573,9 @@ define([ } if (e.keyCode === 38) { - initVars(); if (isFullScreen) { + initVars(); shiftImage(0, step, e); } else { $(gallerySelector).data('fotorama').show('<'); @@ -583,9 +583,9 @@ define([ } if (e.keyCode === 37) { - initVars(); if (isFullScreen) { + initVars(); shiftImage(step, 0, e); } else { $(gallerySelector).data('fotorama').show('<'); @@ -594,9 +594,9 @@ define([ if (e.keyCode === 40) { e.preventDefault(); - initVars(); if (isFullScreen) { + initVars(); shiftImage(0, -step, e); } else { $(gallerySelector).data('fotorama').show('>'); @@ -694,6 +694,7 @@ define([ $($(gallerySelector).data('fotorama').activeFrame.$stageFrame).magnify(config.magnifierOpts); }); $(element).on('gallery:loaded', function (e) { + var $prevImage; $(element).find(gallerySelector) .on('fotorama:ready', function (e, fotorama) { var $zoomIn = $(zoomInButtonSelector), @@ -747,15 +748,22 @@ define([ resetVars($(fullscreenImageSelector)); magnifierFullscreen(e, fotorama); mousewheel(e, fotorama, element); - resetVars($(fullscreenImageSelector)); + + if ($prevImage) { + resetVars($prevImage); + } }) .on('fotorama:load', function (e, fotorama) { toggleZoomButtons($(fullscreenImageSelector)); magnifierFullscreen(); }) - .on('fotorama:show fotorama:fullscreenexit', function (e, fotorama) { + .on('fotorama:show', function (e, fotorama) { + $prevImage = $(fullscreenImageSelector); hideMagnifier(); + }) + .on('fotorama:fullscreenexit', function (e, fotorama) { resetVars($(fullscreenImageSelector)); + hideMagnifier(); }); }); From 374ba1b3bd5afb7b78e8796b3a2665199fed0192 Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Fri, 6 Nov 2015 01:58:12 +0200 Subject: [PATCH 056/214] JS-238: CLONE - Test/fix Windows System screen reader support --- lib/web/fotorama/fotorama.js | 11 ++++++++++- lib/web/mage/gallery/gallery.less | 1 + lib/web/magnifier/magnify.js | 20 ++++++++++++++------ 3 files changed, 25 insertions(+), 7 deletions(-) diff --git a/lib/web/fotorama/fotorama.js b/lib/web/fotorama/fotorama.js index 5cf4f7551c811..f2eed3f60c8ef 100644 --- a/lib/web/fotorama/fotorama.js +++ b/lib/web/fotorama/fotorama.js @@ -2317,6 +2317,7 @@ fotoramaVersion = '4.6.4'; $img .off('load error') .addClass('' + (fullFLAG ? imgFullClass: imgClass)) + .attr('aria-hidden', 'false') .prependTo($frame); if ($frame.hasClass(stageFrameClass) && !$frame.hasClass(videoContainerClass)) { @@ -3050,6 +3051,14 @@ fotoramaVersion = '4.6.4'; stageCursor(); releaseAutoplay(); changeAutoplay(); + + if (that.fullScreen) { + activeFrame[STAGE_FRAME_KEY].find('.' + imgFullClass).attr('aria-hidden', false); + activeFrame[STAGE_FRAME_KEY].find('.' + imgClass).attr('aria-hidden', true) + } else { + activeFrame[STAGE_FRAME_KEY].find('.' + imgFullClass).attr('aria-hidden', true); + activeFrame[STAGE_FRAME_KEY].find('.' + imgClass).attr('aria-hidden', false) + } }; if (!o_fade) { @@ -3653,7 +3662,7 @@ fotoramaVersion = '4.6.4'; }); addEnterUp(fullscreenIcon, function () { - that.toggleFullScreen(); + that.requestFullScreen(); $(fullscreenIcon).focus(); }); addFocusOnControls(fullscreenIcon); diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index 73f644842df2c..f1992084fe9d8 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -216,6 +216,7 @@ position: absolute; width: 100%; left:0; + top:0; } .fotorama-transform-disabled { diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index d40a941a66776..ba618e8f631c7 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -20,6 +20,8 @@ define([ fullscreenImageSelector = '[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full', imageDraggableClass = 'fotorama__img--draggable', imageZoommable = 'fotorama__img--zoommable', + zoomInLoaded = 'zoom-in-loaded', + zoomOutLoaded = 'zoom-out-loaded', hideMagnifier, behaveOnHover, dragFlag, @@ -502,7 +504,9 @@ define([ $image.unbind('dblclick'); $image.dblclick(setImageFullSize); - toggleZoomButtons($image); + if (gallery.fullScreen) { + toggleZoomButtons($image); + } $image.off(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown') $image.on(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown', function (e) { @@ -704,7 +708,7 @@ define([ var $zoomIn = $(zoomInButtonSelector), $zoomOut = $(zoomOutButtonSelector); - if (!$zoomIn.hasClass('zoom-in-loaded')) { + if (!$zoomIn.hasClass(zoomInLoaded)) { $zoomIn.on('click touchstart', zoomIn); $zoomIn.keyup(function (e) { @@ -721,10 +725,10 @@ define([ } }); - $zoomIn.addClass('zoom-in-loaded'); + $zoomIn.addClass(zoomInLoaded); } - if (!$zoomOut.hasClass('zoom-out-loaded')) { + if (!$zoomOut.hasClass(zoomOutLoaded)) { $zoomOut.on('click touchstart', zoomOut); $zoomOut.keyup(function (e) { @@ -741,7 +745,7 @@ define([ } }); - $zoomOut.addClass('zoom-out-loaded'); + $zoomOut.addClass(zoomOutLoaded); } }) .on('fotorama:fullscreenenter fotorama:showend', function (e, fotorama) { @@ -755,7 +759,9 @@ define([ } }) .on('fotorama:load', function (e, fotorama) { - toggleZoomButtons($(fullscreenImageSelector)); + if ($(gallerySelector).data('fotorama').fullScreen) { + toggleZoomButtons($(fullscreenImageSelector)); + } magnifierFullscreen(); }) .on('fotorama:show', function (e, fotorama) { @@ -765,6 +771,8 @@ define([ .on('fotorama:fullscreenexit', function (e, fotorama) { resetVars($(fullscreenImageSelector)); hideMagnifier(); + $(zoomInButtonSelector).css({display:''}); + $(zoomOutButtonSelector).css({display:''}); }); }); From ee98ea2ffb59a5a4b8427caca8cc9c5d4e519276 Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Tue, 10 Nov 2015 16:26:58 +0200 Subject: [PATCH 057/214] JS-287: Fix arrows appearance on mobile devices --- lib/web/fotorama/fotorama.js | 4 +-- lib/web/mage/gallery/gallery.js | 8 ++--- lib/web/mage/gallery/gallery.less | 59 ++++--------------------------- lib/web/magnifier/magnify.js | 29 ++++++++------- 4 files changed, 28 insertions(+), 72 deletions(-) diff --git a/lib/web/fotorama/fotorama.js b/lib/web/fotorama/fotorama.js index 2c0224f6c471e..803a3f1e84a6f 100644 --- a/lib/web/fotorama/fotorama.js +++ b/lib/web/fotorama/fotorama.js @@ -2158,7 +2158,7 @@ fotoramaVersion = '4.6.4'; addOrRemoveClass(!o_fade, wrapSlideClass); addOrRemoveClass(!opts.captions, wrapNoCaptionsClass); addOrRemoveClass(o_rtl, wrapRtlClass); - addOrRemoveClass(opts.arrows !== 'always', wrapToggleArrowsClass); + addOrRemoveClass(opts.arrows, wrapToggleArrowsClass); o_shadows = opts.shadows && !SLOW; addOrRemoveClass(!o_shadows, wrapNoShadowsClass); @@ -3503,7 +3503,7 @@ fotoramaVersion = '4.6.4'; setShadow($stage); - var toggleControlsFLAG = (MS_POINTER && !hoverFLAG || result.touch) && opts.arrows && opts.arrows !== 'always'; + var toggleControlsFLAG = (MS_POINTER && !hoverFLAG || result.touch) && opts.arrows; if (result.moved || (toggleControlsFLAG && result.pos !== result.newPos && !result.control)) { var index = getIndexByPos(result.newPos, measures.w, opts.margin, repositionIndex); diff --git a/lib/web/mage/gallery/gallery.js b/lib/web/mage/gallery/gallery.js index a7fa1109edf55..95fbf04da2b3c 100644 --- a/lib/web/mage/gallery/gallery.js +++ b/lib/web/mage/gallery/gallery.js @@ -66,6 +66,9 @@ define([ '_focusSwitcher' ); + if (this.isTouchEnabled) { + config.options.arrows = false; + } config.options.swipe = true; this.config = config; @@ -208,11 +211,6 @@ define([ _.extend(config, config.options); config.options = undefined; - - if (this.isTouchEnabled) { - config.arrows = false; - } - config.click = false; config.breakpoints = null; settings.currentConfig = config; diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index f1992084fe9d8..6194e56cb987e 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -76,32 +76,6 @@ vertical-align: @va; } -.fotorama__zoom-in, -.fotorama__zoom-out { - display: none; -} -.fotorama__fullscreen { - .fotorama__zoom-in, - .fotorama__zoom-out { - position: absolute; - width: 50px; - height: 50px; - display: block; - margin-left: 20px; - z-index: 1000; - } - .fotorama__zoom-out { - top: 51px; - &:extend(.fotorama-sprite); - background-position: 0 (-@size-fotorama-block) !important; - } - .fotorama__zoom-in { - top: 0; - &:extend(.fotorama-sprite); - background-position: 0 0 !important; - } -} - .fotorama__zoom-in, .fotorama__zoom-out { display: none; @@ -116,44 +90,23 @@ display: block; margin-left: 20px; cursor: pointer; - } - .fotorama__zoom-out { - top: 51px; - &:extend(.fotorama-sprite); - background-position: 0 (-@size-fotorama-block) !important; - } - .fotorama__zoom-in { - top: 0; - &:extend(.fotorama-sprite); - background-position: 0 0 !important; - } -} - -.fotorama__zoom-in, -.fotorama__zoom-out { - display: none; -} -.fotorama__fullscreen { - .fotorama__zoom-in, - .fotorama__zoom-out { - position: absolute; - width: 50px; - height: 50px; - display: block; - margin-left: 20px; - cursor: pointer; } .fotorama__zoom-out { top: 51px; &:extend(.fotorama-sprite); background-position: 0 (-@size-fotorama-block) !important; + &.fotorama__zoom-out--disabled { + display: none + } } - .fotorama__zoom-in { top: 0; &:extend(.fotorama-sprite); background-position: 0 0 !important; + &.fotorama__zoom-in--disabled { + display: none + } } } diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index ba618e8f631c7..67ebd12efcbd7 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -22,6 +22,8 @@ define([ imageZoommable = 'fotorama__img--zoommable', zoomInLoaded = 'zoom-in-loaded', zoomOutLoaded = 'zoom-out-loaded', + zoomInDisabled = 'fotorama__zoom-in--disabled', + zoomOutDisabled = 'fotorama__zoom-out--disabled', hideMagnifier, behaveOnHover, dragFlag, @@ -78,6 +80,18 @@ define([ toggleZoomable($image, false); } + function disableZoom(flag) { + if (flag) { + $(zoomInButtonSelector).addClass(zoomInDisabled); + $(zoomOutButtonSelector).addClass(zoomOutDisabled); + zoomShown = false; + } else { + $(zoomInButtonSelector).removeClass(zoomInDisabled); + $(zoomOutButtonSelector).removeClass(zoomOutDisabled); + zoomShown = true; + } + } + function toggleZoomButtons($image) { var path = $image.attr('src'), imgSize; @@ -85,19 +99,10 @@ define([ if (path) { imgSize = getImageSize(path); - if (imgSize.rh > $image.parent().height() || imgSize.rw > $image.parent().width()) { - $(zoomInButtonSelector).show(); - $(zoomOutButtonSelector).show(); - zoomShown = true; - } else { - $(zoomInButtonSelector).hide(); - $(zoomOutButtonSelector).hide(); - zoomShown = false; - } + imgSize.rh > $image.parent().height() || imgSize.rw > $image.parent().width() ? + disableZoom(false) : disableZoom(true); } else { - $(zoomInButtonSelector).hide(); - $(zoomOutButtonSelector).hide(); - zoomShown = false; + disableZoom(true); } } From 0d236a8719e96c44c940c0036076eafdbcf64f47 Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Wed, 11 Nov 2015 10:52:53 +0300 Subject: [PATCH 058/214] JS-291: Double click on image has to initiate zoom --- lib/web/magnifier/magnify.js | 64 +++++++++++++----------------------- 1 file changed, 23 insertions(+), 41 deletions(-) diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index d40a941a66776..2984245feddab 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -167,7 +167,7 @@ define([ } } - function zoomIn(e) { + function zoomIn(e, xStep, yStep) { var $image, imgOriginalSize, imageWidth, @@ -195,27 +195,27 @@ define([ e.preventDefault(); if (imageWidth >= imageHeight) { - zoomWidthStep = Math.ceil(imageWidth * parseFloat(config.magnifierOpts.fullscreenzoom) / 100); + zoomWidthStep = xStep || Math.ceil(imageWidth * parseFloat(config.magnifierOpts.fullscreenzoom) / 100); widthResult = imageWidth + zoomWidthStep; if (widthResult >= imgOriginalSize.rw) { widthResult = imgOriginalSize.rw; - zoomWidthStep = widthResult - imageWidth; + zoomWidthStep = xStep || widthResult - imageWidth; allowZoomIn = false; } heightResult = widthResult / ratio; - zoomHeightStep = heightResult - imageHeight; + zoomHeightStep = yStep || heightResult - imageHeight; } else { - zoomHeightStep = Math.ceil(imageHeight * parseFloat(config.magnifierOpts.fullscreenzoom) / 100); + zoomHeightStep = yStep || Math.ceil(imageHeight * parseFloat(config.magnifierOpts.fullscreenzoom) / 100); heightResult = imageHeight + zoomHeightStep; if (heightResult >= imgOriginalSize.rh) { heightResult = imgOriginalSize.rh; - zoomHeightStep = heightResult - imageHeight; + zoomHeightStep = yStep || heightResult - imageHeight; allowZoomIn = false; } widthResult = heightResult * ratio; - zoomWidthStep = widthResult - imageWidth; + zoomWidthStep = xStep || widthResult - imageWidth; } if (imageWidth >= imageHeight && imageWidth !== imgOriginalSize.rw) { @@ -237,7 +237,7 @@ define([ return false; } - function zoomOut(e) { + function zoomOut(e, xStep, yStep) { var $image, widthResult, heightResult, @@ -263,15 +263,15 @@ define([ e.preventDefault(); if (imageWidth >= imageHeight) { - zoomWidthStep = Math.ceil(imageWidth * parseFloat(config.magnifierOpts.fullscreenzoom) / 100); + zoomWidthStep = xStep || Math.ceil(imageWidth * parseFloat(config.magnifierOpts.fullscreenzoom) / 100); widthResult = imageWidth - zoomWidthStep; heightResult = widthResult / ratio; - zoomHeightStep = imageHeight - heightResult; + zoomHeightStep = yStep || imageHeight - heightResult; } else { - zoomHeightStep = Math.ceil(imageHeight * parseFloat(config.magnifierOpts.fullscreenzoom) / 100); + zoomHeightStep = yStep || Math.ceil(imageHeight * parseFloat(config.magnifierOpts.fullscreenzoom) / 100); heightResult = imageHeight - zoomHeightStep; widthResult = heightResult * ratio; - zoomWidthStep = imageWidth - widthResult; + zoomWidthStep = xStep || imageWidth - widthResult; } fitIntoParent = function () { @@ -465,42 +465,21 @@ define([ } /** - * Sets image size to original + * Sets image size to original or fit in parent block * @param e - event object */ - function setImageFullSize(e) { - var imgOriginalSize = getImageSize($image[0].src), - zoomWidthStep = imgOriginalSize.rw - $image.width(), - zoomHeightStep = imgOriginalSize.rh - $image.height(), - ratio = $image.width() / $image.height(), - dimentions = {}; - - if (zoomShown && allowZoomIn) { - if (!$image.hasClass(imageZoommable)) { - toggleZoomable($image, true); - }; - - if (ratio >= 1) { - dimentions = { - width: imgOriginalSize.rw, - height: 'auto' - }; - } else { - dimentions = { - height: imgOriginalSize.rh, - width: 'auto' - }; - } - - checkFullscreenImagePosition($image, dimentions, -zoomWidthStep, -zoomHeightStep); + function dblClickHandler(e) { + var imgOriginalSize = getImageSize($image[0].src); - allowZoomIn = false; - allowZoomOut = true; + if (allowZoomIn) { + zoomIn(e, imgOriginalSize.rw - $image.width(), imgOriginalSize.rh - $image.height()); + } else { + zoomOut(e, imgOriginalSize.rw - $imageContainer.width(), imgOriginalSize.rh - $imageContainer.height()); } } $image.unbind('dblclick'); - $image.dblclick(setImageFullSize); + $image.dblclick(dblClickHandler); toggleZoomButtons($image); @@ -524,6 +503,9 @@ define([ startY = e.clientY || e.originalEvent.clientY; isDragActive = true; + if (!endX) { + endX = $image.offset().left; + } } }); From e62f8a0dc402a2799b8c20695b44210f071ae7c0 Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Wed, 11 Nov 2015 11:37:42 +0300 Subject: [PATCH 059/214] JS-295: when focus is outside the gallery, gallery should not react on keyboard actions --- lib/web/mage/gallery/gallery.html | 16 ++--- lib/web/magnifier/magnify.js | 101 +++++++++++++++++------------- 2 files changed, 64 insertions(+), 53 deletions(-) diff --git a/lib/web/mage/gallery/gallery.html b/lib/web/mage/gallery/gallery.html index 242b7aa7fce56..47e928af14655 100644 --- a/lib/web/mage/gallery/gallery.html +++ b/lib/web/mage/gallery/gallery.html @@ -8,14 +8,14 @@
-
-
+
+
-
+ aria-label="Next" data-gallery-role="arrow"> +
@@ -25,14 +25,14 @@
-
-
+
+
-
-
+
+
diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index d40a941a66776..fdf39a94b8f61 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -549,57 +549,68 @@ define([ } }); + /** + * Replaces original navigations with better one + * @param e - event object + */ var keyboardNavigation = function (e) { - var step = 40, - isFullScreen = $(gallerySelector).data('fotorama').fullScreen, - initVars = function () { - imagePosX = $(fullscreenImageSelector, $gallery).offset().left; - imagePosY = $(fullscreenImageSelector, $gallery).offset().top; - }; - - if (isFullScreen) { - imagePosX = $(fullscreenImageSelector, $(gallerySelector)).offset().left; - imagePosY = $(fullscreenImageSelector, $(gallerySelector)).offset().top; - } - - if (e.keyCode === 39) { + if ($(':focus').attr('data-gallery-role')) { + var step = 40, + isFullScreen = $(gallerySelector).data('fotorama').fullScreen, + initVars = function () { + imagePosX = $(fullscreenImageSelector, $gallery).offset().left; + imagePosY = $(fullscreenImageSelector, $gallery).offset().top; + }; + if (isFullScreen) { - initVars(); - shiftImage(-step, 0, e); - } else { - $(gallerySelector).data('fotorama').show('>'); + imagePosX = $(fullscreenImageSelector, $(gallerySelector)).offset().left; + imagePosY = $(fullscreenImageSelector, $(gallerySelector)).offset().top; } - } - - if (e.keyCode === 38) { - - if (isFullScreen) { - initVars(); - shiftImage(0, step, e); - } else { - $(gallerySelector).data('fotorama').show('<'); + + if (e.keyCode === 39) { + + if (isFullScreen) { + initVars(); + shiftImage(-step, 0, e); + } else { + $(gallerySelector).data('fotorama').show('>'); + } } - } - - if (e.keyCode === 37) { - - if (isFullScreen) { - initVars(); - shiftImage(step, 0, e); - } else { - $(gallerySelector).data('fotorama').show('<'); + + if (e.keyCode === 38) { + + if (isFullScreen) { + initVars(); + shiftImage(0, step, e); + } else { + $(gallerySelector).data('fotorama').show('<'); + } } - } - - if (e.keyCode === 40) { - e.preventDefault(); - - if (isFullScreen) { - initVars(); - shiftImage(0, -step, e); - } else { - $(gallerySelector).data('fotorama').show('>'); + + if (e.keyCode === 37) { + + if (isFullScreen) { + initVars(); + shiftImage(step, 0, e); + } else { + $(gallerySelector).data('fotorama').show('<'); + } + } + + if (e.keyCode === 40) { + e.preventDefault(); + + if (isFullScreen) { + initVars(); + shiftImage(0, -step, e); + } else { + $(gallerySelector).data('fotorama').show('>'); + } + } + + if (e.keyCode === 27 && isFullScreen) { + $(gallerySelector).data('fotorama').cancelFullScreen(); } } From 6db5ff91e80b37a3f7749e5dbacce07d7a3d8d1c Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Wed, 11 Nov 2015 12:52:02 +0300 Subject: [PATCH 060/214] JS-294: On page reload keyboard up/down arrows shifts image preview in galley - they have to scroll the entire page --- lib/web/magnifier/magnify.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index d40a941a66776..cbd0689e9b53c 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -587,19 +587,15 @@ define([ if (isFullScreen) { initVars(); shiftImage(step, 0, e); - } else { - $(gallerySelector).data('fotorama').show('<'); } } if (e.keyCode === 40) { - e.preventDefault(); if (isFullScreen) { + e.preventDefault(); initVars(); shiftImage(0, -step, e); - } else { - $(gallerySelector).data('fotorama').show('>'); } } From c4a1bd394320219d23aa943992d7f80c1750f2f5 Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Wed, 11 Nov 2015 12:55:39 +0300 Subject: [PATCH 061/214] JS-294: On page reload keyboard up/down arrows shifts image preview in galley - they have to scroll the entire page - code styling --- lib/web/magnifier/magnify.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index cbd0689e9b53c..57655c5479369 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -593,7 +593,7 @@ define([ if (e.keyCode === 40) { if (isFullScreen) { - e.preventDefault(); + e.preventDefault(); initVars(); shiftImage(0, -step, e); } From 5c13c00e9aaaffea1240d0ffbc6cab0a36cc949e Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Thu, 12 Nov 2015 12:09:32 +0200 Subject: [PATCH 062/214] JS-286: Fix drag in fullscreen on mobile devices --- lib/web/magnifier/magnify.js | 26 +++++++++++++++++--------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index d3e62557a207c..dff9d64574e6b 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -406,14 +406,17 @@ define([ imagePosX, imagePosY, touch, + swipeSlide, $gallery = $(gallerySelector), $image = $(fullscreenImageSelector, $gallery), $imageContainer = $('[data-gallery-role="stage-shaft"] [data-active="true"]'), gallery = $gallery.data('fotorama'); - var swipeSlide = _.throttle(function (direction) { - $(gallerySelector).data('fotorama').show(direction) - }, 500, {trailing: false}); + swipeSlide = _.throttle(function (direction) { + $(gallerySelector).data('fotorama').show(direction); + }, 500, { + trailing: false + }); function shiftImage(dx, dy, e) { var top = +imagePosY + dy, @@ -434,6 +437,7 @@ define([ (e.type === 'mousemove' || e.type === 'touchmove' || e.type === 'pointermove' || e.type === 'MSPointerMove'))) { endX = null; swipeSlide('<'); + return; } @@ -478,7 +482,7 @@ define([ function dblClickHandler(e) { var imgOriginalSize = getImageSize($image[0].src); - if (allowZoomIn) { + if (allowZoomIn) { zoomIn(e, imgOriginalSize.rw - $image.width(), imgOriginalSize.rh - $image.height()); } else { zoomOut(e, imgOriginalSize.rw - $imageContainer.width(), imgOriginalSize.rh - $imageContainer.height()); @@ -492,7 +496,7 @@ define([ toggleZoomButtons($image); } - $image.off(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown') + $image.off(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown'); $image.on(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown', function (e) { if (gallery.fullScreen) { e.preventDefault(); @@ -532,8 +536,8 @@ define([ if (isTouchEnabled) { touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; - e.clientX = touch.pageX; - e.clientY = touch.pageY; + clientX = touch.pageX; + clientY = touch.pageY; } shiftImage(clientX - startX, clientY - startY, e); @@ -758,8 +762,12 @@ define([ .on('fotorama:fullscreenexit', function (e, fotorama) { resetVars($(fullscreenImageSelector)); hideMagnifier(); - $(zoomInButtonSelector).css({display:''}); - $(zoomOutButtonSelector).css({display:''}); + $(zoomInButtonSelector).css({ + display: '' + }); + $(zoomOutButtonSelector).css({ + display: '' + }); }); }); From 730ef3e5db5886b9f493662a58f864572e9b1023 Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Thu, 12 Nov 2015 12:30:26 +0200 Subject: [PATCH 063/214] JS-287: Fix arrows appearance on mobile devices --- lib/web/mage/gallery/gallery.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/lib/web/mage/gallery/gallery.js b/lib/web/mage/gallery/gallery.js index 95fbf04da2b3c..a92533c69ed87 100644 --- a/lib/web/mage/gallery/gallery.js +++ b/lib/web/mage/gallery/gallery.js @@ -66,8 +66,13 @@ define([ '_focusSwitcher' ); + /*turn off arrows for touch devices*/ if (this.isTouchEnabled) { config.options.arrows = false; + + if (config.fullscreen) { + config.fullscreen.arrows = false; + } } config.options.swipe = true; this.config = config; @@ -211,6 +216,7 @@ define([ _.extend(config, config.options); config.options = undefined; + config.click = false; config.breakpoints = null; settings.currentConfig = config; @@ -230,7 +236,8 @@ define([ settings = this.settings, config = this.config, startConfig = this.startConfig, - triggeredBreakpoints = 0; + triggeredBreakpoints = 0, + isTouchEnabled = this.isTouchEnabled; if (_.isObject(settings.breakpoints)) { pairs = _.pairs(settings.breakpoints); @@ -249,6 +256,14 @@ define([ if (settings.isFullscreen) { settings.api.updateOptions(settings.fullscreenConfig, true); } + + if (isTouchEnabled) { + settings.breakpoints[pair[0]].options.arrows = false; + if (settings.breakpoints[pair[0]].options.fullscreen) { + settings.breakpoints[pair[0]].options.fullscreen.arrows = false; + } + } + settings.api.updateOptions(settings.breakpoints[pair[0]].options, true); $.extend(true, config, settings.breakpoints[pair[0]]); settings.activeBreakpoint = settings.breakpoints[pair[0]]; From f6e938a74c86e729d9e8eb7284b40e149519a063 Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Thu, 12 Nov 2015 13:32:01 +0300 Subject: [PATCH 064/214] JS-294: On page reload keyboard up/down arrows shifts image preview in galley - they have to scroll the entire page - remove gallery action on keyboard up arrow --- lib/web/magnifier/magnify.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index fd34577d42146..3763126d01153 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -574,8 +574,6 @@ define([ if (isFullScreen) { initVars(); shiftImage(0, step, e); - } else { - $(gallerySelector).data('fotorama').show('<'); } } From 7dff945f113c6df07eef657f4087104ce2ee2f81 Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Thu, 12 Nov 2015 13:39:01 +0300 Subject: [PATCH 065/214] JS-294: On page reload keyboard up/down arrows shifts image preview in galley - they have to scroll the entire page - exit fullscreen on "esc" button --- lib/web/magnifier/magnify.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index 3763126d01153..11d52a0ea9575 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -545,14 +545,14 @@ define([ * @param e - event object */ var keyboardNavigation = function (e) { + var step = 40, + isFullScreen = $(gallerySelector).data('fotorama').fullScreen, + initVars = function () { + imagePosX = $(fullscreenImageSelector, $gallery).offset().left; + imagePosY = $(fullscreenImageSelector, $gallery).offset().top; + }; if ($(':focus').attr('data-gallery-role')) { - var step = 40, - isFullScreen = $(gallerySelector).data('fotorama').fullScreen, - initVars = function () { - imagePosX = $(fullscreenImageSelector, $gallery).offset().left; - imagePosY = $(fullscreenImageSelector, $gallery).offset().top; - }; if (isFullScreen) { imagePosX = $(fullscreenImageSelector, $(gallerySelector)).offset().left; @@ -595,10 +595,10 @@ define([ shiftImage(0, -step, e); } } + } - if (e.keyCode === 27 && isFullScreen) { - $(gallerySelector).data('fotorama').cancelFullScreen(); - } + if (e.keyCode === 27 && isFullScreen) { + $(gallerySelector).data('fotorama').cancelFullScreen(); } }; From 2d08808252e56b586eb3ba161a94c9716e02a2c1 Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Thu, 12 Nov 2015 14:13:15 +0200 Subject: [PATCH 066/214] JS-306: Fix height of thumbnails for mobile devices --- lib/web/fotorama/fotorama.js | 12 +++++++++--- lib/web/mage/gallery/gallery.less | 2 ++ 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/lib/web/fotorama/fotorama.js b/lib/web/fotorama/fotorama.js index 803a3f1e84a6f..28a9fdf6fec8f 100644 --- a/lib/web/fotorama/fotorama.js +++ b/lib/web/fotorama/fotorama.js @@ -3213,7 +3213,7 @@ fotoramaVersion = '4.6.4'; that.resize = function (options) { if (!data) return this; - +console.log('RESIZEEE') var time = arguments[1] || 0, setFLAG = arguments[2]; @@ -3266,12 +3266,18 @@ fotoramaVersion = '4.6.4'; $nav.height(opts.thumbheight + opts.thumbmargin * 2); } + if (opts.navdir === 'horizontal') { + if (o_nav === 'dots') { + $nav.height('auto'); + } + } + if (opts.navdir === 'vertical' && that.fullScreen) { $stage.css('height', $(window).height()); } if (opts.navdir === 'horizontal' && that.fullScreen) { - $stage.css('height', $(window).height() - (opts.thumbheight + opts.thumbmargin * 2)); + $stage.css('height', $(window).height() - $nav.height()); } if (o_nav) { @@ -3344,7 +3350,7 @@ fotoramaVersion = '4.6.4'; if (!this.inProgress) { this.count++; this.inProgress = this.count > this.threshold; - } + } }, end: function(){ if(this.inProgress) { diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index 6194e56cb987e..c3bfa4ac521ed 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -644,6 +644,8 @@ } .fotorama__fullscreen-icon, +.fotorama__zoom-out, +.fotorama__zoom-in, .fotorama__video-close { z-index: @z-index-10; } From 08cf1cac5af8319719f3537bc88d8910a1166b57 Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Fri, 13 Nov 2015 13:31:49 +0200 Subject: [PATCH 067/214] JS-307: Fix close of fullscreen on Enter when keyboard navigating --- lib/web/fotorama/fotorama.js | 18 +++++++----- lib/web/mage/gallery/gallery.less | 49 +++++++++++++++++++++++-------- 2 files changed, 47 insertions(+), 20 deletions(-) diff --git a/lib/web/fotorama/fotorama.js b/lib/web/fotorama/fotorama.js index 28a9fdf6fec8f..d1abeea940521 100644 --- a/lib/web/fotorama/fotorama.js +++ b/lib/web/fotorama/fotorama.js @@ -3213,7 +3213,7 @@ fotoramaVersion = '4.6.4'; that.resize = function (options) { if (!data) return this; -console.log('RESIZEEE') + var time = arguments[1] || 0, setFLAG = arguments[2]; @@ -3488,10 +3488,8 @@ console.log('RESIZEEE') that.toggleFullScreen(); } else if ($videoPlaying) { target === videoClose && unloadVideo($videoPlaying, true, true); - } else { - if ($target.parent().data('active') && !$fotorama.hasClass(fullscreenClass)) { - that.requestFullScreen(); - } + } else if (!$fotorama.hasClass(fullscreenClass)) { + that.requestFullScreen(); } } @@ -3675,8 +3673,14 @@ console.log('RESIZEEE') }); addEnterUp(fullscreenIcon, function () { - that.requestFullScreen(); - $(fullscreenIcon).focus(); + if ($fotorama.hasClass(fullscreenClass)) { + that.cancelFullScreen(); + $stageShaft.focus(); + } else { + that.requestFullScreen(); + $(fullscreenIcon).focus(); + } + }); addFocusOnControls(fullscreenIcon); diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index c3bfa4ac521ed..835a9cd27843e 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -93,7 +93,7 @@ } .fotorama__zoom-out { - top: 51px; + top: 53px; &:extend(.fotorama-sprite); background-position: 0 (-@size-fotorama-block) !important; &.fotorama__zoom-out--disabled { @@ -101,7 +101,7 @@ } } .fotorama__zoom-in { - top: 0; + top: 2px; &:extend(.fotorama-sprite); background-position: 0 0 !important; &.fotorama__zoom-in--disabled { @@ -155,21 +155,44 @@ } } +.fotorama__fullscreen-icon:focus, +.fotorama__zoom-out:focus, +.fotorama__zoom-in:focus { + box-shadow:@focus__box-shadow; +} + .fotorama__arr:focus:after, -.fotorama__fullscreen-icon:focus:after, -.fotorama__nav__frame:focus .fotorama__dot:after, -.fotorama__nav__frame:focus .fotorama__thumb:after, -.fotorama__zoom-out:focus:after, -.fotorama__zoom-in:focus:after, -.fotorama__stage__shaft:focus .fotorama__stage__frame.fotorama__active:after { - background-color: rgba(0, 175, 234, .5); +.fotorama__stage__shaft:focus:after, +.fotorama__nav__frame:focus .fotorama__thumb:after { + box-shadow: @focus__box-shadow; border-radius: inherit; content: ''; - height: 100%; position: absolute; - width: 100%; - left:0; - top:0; + left: 3px; + top: 3px; + bottom: 3px; + right: 3px; + z-index: 10; +} +.fotorama__nav__frame:focus{ + .fotorama__thumb:after { + left: 0; + top: 0; + bottom: 0; + right: 0; + } + .fotorama__thumb { + overflow: inherit; + } +} + +.fotorama__nav__frame:nth-child(2):focus .fotorama__thumb:after{ + left: 1px; +} + + +.fotorama__nav__frame:last-child:focus .fotorama__thumb:after{ + right: 1px; } .fotorama-transform-disabled { From 796ca4b4179fcd654753b9b673dc513c7b75a65f Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Fri, 13 Nov 2015 19:03:17 +0200 Subject: [PATCH 068/214] JS-307:Fix close of fullscreen on Enter when keyboard navigating --- lib/web/fotorama/fotorama.js | 8 ++++---- lib/web/magnifier/magnify.js | 7 +------ 2 files changed, 5 insertions(+), 10 deletions(-) diff --git a/lib/web/fotorama/fotorama.js b/lib/web/fotorama/fotorama.js index d1abeea940521..7d2509ad8c9c5 100644 --- a/lib/web/fotorama/fotorama.js +++ b/lib/web/fotorama/fotorama.js @@ -2792,7 +2792,7 @@ fotoramaVersion = '4.6.4'; addEnterUp($stageShaft[0], function () { if (!$fotorama.hasClass(fullscreenClass)) { that.requestFullScreen(); - $(fullscreenIcon).focus(); + $fullscreenIcon.focus(); } }); } @@ -3273,11 +3273,11 @@ fotoramaVersion = '4.6.4'; } if (opts.navdir === 'vertical' && that.fullScreen) { - $stage.css('height', $(window).height()); + $stage.css('height', $WINDOW.height()); } if (opts.navdir === 'horizontal' && that.fullScreen) { - $stage.css('height', $(window).height() - $nav.height()); + $stage.css('height', $WINDOW.height() - $nav.height()); } if (o_nav) { @@ -3678,7 +3678,7 @@ fotoramaVersion = '4.6.4'; $stageShaft.focus(); } else { that.requestFullScreen(); - $(fullscreenIcon).focus(); + $fullscreenIcon.focus(); } }); diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index 6796502681e40..40088df93fb93 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -765,12 +765,7 @@ define([ .on('fotorama:fullscreenexit', function (e, fotorama) { resetVars($(fullscreenImageSelector)); hideMagnifier(); - $(zoomInButtonSelector).css({ - display: '' - }); - $(zoomOutButtonSelector).css({ - display: '' - }); + disableZoom(true); }); }); From d24005896a6e91e55e95264faabc00fcf7752083 Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Mon, 16 Nov 2015 12:50:58 +0300 Subject: [PATCH 069/214] JS-292: Zoom doesn't work smooth - drag event occurs on zoom in --- lib/web/mage/gallery/gallery.less | 2 +- lib/web/magnifier/magnify.js | 23 +++++++++++++++++------ 2 files changed, 18 insertions(+), 7 deletions(-) diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index 6194e56cb987e..fb612351c007a 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -1126,7 +1126,7 @@ cursor: pointer; max-width: none; max-height: none; - transition-property: width, height, top, left; + transition-property: width, height, bottom, right, top, left; } &.fotorama__img--draggable { cursor: move; diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index 11d52a0ea9575..c96c3f98ff49f 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -68,7 +68,9 @@ define([ width: '', height: '', top: '', - left: '' + left: '', + right: '', + bottom: '' }).removeClass(imageZoommable); } } @@ -166,8 +168,10 @@ define([ getLeftValue(left, widthStep, dimentions.width, containerWidth) : 0; settings = $.extend(dimentions, { + top: top, + bottom: top, left: left, - top: top + right: left }); $image.css(settings); @@ -476,16 +480,23 @@ define([ * @param e - event object */ function dblClickHandler(e) { - var imgOriginalSize = getImageSize($image[0].src); + var imgOriginalSize = getImageSize($image[0].src), + proportions; + + proportions = imgOriginalSize.rw / imgOriginalSize.rh; if (allowZoomIn) { zoomIn(e, imgOriginalSize.rw - $image.width(), imgOriginalSize.rh - $image.height()); } else { - zoomOut(e, imgOriginalSize.rw - $imageContainer.width(), imgOriginalSize.rh - $imageContainer.height()); + if (proportions > $imageContainer.width() / $imageContainer.height()) { + zoomOut(e, imgOriginalSize.rw - $imageContainer.width(), imgOriginalSize.rw / proportions); + } else { + zoomOut(e, imgOriginalSize.rw * proportions, imgOriginalSize.rh - $imageContainer.height()); + } } } - $image.unbind('dblclick'); + $image.unbind('dblclick', dblClickHandler); $image.dblclick(dblClickHandler); if (gallery.fullScreen) { @@ -552,7 +563,7 @@ define([ imagePosY = $(fullscreenImageSelector, $gallery).offset().top; }; - if ($(':focus').attr('data-gallery-role')) { + if ($(':focus').attr('data-gallery-role') || !$(':focus').length) { if (isFullScreen) { imagePosX = $(fullscreenImageSelector, $(gallerySelector)).offset().left; From cad6c23c746801edcb65c268b2e4a41f4cab1e99 Mon Sep 17 00:00:00 2001 From: Uladzislau Harbachou Date: Mon, 16 Nov 2015 20:08:44 +0300 Subject: [PATCH 070/214] JS-293: + - isn't see on dark background --- lib/web/mage/gallery/gallery.less | 32 ++++++++++++++++++++---------- lib/web/mage/gallery/gallery.png | Bin 27089 -> 13871 bytes 2 files changed, 21 insertions(+), 11 deletions(-) diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index 0d951897ebbc1..17a0c0e5c9c71 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -6,7 +6,7 @@ @fotorama-duration-time: 0.3s; @fotorama-arw-size: 95px; @fotorama_close_size: 30px; -@size-fotorama-block: 50px; +@size-fotorama-block: 80px; @fotorama-thumb-arrow: 30px; @fotorama-fullscreen-zoom-time: 0.3s; @@ -85,15 +85,14 @@ .fotorama__zoom-out { overflow: hidden; position: absolute; - width: 50px; - height: 50px; + width: @size-fotorama-block; + height: @size-fotorama-block; display: block; - margin-left: 20px; cursor: pointer; } .fotorama__zoom-out { - top: 53px; + top: 83px; &:extend(.fotorama-sprite); background-position: 0 (-@size-fotorama-block) !important; &.fotorama__zoom-out--disabled { @@ -263,10 +262,8 @@ .fotorama-sprite { &:extend(.fotorama-print-background); - background: url('gallery.png') no-repeat; - //@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { - // background: url('fotorama@2x.png') no-repeat; - //} + background-image: url('gallery.png'); + background-repeat: no-repeat; } .fotorama-print-background { @@ -734,8 +731,6 @@ .fotorama__zoom-in { &:focus { &:extend(.fotorama-focus); - border-radius: 50%; - } } @@ -1273,3 +1268,18 @@ body.fotorama__fullscreen { display: none !important; } } + +.fotorama__arr, +.fotorama__fullscreen-icon, +.fotorama__zoom-in, +.fotorama__zoom-out { + background-color: rgba(255, 255, 255, 0.3); + transition: background-color 0.3s ease-in-out; + &:hover { + background-color: rgba(255, 255, 255, 0.5); + } + &:active { + background-color: #d5d5d5; + } +} + diff --git a/lib/web/mage/gallery/gallery.png b/lib/web/mage/gallery/gallery.png index 8fa060478295ea6e9d4e8b0155a05ec7add98f53..a5077dd7cd7f7c13e5f5ff63614b6a40b4a4241a 100644 GIT binary patch literal 13871 zcmcJ02|Sf+*Y_4hgCWTj*^$b;=Rq0v7(zlNk_?;3xXrVWu_W`55Xul`o+(W-rYI#- zrZPw7>AQ3~z2|wJ&NYpwrU_g%1t`f=7B{5v2J2&=LZSrYYY4sWB!7n}sijISpjj4mPA)N*xnAjN6pvqQ;W;9Kjp^2;AOWH9AguTyP zTgO31O;y&|#!A|7bBwf$l`W8lK#nQ6*cuvNra3^3XlCZta>7%UwZc$y6FK3tXf>Fc zEs1u?T*-}2({fYSHg>ygj5iThkcS>~kp&Z2(Hsn+E>@P-_OdQ=!r$kW1=pLmWrU&M zhd5l86aH;eI%*nFk`0{(MN1>4jA3v%6oZk5qtF-(ToQ_a!4Wbr@E0QmN6DfwvIs2n z#~)#^8r{THR+CKqu@?9wCw$4l!B$pA#@X3f+8HTrLpPIwdbFha`S)!M<( zMatS< z{Bkc=RzH`pcc3_dWBgFaFGt&JyV}xZG->uWj&x%h#R+UvH`0{>453it*=B4e-!3LZfrA>d>&$DO2Wgyq7)R7g2$0zls^%}q2M?o zo{EJN;dn9y4kwVva4H!_#^T9v5(@VVMSR~R9*M!jPzVx&io$G)5y^N800stw#1k+G zH1$tbBjSlfB+xU8f+TzwBjBmv5=NrJkR%)$_Mc*#7~I4W3>@f>7{J3}cnThkAYn-q zB#DIiXOdJT42?lyC`2@t{0}4%L>L*5Bw#6U0*KWAL=sCtQ!oS=29LtwaA?$jza{}o zB#@~n0vUv zF@IrCBnn2M!YObp;YS3*kw_#M5`YqqAz|S7Ki3eFNLi^fq!3&y91=+e8RK^( zkYFS{9!DhsZ2g6QlBfV}AaW29nD6Jrk?qy*6KlvCEwc#}%Y2^(+HK$?m0kK5+IAX0xzWPZpxU!s8t z|AHC*wzBJNY~#}Pnkd6xsA0GjsAzd+ZxghLHRM+ zo&OIf`HuYG04($G*#7M^nMOAUCZcYd{Chzp`zsXxH)jLYk*vut%7MT2fKBjx-{>F8 z)ZcG`+IREvXVDEl{4CpP*1%$PP?RSGvV=k)qC?7Lg0{4=;F6xlV4}a-S@Z`S3xP5t4G?fIkEh z&Io}rLloH{J^~O39s;35AcGJ{J;T3#@mHgmIL@5R?KH|?Y@#C8y0{?Bhpc^oLLcSV$qsAGH$WFy|x$6)WV>S9A6ENd`(g@le+r+NMynB26eI1 zCTtLfNnNqC%H^*!*rGnGrmA8~jWdc~J$Ppkd_S^)2k#?uN3(Zd`s$nOX89~)Yw4EZ znj8mTtU|;lzRh@v>76W`P!YB&B7ac%A|*;`(Cz-la;Yrpi@~>u2=O5{{jBZ-0Y|^d z+U$t9){l|eCi?C{`hA=qS2QF{<(wofnyWHu(oKQ4p1~vd!SxEZ0uwAt9T%xU{a)>M z-$nf#q)((Kw+f!VzjmcMDnnC1mm?{haglR0WxbBo_tKF7nYjwacvDTcQA{%0oLX@Zt<`8h9eONna+Hc4gj^90y13VG)W3>c z+dCdG=XuYdQka>AiNKV@%avOMZRe|f$~vayxff0CPRY772w9g5y2$M(e5!W8%|U6_ z#`4u%c)$mdv zVYo@Ig>{VO5dS=!mpYIX^*Dg@2|+BD-!bjrS%bmlytW4no`HwrNqr&xC-ir)E_@8_ zpR(*Y7scPvIV1e`&1vjOZKM?s9pcUPL|LDMEI6vtg6TGRWuUUkhvB8LJMEfK@# zh`o??<QAYk zTn{kbYTA)1PO7m>P;XF7Bo*B3%!<4-sy+UN?yJ3UJ~M}ZukMyM-Ce_-EFJzjHtmj< zY_B)&-HprJAjM*buAlM)-x)!`cN~m=E5`t26nC)*D?W6g-#u^B zvgm$j3k`EI*2V4ot|ocUGfhiJ^pwRSXRb!Q_L1$Wf(F{DRb8Lj8YfT{0fz?ev^iN@+dWtxBAkVSNAV96dDw@2xxD+DKjJ?b~yN4q(Eri${oc9 zqhgtQft0Mw@R^J#VX>E**0G$*I#udvMo@c*0dB<=E z?U;QPchxiS?;&%3zu;gp0@{FbFw((Md4V=qo`MuYfNmRvuxx>YQ*i__;32;cWpM+y zn6CW!@JpHmf9C0VsxXk}ITS=pv!)IyX6QC-e`;$D3rts-kZf%k&TYv)t$B-?3~4=( zr51A2?a5Gu zd@`FYLsWD$nw^!^O2S4@Mbv_ulQRM;s@W4brgCP&7N@Qv7PBzw%3bbMxpv9Ya(w$8 z9&*96hgXvDT-@9xK_MX(n&KPL!v4~lvM+o2ysvm01S@^=iSiT=SCzR z$~?`8uln}-#DUghvrT*Z`};kg)YVyYiJkxS(u!MI;C@!tIRkzDYNHQD=3N&&zEYU! zifnx(dVOQ#Wg#J<4dm`R=x$=;b9s^IvO8sEi)G>7i_`t9jLdAe>RVd!ni?9iC8eZ_ zqobm5!XhG4%F4=yVq#*Z!IPc&#>7gei3r`IOE)9J!(S0=M3zx^>Z7N0#K+DZsg1oZ z5YC9YDKNMqNu$x;QOM+LCAzs-e%3tsm+z~-eQrx*##nubTKaM?dH-z%@0wBM!%D6| z>0;?;cS2JQNDkZ4jnn;45__F{Jty+YhZBlQth$^cBt`R54_jiomb0_7Zx|aJW8b=c zfs)wj4}2ad27*9#%I4x z7{U01QrjNTcl)OfrNrc#Zf9j>_5Rj&T(8@EW34-n!UYCj?cFwVr>SV2Jc}Hfwq&3qPZ;2BbZkB4%+r4 zW>XAJxkeus^$Q0Cy}RH(5wTl@dOkKG!7b~=wmS#ECYj*1fNae>tq4VMgd;;xHNVbp z-@f%K?J@Gt3vWSgq>=(ls)21U%P)UUJD)arbH?=UMTHY*E|#6*x+|%TNtF(yhVdcq z4h_DHw3%$rdb3wLK2Se_f7W@t6HZDvNCUfu28M?FSrb1Vd0#i1CwLt^G+FUlsO**E z5fiu!-5SW_Z+qyJKPsF&cGketQ85u?C7nAJZi}OfhPqG^_{X~ADIleApy)aUCdw{T zJ=H>?0GRKNtu(}!4nAR5I6qS_a$`K|nTpi5#MlD=+2%u02Zc|^Sfo z6wCMS1y07l3831}mQWn>=c85w;- znNttuB)@BKkJ=cL@jf@*glrwZ`D{nDBJbqH#cu%zwUf#IQJ>A<+;#LE&wmjRc=hVD z&!$u_L&JU~z;va|-S{g4;iN|mgj}My@&nW61ht!vcxL{gkrA^neze8Uzz*Jp3dwGV+ZBE$@i9c)~%=^X{o2)Yl)-7`k|~p-n+vew}vi z#%w^Dex=je$n$+RtJ&JGJa;-NaFd=$3M15YO0B#5Cc7(pQzVM`Gw|mI7n`qwtWm}@ zY(IT-N7~cy@bKvnv4Ciav(k|&g-TT#>Bwz*AZNVlN-4=8TIspDE%N~Vo^Tv0$>z<} z(fJr2z(AjNhYt=7t;s~gKO-$B>aOnOnVaasl6n&P{6rw7U8$wHMJJQxbJ{VN?fkQK zGUGrR;%GOjZ)m8H6cfv;5&L=-X4(0$c;*Z%XZDV8%YM~!{vVzrikmIEns*V6W?;o@!Im-%GvPX{=>c+aE*N1{kJ&x z?M(|5@`~eYO!)NF6<%F2dTnf~y3X`%U)Tih#;$|uAYd7q>uqRC4UUXVO})-&>;>oy z@kP$WKhP5*x{BqxN(ctNx8Y5o6`p;RlG>| z=U7rMtg|iO^Ps9~bpgbB_s#Sa}CJ{eH6@2kWOP@Fl@?MJt(70i z>m^<3;w)9%D>K+vg~r0+ZSnBcwJGmjIjavvNoR73WyQrCCj6WSoAwEh$wbfX6AqqS zc0ZfYytB}?(6+xWYJF{GLlbQ?SSUDl16S#(XKg(>X4O^F{Xk(V*H4mMGizR$JW{>T zqj%6qOECPg6YY~n0uOp+enMh>F!CgK+IOsUgLJp{N!Ktnw{O(se`Qg znNL&L!fa~S<^$W(jz1XvSUyYCza=tVS6Aou*{?-!;22S_#BwRcYs%$IMr?aE(_#Ed zlKt$RnP)r(=PfbJqA~1z_wF_@3fY_~n>=EZK03FyZCQ2I0R;VRac0-l5;1Eq&*g93 z`>@tcJg%9;*9$pi1;QR~>$)&-ecWHJaIX*L^|o&GPNqPn#R<5WJI?_CRauhTzeXk#6T+ISZGm`7w@{+82`W z_QQ@nooCn^A0O(vnP!xk;e0(r>U8JA(5rOj9)R@P;bZB2YVZJusUFX`CHTx?KjY)~c}n^@a@KKx_HH zbxXePQO2$8caTi_%xfMMKP#Nwxs@<{si`D>tJ0Dg`YGPSoW2sdOW7D&m z1Nch%;+2Er;xVRgh(`Bi_4sCe1Xcr|h4Pf{U}rz6HC0$xxbXR&{>mWQwIk~th+cZV zfI+>(T6Ru{_EfuLXNSfK&kzz4jjkO;qmP7V2_kIxMYZ#l&Qo3)!G1zhSE*($it1( zX?*G6X@N*y&GP7h##k9|t%g=v$5E~?#@=^~d#YUHhke7)FA((U8)Z~78JEa~Mx!%; zd5@r0ZQYh0K79B&(YoSG9>`qP<(Jy-JO&J)hW`E)+t!L2>BnjX*VSBCaSoOpE`cU{?XwGQ8d8;8LvG%@+5aSfwerG2yH?{Ha&PAZ*mX~? zHOEv=R^(Kt%4{DV9_Hp{n17nx+1VLWaJ?4q@cC8aRMl)t2ldVQb%)QLvc_Hu-Oejr zKGFzgo9Q0+DbLLywf6PvS2+8z=|>we^Ixakr>Yk$nM3c1-xr0$^OMTMlalm#Gnr2o znl^vfSRGODmPI0GuL7nxN4Ghv9z3yq)^m2aS?i|X)XT^3*9+fUT103&t`wd9ura)l z`K3|FYq9?{h=MXQdL`on121lv6<=x-KJ~h(YZ%xt-JsS>O5OgIOSaG>;rJ82<+g+M zH+P7@k{!>T)YQ}*0mR+oH9*l})mymy!dUUF0Z?-c4HI2lTzm=l(t%pi)1Tsx(8fFS z^{Z@cb-pd|0=x7!h9-pO+rCO6%<7g{;$6Ed9797wLuX~3#ydyn-WdqZPn7n`AEbSp zpXlm9jZj@(m#j&xIupTh4OjSWr0dTWOTHSq_`1SzY_fJ^ZOWjt+iqf-c z!rqe`Uje(9uqhvk*-PziQZW_PE+r>7H8EM#vl@RZ!-B2r~0 z0X4bqcUlO%J@U9l&VBy=XOJ}CRTRAAy=QGf|6F_gB~flqo#XSvmFo&Of>Up*a2DAM z#DG5@z{MqQyAH>rrG1^uEVCZVOEVV|vv=sWmD=>uX0mT{3myqfNWFOWBq- z>LhSJ{TMrxA`$mw$kOti*@Q-{Q5k`4IKH<>X`9Bzkz=v%gA&KDSrxulPnZI{{fXbu z#ca+PDZLWA)y1zHF^7^Ph~+V5$CsS}28H=U@rxS6eZnlqMa(RnZzo*7E~M}}FO|b1 zBcfelyx4xErR|CrhqBfK)1ijwL{TlBV($$vG%TwrqkJUa^9_iIna_>bYC7&;a(V8= zWT$#rG&fH{qpQe#&qKOKD@7kTRt$&`ULBy$jU5x-`k+a_4M2}K_O5F1V|zspEjC*f zwxy+|7tL3Tii!?CVN9}93oe=x1a)H%+I40yI_KlwTHIv*O6)Ik-Tv=baqbr%%hZVf*5Ca-_Hw>OkWrsb_>ro&6FDpy5+5Fk#$ z*=MeGOz5~I#O?Dt=R8DO+hbPvo;z#Ag`10OTwPuLwxP>Nn>%Z;gp`!$3qgqwAdWxI z(z<8rvHay8Grv-5mgyQ>q-B3wdV0F`>ngEQ-CWYOiYvC(?l43=W7*nxc7Z>j=i_B% zWsQ3{IW<`o_Rl6qM>{$!fBPZ<%B{KT7$RlQiBx&}SNZ6JZ_foJx5oE}+NOmBCJccl z0&~)QvF^YmAa%p*B@8dZ1RK|$2(818%E@`&4I;=L7H-YlciZbVkNBs|Q)vk~o!JYr zZ&705eg+p~8;TpxmyO(ZA02U?cAS}+*>O)Tu_Q&W)OxCFX*hALm`j~^zrX|A15#z6 zqJOJ!7>UI?$L>}XtU*a^Ic8s9U*G9A*KzhJ&t@kgZ>Hd7EPLObJ9i?yR|kYP5>V!^ zsfo>Z6WE6;mij^qO#_uIE8})boVnkrGTg_&_y(l8i?{hhauEeO<~zN4_wMbexqElm zzp5rBS-)Sc<--9nG1n#EtvlbU#=#8zJW6yO)Xq_8%)Gmvfraj^W3C1C_0=UlIk#_d>xsRq!2rn6jH{rZRnr_w z*BB5N*H7ioCoYLB=3hGc|fwV|+u2bgWg-meUPD89Ur%r_gn=WrM-j=JVC1gkrC!BMi={TKwl zC^dRt-?PiAG*?Vox+lx)Rh8@Peo$?W217wFTKo)Wp+oU^x|zu3Ko$=4soyU?0=Q+P zr3m}}V=gAGx8+Lf#GSGD`X z1L?|fgqdE&{ri^Ap!zfgO;oyhi!B@X&c=oYw__O08CEQIe*8VM68OFMo969Z?*R=0nQild!B+OxN z-GUoa=kK2@ypZ2D(K2#u{&So0;PTv<4VxxG2Q)(4E5TBvBnCPzTia3_2=X3MOD4g- z;a87@o>^nxG^qVZlC%8b+6OV0H|ezks0#;lMO>uqbjcyr)@A(x$z#T^OI*Hw!UpW( zDtY@IZu4Qf0tf-)pI#t~Oo4l4NOFFn;O3VwkHzUdX~%C^b6?t*TcSL;kS?~ZxOpd!^r`}n_%^6L%hRU*!)n(6C8-=C zvCE;vgoW>v=ixFyJ1`kdAFQutc-8c<>9*X;YtT4U;Ns^W^)Nbp`gBL|xk6LGpTE8+ zy=|lA+XULSegfyW?p_%)*r<3CC8qWK#HeSMYn2e5ZlVm-5$m%$HLYd1uTtb$)0a11y|cZHzQ*`-WV))f_WG3w3n&rUH-Au z$@qr`s#=>0_KERptcZdNpGK0z->LzJ@;nG$sCc=$5fKqF1+091=|R?P}UUVYkG5_3kC^KD@88krPDpLE8jIU4yr~Vma-{a!U_+Pd{ch z-Xy=hRUfljY5v0>)rODK;&e#b>_|s+vUrOC}`4rq05gBQNP=F~>?0m4%5R2}aVU zAPl^lpX^=ret=&jKj%(EQD;&xt0n+vT z!(a7@gn{!-fR=0M@i2jPd@=!*^#t_tmNPOk zx;c06zS-G1g%=3pG^d+{!00=6?3f7?z~3pjHUlhv`Zmt)4pr0J-NYn410=fL!iliC z1W+}0WS`C<;xD)hBboFfQ^68z*6P1pm?OzZtw|oed{GgZn z_Vdmqw#4Q$2N3nrl9EmGwtbKGo4+1k@9JH5Iv<*%!XwJ0r}fcj^EnV5SLzk4A+A2f>spgbHIZNGx+vP9qJiqE}Cun@q{ldV1bx8o?({x3f+o$PYAN)OH z{u-aNmj~e!l*0%yVaqErD`kKN27HUSV`?<{D34K*Ezd|Pw%~*ccO@GHkK%e_;j|Az zSKI|&eSw2FVxEHcVK^9nyYbjK-5kz!;@p!-21T|*@tP$nr%q~Abl}!L20;1@J?su; zvMv|j^ID7TKfWh%3wX@Q0A!hfEC-~IXY*%00|5da;_y5@AohM-9@5&6Y;8Dp!~D|+ zrI)8{;tp-Dzk?28@ipDLSMX8kMGLpTeIMtyr<#BF*3SR?QQ*~}KYdTAuU5x%h&^9N za%AmjadGiD!3WwP@S#u-5>6t?D)Al6;HlgO!Iwpd(qf|=m>6Ca>3B}t=;j){nH$q} z+Vfpq-xc*o{V`lqU`@UtlA*Ly__{u`j{uj2A0tK55RChS96R|KNfsQ`E_M#EZWF2gq<8 AhX4Qo literal 27089 zcmeHv2UJwcvi2tDqy!}k3P>D=oO4p55(Y$NfFZ*mIVe$7vZ8>LCQ!9K@f$O zrs^s1Hv#;-A|?dCNy84Iz#kG|%oA0#-0_33dr7L18fo2~i1tb~sE}Ob8|-BmxtFi%5&Yq($NEKR+Duq@X41 zW^E&VN>%;ma^Omi!_LFQRa!{M+uK{vTSO4;W-BBtB_$;UgA2jo0$_xIyRVA}(nr9> zo%4r~-{h#G+^yW~T|Mm4F6kwL^QL-R;o-V9DRR|KY+wCptR6 zul>vCb$0&c((WE=UI2ohkp6O}yP>ZuO6U~I9qs96g;MhZTjBiG?%h33q5ja$zaR<> z|D_-gdz*hC2h;NpK|uM~|AT3mo*&b`+td$L%L34(RoqZW544*h8to+i!(8=$(*?VV z%6Ic*=P|K&u||8lAD0#S>y$qX=MQNpRip<>9%I-7FbM%+5knZTYM8VzoDU`<4TE6` z`7!b@GIY?^_BOtMk^zSs!eP>INog?=Y#CT1|0)9mpVlHzKj!V+RIDHSCp6?{5P(@riV6seiHZmyMa5A9NE;C; z5i1*{q>Y&PcN6;a^gp)tQ}l1E1JOVHvo+cZi2p+=!f;_pNu-3R000h{sW3`R04a=; z6tEVvv9`2AqQq?AV!thfCG2kt>ABg1@PTx~8iU!3HCPM=mxKumONhcG;4pDXVPQ#_ zq=-69Tnw%T7lXl+e;fs{k6(!R+cKK=7}N0mvkt$T#%a`rKi~bsG`>4|SEQRe3gg1$ zIDYeCzej~1cJR|0zPmzcq!lJS$Xj6?1Ik)f=udb5c&y)N%KjK&|94gHz5TyU{m1gX z?NBcN%&Ghk^?lSo7UGV!@$g2vp_FXFar?W!J1x%6ql2`vcfkZB;O&0M{PU#03jg)l z_|K>S?c#-U`|l_Ls2T}K2nx6m8#lBw`|qBM-2=^zbai#Iw?bmHE9B*3{WGNhejt9^ zE|!e{hkJELdi|TmCbHLA`=1&cT-Z=p6ofAj#D0rD|69g}F{>YITiGF9Y*E(oLcgi) zw;TVbbcPg$NlIE;3P_;Dr37G7qE-S(m<>w65+))kEFxxul0pI>`9Id%-&wJD`~Qw_!FtNyVPgO8P59Zx6Bt0szPxrGLe@{zZ5C zm+60s7(b;0viv=m(SNqFttXY^W|3?aX8dSDW^5SA*A|QqN>+QeJ(6{$NIU!W-K?>@QVgABmU}N7W z{k7+pGfn@P382BAiPiIS=8q$SRfYPlnjd#TjSH05gnqBDVQCHfl>LX>e{AVLEErqd z{vz0D?AhLjYfp%<2kgUzjmDnseYp072z$UjT-a#r+1`h1Pl&Jw?8AkP#-8ncxb}ny zd%!+i*l6t8-iK>Xh_DCj!-b8;p6z|O_Jjy~z&>2qXzbbEhigxWum|kJg^k9Z?R~iR zga~`UK3v#n?AhLjYfp%<2kgUzjmDnseYp072z$UjT-a#r+1`h1Pl&Jw?8AkP#-8nc zxb}nyd%!+i*l6t8-iK>Xh_DCj!-b8;p6z|O_Jjy~z&>2qXzbbEhigxWum|kJg^k9Z z?R~iRga~`UK3v#n?AhLjYfp%<2kgUzjmDnseYp072z$UjT-a#r+1`h1Pl&Jw?8AkP z#-8ne3K!`g-&lci0bf($4Ze@Uz`ZLEe3u2gmF6iO2=Y4yK|!Gqw7v`ePD79<41#7X zAV~T)1TmoF&Nrw-5SOc#s*<5k@8?us^Mg~}O@SgwN2yC_6zL6U$_&#TZuI&&^Ho@M zIGnwZQ&8}vV70v5k zoJ-ZEJK4{SU^dse5*ZqS*E-^QLH~k<6tf^DFD3ug7Y#}c!4s|(lG&0)%#;j7Mx2*N z4ZkQ>sDG#@pyb^Q^LcwTr_FkfN#NqWJQk^>zH3@`LeLvLeb_xF3OWgrHmy)|D9u^^ z{p$tE3)dSQVk*wwzn40fJCucMRoMc4#!Z{zr?)L;q<3+(5#e!Z-d4P5jW$&2mm>@#<#>9crrGnIt18m~T{k%bdWYb}xKeszy0X04)lJ zL{hQi)N2yjQSwuT&G-uHH;L;h7H}OS7aFC6bXUskOJL#_D)Qn30gDC=gaJSmLO&5 zHja}uZMZlkJ@g8SvXwPE5+v7O^}Mke2N;(uBGJ+Jf*js8h#d8ShsgDsdzg-YpIX#J z+zYeKOA^daRW9+BAj+$Fu6jm}_C9#AmaUK;^tP6cI0$1d84Bq^Z>z|N!v)MGmEe;gOz*H8 z6Xudg@JR@`Tz4fgcRefQjX5Nhu157$#&14aLi*FX`Z(qeB_ajaSc3>$wH)9ivwn&- zrHtcWJj0j~g@HVG-(C?Xqvtkf`*FmJBQ)kn2KwcRdIaohcT8DMrAV6#nH6*=HjR}L zQQH+G#*b>XXvQs}AlfojwfmjT|^*4DhIzDo}ai;DEKI_$KKjEo*9CNhjnO*K&w z6I)OjOtq(?Sfo9^IQA5t4btXvY?@k9TMN$bv=iMiFfuBWV`m@cA~NP9h-4>L&g+st zLQ9&ZPrG8cZBYKq;%$HJC7FfKA4>_C#GNYQGIRxE3f!;M1qmuM9n9; zFTf;NjT%4QIBzpt_5NX6wUwgn!t!$C)cAPM3jnbqZ1YwPC(TFp?r_1AK~lfP28QZ2@Pt{3iHWaQ@wskJpVHB3<4w}`>i-xd zMaGZYZF=cEVycB7@+i`6H1@+q;44wb$Hx!6v|MD4xX=1z`~Cg<_w&w_J4wl*2cK^B z_L|A%-+ZCY)M_07DMq{S;vIHu{s!TnJ9qAR=E=k>u`DvH;cwr*)o|ix)8=~bTVP!M zx~FF?w-j<0MI3-)aXv+CPO;nLm=j(PCDOiCC4#VhbC*s-O>O%m4{Z#Jl?!?+;nH7G z;j=iJ0aPLoCRQ3$rayTV!6``%rxzvdHe`8}b2^Jq5K)vCm?(JGuNNU(dhU^4b9?&^ z23s?4f=K9#WYD1aVi9knvVBtHHJrz#IJ#8Bl0kU|1pJM2a>wW+r~15FA|oRoZBHre zYMrn4a@LYdvty`VW`Fg{FNh#;XMIXVSy`F2cy8RWtXB^O|45=?CZrLhhI0rv4R2{( zI*6=j5?`$I12tj&>gxqJh&gW;>Zizm{8&`U$?0?7;NalFk5A4$>M1fanc?#3*j?HKq7+#dFhbq1 zt5+X=toB}Two!a{Cmq*)K^^L?@n0LHq@p^1^X5(WxM1a@iLHs4Ntf{k-!=lpT1?fn zOQqeIa^5)Wf)lUJwRwx3m=vO9m95~0!{J659odIYq8ujlKR!p{>SuJ=85$TE$bg<5 zi{bm$@Q+zBL3zR!1j4SzlZuqxGq3sjUqqf|=&{s49^Yd7;M6p?w!+JjOPi~m!FWVA z&|BF2ohwr$ZI5*hGB9}CZLZGckbB7H7;c20%DMPZ%2kYzpI`~S-4R+8{NnC{Hu-}f zG0PzieL8x2`I)JyH4?`hug@Qftva&}nhy13tx@x>u+L@^rLl-PbQZJ7czw1INW6D% zC@U;1ELNPZu<__du~PetU){ZppgQ|cGJTYC{(=h$Z)d{D7;u$UR7|MxNAMsbN@h(a zDYtRq$=WDZN~7%nla*IDIAiCA>h3AH4%g#{u&bu0r}GJ#SHQ|}tVZ=CC-T+Hu036B zWHMA$eaU@Pix5&YHtsG~3MJhB*qFA#WFAULu_408H+u-We)KRk4b5Wn^7MPARQvwh zt}1$v9?q*PVh%g?Q>)iq@%UaORdlmKE>*C8#oVr$=~Fq&_p~)f{D21!Fv>BU5g*=R zrH`RLk$K8AAYdmiARr(WCoMO3CJ-FWSo+8?FZGJ_ko702cuX|)Tjuj8Cg>O#*5XfO zKEe%pW}zR;DCThUL}sqTn10tvWiI$U)J`gCwiE4!f(&^tl~q(!pshB}MB~g-z8|3s z!t;_Mq9&a+49yJ=NPce(0z{nGT(5w2uZwB9)5nJy8nFo%^asd#*aEiV8p;1%?z`s?*s9V1+uoW*;((x#mF%jHWu}IvQ*^OH<&dYE+F>x&$ z!OuznNv9S%jla4Mc?~%<#ko;!EkDu|v*>k%W|OUcVq>#k60nC7j{^}Vs|d+N6`(|P8JOHSV~aghOM1Ms^! zz}3{{9bu7nFtj5ZgCX4W9dJJ5={rrec@cc!&tELfgWBt3QpcEXLfM+DVKySmU z3LYNb`KI&JA1O-_s5R@fsl~UbG-TzD0_P*?-3kPgW1Y5djNCgR;0D1`RA`fFvWP`)SWAWM~j-=#F{Kw zq}+}^4cy(S!(%^r;)ELrKRZ2P-4XnPf;;?TVqz%Z=xxo`*@N+iPn(->y#avEL!W>t z>V6)o3#`o$Fjk?@zg4W6^!fr__qFY9S_kO*q-v|0y1IIdWnU#geoT;+fb`e_txu6c zwcm8XE=MO?6W1=cnbmbmp0M^nWc6(}l$qDQ+>!5&rE+Aw7@ClmL(eBFYUnf880}1} zMsSFnFdlf7Qw7FnCZ6k7t7dfMKi*cex1XLkAGq!LKJM7b!ZKyD#)FX!@4kNh>Wdq! z=mJl=1%eSPSY4n-M8Menm`c|Jcx&Ea4al6NFWOj?W#P!r}xhAL)QmYO?ckUuFMkPD%}Qd0WhmK zZ8oKi4fM0O{Mvl{Z7pG%zq-8t^=&Y<4jEosakp7Q!-B)Lc@6^7>J$(4^$K-9-jpgZCJAynX&A9Qk zPaRfY%ANZX06paq=HgQSTsZ#)P&rSsXiiQ}{~k7$DrSCw_NR>FZ!|e>$TkLicx-?A zh?&8y)TS|#jEoEo0JV^wo?c-3$wa~Vaxqv9sx=`*IuP9@_K}g_xb%ELy8a3}ZtH}__66iu0V>BaxbAYRUlqBrAJ_I5; zkNRwG=@*H`)zyT?h6bJX_V#n-Kqrz(+THI^odVG7D3@oS?o2IO)a>qT4$`Wv<0<<3 zuCw^OvM$v;dWsy7=3Zcgi926gg|>Mj9Ga&zM5+kX40aakc59zxg{nm{NfdH2G4Kiq z2wc62628_jS`Wl;&o)Lg-OD$xgfj{p#LGB5fC~u+Y<=?&sbM8aP)@fXdpe0A#V`ue(O zs+9ZWRg*{OQe^?mmO|bcI`ZfbhfuBx}hHTHZKn+H-@Sk544cnWUrGs_7Fre50jg41!Ok ze7}yf+u}Sl^Ht^pTly52uqwb*-E#GUf{9I=;-LUAblQMLvYX=#xiPmHL&-mwosVHl<1Oe#>@~TkA_ysS1I$orFAz z<9C6&Ha}Dh@%A~2)A1{3o{}3G8(ZQ6X{oWkzN;H}CWXL_>8xXfp}}I+6m!R4%&#aD zIuIs+;oK~5N&usHiUy}-Nkk}d4eV~nlPu(IBzXJOe!>FVmvUClSSAH_sQo(TjT!Lg{Y&pNWP5>BlRuOfh8(vPZl z-vbuP9Vo>$W`6`9#syKUgr;&JD{U=v+`oX!=;`&_m%6M%JB#{D{vt-e{7uBMg&FNKYEZ` zciGulG5*%ATLD{(P0b(&$O`}#v*dzL3t4;}Z>|NW9t!GMk#qTmw4lk%%)E5$K=bJM z_&9}CQ%sxXhGzTMDN*lTwaz6w-OT08E)#@HgDqD?TBe+>874oT3g!{<>t;3&OAO1vP`niSLH8ls8&?VfHjQrj0<|# zUvb7>EVb*n&uLRyN!$IrZoVRx>M#q-K=d|X{=sA`6m6l>3)argb59(~%xDiBC>eAT zudXVR#|e5fwsYUBiTUi zQel@v9^mwT9>6nki!ny`HgZ4WE=d>MYwjOa-i8!M||o!dmqQy}M2NNA{cMsRe?Y^B@X z*x1hmlEmm3e{kmcp(nom>Cnx_K|U^wJbD3$!HS8Z)Z&()TEW9V}Xd3pHw z&O8UH`ikGBO2FS9%*;5HHCPHOMe@=f-_Ib0q2g`+1Xrp zBk|RFw5z+Dlqcdq!^@XZvOZsidq7Ui)K%l}t>JXo7RN&S#EF(=FnqAe(^1BMmrG2{ zQ=;$7<;$0C&&o=R0w3t>d-3Ad0=I6;E2|)fHviS@QIt4AHXe>nc2v_FC%CLEEjJjW z8^3~-ZBdZX6mP&9-er0KkR89T&D>3_@)v#7%*=YP>847PBs-P?9nH_IY<#_a`*y7t zuBG4FfHxZ0mknN!a=MRGdx})B;A68ZXRE!=Hl2T_WAbK7s?)4yZP0&?mbAeN(l<3t z+Mcgo7_4C948%Lh8?Qc8dufxA*${D_hc@CK@E0#jZQm4rsC1tyqGXX478Z>n;ZIN@-2Jr|jwqwY#N(Rpnvp0 zGbj;!JLToIS|V_!oZP`FI1(g^@uz9&K3uDfJFGYd=*>>7^BAbMHr`(`7IHaW)L0^I z>#<&+DmSCR9CB34z}`ORy$MyMDu)`-79U_)+cRrJfo#KLV^%$y3!r2xw$fAd5h+Hl za+Ojp*BBhldQdwo?(FP5$85f;6o2PVZ);DF1S!<%;Mx8*T_qOo^43xUR4jdlD&3n< zU14e*H+J3M$VqsDd_45C&sz_$;@##9bms$6XaJDHK+8>h5)zW|8o!mVlNG*2s%mP! z$BrI7ira0L132yuiI-D@hB&o%4h1Qxn-+o8&1P$PxA9j=M^vuxGl9C~1%C??a&p>t zq5~fY4$(s!J?H!dvH%Ze0V&EUr@nG$9@{cjrvgx&xuIxq3l{?K-QJz|pDSaA{90AI zx3(z&Uq3Zad&xg5q(Kl@Q&aPs{E;KbrRn!sk#o^=_(Vkhru+$axXcp>^+iA+y9ds! z6m&T(jADDSiH&V!*x^tv;6&b3WMq*zQCL$;OsWJ}~xB{W#TcwW4Cu|0fQ zkwfSGGT;G1^1EA03bJec?o6`;6mukvalmRkT01v)>pKp1BZ6VnI0#b>G0SQ8IMoY=BH1)XN0TxFe=V{>d4RooChT`cHk0-@4Gqr zJl~jgjSYBcw*XtH!|(_Q<4W2%4^(LKZO8?+q1>_2(e7dz-(p0+oQTL0LHjXWTD2P> zJ|1kaynt^JU4)q)Dwf(bf6Qa$89eL3gOrh_^#D+YanPmih)Yeqv@(%+erI|*>)sB? zIpz+`pMBVQE5#X8?xY+CBaa_HZu@rGGlU*$l<}U=rsqc#X@e>+qaD zS0jP<)gdM&^}91|Vgv?Qd;~eL;c8WV)xoZl$wzRmi7~d7fSS6@K()7?Gd{F66tL;+ z6U!>cdZx-_I$bAOoUXpO_13li{{9=F;-+*UeEia6|Kn&+C#MTE2ZFv;FVxO%PbQ-S z+Q$~3Lc`QR!=teH~v zWHcKgJsmYQJ0CCah7>pV6vD$}IY5R^8%7mj(SM7R`)s)TR67NrB%j$B8Kre{408?8 zaZkf7Xo_4&k7?=Y#j=4=!0$C11JYOLh^VOkA;MvflG0KlP}S%rP+9|7zvsn^7p3#1 zth}o0uO8b-0wq5|@Z`>K?#kU`lfPI|(>n06ON>y`XQ1!P$O{zUhs-xpQ)`TK4CO^< z`abN?Lps0{4K6P)?;?lVS>^nqgaie3mzS27KFkEclcG$_%~R~~;*ZP8Z3m8yjjf5( z=U!bYp4m8A^sp-cQ21B%_4W5aMin_uV?e8xkdRO-NKI@PuKJa&{24`*V)E(w=rZ$n zfG*mq$1tzU$2J|r4bsi3{@Tcd-g@dXARW)GB!+6CU7zX7%kuU2*MNdPI(09A((XDq zGrQJf5z%2ScbzA+A&0u1jajrc-1OV}($pD;$Eqm`fdOgSTx7c&vybY6J=F)sFV7Yw z)EgZ;o?3e(kbHqc#b8{@kHf?v-o12?yzC_V*-bhJd{(ghs(66Qze*C!oGq4bq z7#**_fbl@KJ*dO$Q8J3!H3KRgpsT6rYDmFXJ&!pGi|Hy?b^Gc9cb@}an3At>z$2|8 z7hU-hUAu0R1(I6J7;P^9%QdPX;PirwZ@0p2BBEC804T>ZC;@dT+u7OSZpLMI&E&BK zd>b**($Wfx3P_&cVSVRY$9)-6ya)o9Qb$KeDHW^ix7IYJP;(rHVo(oj0!R8GI6y9H z+S;$>x5{Km+i@eMh|b_>(9+XC`~Zslk3k_tzRAq{X0zd)xVRFR=a)$e>`PrOL6$rK zs%9c#%_uwwQ`!k6KMWtA3JD1zwV_43#AG^bzPNfJ)9(OSXKs%6Gqid(vfIq6`IS?M=wJ^9n0SfXW$kY=)pWw$eLK{AX zUM}-Wd{g>Hes;H2s7`yXzjDbUc|dg<(8e*~ROasL$*+$WGU2ELFO)VQv+z`;a|o34 zbufAeN&t%dK=mfyE8$YXhD{HJ!ADG~(C?;jSi!4FuUNPG_}g>_q7Td80}GwCm` zQqA6RS9v456tyN)w*_aHmEH1`HqdC{TNqD3ho1n0^PkS-_j zCbm}h?briY!oUH;d-U{cOV`ZI3_Z^4rlzY1;B+|`7Z>p|Pfg1mF5!*m^#=L3BS1PS zw2r>@4nJkTbM0}9kA#Xfkk0~mf4LTfgLjUG7@y_j$&*y*zVf+cfGqlsHdnRFt@}Kq z7_TVl(3#DRi-&iwV|Ha-BbN271PDsnh>V%f#6`t)+svfKaY}niyV>Fk7 zoSd9*f5ipvMUx!ejEwwSob@Fv0;GrQ@d1mQr8{^~1i>4>T8iLr1SOFaz$HVrwl1PT zO^B{KF&fle0C?t%tgNhngfVl)pWq}388$I8Vgb2?j~^i5^kZKgIxeqxw-dHD`W4Tu z5f0x3hxQ;7lZ-5Q6^-8HNN%$!Gb?DX1@9y#D44{@FDL97bLLEbhaD+6X9=aQBhOEQQsw6q%WboVt`bEv zIF02)WI><6dyvnf;2nSxD9`ATg(<741ZuqZF!J>D3^pqe6ciFNp{JuW>aX(5+W^O= z3WS@C6Pa*-UtgMM&z?O8^`-z<*CPFNeIFtMg5$WjxLaTc*J5M!4r#@`yVCxsXO<7t z@M7`-ec5F=f6?HT$FUC%EjG3|6PiU%IGl$Wnr$grmt;zUgE-E3-?D+=@T(+kDQ7&6 zAt<0mTlOV-V*Ejn>PBFyrsE8ln@3kyOFqb993}hW-a^VR61WlB=`e2pZ^60qmToGdt8cblEb<_F{(NALT))C!(?>*hB4?CUNbl<>(Q$m!Jr_&+oV N(o)k^EmXD$`7ce=zrg?i From 299c5f7cc12c703475619c50178eef136a842eee Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Tue, 17 Nov 2015 11:47:50 +0300 Subject: [PATCH 071/214] JS-296: Test/fix for Chrome/Firefox on Windows --- lib/web/mage/gallery/gallery.js | 5 +---- lib/web/magnifier/magnify.js | 8 +++++--- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/lib/web/mage/gallery/gallery.js b/lib/web/mage/gallery/gallery.js index 9b1017b995613..65fb0a0a9d602 100644 --- a/lib/web/mage/gallery/gallery.js +++ b/lib/web/mage/gallery/gallery.js @@ -170,7 +170,7 @@ define([ settings.focusableStart = this.settings.$element.find('[data-gallery-role="fotorama__focusable-start"]'); settings.focusableEnd = this.settings.$element.find('[data-gallery-role="fotorama__focusable-end"]'); settings.closeIcon = this.settings.$element.find('[data-gallery-role="fotorama__fullscreen-icon"]'); - settings.fullscreenConfig.swipe = true; + settings.fullscreenConfig.swipe = false; settings.$gallery.on('fotorama:fullscreenenter', function () { settings.focusableStart.attr('tabindex', '0'); @@ -184,9 +184,6 @@ define([ settings.api.updateOptions(settings.activeBreakpoint.options, true); } settings.isFullscreen = true; - settings.$element.data('gallery').updateOptions({ - swipe: false - }); }); settings.$gallery.on('fotorama:fullscreenexit', function () { diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index 4b9ff91208d5c..adc892ca6532d 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -429,7 +429,7 @@ define([ dragFlag = true; if (($image.offset().left === $imageContainer.offset().left + $imageContainer.width() - $image.width() && e.keyCode === 39) || - (endX === $imageContainer.offset().left + $imageContainer.width() - $image.width() && dx < 0 && + (endX - 1 < $imageContainer.offset().left + $imageContainer.width() - $image.width() && dx < 0 && (e.type === 'mousemove' || e.type === 'touchmove' || e.type === 'pointermove' || e.type === 'MSPointerMove'))) { endX = null; swipeSlide('>'); @@ -455,6 +455,7 @@ define([ $image.offset({ 'top': top }); + $image.css('bottom', ''); } if ($image.width() > $imageContainer.width()) { @@ -467,7 +468,8 @@ define([ $image.offset({ 'left': left }); - } else if (Math.abs(dy) === 0 && + $image.css('right', ''); + } else if (Math.abs(dy) < 1 && !(e.type === 'mousemove' || e.type === 'touchmove' || e.type === 'pointermove' || e.type === 'MSPointerMove')) { dx < 0 ? $(gallerySelector).data('fotorama').show('>') : $(gallerySelector).data('fotorama').show('<'); } @@ -500,7 +502,7 @@ define([ } } - $image.unbind('dblclick', dblClickHandler); + $image.unbind('dblclick'); $image.dblclick(dblClickHandler); if (gallery.fullScreen) { From 49bcc5e6ef43c97030270c00cb8f950280b9b140 Mon Sep 17 00:00:00 2001 From: Uladzislau Harbachou Date: Tue, 17 Nov 2015 11:55:20 +0300 Subject: [PATCH 072/214] JS-285: Pinch In/Out must work proportionally to distance between fingers --- lib/web/mage/gallery/gallery.less | 3 +- lib/web/magnifier/magnify.js | 83 ++++++++++++++++++++----------- 2 files changed, 56 insertions(+), 30 deletions(-) diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index 17a0c0e5c9c71..f250d573bc46d 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -1142,6 +1142,7 @@ transition: @fotorama-fullscreen-zoom-time linear; margin: auto; cursor: default; + &:extend(.fotorama-gpu); &.fotorama__img--zoommable { cursor: pointer; max-width: none; @@ -1259,7 +1260,7 @@ } } -body.fotorama__fullscreen { +.fotorama__fullscreen { overflow-y: hidden; .magnify-fullimage { display: inline-block; diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index 4b9ff91208d5c..656a47825ad34 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -414,7 +414,8 @@ define([ $gallery = $(gallerySelector), $image = $(fullscreenImageSelector, $gallery), $imageContainer = $('[data-gallery-role="stage-shaft"] [data-active="true"]'), - gallery = $gallery.data('fotorama'); + gallery = $gallery.data('fotorama'), + pinchDimention; swipeSlide = _.throttle(function (direction) { $(gallerySelector).data('fotorama').show(direction); @@ -507,51 +508,75 @@ define([ toggleZoomButtons($image); } + function dimention(event){ + return Math.sqrt( + (event.touches[0].clientX-event.touches[1].clientX) * (event.touches[0].clientX-event.touches[1].clientX) + + (event.touches[0].clientY-event.touches[1].clientY) * (event.touches[0].clientY-event.touches[1].clientY)); + } + $image.off(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown'); $image.on(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown', function (e) { - if (gallery.fullScreen) { + if (e && e.originalEvent.touches && e.originalEvent.touches.length >= 2) { e.preventDefault(); + pinchDimention = dimention(e.originalEvent); + } else { + if (gallery.fullScreen) { + e.preventDefault(); - if (zoomShown && allowZoomOut) { - $image.addClass(imageDraggableClass); - } - imagePosY = $image.offset().top; - imagePosX = $image.offset().left; + if (zoomShown && allowZoomOut) { + $image.addClass(imageDraggableClass); + } + imagePosY = $image.offset().top; + imagePosX = $image.offset().left; - if (isTouchEnabled) { - touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; - e.clientX = touch.pageX; - e.clientY = touch.pageY; - } - startX = e.clientX || e.originalEvent.clientX; - startY = e.clientY || e.originalEvent.clientY; - isDragActive = true; + if (isTouchEnabled) { + touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; + e.clientX = touch.pageX; + e.clientY = touch.pageY; + } + startX = e.clientX || e.originalEvent.clientX; + startY = e.clientY || e.originalEvent.clientY; + isDragActive = true; - if (!endX) { - endX = $image.offset().left; + if (!endX) { + endX = $image.offset().left; + } } } }); $image.off(isTouchEnabled ? 'touchmove' : 'mousemove pointermove MSPointerMove'); $image.on(isTouchEnabled ? 'touchmove' : 'mousemove pointermove MSPointerMove', function (e) { - var clientX, - clientY; + if (e && e.originalEvent.touches && e.originalEvent.touches.length >= 2) { + e.preventDefault(); + var currentDimention = dimention(e.originalEvent); + + if (currentDimention < pinchDimention) { + zoomOut(e); + pinchDimention = currentDimention; + } else if (currentDimention > pinchDimention) { + zoomIn(e); + pinchDimention = currentDimention; + } + } else { + var clientX, + clientY; - if (gallery.fullScreen && isDragActive) { + if (gallery.fullScreen && isDragActive) { - clientX = e.clientX || e.originalEvent.clientX; - clientY = e.clientY || e.originalEvent.clientY; + clientX = e.clientX || e.originalEvent.clientX; + clientY = e.clientY || e.originalEvent.clientY; - e.preventDefault(); + e.preventDefault(); - if (isTouchEnabled) { - touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; - clientX = touch.pageX; - clientY = touch.pageY; - } + if (isTouchEnabled) { + touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; + clientX = touch.pageX; + clientY = touch.pageY; + } - shiftImage(clientX - startX, clientY - startY, e); + shiftImage(clientX - startX, clientY - startY, e); + } } }); From b5224b4aa142210df0f24430505b6b3f550fbfe2 Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Tue, 17 Nov 2015 12:12:14 +0300 Subject: [PATCH 073/214] JS-296: Test/fix for Chrome/Firefox on Windows - remove swipe for fullscreen --- lib/web/mage/gallery/gallery.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/lib/web/mage/gallery/gallery.js b/lib/web/mage/gallery/gallery.js index 65fb0a0a9d602..801a05bcc8587 100644 --- a/lib/web/mage/gallery/gallery.js +++ b/lib/web/mage/gallery/gallery.js @@ -184,6 +184,9 @@ define([ settings.api.updateOptions(settings.activeBreakpoint.options, true); } settings.isFullscreen = true; + settings.$element.data('gallery').updateOptions({ + swipe: false + }); }); settings.$gallery.on('fotorama:fullscreenexit', function () { From b12dadfd8a42f77abfb1fbd3c944e788c9c03268 Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Tue, 17 Nov 2015 12:54:50 +0300 Subject: [PATCH 074/214] JS-296: Test/fix for Chrome/Firefox on Windows --- lib/web/magnifier/magnify.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index adc892ca6532d..f19d1aa2471f8 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -568,6 +568,11 @@ define([ imagePosX = $(fullscreenImageSelector, $gallery).offset().left; imagePosY = $(fullscreenImageSelector, $gallery).offset().top; }; + + if (isFullScreen && !$(':focus').attr('data-gallery-role') && e.keyCode === 9) { + $('[data-gallery-role="fotorama__fullscreen-icon"]').focus(); + e.preventDefault(); + } if ($(':focus').attr('data-gallery-role') || !$(':focus').length) { From 03af88f1ef8f5174485189220a11e444d40869ff Mon Sep 17 00:00:00 2001 From: Uladzislau Harbachou Date: Tue, 17 Nov 2015 13:05:03 +0300 Subject: [PATCH 075/214] JS-285: Pinch In/Out must work proportionally to distance between fingers --- lib/web/magnifier/magnify.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index 656a47825ad34..73d2268c2aeb9 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -508,7 +508,7 @@ define([ toggleZoomButtons($image); } - function dimention(event){ + function getDimention(event){ return Math.sqrt( (event.touches[0].clientX-event.touches[1].clientX) * (event.touches[0].clientX-event.touches[1].clientX) + (event.touches[0].clientY-event.touches[1].clientY) * (event.touches[0].clientY-event.touches[1].clientY)); @@ -518,7 +518,7 @@ define([ $image.on(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown', function (e) { if (e && e.originalEvent.touches && e.originalEvent.touches.length >= 2) { e.preventDefault(); - pinchDimention = dimention(e.originalEvent); + pinchDimention = getDimention(e.originalEvent); } else { if (gallery.fullScreen) { e.preventDefault(); @@ -549,7 +549,7 @@ define([ $image.on(isTouchEnabled ? 'touchmove' : 'mousemove pointermove MSPointerMove', function (e) { if (e && e.originalEvent.touches && e.originalEvent.touches.length >= 2) { e.preventDefault(); - var currentDimention = dimention(e.originalEvent); + var currentDimention = getDimention(e.originalEvent); if (currentDimention < pinchDimention) { zoomOut(e); From 5027a7fe8a0243c54f14b1bf19752e5d40111b93 Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Tue, 17 Nov 2015 13:17:45 +0300 Subject: [PATCH 076/214] JS-296: Test/fix for Chrome/Firefox on Windows - cash focus variable --- lib/web/magnifier/magnify.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index f19d1aa2471f8..0710f371a71e5 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -563,18 +563,19 @@ define([ */ var keyboardNavigation = function (e) { var step = 40, + $focus = $(':focus'), isFullScreen = $(gallerySelector).data('fotorama').fullScreen, initVars = function () { imagePosX = $(fullscreenImageSelector, $gallery).offset().left; imagePosY = $(fullscreenImageSelector, $gallery).offset().top; }; - if (isFullScreen && !$(':focus').attr('data-gallery-role') && e.keyCode === 9) { + if (isFullScreen && !$focus.attr('data-gallery-role') && e.keyCode === 9) { $('[data-gallery-role="fotorama__fullscreen-icon"]').focus(); e.preventDefault(); } - if ($(':focus').attr('data-gallery-role') || !$(':focus').length) { + if ($focus.attr('data-gallery-role') || !$focus.length) { if (isFullScreen) { imagePosX = $(fullscreenImageSelector, $(gallerySelector)).offset().left; From 8ae704eedc2de0d925fcb2a61745ffda5d09db5b Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Tue, 17 Nov 2015 16:59:53 +0200 Subject: [PATCH 077/214] JS-289: Fix focus border indication on preview image --- lib/web/mage/gallery/gallery.less | 32 +++++++++++++++++++++++-------- 1 file changed, 24 insertions(+), 8 deletions(-) diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index f250d573bc46d..9c39363fdf1a1 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -162,7 +162,8 @@ .fotorama__arr:focus:after, .fotorama__stage__shaft:focus:after, -.fotorama__nav__frame:focus .fotorama__thumb:after { +.fotorama__nav__frame--thumb:focus .fotorama__thumb:after, +.fotorama__nav__frame--dot:focus .fotorama__dot:after{ box-shadow: @focus__box-shadow; border-radius: inherit; content: ''; @@ -173,25 +174,40 @@ right: 3px; z-index: 10; } -.fotorama__nav__frame:focus{ - .fotorama__thumb:after { +.fotorama__nav__frame--thumb:focus, +.fotorama__nav__frame--dot:focus { + .fotorama__thumb:after, + .fotorama__dot:after{ left: 0; top: 0; bottom: 0; right: 0; } + .fotorama__thumb.fotorama_vertical_ratio:after{ + left: 2px; + right: 2px; + } .fotorama__thumb { overflow: inherit; } } -.fotorama__nav__frame:nth-child(2):focus .fotorama__thumb:after{ - left: 1px; +.fotorama__nav__frame:nth-child(2):focus { + .fotorama__thumb:after{ + left: 1px; + } + .fotorama__thumb.fotorama_vertical_ratio:after{ + top: 1px; + } } - -.fotorama__nav__frame:last-child:focus .fotorama__thumb:after{ - right: 1px; +.fotorama__nav__frame:last-child:focus { + .fotorama__thumb:after{ + right: 1px; + } + .fotorama__thumb.fotorama_vertical_ratio:after{ + bottom: 1px; + } } .fotorama-transform-disabled { From c382588a0c08179a544fa07af245fb33201f7de3 Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Tue, 17 Nov 2015 17:15:55 +0200 Subject: [PATCH 078/214] JS-289: Fix focus border indication on preview image --- lib/web/mage/gallery/gallery.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index 9c39363fdf1a1..5f873cb68a025 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -183,7 +183,7 @@ bottom: 0; right: 0; } - .fotorama__thumb.fotorama_vertical_ratio:after{ + .fotorama__thumb.fotorama_vertical_ratio:after { left: 2px; right: 2px; } From 554ccf64a2bc24769fb93fbd53131753cc21e429 Mon Sep 17 00:00:00 2001 From: Uladzislau Harbachou Date: Tue, 17 Nov 2015 18:36:25 +0300 Subject: [PATCH 079/214] JS-293: + - isn't see on dark background --- lib/web/mage/gallery/gallery.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index f250d573bc46d..d05ff01ceb4fc 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -916,7 +916,7 @@ .fotorama__video-play:not(:focus), .fotorama__video-close:not(:focus) { transition-duration: @fotorama-duration-time; - transition-property: transform, opacity; + transition-property: transform, opacity, background-color; } } @@ -1280,7 +1280,7 @@ background-color: rgba(255, 255, 255, 0.5); } &:active { - background-color: #d5d5d5; + background-color: rgba(213, 213, 213, 0.5); } } From 668fdc541ed78857de1802108a3279dc975ec531 Mon Sep 17 00:00:00 2001 From: Uladzislau Harbachou Date: Tue, 17 Nov 2015 22:25:18 +0300 Subject: [PATCH 080/214] JS-309: Buttons in full screen --- lib/web/mage/gallery/gallery.html | 8 ++-- lib/web/mage/gallery/gallery.less | 63 ++++++++++++++----------------- lib/web/magnifier/magnify.js | 2 +- 3 files changed, 34 insertions(+), 39 deletions(-) diff --git a/lib/web/mage/gallery/gallery.html b/lib/web/mage/gallery/gallery.html index 47e928af14655..4ce2961640544 100644 --- a/lib/web/mage/gallery/gallery.html +++ b/lib/web/mage/gallery/gallery.html @@ -25,14 +25,14 @@
-
-
+
+
-
-
+
+
diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index 7558d4930a5f9..4fb686147b53c 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -61,12 +61,6 @@ background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.2) 25%, rgba(0, 0, 0, 0.3) 75%, transparent), radial-gradient(farthest-side at @x @y, rgba(0, 0, 0, 0.4), transparent); } -.fotorama-arrow-gradient(@d){ - background-image: -webkit-linear-gradient(@d, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); - background-image: -ms-linear-gradient(@d, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); - background-image: linear-gradient(@d, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); -} - .fotorama-inline-block(@va: middle) { *display: inline; *zoom: 1; @@ -1182,7 +1176,7 @@ width: @fotorama-thumb-arrow; z-index: @z-index-10; cursor: pointer; - .fotorama__thumb__arr { + .fotorama__thumb--icon { .fotorama-abs-center(); width: 100%; @@ -1192,22 +1186,12 @@ } } .fotorama__thumb__arr--left { - .fotorama-arrow-gradient(left); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1); left: 0; - - .fotorama__thumb__arr { - background-position: (-@fotorama-thumb-arrow) (-@fotorama-thumb-arrow); - } } .fotorama__thumb__arr--right { - .fotorama-arrow-gradient(right); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1); right: 0; - .fotorama__thumb__arr { - background-position: (-@fotorama-thumb-arrow*2) (-@fotorama-thumb-arrow); - } + } } @@ -1220,25 +1204,17 @@ right: 0; cursor: pointer; z-index: @z-index-10; - .fotorama__thumb__arr { + .fotorama__thumb--icon { .fotorama-rotate(90deg); margin: auto; width: @fotorama-thumb-arrow; } } .fotorama__thumb__arr--left { - .fotorama-arrow-gradient(top); top: 0; - .fotorama__thumb__arr { - background-position: (-@fotorama-thumb-arrow) (-@fotorama-thumb-arrow); - } } .fotorama__thumb__arr--right { - .fotorama-arrow-gradient(bottom); bottom: 0; - .fotorama__thumb__arr { - background-position: (-@fotorama-thumb-arrow*2) (-@fotorama-thumb-arrow); - } } } @@ -1255,13 +1231,24 @@ } } -.fotorama__thumb__arr { +.fotorama__thumb--icon { &:extend(.fotorama-sprite); - background-size: 300%; font-size: 0.001px; padding-bottom: @fotorama-thumb-arrow; } +.fotorama__thumb__arr--left { + .fotorama__thumb--icon { + background-position: -25px -265px; + } +} + +.fotorama__thumb__arr--right { + .fotorama__thumb--icon { + background-position: -25px -350px; + } +} + .magnify-fullimage { display: none; } @@ -1287,11 +1274,20 @@ } .fotorama__arr, -.fotorama__fullscreen-icon, -.fotorama__zoom-in, -.fotorama__zoom-out { +.fotorama__thumb__arr { + &:extend(.fotorama-button-background); +} + +.fotorama__wrap:not(.fotorama__wrap--toggle-arrows) { + .fotorama__fullscreen-icon, + .fotorama__zoom-out, + .fotorama__zoom-in{ + &:extend(.fotorama-button-background); + } +} +.fotorama-button-background { background-color: rgba(255, 255, 255, 0.3); - transition: background-color 0.3s ease-in-out; + transition: background-color @fotorama-duration-time ease-in-out; &:hover { background-color: rgba(255, 255, 255, 0.5); } @@ -1299,4 +1295,3 @@ background-color: rgba(213, 213, 213, 0.5); } } - diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index bd6c80d6f2101..679f055f53a16 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -650,7 +650,7 @@ define([ } }; - $(document).unbind('keydown'); + $(document).unbind('keydown', keyboardNavigation); $(document).keydown(keyboardNavigation); $(document).on(isTouchEnabled ? 'touchend' : 'mouseup pointerup MSPointerUp', function (e) { From 9aca1ac2f94f208ed2bf0b3af7a6cc4e43f67e56 Mon Sep 17 00:00:00 2001 From: Uladzislau Harbachou Date: Tue, 17 Nov 2015 22:37:55 +0300 Subject: [PATCH 081/214] JS-309: Buttons in full screen --- lib/web/mage/gallery/gallery.less | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index 4fb686147b53c..472d96e1e6fca 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -1275,17 +1275,18 @@ .fotorama__arr, .fotorama__thumb__arr { - &:extend(.fotorama-button-background); + .fotorama-button-background(); } .fotorama__wrap:not(.fotorama__wrap--toggle-arrows) { .fotorama__fullscreen-icon, .fotorama__zoom-out, .fotorama__zoom-in{ - &:extend(.fotorama-button-background); + .fotorama-button-background(); } } -.fotorama-button-background { + +.fotorama-button-background() { background-color: rgba(255, 255, 255, 0.3); transition: background-color @fotorama-duration-time ease-in-out; &:hover { From b3d5439b127be8b7e96a9dd35e726db55e95a895 Mon Sep 17 00:00:00 2001 From: Uladzislau Harbachou Date: Tue, 17 Nov 2015 22:49:11 +0300 Subject: [PATCH 082/214] JS-304: Images slides very fast and after release button images continue sliding --- lib/web/magnifier/magnify.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index 679f055f53a16..5130104326dc6 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -650,8 +650,11 @@ define([ } }; - $(document).unbind('keydown', keyboardNavigation); - $(document).keydown(keyboardNavigation); + /** + * @todo keyboard navigation through Fotorama Api. + */ + //$(document).unbind('keydown', keyboardNavigation); + //$(document).keydown(keyboardNavigation); $(document).on(isTouchEnabled ? 'touchend' : 'mouseup pointerup MSPointerUp', function (e) { From bc65fcfc89dba957d22ea0743bbb8e8e683211a8 Mon Sep 17 00:00:00 2001 From: Uladzislau Harbachou Date: Wed, 18 Nov 2015 11:57:53 +0300 Subject: [PATCH 083/214] JS-297: Test/fix for IE on Windows --- lib/web/fotorama/fotorama.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/web/fotorama/fotorama.js b/lib/web/fotorama/fotorama.js index 21119f702cdbb..2a05fc4a41834 100644 --- a/lib/web/fotorama/fotorama.js +++ b/lib/web/fotorama/fotorama.js @@ -3154,8 +3154,8 @@ fotoramaVersion = '4.6.4'; that.resize(); loadImg(activeIndexes, 'stage'); updateFotoramaState(); - triggerEvent('fullscreenenter'); + $fullscreenIcon.focus(); } return this; From ca191c3990ed73bd2b096400ae2775c75b32c361 Mon Sep 17 00:00:00 2001 From: Uladzislau Harbachou Date: Wed, 18 Nov 2015 12:15:46 +0300 Subject: [PATCH 084/214] JS-297: Removed unused code after merge --- lib/web/fotorama/fotorama.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/lib/web/fotorama/fotorama.js b/lib/web/fotorama/fotorama.js index 2a05fc4a41834..9973919331029 100644 --- a/lib/web/fotorama/fotorama.js +++ b/lib/web/fotorama/fotorama.js @@ -3512,8 +3512,7 @@ fotoramaVersion = '4.6.4'; if ((result.moved || (toggleControlsFLAG && result.pos !== result.newPos && !result.control)) && result.$target[0] !== $fullscreenIcon[0]) { var index = getIndexByPos(result.newPos, measures.w, opts.margin, repositionIndex); - - var toggleControlsFLAG = (MS_POINTER && !hoverFLAG || result.touch) && opts.arrows; + that.show({ index: index, time: o_fade ? o_transitionDuration : result.time, From ac95787e24a4858730f792b19d7dd0a7235cc87e Mon Sep 17 00:00:00 2001 From: Uladzislau Harbachou Date: Fri, 20 Nov 2015 13:30:03 +0300 Subject: [PATCH 085/214] JS-311: Fullscreen wrapper position - reorganization of less file --- lib/web/mage/gallery/gallery.less | 47 +------------------- lib/web/mage/gallery/module/_extends.less | 4 ++ lib/web/mage/gallery/module/_focus.less | 4 ++ lib/web/mage/gallery/module/_fullscreen.less | 5 +++ lib/web/mage/gallery/module/_mixins.less | 42 +++++++++++++++++ lib/web/mage/gallery/module/_variables.less | 11 +++++ 6 files changed, 68 insertions(+), 45 deletions(-) create mode 100644 lib/web/mage/gallery/module/_extends.less create mode 100644 lib/web/mage/gallery/module/_focus.less create mode 100644 lib/web/mage/gallery/module/_fullscreen.less create mode 100644 lib/web/mage/gallery/module/_mixins.less create mode 100644 lib/web/mage/gallery/module/_variables.less diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index 472d96e1e6fca..29dc36ac55ab4 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -3,17 +3,12 @@ // * See COPYING.txt for license details. // */ -@fotorama-duration-time: 0.3s; -@fotorama-arw-size: 95px; -@fotorama_close_size: 30px; -@size-fotorama-block: 80px; -@fotorama-thumb-arrow: 30px; -@fotorama-fullscreen-zoom-time: 0.3s; - +@import 'module/_variables.less'; //Default gallery variables @import '../../css/source/lib/_lib.less'; // Global lib @import '../../css/source/_theme.less'; // Theme overrides @import '../../css/source/_variables.less'; // Local theme variables @import '../../css/source/lib/_responsive.less'; +@import 'module/_mixins.less'; //Mixins in gallery .fotorama_spin { display: none; @@ -32,44 +27,6 @@ } } -.fotorama-translate3d(@x; @y; @z) { - -webkit-transform: translate3d(@x, @y, @z); - transform: translate3d(@x, @y, @z); -} - -.fotorama-rotate (@deg) { - -webkit-transform: rotate(@deg); - -ms-transform: rotate(@deg); - transform: rotate(@deg); -} - -.translateX(@value) { - -webkit-transform: translateX(@value); - -ms-transform: translateX(@value); - -o-transform: translateX(@value); - transform: translateX(@value); -} - -.translateY(@value) { - -webkit-transform: translateY(@value); - -ms-transform: translateY(@value); - -o-transform: translateY(@value); - transform: translateY(@value); -} - -.fotorama-shadow-gradient(@x, @y) { - background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.2) 25%, rgba(0, 0, 0, 0.3) 75%, transparent), radial-gradient(farthest-side at @x @y, rgba(0, 0, 0, 0.4), transparent); -} - -.fotorama-inline-block(@va: middle) { - *display: inline; - *zoom: 1; - -moz-box-orient: vertical; - display: -moz-inline-box; - display: inline-block; - vertical-align: @va; -} - .fotorama__zoom-in, .fotorama__zoom-out { display: none; diff --git a/lib/web/mage/gallery/module/_extends.less b/lib/web/mage/gallery/module/_extends.less new file mode 100644 index 0000000000000..79af2c661601b --- /dev/null +++ b/lib/web/mage/gallery/module/_extends.less @@ -0,0 +1,4 @@ +// /** +// * Copyright © 2015 Magento. All rights reserved. +// * See COPYING.txt for license details. +// */ diff --git a/lib/web/mage/gallery/module/_focus.less b/lib/web/mage/gallery/module/_focus.less new file mode 100644 index 0000000000000..79af2c661601b --- /dev/null +++ b/lib/web/mage/gallery/module/_focus.less @@ -0,0 +1,4 @@ +// /** +// * Copyright © 2015 Magento. All rights reserved. +// * See COPYING.txt for license details. +// */ diff --git a/lib/web/mage/gallery/module/_fullscreen.less b/lib/web/mage/gallery/module/_fullscreen.less new file mode 100644 index 0000000000000..84279c79b9212 --- /dev/null +++ b/lib/web/mage/gallery/module/_fullscreen.less @@ -0,0 +1,5 @@ +// /** +// * Copyright © 2015 Magento. All rights reserved. +// * See COPYING.txt for license details. +// */ + diff --git a/lib/web/mage/gallery/module/_mixins.less b/lib/web/mage/gallery/module/_mixins.less new file mode 100644 index 0000000000000..c5d29b08147db --- /dev/null +++ b/lib/web/mage/gallery/module/_mixins.less @@ -0,0 +1,42 @@ +// /** +// * Copyright © 2015 Magento. All rights reserved. +// * See COPYING.txt for license details. +// */ + +.fotorama-translate3d(@x; @y; @z) { + -webkit-transform: translate3d(@x, @y, @z); + transform: translate3d(@x, @y, @z); +} + +.fotorama-rotate (@deg) { + -webkit-transform: rotate(@deg); + -ms-transform: rotate(@deg); + transform: rotate(@deg); +} + +.translateX(@value) { + -webkit-transform: translateX(@value); + -ms-transform: translateX(@value); + -o-transform: translateX(@value); + transform: translateX(@value); +} + +.translateY(@value) { + -webkit-transform: translateY(@value); + -ms-transform: translateY(@value); + -o-transform: translateY(@value); + transform: translateY(@value); +} + +.fotorama-shadow-gradient(@x, @y) { + background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.2) 25%, rgba(0, 0, 0, 0.3) 75%, transparent), radial-gradient(farthest-side at @x @y, rgba(0, 0, 0, 0.4), transparent); +} + +.fotorama-inline-block(@va: middle) { + *display: inline; + *zoom: 1; + -moz-box-orient: vertical; + display: -moz-inline-box; + display: inline-block; + vertical-align: @va; +} diff --git a/lib/web/mage/gallery/module/_variables.less b/lib/web/mage/gallery/module/_variables.less new file mode 100644 index 0000000000000..4f7c1346ab579 --- /dev/null +++ b/lib/web/mage/gallery/module/_variables.less @@ -0,0 +1,11 @@ +// /** +// * Copyright © 2015 Magento. All rights reserved. +// * See COPYING.txt for license details. +// */ + +@fotorama-duration-time: 0.3s; +@fotorama-arw-size: 95px; +@fotorama_close_size: 30px; +@size-fotorama-block: 80px; +@fotorama-thumb-arrow: 30px; +@fotorama-fullscreen-zoom-time: 0.3s; From d9d1c5f4dc8403e33d692b6d73217628beded977 Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Fri, 20 Nov 2015 14:50:30 +0200 Subject: [PATCH 086/214] JS-316: Incorrect behaviour of zoom --- lib/web/magnifier/magnify.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index 5130104326dc6..925a22cdb6a04 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -149,6 +149,8 @@ define([ settings, top, left, + right, + bottom, ratio; if ($(gallerySelector).data('fotorama').fullScreen) { @@ -167,11 +169,14 @@ define([ left = dimentions.width >= containerWidth ? getLeftValue(left, widthStep, dimentions.width, containerWidth) : 0; + right = dragFlag && left < (containerWidth - dimentions.width) / 2 ? 0 : left; + bottom = dragFlag ? 0 : top; + settings = $.extend(dimentions, { top: top, - bottom: top, + bottom: bottom, left: left, - right: left + right: right }); $image.css(settings); From 15b99c7cf89ebb42247800094ad8ba890cedaca5 Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Fri, 20 Nov 2015 15:20:49 +0200 Subject: [PATCH 087/214] JS-312: Gallery navigation arrows --- .../frontend/web/js/fotorama-add-video-events.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) 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 index 28add25807fb8..e3f2c8afc5862 100644 --- 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 @@ -516,8 +516,11 @@ define([ $image.find('.magnify-lens').remove(); $image.on('click tap', function () { if ($(this).hasClass('video-unplayed') && $(this).find('iframe').length === 0) { - $('.fotorama__arr--next').hide(); - $('.fotorama__arr--prev').hide(); + if ($('.fotorama-item').data('fotorama').options.arrows) { + $('.fotorama__arr--next').hide(); + $('.fotorama__arr--prev').hide(); + } + $(this).removeClass('video-unplayed'); $(this).find('.' + PV).productVideoLoader(); @@ -628,8 +631,10 @@ define([ $(this).remove(); $item.append(cloneVideoDiv); $item.addClass('video-unplayed'); - $('.fotorama__arr--next').show(); - $('.fotorama__arr--prev').show(); + if ($('.fotorama-item').data('fotorama').options.arrows) { + $('.fotorama__arr--next').show(); + $('.fotorama__arr--prev').show(); + } self._hideCloseVideo(); }); From 4c88aaeae1fb178c7d1b7f7bb1c880a8af5e3813 Mon Sep 17 00:00:00 2001 From: Uladzislau Harbachou Date: Fri, 20 Nov 2015 16:25:06 +0300 Subject: [PATCH 088/214] no message --- lib/web/mage/gallery/gallery.less | 222 +------------------ lib/web/mage/gallery/module/_extends.less | 123 ++++++++++ lib/web/mage/gallery/module/_focus.less | 57 +++++ lib/web/mage/gallery/module/_fullscreen.less | 29 +++ 4 files changed, 212 insertions(+), 219 deletions(-) diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index 29dc36ac55ab4..1510c764fbe22 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -9,6 +9,7 @@ @import '../../css/source/_variables.less'; // Local theme variables @import '../../css/source/lib/_responsive.less'; @import 'module/_mixins.less'; //Mixins in gallery +@import 'module/_extends.less'; .fotorama_spin { display: none; @@ -31,213 +32,6 @@ .fotorama__zoom-out { display: none; } -.fotorama__fullscreen { - .fotorama__zoom-in, - .fotorama__zoom-out { - overflow: hidden; - position: absolute; - width: @size-fotorama-block; - height: @size-fotorama-block; - display: block; - cursor: pointer; - - } - .fotorama__zoom-out { - top: 83px; - &:extend(.fotorama-sprite); - background-position: 0 (-@size-fotorama-block) !important; - &.fotorama__zoom-out--disabled { - display: none - } - } - .fotorama__zoom-in { - top: 2px; - &:extend(.fotorama-sprite); - background-position: 0 0 !important; - &.fotorama__zoom-in--disabled { - display: none - } - } -} - -.fotorama-stretch { - bottom: 0; - height: 100%; - left: 0; - position: absolute; - right: 0; - top: 0; - width: 100%; -} - -.fotorama-grab-cursor { - cursor: move; - cursor: -webkit-grab; - cursor: -moz-grab; - cursor: -o-grab; - cursor: -ms-grab; - cursor: grab; -} - -.fotorama-grabbing-cursor { - cursor: move; - cursor: -webkit-grabbing; - cursor: -moz-grabbing; - cursor: -o-grabbing; - cursor: -ms-grabbing; - cursor: grabbing; -} - -.fotorama-gpu { - transform: translateZ(0); -} - -.fotorama-focus { - outline: 0; -} - -.fotorama-focus-overlay { - &:after { - &:extend(.fotorama-stretch); - background-color: @color-blue2; - border-radius: inherit; - content: ''; - } -} - -.fotorama__fullscreen-icon:focus, -.fotorama__zoom-out:focus, -.fotorama__zoom-in:focus { - box-shadow:@focus__box-shadow; -} - -.fotorama__arr:focus:after, -.fotorama__stage__shaft:focus:after, -.fotorama__nav__frame--thumb:focus .fotorama__thumb:after, -.fotorama__nav__frame--dot:focus .fotorama__dot:after{ - box-shadow: @focus__box-shadow; - border-radius: inherit; - content: ''; - position: absolute; - left: 3px; - top: 3px; - bottom: 3px; - right: 3px; - z-index: 10; -} -.fotorama__nav__frame--thumb:focus, -.fotorama__nav__frame--dot:focus { - .fotorama__thumb:after, - .fotorama__dot:after{ - left: 0; - top: 0; - bottom: 0; - right: 0; - } - .fotorama__thumb.fotorama_vertical_ratio:after { - left: 2px; - right: 2px; - } - .fotorama__thumb { - overflow: inherit; - } -} - -.fotorama__nav__frame:nth-child(2):focus { - .fotorama__thumb:after{ - left: 1px; - } - .fotorama__thumb.fotorama_vertical_ratio:after{ - top: 1px; - } -} - -.fotorama__nav__frame:last-child:focus { - .fotorama__thumb:after{ - right: 1px; - } - .fotorama__thumb.fotorama_vertical_ratio:after{ - bottom: 1px; - } -} - -.fotorama-transform-disabled { - transform: none !important; -} - -.fotorama-transition-for-slide { - transition-duration: 0ms; - transition-property: transform, width; - transition-timing-function: cubic-bezier(0.1, 0, 0.25, 1); -} - -.fotorama-no-select { - user-select: none; -} - -.fotorama-select { - user-select: text; -} - -.fotorama-empty-bg { - background: url(data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=); -} - -.fotorama-auto-margin { - margin: auto; - padding: 0; -} - -.fotorama-inline-block { - .fotorama-inline-block(); -} - -.fotorama-content-box { - box-sizing: content-box; -} - -.fotorama-border-box { - box-sizing: border-box; -} - -.fotorama-hidden { - left: -99999px; - position: absolute; - top: -99999px; - z-index: -@z-index-10; -} - -.fotorama-visible { - left: auto; - opacity: 1; - position: relative; - top: auto; - z-index: auto; -} - -.fotorama-no-tap { - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} - -.transitionDuration { - transition-duration: 333ms; -} - -.transitionDurationZero { - transition-duration: 0ms; -} - -.fotorama-sprite { - &:extend(.fotorama-print-background); - background-image: url('gallery.png'); - background-repeat: no-repeat; -} - -.fotorama-print-background { - @media print { - background: none !important; - } -} .fotorama { min-width: 1px; @@ -248,14 +42,14 @@ background: @color-white; bottom: 0 !important; float: none !important; - height: 100% !important; left: 0 !important; margin: 0 !important; - position: absolute !important; + position: fixed !important; right: 0 !important; top: 0 !important; width: 100% !important; z-index: @z-index-10 !important; + &:extend(.fotorama-gpu); .fotorama__wrap { max-width: 100% !important; } @@ -1220,16 +1014,6 @@ } } -.fotorama__fullscreen { - overflow-y: hidden; - .magnify-fullimage { - display: inline-block; - } - .magnify-lens { - display: none !important; - } -} - .fotorama__arr, .fotorama__thumb__arr { .fotorama-button-background(); diff --git a/lib/web/mage/gallery/module/_extends.less b/lib/web/mage/gallery/module/_extends.less index 79af2c661601b..81edb1c9a6cf2 100644 --- a/lib/web/mage/gallery/module/_extends.less +++ b/lib/web/mage/gallery/module/_extends.less @@ -2,3 +2,126 @@ // * Copyright © 2015 Magento. All rights reserved. // * See COPYING.txt for license details. // */ + +.fotorama-stretch { + bottom: 0; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + width: 100%; +} + +.fotorama-grab-cursor { + cursor: move; + cursor: -webkit-grab; + cursor: -moz-grab; + cursor: -o-grab; + cursor: -ms-grab; + cursor: grab; +} + +.fotorama-grabbing-cursor { + cursor: move; + cursor: -webkit-grabbing; + cursor: -moz-grabbing; + cursor: -o-grabbing; + cursor: -ms-grabbing; + cursor: grabbing; +} + +.fotorama-gpu { + transform: translateZ(0); +} + +.fotorama-focus { + outline: 0; +} + +.fotorama-focus-overlay { + &:after { + &:extend(.fotorama-stretch); + background-color: @color-blue2; + border-radius: inherit; + content: ''; + } +} + +.fotorama-transform-disabled { + transform: none !important; +} + +.fotorama-transition-for-slide { + transition-duration: 0ms; + transition-property: transform, width; + transition-timing-function: cubic-bezier(0.1, 0, 0.25, 1); +} + +.fotorama-no-select { + user-select: none; +} + +.fotorama-select { + user-select: text; +} + +.fotorama-empty-bg { + background: url(data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=); +} + +.fotorama-auto-margin { + margin: auto; + padding: 0; +} + +.fotorama-inline-block { + .fotorama-inline-block(); +} + +.fotorama-content-box { + box-sizing: content-box; +} + +.fotorama-border-box { + box-sizing: border-box; +} + +.fotorama-hidden { + left: -99999px; + position: absolute; + top: -99999px; + z-index: -@z-index-10; +} + +.fotorama-visible { + left: auto; + opacity: 1; + position: relative; + top: auto; + z-index: auto; +} + +.fotorama-no-tap { + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +.transitionDuration { + transition-duration: 333ms; +} + +.transitionDurationZero { + transition-duration: 0ms; +} + +.fotorama-sprite { + &:extend(.fotorama-print-background); + background-image: url('gallery.png'); + background-repeat: no-repeat; +} + +.fotorama-print-background { + @media print { + background: none !important; + } +} diff --git a/lib/web/mage/gallery/module/_focus.less b/lib/web/mage/gallery/module/_focus.less index 79af2c661601b..50a1e8305960c 100644 --- a/lib/web/mage/gallery/module/_focus.less +++ b/lib/web/mage/gallery/module/_focus.less @@ -2,3 +2,60 @@ // * Copyright © 2015 Magento. All rights reserved. // * See COPYING.txt for license details. // */ + +.fotorama__fullscreen-icon:focus, +.fotorama__zoom-out:focus, +.fotorama__zoom-in:focus { + box-shadow:@focus__box-shadow; +} + +.fotorama__arr:focus:after, +.fotorama__stage__shaft:focus:after, +.fotorama__nav__frame--thumb:focus .fotorama__thumb:after, +.fotorama__nav__frame--dot:focus .fotorama__dot:after{ + box-shadow: @focus__box-shadow; + border-radius: inherit; + content: ''; + position: absolute; + left: 3px; + top: 3px; + bottom: 3px; + right: 3px; + z-index: 10; +} + +.fotorama__nav__frame--thumb:focus, +.fotorama__nav__frame--dot:focus { + .fotorama__thumb:after, + .fotorama__dot:after{ + left: 0; + top: 0; + bottom: 0; + right: 0; + } + .fotorama__thumb.fotorama_vertical_ratio:after { + left: 2px; + right: 2px; + } + .fotorama__thumb { + overflow: inherit; + } +} + +.fotorama__nav__frame:nth-child(2):focus { + .fotorama__thumb:after{ + left: 1px; + } + .fotorama__thumb.fotorama_vertical_ratio:after{ + top: 1px; + } +} + +.fotorama__nav__frame:last-child:focus { + .fotorama__thumb:after{ + right: 1px; + } + .fotorama__thumb.fotorama_vertical_ratio:after{ + bottom: 1px; + } +} \ No newline at end of file diff --git a/lib/web/mage/gallery/module/_fullscreen.less b/lib/web/mage/gallery/module/_fullscreen.less index 84279c79b9212..1ddfdd3f2b3c5 100644 --- a/lib/web/mage/gallery/module/_fullscreen.less +++ b/lib/web/mage/gallery/module/_fullscreen.less @@ -3,3 +3,32 @@ // * See COPYING.txt for license details. // */ +.fotorama__fullscreen { + overflow: hidden; + .fotorama__zoom-in, + .fotorama__zoom-out { + overflow: hidden; + position: absolute; + width: @size-fotorama-block; + height: @size-fotorama-block; + display: block; + cursor: pointer; + + } + .fotorama__zoom-out { + top: 83px; + &:extend(.fotorama-sprite); + background-position: 0 (-@size-fotorama-block) !important; + &.fotorama__zoom-out--disabled { + display: none + } + } + .fotorama__zoom-in { + top: 2px; + &:extend(.fotorama-sprite); + background-position: 0 0 !important; + &.fotorama__zoom-in--disabled { + display: none + } + } +} From f1637b518bb584b0364012ead38e7cc636260b6e Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Fri, 20 Nov 2015 17:31:42 +0300 Subject: [PATCH 089/214] JS-318: Sliding image when drag zoomed image --- lib/web/mage/gallery/gallery.js | 2 ++ lib/web/magnifier/magnify.js | 11 ++++------- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/lib/web/mage/gallery/gallery.js b/lib/web/mage/gallery/gallery.js index 801a05bcc8587..c71f00f081019 100644 --- a/lib/web/mage/gallery/gallery.js +++ b/lib/web/mage/gallery/gallery.js @@ -179,6 +179,7 @@ define([ settings.focusableEnd.bind('focusin', self._focusSwitcher); settings.api.updateOptions(settings.defaultConfig.options, true); settings.api.updateOptions(settings.fullscreenConfig, true); + settings.closeIcon.show(); if (!_.isEqual(settings.activeBreakpoint, {})) { settings.api.updateOptions(settings.activeBreakpoint.options, true); @@ -196,6 +197,7 @@ define([ settings.api.updateOptions(settings.defaultConfig.options, true); settings.focusableStart.unbind('focusin', this._focusSwitcher); settings.focusableEnd.unbind('focusin', this._focusSwitcher); + settings.closeIcon.hide(); if (!_.isEqual(settings.activeBreakpoint, {})) { settings.api.updateOptions(settings.activeBreakpoint.options, true); diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index 5130104326dc6..5587d215279e0 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -27,6 +27,7 @@ define([ hideMagnifier, behaveOnHover, dragFlag, + endX, zoomShown = true, allowZoomOut = false, allowZoomIn = true; @@ -406,7 +407,6 @@ define([ var isDragActive = false, startX, startY, - endX, imagePosX, imagePosY, touch, @@ -431,6 +431,7 @@ define([ if (($image.offset().left === $imageContainer.offset().left + $imageContainer.width() - $image.width() && e.keyCode === 39) || (endX - 1 < $imageContainer.offset().left + $imageContainer.width() - $image.width() && dx < 0 && + _.isNumber(endX) && (e.type === 'mousemove' || e.type === 'touchmove' || e.type === 'pointermove' || e.type === 'MSPointerMove'))) { endX = null; swipeSlide('>'); @@ -477,7 +478,7 @@ define([ if ($image.width() <= $imageContainer.width() && (e.type === 'mousemove' || e.type === 'touchmove' || e.type === 'pointermove' || e.type === 'MSPointerMove') && - Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 50) { + Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > $image.width() / 5 + 20) { dx < 0 ? swipeSlide('>') : swipeSlide('<'); } } @@ -539,10 +540,6 @@ define([ startX = e.clientX || e.originalEvent.clientX; startY = e.clientY || e.originalEvent.clientY; isDragActive = true; - - if (!endX) { - endX = $image.offset().left; - } } } }); @@ -660,7 +657,7 @@ define([ if (gallery.fullScreen) { - if ($image.offset()) { + if ($image.offset() && $image.width() > $imageContainer.width()) { endX = $image.offset().left; } From 5f45e99d356176e88fe99ba50cdf32e11c0d58a2 Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Mon, 23 Nov 2015 13:23:13 +0300 Subject: [PATCH 090/214] Unset focus on close icon for mobile devices --- lib/web/fotorama/fotorama.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/lib/web/fotorama/fotorama.js b/lib/web/fotorama/fotorama.js index 9973919331029..2de7213f41ad6 100644 --- a/lib/web/fotorama/fotorama.js +++ b/lib/web/fotorama/fotorama.js @@ -3155,7 +3155,10 @@ fotoramaVersion = '4.6.4'; loadImg(activeIndexes, 'stage'); updateFotoramaState(); triggerEvent('fullscreenenter'); - $fullscreenIcon.focus(); + + if (!('ontouchstart' in window)) { + $fullscreenIcon.focus(); + } } return this; From 8456e517e8d414a5294934a2241ca68558b65007 Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Mon, 23 Nov 2015 12:33:39 +0200 Subject: [PATCH 091/214] JS-317: Video preview is visible under video player --- .../view/frontend/web/js/fotorama-add-video-events.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 index e3f2c8afc5862..7ebcabcdbe2b5 100644 --- 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 @@ -396,8 +396,9 @@ define([ $(this.element).on('fotorama:showend', $.proxy(function (evt, fotoramaData) { $(fotoramaData.activeFrame.$stageFrame).removeAttr('href'); }, this)); - - this._startPrepareForPlayer(e, fotorama); + this._checkForVideo(e, fotorama, -1); + this._checkForVideo(e, fotorama, 0); + this._checkForVideo(e, fotorama, 1); }, /** @@ -521,7 +522,6 @@ define([ $('.fotorama__arr--prev').hide(); } - $(this).removeClass('video-unplayed'); $(this).find('.' + PV).productVideoLoader(); $(this).find('img').hide(); From 61a65f0e9542d7db9082c0af7549a6e0c3583aab Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Mon, 23 Nov 2015 14:31:25 +0300 Subject: [PATCH 092/214] JS-318: Sliding image when drag zoomed image - code refactoring --- lib/web/fotorama/fotorama.js | 5 ++++- lib/web/magnifier/magnify.js | 5 +++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/lib/web/fotorama/fotorama.js b/lib/web/fotorama/fotorama.js index 9973919331029..2de7213f41ad6 100644 --- a/lib/web/fotorama/fotorama.js +++ b/lib/web/fotorama/fotorama.js @@ -3155,7 +3155,10 @@ fotoramaVersion = '4.6.4'; loadImg(activeIndexes, 'stage'); updateFotoramaState(); triggerEvent('fullscreenenter'); - $fullscreenIcon.focus(); + + if (!('ontouchstart' in window)) { + $fullscreenIcon.focus(); + } } return this; diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index 5587d215279e0..d93ab1ec1a943 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -425,7 +425,8 @@ define([ function shiftImage(dx, dy, e) { var top = +imagePosY + dy, - left = +imagePosX + dx; + left = +imagePosX + dx, + swipeCondition = $image.width() / 10 + 20; dragFlag = true; @@ -478,7 +479,7 @@ define([ if ($image.width() <= $imageContainer.width() && (e.type === 'mousemove' || e.type === 'touchmove' || e.type === 'pointermove' || e.type === 'MSPointerMove') && - Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > $image.width() / 5 + 20) { + Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > swipeCondition) { dx < 0 ? swipeSlide('>') : swipeSlide('<'); } } From 7612233c6dba9c3afdeebc4f9ca24a8badafe78a Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Mon, 23 Nov 2015 15:54:38 +0300 Subject: [PATCH 093/214] JS-318: Sliding image when drag zoomed image - hide plus icon --- .../view/frontend/web/js/fotorama-add-video-events.js | 8 ++++---- lib/web/mage/gallery/gallery.js | 2 -- 2 files changed, 4 insertions(+), 6 deletions(-) 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 index 28add25807fb8..b45e0a08eeb5f 100644 --- 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 @@ -563,11 +563,11 @@ define([ clearInterval(waitForFroogaloop); fotorama.requestFullScreen(); $(this.element).data('fotorama').activeFrame.$stageFrame[0].click(); - $('.fotorama__fullscreen-icon').css({ + /*$('.fotorama__fullscreen-icon').css({ opacity: '1', visibility: 'visible', display: 'block' - }); + });*/ this.Base = false; } }, this), 50); @@ -575,11 +575,11 @@ define([ setTimeout($.proxy(function () { fotorama.requestFullScreen(); $(this.element).data('fotorama').activeFrame.$stageFrame[0].click(); - $('.fotorama__fullscreen-icon').css({ + /*$('.fotorama__fullscreen-icon').css({ opacity: '1', visibility: 'visible', display: 'block' - }); + });*/ this.Base = false; }, this), 50); } diff --git a/lib/web/mage/gallery/gallery.js b/lib/web/mage/gallery/gallery.js index c71f00f081019..17e047d54d77d 100644 --- a/lib/web/mage/gallery/gallery.js +++ b/lib/web/mage/gallery/gallery.js @@ -179,7 +179,6 @@ define([ settings.focusableEnd.bind('focusin', self._focusSwitcher); settings.api.updateOptions(settings.defaultConfig.options, true); settings.api.updateOptions(settings.fullscreenConfig, true); - settings.closeIcon.show(); if (!_.isEqual(settings.activeBreakpoint, {})) { settings.api.updateOptions(settings.activeBreakpoint.options, true); @@ -191,7 +190,6 @@ define([ }); settings.$gallery.on('fotorama:fullscreenexit', function () { - settings.$pageWrapper.show(); settings.focusableStart.attr('tabindex', '-1'); settings.focusableEnd.attr('tabindex', '-1'); settings.api.updateOptions(settings.defaultConfig.options, true); From 0c2bd59410939b55026d3f9c20517821ad5a9ec0 Mon Sep 17 00:00:00 2001 From: Uladzislau Harbachou Date: Mon, 23 Nov 2015 16:25:24 -0800 Subject: [PATCH 094/214] JS-311: Fullscreen wrapper position --- lib/web/mage/gallery/gallery.less | 38 ++------------------ lib/web/mage/gallery/module/_extends.less | 2 +- lib/web/mage/gallery/module/_focus.less | 2 +- lib/web/mage/gallery/module/_fullscreen.less | 30 +++++++++++++++- lib/web/mage/gallery/module/_mixins.less | 13 ++++++- lib/web/mage/gallery/module/_variables.less | 2 +- 6 files changed, 46 insertions(+), 41 deletions(-) diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index 1510c764fbe22..097fc4f28358e 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -10,6 +10,8 @@ @import '../../css/source/lib/_responsive.less'; @import 'module/_mixins.less'; //Mixins in gallery @import 'module/_extends.less'; +@import 'module/_focus.less'; +@import 'module/_fullscreen.less'; .fotorama_spin { display: none; @@ -38,23 +40,6 @@ overflow: hidden; } -.fotorama--fullscreen { - background: @color-white; - bottom: 0 !important; - float: none !important; - left: 0 !important; - margin: 0 !important; - position: fixed !important; - right: 0 !important; - top: 0 !important; - width: 100% !important; - z-index: @z-index-10 !important; - &:extend(.fotorama-gpu); - .fotorama__wrap { - max-width: 100% !important; - } -} - .fotorama__wrap { &:extend(.fotorama-no-select); -webkit-text-size-adjust: 100%; @@ -154,15 +139,6 @@ display: none; } -.fotorama--fullscreen .fotorama__loaded--full { - .fotorama__img { - display: none; - } - .fotorama__img--full { - display: block; - } -} - .fotorama__html { &:extend(.fotorama-stretch); } @@ -1027,13 +1003,3 @@ } } -.fotorama-button-background() { - background-color: rgba(255, 255, 255, 0.3); - transition: background-color @fotorama-duration-time ease-in-out; - &:hover { - background-color: rgba(255, 255, 255, 0.5); - } - &:active { - background-color: rgba(213, 213, 213, 0.5); - } -} diff --git a/lib/web/mage/gallery/module/_extends.less b/lib/web/mage/gallery/module/_extends.less index 81edb1c9a6cf2..89d9e7b100d32 100644 --- a/lib/web/mage/gallery/module/_extends.less +++ b/lib/web/mage/gallery/module/_extends.less @@ -1,5 +1,5 @@ // /** -// * Copyright © 2015 Magento. All rights reserved. +// * Copyright © 2015 Magento. All rights reserved. // * See COPYING.txt for license details. // */ diff --git a/lib/web/mage/gallery/module/_focus.less b/lib/web/mage/gallery/module/_focus.less index 50a1e8305960c..354105655b55f 100644 --- a/lib/web/mage/gallery/module/_focus.less +++ b/lib/web/mage/gallery/module/_focus.less @@ -1,5 +1,5 @@ // /** -// * Copyright © 2015 Magento. All rights reserved. +// * Copyright © 2015 Magento. All rights reserved. // * See COPYING.txt for license details. // */ diff --git a/lib/web/mage/gallery/module/_fullscreen.less b/lib/web/mage/gallery/module/_fullscreen.less index 1ddfdd3f2b3c5..19882fb41d96e 100644 --- a/lib/web/mage/gallery/module/_fullscreen.less +++ b/lib/web/mage/gallery/module/_fullscreen.less @@ -1,10 +1,29 @@ // /** -// * Copyright © 2015 Magento. All rights reserved. +// * Copyright © 2015 Magento. All rights reserved. // * See COPYING.txt for license details. // */ +.fotorama--fullscreen { + background: @color-white; + bottom: 0 !important; + float: none !important; + left: 0 !important; + margin: 0 !important; + position: fixed !important; + right: 0 !important; + top: 0 !important; + width: 100% !important; + height: 100% !important; + z-index: @z-index-10 !important; + &:extend(.fotorama-gpu); + .fotorama__wrap { + max-width: 100% !important; + } +} + .fotorama__fullscreen { overflow: hidden; + position: relative; .fotorama__zoom-in, .fotorama__zoom-out { overflow: hidden; @@ -32,3 +51,12 @@ } } } + +.fotorama--fullscreen .fotorama__loaded--full { + .fotorama__img { + display: none; + } + .fotorama__img--full { + display: block; + } +} \ No newline at end of file diff --git a/lib/web/mage/gallery/module/_mixins.less b/lib/web/mage/gallery/module/_mixins.less index c5d29b08147db..da5e1283ecba9 100644 --- a/lib/web/mage/gallery/module/_mixins.less +++ b/lib/web/mage/gallery/module/_mixins.less @@ -1,5 +1,5 @@ // /** -// * Copyright © 2015 Magento. All rights reserved. +// * Copyright © 2015 Magento. All rights reserved. // * See COPYING.txt for license details. // */ @@ -40,3 +40,14 @@ display: inline-block; vertical-align: @va; } + +.fotorama-button-background() { + background-color: rgba(255, 255, 255, 0.3); + transition: background-color @fotorama-duration-time ease-in-out; + &:hover { + background-color: rgba(255, 255, 255, 0.5); + } + &:active { + background-color: rgba(213, 213, 213, 0.5); + } +} \ No newline at end of file diff --git a/lib/web/mage/gallery/module/_variables.less b/lib/web/mage/gallery/module/_variables.less index 4f7c1346ab579..9f6c1c37441fd 100644 --- a/lib/web/mage/gallery/module/_variables.less +++ b/lib/web/mage/gallery/module/_variables.less @@ -1,5 +1,5 @@ // /** -// * Copyright © 2015 Magento. All rights reserved. +// * Copyright © 2015 Magento. All rights reserved. // * See COPYING.txt for license details. // */ From f2af4b3dc1727a5b228f76d6dfb1e111d36f929f Mon Sep 17 00:00:00 2001 From: Uladzislau Harbachou Date: Mon, 23 Nov 2015 16:35:02 -0800 Subject: [PATCH 095/214] JS-311: Fullscreen wrapper position - Fix border on focus --- lib/web/mage/gallery/module/_focus.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/lib/web/mage/gallery/module/_focus.less b/lib/web/mage/gallery/module/_focus.less index 354105655b55f..0722bd8a9123f 100644 --- a/lib/web/mage/gallery/module/_focus.less +++ b/lib/web/mage/gallery/module/_focus.less @@ -9,6 +9,10 @@ box-shadow:@focus__box-shadow; } +.fotorama__arr:focus { + box-shadow: none; +} + .fotorama__arr:focus:after, .fotorama__stage__shaft:focus:after, .fotorama__nav__frame--thumb:focus .fotorama__thumb:after, From 691611222b2577c42413bb4f40130cd4124a2613 Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Mon, 23 Nov 2015 17:35:22 +0300 Subject: [PATCH 096/214] JS-315: Plus icon on mobile devices --- lib/web/mage/gallery/gallery.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/lib/web/mage/gallery/gallery.js b/lib/web/mage/gallery/gallery.js index 17e047d54d77d..fc4c4a22b1861 100644 --- a/lib/web/mage/gallery/gallery.js +++ b/lib/web/mage/gallery/gallery.js @@ -173,6 +173,7 @@ define([ settings.fullscreenConfig.swipe = false; settings.$gallery.on('fotorama:fullscreenenter', function () { + settings.closeIcon.show(); settings.focusableStart.attr('tabindex', '0'); settings.focusableEnd.attr('tabindex', '0'); settings.focusableStart.bind('focusin', self._focusSwitcher); @@ -190,6 +191,7 @@ define([ }); settings.$gallery.on('fotorama:fullscreenexit', function () { + settings.closeIcon.hide(); settings.focusableStart.attr('tabindex', '-1'); settings.focusableEnd.attr('tabindex', '-1'); settings.api.updateOptions(settings.defaultConfig.options, true); From f330c0f7a56d78609401c7015c17470733e9127d Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Mon, 23 Nov 2015 19:47:38 +0300 Subject: [PATCH 097/214] JS-314: Strange effect when swipe images on fullscreen --- lib/web/magnifier/magnify.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index ad0e1c8c499ba..adfb4206dfbc6 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -61,8 +61,10 @@ define([ function toggleZoomable($image, flag) { if (flag) { $image.css({ - width: $image.width(), - height: $image.height() + 'min-width': $image.width(), + 'min-height': $image.height(), + 'width': $image.width(), + 'height': $image.height() }).addClass(imageZoommable); } else { $image.css({ From 0b0c8fa5fbec8d65e12e48cb5b1a39fbc931880a Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Mon, 23 Nov 2015 19:49:12 +0200 Subject: [PATCH 098/214] JS-316: Incorrect behaviour of zoom --- lib/web/mage/gallery/gallery.less | 2 +- lib/web/magnifier/magnify.js | 14 ++++++++++---- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index 097fc4f28358e..03daf191b5a6c 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -888,7 +888,7 @@ } &.fotorama__img--draggable { cursor: move; - transition-property: width, height; + transition-property: none; } } } diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index ad0e1c8c499ba..eae32a02f695a 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -528,13 +528,14 @@ define([ if (e && e.originalEvent.touches && e.originalEvent.touches.length >= 2) { e.preventDefault(); pinchDimention = getDimention(e.originalEvent); + isDragActive = false; + if ($image.hasClass(imageDraggableClass)) { + $image.removeClass(imageDraggableClass); + } } else { if (gallery.fullScreen) { e.preventDefault(); - if (zoomShown && allowZoomOut) { - $image.addClass(imageDraggableClass); - } imagePosY = $image.offset().top; imagePosX = $image.offset().left; @@ -555,7 +556,9 @@ define([ if (e && e.originalEvent.touches && e.originalEvent.touches.length >= 2) { e.preventDefault(); var currentDimention = getDimention(e.originalEvent); - + if ($image.hasClass(imageDraggableClass)) { + $image.removeClass(imageDraggableClass); + } if (currentDimention < pinchDimention) { zoomOut(e); pinchDimention = currentDimention; @@ -569,6 +572,9 @@ define([ if (gallery.fullScreen && isDragActive) { + if (zoomShown && allowZoomOut && !$image.hasClass(imageDraggableClass)) { + $image.addClass(imageDraggableClass); + } clientX = e.clientX || e.originalEvent.clientX; clientY = e.clientY || e.originalEvent.clientY; From 3b9e86d3a7d906843eaa149dc84d0feb9a69f6a2 Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Tue, 24 Nov 2015 16:52:49 +0300 Subject: [PATCH 099/214] JS-320: Image doesn't fit into container after rotation --- lib/web/magnifier/magnify.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index debc96322ee71..c06d2fa19f0a7 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -59,6 +59,13 @@ define([ } function toggleZoomable($image, flag) { + var minHeight, + minWidth, + height = $image.height(), + width = $image.width(), + parentHeight = $image.parent().height(), + parentWidth = $image.parent().width(); + if (flag) { $image.css({ 'min-width': $image.width(), @@ -75,6 +82,22 @@ define([ right: '', bottom: '' }).removeClass(imageZoommable); + + //For iPad/iPhone rotation changing + if (width > parentWidth || height > parentHeight) { + + if (width / height < parentWidth / parentHeight) { + minHeight = parentHeight; + minWidth = width * (parentHeight / height); + } else { + minWidth = parentWidth; + minHeight = height * parentWidth / width; + } + $image.css({ + 'min-width': minWidth, + 'min-height': minHeight + }); + } } } @@ -685,6 +708,7 @@ define([ } $(window).resize(function () { + toggleZoomButtons($image); if ($image.hasClass(imageZoommable) && !allowZoomOut) { resetVars($image); } From 5625f14a215c5087c93614bb2201e356c158796d Mon Sep 17 00:00:00 2001 From: Uladzislau Harbachou Date: Tue, 24 Nov 2015 06:56:17 -0800 Subject: [PATCH 100/214] JS-321: Remove margin for zoom buttons in fullscreen --- lib/web/mage/gallery/gallery.less | 4 +-- lib/web/mage/gallery/module/_focus.less | 37 +++++++++----------- lib/web/mage/gallery/module/_fullscreen.less | 9 +++-- lib/web/mage/gallery/module/_variables.less | 1 + 4 files changed, 24 insertions(+), 27 deletions(-) diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index 03daf191b5a6c..e21f147af0946 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -450,8 +450,8 @@ &:extend(.fotorama-sprite); background-position: 0 0; height: @size-fotorama-block; - right: 2px; - top: 2px; + right: 0; + top: 0; width: @size-fotorama-block; z-index: @z-index-10; display: none; diff --git a/lib/web/mage/gallery/module/_focus.less b/lib/web/mage/gallery/module/_focus.less index 0722bd8a9123f..037a2c3f99602 100644 --- a/lib/web/mage/gallery/module/_focus.less +++ b/lib/web/mage/gallery/module/_focus.less @@ -5,27 +5,24 @@ .fotorama__fullscreen-icon:focus, .fotorama__zoom-out:focus, -.fotorama__zoom-in:focus { - box-shadow:@focus__box-shadow; -} - -.fotorama__arr:focus { +.fotorama__zoom-in:focus, +.fotorama__arr:focus, +.fotorama__arr:focus, +.fotorama__stage__shaft:focus, +.fotorama__nav__frame--thumb:focus .fotorama__thumb, +.fotorama__nav__frame--dot:focus .fotorama__dot { box-shadow: none; -} - -.fotorama__arr:focus:after, -.fotorama__stage__shaft:focus:after, -.fotorama__nav__frame--thumb:focus .fotorama__thumb:after, -.fotorama__nav__frame--dot:focus .fotorama__dot:after{ - box-shadow: @focus__box-shadow; - border-radius: inherit; - content: ''; - position: absolute; - left: 3px; - top: 3px; - bottom: 3px; - right: 3px; - z-index: 10; + &:after { + content: ''; + border-radius: inherit; + position: absolute; + top: @fotorama-inner-box-shadow; + right: @fotorama-inner-box-shadow; + left: @fotorama-inner-box-shadow; + bottom: @fotorama-inner-box-shadow; + box-shadow: @focus__box-shadow; + z-index: @z-index-10; + } } .fotorama__nav__frame--thumb:focus, diff --git a/lib/web/mage/gallery/module/_fullscreen.less b/lib/web/mage/gallery/module/_fullscreen.less index 19882fb41d96e..217856caad0a4 100644 --- a/lib/web/mage/gallery/module/_fullscreen.less +++ b/lib/web/mage/gallery/module/_fullscreen.less @@ -13,7 +13,6 @@ right: 0 !important; top: 0 !important; width: 100% !important; - height: 100% !important; z-index: @z-index-10 !important; &:extend(.fotorama-gpu); .fotorama__wrap { @@ -35,19 +34,19 @@ } .fotorama__zoom-out { - top: 83px; + top: 80px; &:extend(.fotorama-sprite); background-position: 0 (-@size-fotorama-block) !important; &.fotorama__zoom-out--disabled { - display: none + display: none; } } .fotorama__zoom-in { - top: 2px; + top: 0; &:extend(.fotorama-sprite); background-position: 0 0 !important; &.fotorama__zoom-in--disabled { - display: none + display: none; } } } diff --git a/lib/web/mage/gallery/module/_variables.less b/lib/web/mage/gallery/module/_variables.less index 9f6c1c37441fd..1366f0a340b3f 100644 --- a/lib/web/mage/gallery/module/_variables.less +++ b/lib/web/mage/gallery/module/_variables.less @@ -9,3 +9,4 @@ @size-fotorama-block: 80px; @fotorama-thumb-arrow: 30px; @fotorama-fullscreen-zoom-time: 0.3s; +@fotorama-inner-box-shadow: 3px; \ No newline at end of file From bcf58f3a2ea8998d773921fc469965fc4dd71d09 Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Wed, 25 Nov 2015 12:00:58 +0300 Subject: [PATCH 101/214] JS-320: Image doesn't fit into container after rotation - code refactoring --- lib/web/magnifier/magnify.js | 50 +++++++++++++++++++++++------------- 1 file changed, 32 insertions(+), 18 deletions(-) diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index c06d2fa19f0a7..be4f20b6f17f7 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -58,7 +58,12 @@ define([ return imgSize; } - function toggleZoomable($image, flag) { + /** + * Sets min-height and min-width for image to avoid transition bug + * @param $image - fullscreen image + */ + var calculateMinSize = function ($image) { + var minHeight, minWidth, height = $image.height(), @@ -66,6 +71,24 @@ define([ parentHeight = $image.parent().height(), parentWidth = $image.parent().width(); + if (width > parentWidth || height > parentHeight) { + + if (width / height < parentWidth / parentHeight) { + minHeight = parentHeight; + minWidth = width * (parentHeight / height); + } else { + minWidth = parentWidth; + minHeight = height * parentWidth / width; + } + $image.css({ + 'min-width': minWidth, + 'min-height': minHeight + }); + } + } + + function toggleZoomable($image, flag) { + if (flag) { $image.css({ 'min-width': $image.width(), @@ -82,22 +105,7 @@ define([ right: '', bottom: '' }).removeClass(imageZoommable); - - //For iPad/iPhone rotation changing - if (width > parentWidth || height > parentHeight) { - - if (width / height < parentWidth / parentHeight) { - minHeight = parentHeight; - minWidth = width * (parentHeight / height); - } else { - minWidth = parentWidth; - minHeight = height * parentWidth / width; - } - $image.css({ - 'min-width': minWidth, - 'min-height': minHeight - }); - } + calculateMinSize($image); } } @@ -574,6 +582,10 @@ define([ isDragActive = true; } } + + if ($image.offset() && ($image.width() > $imageContainer.width())) { + endX = $image.offset().left; + } }); $image.off(isTouchEnabled ? 'touchmove' : 'mousemove pointermove MSPointerMove'); @@ -694,7 +706,7 @@ define([ if (gallery.fullScreen) { - if ($image.offset() && $image.width() > $imageContainer.width()) { + if ($image.offset() && ($image.width() > $imageContainer.width())) { endX = $image.offset().left; } @@ -709,6 +721,7 @@ define([ $(window).resize(function () { toggleZoomButtons($image); + calculateMinSize($image); if ($image.hasClass(imageZoommable) && !allowZoomOut) { resetVars($image); } @@ -831,6 +844,7 @@ define([ mousewheel(e, fotorama, element); if ($prevImage) { + calculateMinSize($prevImage); resetVars($prevImage); } }) From 8f124ca7e23e89ac80cd786b00491daa5ab8fbd6 Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Wed, 25 Nov 2015 11:09:18 +0200 Subject: [PATCH 102/214] JS-322: Change fullscreen transition to slide --- app/design/frontend/Magento/luma/etc/view.xml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/design/frontend/Magento/luma/etc/view.xml b/app/design/frontend/Magento/luma/etc/view.xml index 31fa82be8892d..c162a9bfd704d 100644 --- a/app/design/frontend/Magento/luma/etc/view.xml +++ b/app/design/frontend/Magento/luma/etc/view.xml @@ -211,7 +211,7 @@ 150 true - dissolve + slide 500 true From 0c1477d22b34796dcb03251de4893edb54d477b2 Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Wed, 25 Nov 2015 12:45:05 +0200 Subject: [PATCH 103/214] JS-324: Fix thumb-arrow tabindex --- lib/web/fotorama/fotorama.js | 4 ++-- lib/web/mage/gallery/gallery.html | 4 ++-- lib/web/mage/gallery/gallery.less | 2 ++ lib/web/mage/gallery/module/_focus.less | 1 - 4 files changed, 6 insertions(+), 5 deletions(-) diff --git a/lib/web/fotorama/fotorama.js b/lib/web/fotorama/fotorama.js index 2de7213f41ad6..ecd100841261c 100644 --- a/lib/web/fotorama/fotorama.js +++ b/lib/web/fotorama/fotorama.js @@ -2633,10 +2633,10 @@ fotoramaVersion = '4.6.4'; } $thumbArrLeft .toggleClass(arrDisabledClass, isLeftDisable) - .attr(disableAttr(isLeftDisable)); + .attr('disabled', isLeftDisable); $thumbArrRight .toggleClass(arrDisabledClass, isRightDisable) - .attr(disableAttr(isRightDisable)); + .attr('disabled', isRightDisable); } function stageWheelUpdate() { diff --git a/lib/web/mage/gallery/gallery.html b/lib/web/mage/gallery/gallery.html index 4ce2961640544..15e9b88a8a657 100644 --- a/lib/web/mage/gallery/gallery.html +++ b/lib/web/mage/gallery/gallery.html @@ -25,13 +25,13 @@
-
+
-
+
diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index e21f147af0946..ad506868d954d 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -903,6 +903,7 @@ width: @fotorama-thumb-arrow; z-index: @z-index-10; cursor: pointer; + box-shadow: none; .fotorama__thumb--icon { .fotorama-abs-center(); width: 100%; @@ -930,6 +931,7 @@ position: absolute; right: 0; cursor: pointer; + box-shadow: none; z-index: @z-index-10; .fotorama__thumb--icon { .fotorama-rotate(90deg); diff --git a/lib/web/mage/gallery/module/_focus.less b/lib/web/mage/gallery/module/_focus.less index 037a2c3f99602..ea9b9f7dd8cf3 100644 --- a/lib/web/mage/gallery/module/_focus.less +++ b/lib/web/mage/gallery/module/_focus.less @@ -7,7 +7,6 @@ .fotorama__zoom-out:focus, .fotorama__zoom-in:focus, .fotorama__arr:focus, -.fotorama__arr:focus, .fotorama__stage__shaft:focus, .fotorama__nav__frame--thumb:focus .fotorama__thumb, .fotorama__nav__frame--dot:focus .fotorama__dot { From 89940785f20b519638512880ec23703c1951e4ad Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Wed, 25 Nov 2015 17:52:49 +0200 Subject: [PATCH 104/214] JS-328: Drag/swipe of vertical thumbnails stopped working on mobile devices --- lib/web/fotorama/fotorama.js | 18 ++++-------------- 1 file changed, 4 insertions(+), 14 deletions(-) diff --git a/lib/web/fotorama/fotorama.js b/lib/web/fotorama/fotorama.js index 2de7213f41ad6..1160331aa444e 100644 --- a/lib/web/fotorama/fotorama.js +++ b/lib/web/fotorama/fotorama.js @@ -1428,14 +1428,8 @@ fotoramaVersion = '4.6.4'; xWin = (tail.go || tail.x || xyDiff >= 0) && !tail.noSwipe, yWin = xyDiff < 0; - if (touchFLAG && !tail.checked) { - if (touchEnabledFLAG = xWin) { - stopEvent(e); - } - } else { - stopEvent(e); - (options.onMove || noop).call(el, e, {touch: touchFLAG}); - } + stopEvent(e); + (options.onMove || noop).call(el, e, {touch: touchFLAG}); if (!moved && Math.sqrt(Math.pow(xDiff, 2) + Math.pow(yDiff, 2)) > tolerance) { moved = true; @@ -1476,16 +1470,12 @@ fotoramaVersion = '4.6.4'; function onOtherStart() { if (tail.flow) return; - setTimeout(function () { - tail.flow = true; - }, 10); + tail.flow = true; } function onOtherEnd() { if (!tail.flow) return; - setTimeout(function () { - tail.flow = false; - }, TOUCH_TIMEOUT); + tail.flow = false; } if (MS_POINTER) { From 91f1f398f28019561a210140e48b2e744602fe70 Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Thu, 26 Nov 2015 11:50:43 +0200 Subject: [PATCH 105/214] JS-324: Fix thumb-arrow tabindex --- lib/web/fotorama/fotorama.js | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/lib/web/fotorama/fotorama.js b/lib/web/fotorama/fotorama.js index ecd100841261c..df4044e41d1f2 100644 --- a/lib/web/fotorama/fotorama.js +++ b/lib/web/fotorama/fotorama.js @@ -1191,8 +1191,13 @@ fotoramaVersion = '4.6.4'; return !!el.getAttribute('disabled'); } - function disableAttr(FLAG) { - return {tabindex: FLAG * -1 + '', disabled: FLAG}; + function disableAttr(FLAG, disable) { + if (disable) { + return {disabled: FLAG}; + } else { + return {tabindex: FLAG * -1 + '', disabled: FLAG}; + + } } function addEnterUp(el, fn) { @@ -2613,10 +2618,10 @@ fotoramaVersion = '4.6.4'; disableNext = disableDirrection(1); $arrPrev .toggleClass(arrDisabledClass, disablePrev) - .attr(disableAttr(disablePrev)); + .attr(disableAttr(disablePrev, false)); $arrNext .toggleClass(arrDisabledClass, disableNext) - .attr(disableAttr(disableNext)); + .attr(disableAttr(disableNext, false)); } function thumbArrUpdate() { @@ -2633,10 +2638,10 @@ fotoramaVersion = '4.6.4'; } $thumbArrLeft .toggleClass(arrDisabledClass, isLeftDisable) - .attr('disabled', isLeftDisable); + .attr(disableAttr(isLeftDisable, true)); $thumbArrRight .toggleClass(arrDisabledClass, isRightDisable) - .attr('disabled', isRightDisable); + .attr(disableAttr(isRightDisable, true)); } function stageWheelUpdate() { From 4992a2da07273124bf3a8d2ae4032aa4d1a38ab6 Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Thu, 26 Nov 2015 17:28:22 +0200 Subject: [PATCH 106/214] JS-324: Fix thumb-arrow tabindex --- lib/web/mage/gallery/gallery.less | 2 -- lib/web/mage/gallery/module/_focus.less | 7 ++++++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index ad506868d954d..e21f147af0946 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -903,7 +903,6 @@ width: @fotorama-thumb-arrow; z-index: @z-index-10; cursor: pointer; - box-shadow: none; .fotorama__thumb--icon { .fotorama-abs-center(); width: 100%; @@ -931,7 +930,6 @@ position: absolute; right: 0; cursor: pointer; - box-shadow: none; z-index: @z-index-10; .fotorama__thumb--icon { .fotorama-rotate(90deg); diff --git a/lib/web/mage/gallery/module/_focus.less b/lib/web/mage/gallery/module/_focus.less index ea9b9f7dd8cf3..15b571c80eb79 100644 --- a/lib/web/mage/gallery/module/_focus.less +++ b/lib/web/mage/gallery/module/_focus.less @@ -58,4 +58,9 @@ .fotorama__thumb.fotorama_vertical_ratio:after{ bottom: 1px; } -} \ No newline at end of file +} + +.fotorama__thumb__arr { + box-shadow: none; +} + From 32139a9cef1fe764508d681839801f59d12406c1 Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Thu, 26 Nov 2015 18:25:19 +0200 Subject: [PATCH 107/214] JS-330: Hide magnifier on video images --- lib/web/magnifier/magnify.js | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index be4f20b6f17f7..0dac045fd2f9a 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -25,6 +25,7 @@ define([ zoomInDisabled = 'fotorama__zoom-in--disabled', zoomOutDisabled = 'fotorama__zoom-out--disabled', hideMagnifier, + checkForVideo, behaveOnHover, dragFlag, endX, @@ -736,6 +737,13 @@ define([ $(magnifierZoomSelector).remove(); }; + /** + * Check for video container. + */ + checkForVideo = function ($stageFrame) { + return $stageFrame.hasClass('fotorama-video-container'); + }; + /** * Hides magnifier on drag and while arrow click. */ @@ -785,10 +793,13 @@ define([ }); $(element).on('fotorama:load fotorama:showend fotorama:fullscreenexit fotorama:ready', function (e, fotorama) { - hideMagnifier(); - config.magnifierOpts.large = $(gallerySelector).data('fotorama').activeFrame.img; - config.magnifierOpts.full = fotorama.data[fotorama.activeIndex].original; - $($(gallerySelector).data('fotorama').activeFrame.$stageFrame).magnify(config.magnifierOpts); + var $activeStageFrame = $(gallerySelector).data('fotorama').activeFrame.$stageFrame; + if (!$activeStageFrame.find(magnifierZoomSelector).length) { + hideMagnifier(); + config.magnifierOpts.large = $(gallerySelector).data('fotorama').activeFrame.img; + config.magnifierOpts.full = fotorama.data[fotorama.activeIndex].original; + !checkForVideo($activeStageFrame) && $($activeStageFrame).magnify(config.magnifierOpts); + } }); $(element).on('gallery:loaded', function (e) { var $prevImage; From e10f3e316aa9ca0bc719a8082631d3b946fb8147 Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Fri, 27 Nov 2015 10:16:41 +0200 Subject: [PATCH 108/214] JS-330: Hide magnifier on video images --- lib/web/magnifier/magnify.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index 0dac045fd2f9a..4ad719cd5d0d7 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -24,6 +24,7 @@ define([ zoomOutLoaded = 'zoom-out-loaded', zoomInDisabled = 'fotorama__zoom-in--disabled', zoomOutDisabled = 'fotorama__zoom-out--disabled', + videoContainerClass = 'fotorama-video-container', hideMagnifier, checkForVideo, behaveOnHover, @@ -741,7 +742,7 @@ define([ * Check for video container. */ checkForVideo = function ($stageFrame) { - return $stageFrame.hasClass('fotorama-video-container'); + return $stageFrame.hasClass(videoContainerClass); }; /** From 7846ec3236b61107255cb566a8619615a415428b Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Tue, 1 Dec 2015 18:39:43 +0200 Subject: [PATCH 109/214] JS-335: Refactor gallery to support images replacing by index --- lib/web/fotorama/fotorama.js | 15 +++++++++++++-- lib/web/mage/gallery/gallery.js | 9 +++++++++ 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/lib/web/fotorama/fotorama.js b/lib/web/fotorama/fotorama.js index df4044e41d1f2..9ba7d799d9912 100644 --- a/lib/web/fotorama/fotorama.js +++ b/lib/web/fotorama/fotorama.js @@ -2250,7 +2250,7 @@ fotoramaVersion = '4.6.4'; if (!$frame) return; - var fullFLAG = that.fullScreen && dataFrame.full && dataFrame.full !== dataFrame.img && !frameData.$full && type === 'stage'; + var fullFLAG = that.fullScreen && (!frameData.$full || dataFrame.full) && type === 'stage'; if (frameData.$img && !again && !fullFLAG) return; @@ -2262,7 +2262,7 @@ fotoramaVersion = '4.6.4'; var srcKey = type === 'stage' ? (fullFLAG ? 'full' : 'img') : 'thumb', src = dataFrame[srcKey], - dummy = fullFLAG ? null : dataFrame[type === 'stage' ? 'thumb' : 'img']; + dummy = fullFLAG ? dataFrame['img'] : dataFrame[type === 'stage' ? 'thumb' : 'img']; if (type === 'navThumb') $frame = frameData.$wrap; @@ -3428,6 +3428,17 @@ fotoramaVersion = '4.6.4'; return this; }; + that.spliceByIndex = function (index, newImgObj) { + newImgObj.img && $.ajax({ + url: newImgObj.img, + type: 'HEAD', + success: function() { + data.splice(index, 1, newImgObj); + reset(); + } + }); + }; + function unloadVideo($video, unloadActiveFLAG, releaseAutoplayFLAG) { if (unloadActiveFLAG) { $wrap.removeClass(wrapVideoClass); diff --git a/lib/web/mage/gallery/gallery.js b/lib/web/mage/gallery/gallery.js index fc4c4a22b1861..278b2399ea005 100644 --- a/lib/web/mage/gallery/gallery.js +++ b/lib/web/mage/gallery/gallery.js @@ -457,6 +457,15 @@ define([ }); return images; + }, + /** + * Updates gallery data partially by index + * @param {Number} index - Index of image in data array to be updated. + * @param {Object} item - Standart gallery image object. + * + */ + updateDataByIndex: function(index, item){ + settings.fotoramaApi.spliceByIndex(index, item); } }; From 879f1bc26381d33d5cb136b736eaa2c3b4072b30 Mon Sep 17 00:00:00 2001 From: Uladzislau Harbachou Date: Tue, 1 Dec 2015 20:00:33 +0300 Subject: [PATCH 110/214] JS-354: Zoom buttons appear on video image in fullscreen --- lib/web/magnifier/magnify.js | 100 +++++++++++++++++++---------------- 1 file changed, 55 insertions(+), 45 deletions(-) diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index 4ad719cd5d0d7..8a3de9a42530f 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -26,11 +26,9 @@ define([ zoomOutDisabled = 'fotorama__zoom-out--disabled', videoContainerClass = 'fotorama-video-container', hideMagnifier, - checkForVideo, behaveOnHover, dragFlag, endX, - zoomShown = true, allowZoomOut = false, allowZoomIn = true; @@ -64,9 +62,9 @@ define([ * Sets min-height and min-width for image to avoid transition bug * @param $image - fullscreen image */ - var calculateMinSize = function ($image) { + function calculateMinSize($image) { - var minHeight, + var minHeight, minWidth, height = $image.height(), width = $image.width(), @@ -118,29 +116,42 @@ define([ toggleZoomable($image, false); } - function disableZoom(flag) { - if (flag) { + /** + * Set state for zoom controls. + * If state is true, zoom controls will be visible. + * IF state is false, zoom controls will be hidden. + * @param isHide + */ + function hideZoomControls(isHide) { + if (isHide) { $(zoomInButtonSelector).addClass(zoomInDisabled); $(zoomOutButtonSelector).addClass(zoomOutDisabled); - zoomShown = false; } else { $(zoomInButtonSelector).removeClass(zoomInDisabled); $(zoomOutButtonSelector).removeClass(zoomOutDisabled); - zoomShown = true; } } - function toggleZoomButtons($image) { + /** + * Control visibility of zoom buttons. + * If image bigger than her wrapper. Zoom controls must visible. + * Zoom controls must be invisible for video content and touch devices. + * On touch devices active pinchIn/pinchOut. + * @param $image + * @param isTouchScreen - true for touch devices + * @param isVideoActiveFrame - true for active video frame + */ + function toggleZoomButtons($image, isTouchScreen, isVideoActiveFrame) { var path = $image.attr('src'), imgSize; - if (path) { + if (path && !isTouchScreen && !isVideoActiveFrame) { imgSize = getImageSize(path); imgSize.rh > $image.parent().height() || imgSize.rw > $image.parent().width() ? - disableZoom(false) : disableZoom(true); + hideZoomControls(false) : hideZoomControls(true); } else { - disableZoom(true); + hideZoomControls(true); } } @@ -231,7 +242,7 @@ define([ ratio, dimentions = {}; - if (zoomShown && allowZoomIn) { + if (allowZoomIn) { $image = $(fullscreenImageSelector); imgOriginalSize = getImageSize($image[0].src); @@ -263,7 +274,7 @@ define([ if (heightResult >= imgOriginalSize.rh) { heightResult = imgOriginalSize.rh; - zoomHeightStep = yStep || heightResult - imageHeight; + zoomHeightStep = yStep || heightResult - imageHeight; allowZoomIn = false; } widthResult = heightResult * ratio; @@ -303,7 +314,7 @@ define([ ratio, fitIntoParent; - if (zoomShown && allowZoomOut) { + if (allowZoomOut) { allowZoomIn = true; $image = $(fullscreenImageSelector); parentWidth = $image.parent().width(); @@ -443,7 +454,7 @@ define([ /** * Method which makes draggable picture. Also work on touch devices. */ - function magnifierFullscreen() { + function magnifierFullscreen( fotorama ) { var isDragActive = false, startX, startY, @@ -549,13 +560,13 @@ define([ $image.dblclick(dblClickHandler); if (gallery.fullScreen) { - toggleZoomButtons($image); + toggleZoomButtons($image, isTouchEnabled, checkForVideo(fotorama.activeFrame.$stageFrame)); } - function getDimention(event){ + function getDimention(event) { return Math.sqrt( - (event.touches[0].clientX-event.touches[1].clientX) * (event.touches[0].clientX-event.touches[1].clientX) + - (event.touches[0].clientY-event.touches[1].clientY) * (event.touches[0].clientY-event.touches[1].clientY)); + (event.touches[0].clientX - event.touches[1].clientX) * (event.touches[0].clientX - event.touches[1].clientX) + + (event.touches[0].clientY - event.touches[1].clientY) * (event.touches[0].clientY - event.touches[1].clientY)); } $image.off(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown'); @@ -611,7 +622,7 @@ define([ if (gallery.fullScreen && isDragActive) { - if (zoomShown && allowZoomOut && !$image.hasClass(imageDraggableClass)) { + if (allowZoomOut && !$image.hasClass(imageDraggableClass)) { $image.addClass(imageDraggableClass); } clientX = e.clientX || e.originalEvent.clientX; @@ -642,21 +653,21 @@ define([ imagePosX = $(fullscreenImageSelector, $gallery).offset().left; imagePosY = $(fullscreenImageSelector, $gallery).offset().top; }; - + if (isFullScreen && !$focus.attr('data-gallery-role') && e.keyCode === 9) { $('[data-gallery-role="fotorama__fullscreen-icon"]').focus(); e.preventDefault(); } if ($focus.attr('data-gallery-role') || !$focus.length) { - + if (isFullScreen) { imagePosX = $(fullscreenImageSelector, $(gallerySelector)).offset().left; imagePosY = $(fullscreenImageSelector, $(gallerySelector)).offset().top; } - + if (e.keyCode === 39) { - + if (isFullScreen) { initVars(); shiftImage(-step, 0, e); @@ -664,17 +675,17 @@ define([ $(gallerySelector).data('fotorama').show('>'); } } - + if (e.keyCode === 38) { - + if (isFullScreen) { initVars(); shiftImage(0, step, e); } } - + if (e.keyCode === 37) { - + if (isFullScreen) { initVars(); shiftImage(step, 0, e); @@ -684,7 +695,7 @@ define([ } if (e.keyCode === 40) { - + if (isFullScreen) { e.preventDefault(); initVars(); @@ -692,7 +703,7 @@ define([ } } } - + if (e.keyCode === 27 && isFullScreen) { $(gallerySelector).data('fotorama').cancelFullScreen(); } @@ -717,12 +728,8 @@ define([ } }); - if (zoomShown) { - toggleZoomable($image, true); - } - $(window).resize(function () { - toggleZoomButtons($image); + toggleZoomButtons($image, isTouchEnabled, checkForVideo(fotorama.activeFrame.$stageFrame)); calculateMinSize($image); if ($image.hasClass(imageZoommable) && !allowZoomOut) { resetVars($image); @@ -739,11 +746,14 @@ define([ }; /** - * Check for video container. + * Check is active frame in gallery include video content. + * If true activeFrame contain video. + * @param $stageFrame - active frame in gallery + * @returns {*|Boolean} */ - checkForVideo = function ($stageFrame) { + function checkForVideo ($stageFrame) { return $stageFrame.hasClass(videoContainerClass); - }; + } /** * Hides magnifier on drag and while arrow click. @@ -751,7 +761,7 @@ define([ behaveOnHover = function (e, initPos) { var pos = [e.pageX, e.pageY], isArrow = $(e.target).data('gallery-role') === 'arrow', - isClick = initPos[0] === pos[0] && initPos[1] === pos[1], + isClick = initPos[0] === pos[0] && initPos[1] === pos[1], isImg = $(e.target).parent().data('active'); if ((isImg && !isClick) || isArrow) { @@ -852,7 +862,7 @@ define([ .on('fotorama:fullscreenenter fotorama:showend', function (e, fotorama) { hideMagnifier(); resetVars($(fullscreenImageSelector)); - magnifierFullscreen(e, fotorama); + magnifierFullscreen(fotorama); mousewheel(e, fotorama, element); if ($prevImage) { @@ -862,9 +872,9 @@ define([ }) .on('fotorama:load', function (e, fotorama) { if ($(gallerySelector).data('fotorama').fullScreen) { - toggleZoomButtons($(fullscreenImageSelector)); + toggleZoomButtons($(fullscreenImageSelector), isTouchEnabled, checkForVideo(fotorama.activeFrame.$stageFrame)); } - magnifierFullscreen(); + magnifierFullscreen(fotorama); }) .on('fotorama:show', function (e, fotorama) { $prevImage = $(fullscreenImageSelector); @@ -873,10 +883,10 @@ define([ .on('fotorama:fullscreenexit', function (e, fotorama) { resetVars($(fullscreenImageSelector)); hideMagnifier(); - disableZoom(true); + hideZoomControls(true); }); }); return config; - } + }; }); From 1bb9c52dd46930b95ca11d53c8b0c2a1e2c9abfe Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Wed, 2 Dec 2015 11:23:59 +0300 Subject: [PATCH 111/214] JS-356: Add preview arrows while video is playing (for better navigation) --- lib/web/magnifier/magnify.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index debc96322ee71..f33bcc772189f 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -727,6 +727,24 @@ define([ }); } + /** + * Displays navigation arrows on preview if it contains ifraime. + * @param fotorama - object of fotorama + */ + var showArrows = function (fotorama) { + if (fotorama.activeFrame.$stageFrame.find(':has(iframe)').length || + ($(gallerySelector).data('fotorama').fullScreen && config.fullscreen.arrows) || + (!($(gallerySelector).data('fotorama').fullScreen && config.arrows))) { + fotorama.setOptions({ + arrows: true + }); + } else { + fotorama.setOptions({ + arrows: false + }); + } + }; + $.extend(config.magnifierOpts, { zoomable: false, thumb: '.fotorama__img', @@ -753,6 +771,7 @@ define([ config.magnifierOpts.full = fotorama.data[fotorama.activeIndex].original; $($(gallerySelector).data('fotorama').activeFrame.$stageFrame).magnify(config.magnifierOpts); }); + $(element).on('gallery:loaded', function (e) { var $prevImage; $(element).find(gallerySelector) @@ -805,6 +824,7 @@ define([ resetVars($(fullscreenImageSelector)); magnifierFullscreen(e, fotorama); mousewheel(e, fotorama, element); + showArrows(fotorama); if ($prevImage) { resetVars($prevImage); From d0e952cf930182230c8ccf79deb5a641b331dfe9 Mon Sep 17 00:00:00 2001 From: Uladzislau Harbachou Date: Wed, 2 Dec 2015 17:28:46 +0300 Subject: [PATCH 112/214] JS-334: Layout "jumps" on refresh while gallery is loading - Fixed naming of classes for gallery spinner --- lib/web/fotorama/fotorama.js | 6 ++-- lib/web/mage/gallery/gallery.html | 2 +- lib/web/mage/gallery/gallery.less | 34 ++++++++++----------- lib/web/mage/gallery/module/_variables.less | 3 +- 4 files changed, 23 insertions(+), 22 deletions(-) diff --git a/lib/web/fotorama/fotorama.js b/lib/web/fotorama/fotorama.js index df4044e41d1f2..e1bfb04138cfa 100644 --- a/lib/web/fotorama/fotorama.js +++ b/lib/web/fotorama/fotorama.js @@ -89,8 +89,8 @@ fotoramaVersion = '4.6.4'; horizontalImageClass = _fotoramaClass + '_horizontal_ratio', verticalImageClass = _fotoramaClass + '_vertical_ratio', - - spinnerShowClass = _fotoramaClass + '_spinner'; + fotoramaSpinnerClass = _fotoramaClass + '__spinner', + spinnerShowClass = fotoramaSpinnerClass + '--show'; var JQUERY_VERSION = $ && $.fn.jquery.split('.'); if (!JQUERY_VERSION @@ -1791,7 +1791,7 @@ fotoramaVersion = '4.6.4'; $videoClose = $fotorama.find(cls(videoCloseClass)), videoClose = $videoClose[0], - $spinner = $fotorama.find('.fotorama_spin'), + $spinner = $fotorama.find(cls(fotoramaSpinnerClass)), $videoPlaying, diff --git a/lib/web/mage/gallery/gallery.html b/lib/web/mage/gallery/gallery.html index 15e9b88a8a657..eda2d4053c5a6 100644 --- a/lib/web/mage/gallery/gallery.html +++ b/lib/web/mage/gallery/gallery.html @@ -20,7 +20,7 @@
-
+
diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index e21f147af0946..56782946d58ff 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -13,23 +13,6 @@ @import 'module/_focus.less'; @import 'module/_fullscreen.less'; -.fotorama_spin { - display: none; - &.fotorama_spinner { - display: block; - width: 64px; - height: 64px; - background-image: url('@{baseDir}../images/loader-1.gif'); - bottom: 0; - left: 0; - margin: auto; - position: absolute; - right: 0; - top: 0; - z-index: @z-index-1; - } -} - .fotorama__zoom-in, .fotorama__zoom-out { display: none; @@ -1003,3 +986,20 @@ } } +// Styles for spinner in gallery. +.fotorama__spinnner { + display: none; + width: @fotorama-spinner-size; + height: @fotorama-spinner-size; + background-image: url('@{baseDir}../images/loader-1.gif'); + bottom: 0; + left: 0; + margin: auto; + position: absolute; + right: 0; + top: 0; + z-index: @z-index-1; + &.fotorama__spinner--show { + display: block; + } +} diff --git a/lib/web/mage/gallery/module/_variables.less b/lib/web/mage/gallery/module/_variables.less index 1366f0a340b3f..24d460bb47590 100644 --- a/lib/web/mage/gallery/module/_variables.less +++ b/lib/web/mage/gallery/module/_variables.less @@ -9,4 +9,5 @@ @size-fotorama-block: 80px; @fotorama-thumb-arrow: 30px; @fotorama-fullscreen-zoom-time: 0.3s; -@fotorama-inner-box-shadow: 3px; \ No newline at end of file +@fotorama-inner-box-shadow: 3px; +@fotorama-spinner-size: 64px; \ No newline at end of file From fc1befc77d06f7595eb9672534a85b829de967fb Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Wed, 2 Dec 2015 18:30:41 +0200 Subject: [PATCH 113/214] JS-338: [Configurable.JS] Do not reload full image set when 'First by First' is enabled --- .../view/type/options/configurable.phtml | 3 ++- .../view/frontend/web/js/configurable.js | 21 ++++++++++++++++--- 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/app/code/Magento/ConfigurableProduct/view/frontend/templates/product/view/type/options/configurable.phtml b/app/code/Magento/ConfigurableProduct/view/frontend/templates/product/view/type/options/configurable.phtml index fce7c65534053..01c0adabcea0d 100644 --- a/app/code/Magento/ConfigurableProduct/view/frontend/templates/product/view/type/options/configurable.phtml +++ b/app/code/Magento/ConfigurableProduct/view/frontend/templates/product/view/type/options/configurable.phtml @@ -33,7 +33,8 @@ $_attributes = $block->decorateArray($block->getAllowAttributes()); { "#product_addtocart_form": { "configurable": { - "spConfig": getJsonConfig() ?> + "spConfig": getJsonConfig() ?>, + "onlyMainImg": true } } } diff --git a/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js b/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js index c2f0e189946c1..362de703b39ff 100644 --- a/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js +++ b/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js @@ -254,13 +254,28 @@ define([ */ _changeProductImage: function () { var images = this.options.spConfig.images[this.simpleProduct], - galleryObject = $(this.options.mediaGallerySelector).data('gallery'); + initialImages = this.options.mediaGalleryInitial, + galleryObject = $(this.options.mediaGallerySelector).data('gallery'), + updateGallery; + + updateGallery = function (imagesArr) { + var mainImg = imagesArr.filter(function (img) { + return img.isMain; + }); + + galleryObject.updateDataByIndex(0, mainImg[0]); + galleryObject.seek(1); + }; if (galleryObject) { if (images) { - galleryObject.updateData(images); + this.options.onlyMainImg ? + updateGallery(images) : + galleryObject.updateData(images); } else { - galleryObject.updateData(this.options.mediaGalleryInitial); + this.options.onlyMainImg ? + updateGallery(initialImages) : + galleryObject.updateData(this.options.mediaGalleryInitial); } } }, From 2152626964047b9870220ae5c82c4c23de4d9900 Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Wed, 2 Dec 2015 18:34:11 +0200 Subject: [PATCH 114/214] JS-344: [SwatchRenderer.js] Do not reload full image set when 'First by First' is enabled --- .../templates/product/view/renderer.phtml | 21 ++++++++++++------- .../view/frontend/web/js/SwatchRenderer.js | 18 +++++++++++----- 2 files changed, 26 insertions(+), 13 deletions(-) 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 index f3fff8e081c3d..b8054564f60a2 100644 --- a/app/code/Magento/Swatches/view/frontend/templates/product/view/renderer.phtml +++ b/app/code/Magento/Swatches/view/frontend/templates/product/view/renderer.phtml @@ -6,12 +6,17 @@ ?>
- diff --git a/app/code/Magento/Swatches/view/frontend/web/js/SwatchRenderer.js b/app/code/Magento/Swatches/view/frontend/web/js/SwatchRenderer.js index 86ffadd94f660..47dece072eab4 100644 --- a/app/code/Magento/Swatches/view/frontend/web/js/SwatchRenderer.js +++ b/app/code/Magento/Swatches/view/frontend/web/js/SwatchRenderer.js @@ -204,6 +204,9 @@ define([ // selector of price wrapper (need to know where set price) selectorProductPrice: '[data-role=priceBox]', + //selector of product images gallery wrapper + mediaGallerySelector: '[data-gallery-role=gallery-placeholder]', + // number of controls to show (false or zero = show all) numberToShow: false, @@ -865,13 +868,16 @@ define([ * @param {Boolean} isProductViewExist */ updateBaseImage: function (images, context, isProductViewExist) { - var justAnImage = images[0]; + var justAnImage = images[0], + galleryApi = context.find(this.options.mediaGallerySelector).data('gallery'); if (isProductViewExist) { - context - .find('[data-gallery-role=gallery-placeholder]') - .data('gallery') - .updateData(images); + if (this.options.onlyMainImg) { + galleryApi.updateDataByIndex(0, images[0]); + galleryApi.seek(1); + } else { + galleryApi.updateData(images); + } } else if (justAnImage && justAnImage.img) { context.find('.product-image-photo').attr('src', justAnImage.img); } @@ -907,4 +913,6 @@ define([ }); } }); + + return $.custom.SwatchRenderer; }); From f213258a417f2125c981579a549b5edd3d9d495a Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Thu, 3 Dec 2015 11:04:20 +0300 Subject: [PATCH 115/214] JS-337: [Configurable.JS] Preload all needed images --- .../view/frontend/web/js/configurable.js | 44 ++++++++++++++++++- lib/web/mage/gallery/preloadImages.js | 35 +++++++++++++++ 2 files changed, 78 insertions(+), 1 deletion(-) create mode 100644 lib/web/mage/gallery/preloadImages.js diff --git a/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js b/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js index c2f0e189946c1..16cb850795b96 100644 --- a/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js +++ b/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js @@ -7,11 +7,12 @@ define([ 'jquery', 'underscore', 'mage/template', + 'mage/gallery/preloadImages', 'priceUtils', 'priceBox', 'jquery/ui', 'jquery/jquery.parsequery' -], function ($, _, mageTemplate) { +], function ($, _, mageTemplate, preloadImages) { 'use strict'; $.widget('mage.configurable', { @@ -38,6 +39,10 @@ define([ // Initial setting of various option values this._initializeOptions(); + //Preload all gallery images + this._preloadImages(); + this._preloadOptionalImages(); + // Override defaults with URL query parameters and/or inputs values this._overrideDefaults(); @@ -87,6 +92,43 @@ define([ }); }, + /** + * Preloads default configuration images. + * @private + */ + _preloadImages: function () { + var options = this.options, + fullImagesList = [], + imagesList = []; + + _.each(options.mediaGalleryInitial, function (item) { + imagesList.push(item.img); + fullImagesList.push(item.full); + }); + preloadImages(imagesList); + preloadImages(fullImagesList); + }, + + /** + * Preloads optional configuration images. + * @private + */ + _preloadOptionalImages: function () { + var options = this.options; + + _.each(options.spConfig.images, function (array) { + var fullImagesList = [], + imagesList = []; + + _.each(array, function (item) { + imagesList.push(item.img); + fullImagesList.push(item.full); + }); + preloadImages(imagesList); + preloadImages(fullImagesList); + } + }, + /** * Override default options values settings with either URL query parameters or * initialized inputs values. diff --git a/lib/web/mage/gallery/preloadImages.js b/lib/web/mage/gallery/preloadImages.js new file mode 100644 index 0000000000000..78595606ff0bd --- /dev/null +++ b/lib/web/mage/gallery/preloadImages.js @@ -0,0 +1,35 @@ +/** + * Copyright © 2015 Magento. All rights reserved. + * See COPYING.txt for license details. + */ +define([], function () { + + /** + * Loads images into browser's cash. + * @param {Array } array - List of sources of images. + */ + var preloadImages = function (array) { + if (!preloadImages.list) { + preloadImages.list = []; + } + var list = preloadImages.list; + + for (var i = 0; i < array.length; i++) { + var img = new Image(); + + img.onload = function() { + var index = list.indexOf(this); + + if (index !== -1) { + list.splice(index, 1); + } + } + + list.push(img); + img.src = array[i]; + } + }; + + return preloadImages; + +}); From e1299f57d605475d718bbb4a004e7318156316c0 Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Thu, 3 Dec 2015 11:04:20 +0300 Subject: [PATCH 116/214] JS-337: [Configurable.JS] Preload all needed images --- .../view/frontend/web/js/configurable.js | 44 ++++++++++++++++++- lib/web/mage/gallery/preloadImages.js | 35 +++++++++++++++ 2 files changed, 78 insertions(+), 1 deletion(-) create mode 100644 lib/web/mage/gallery/preloadImages.js diff --git a/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js b/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js index c2f0e189946c1..16cb850795b96 100644 --- a/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js +++ b/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js @@ -7,11 +7,12 @@ define([ 'jquery', 'underscore', 'mage/template', + 'mage/gallery/preloadImages', 'priceUtils', 'priceBox', 'jquery/ui', 'jquery/jquery.parsequery' -], function ($, _, mageTemplate) { +], function ($, _, mageTemplate, preloadImages) { 'use strict'; $.widget('mage.configurable', { @@ -38,6 +39,10 @@ define([ // Initial setting of various option values this._initializeOptions(); + //Preload all gallery images + this._preloadImages(); + this._preloadOptionalImages(); + // Override defaults with URL query parameters and/or inputs values this._overrideDefaults(); @@ -87,6 +92,43 @@ define([ }); }, + /** + * Preloads default configuration images. + * @private + */ + _preloadImages: function () { + var options = this.options, + fullImagesList = [], + imagesList = []; + + _.each(options.mediaGalleryInitial, function (item) { + imagesList.push(item.img); + fullImagesList.push(item.full); + }); + preloadImages(imagesList); + preloadImages(fullImagesList); + }, + + /** + * Preloads optional configuration images. + * @private + */ + _preloadOptionalImages: function () { + var options = this.options; + + _.each(options.spConfig.images, function (array) { + var fullImagesList = [], + imagesList = []; + + _.each(array, function (item) { + imagesList.push(item.img); + fullImagesList.push(item.full); + }); + preloadImages(imagesList); + preloadImages(fullImagesList); + } + }, + /** * Override default options values settings with either URL query parameters or * initialized inputs values. diff --git a/lib/web/mage/gallery/preloadImages.js b/lib/web/mage/gallery/preloadImages.js new file mode 100644 index 0000000000000..78595606ff0bd --- /dev/null +++ b/lib/web/mage/gallery/preloadImages.js @@ -0,0 +1,35 @@ +/** + * Copyright © 2015 Magento. All rights reserved. + * See COPYING.txt for license details. + */ +define([], function () { + + /** + * Loads images into browser's cash. + * @param {Array } array - List of sources of images. + */ + var preloadImages = function (array) { + if (!preloadImages.list) { + preloadImages.list = []; + } + var list = preloadImages.list; + + for (var i = 0; i < array.length; i++) { + var img = new Image(); + + img.onload = function() { + var index = list.indexOf(this); + + if (index !== -1) { + list.splice(index, 1); + } + } + + list.push(img); + img.src = array[i]; + } + }; + + return preloadImages; + +}); From 21f300508f1ead9a9176c012453ec255eee93b7a Mon Sep 17 00:00:00 2001 From: AnastasiaBuniak Date: Thu, 3 Dec 2015 15:18:52 +0200 Subject: [PATCH 117/214] JS-338: [Configurable.JS] Do not reload full image set when 'First by First' is enabled --- .../view/frontend/web/js/configurable.js | 8 ++++++-- lib/web/mage/gallery/gallery.js | 2 +- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js b/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js index 362de703b39ff..b7dbc110a4e4f 100644 --- a/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js +++ b/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js @@ -253,11 +253,15 @@ define([ * @private */ _changeProductImage: function () { - var images = this.options.spConfig.images[this.simpleProduct], - initialImages = this.options.mediaGalleryInitial, + var images, + initialImages = $.extend(true, [], this.options.mediaGalleryInitial), galleryObject = $(this.options.mediaGallerySelector).data('gallery'), updateGallery; + if (this.options.spConfig.images[this.simpleProduct]) { + images = $.extend(true, [], this.options.spConfig.images[this.simpleProduct]); + } + updateGallery = function (imagesArr) { var mainImg = imagesArr.filter(function (img) { return img.isMain; diff --git a/lib/web/mage/gallery/gallery.js b/lib/web/mage/gallery/gallery.js index 278b2399ea005..5d27fe4245aa3 100644 --- a/lib/web/mage/gallery/gallery.js +++ b/lib/web/mage/gallery/gallery.js @@ -453,7 +453,7 @@ define([ var images = []; _.each(this.fotorama.data, function (item) { - images.push(_.omit(item, '$navThumbFrame', '$navDotFrame', '$stageFrame')); + images.push(_.omit(item, '$navThumbFrame', '$navDotFrame', '$stageFrame', 'labelledby')); }); return images; From d13c192f91905fc2aa785e796579f3ee5f85963b Mon Sep 17 00:00:00 2001 From: ValeryYafremau Date: Fri, 4 Dec 2015 12:07:37 +0300 Subject: [PATCH 118/214] JS-337: [Configurable.JS] Preload all needed images - code refactoring --- .../ConfigurableProduct/view/frontend/web/js/configurable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js b/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js index 16cb850795b96..6f21e01a07bf8 100644 --- a/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js +++ b/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js @@ -126,7 +126,7 @@ define([ }); preloadImages(imagesList); preloadImages(fullImagesList); - } + }); }, /** From d833ca4ac25a263101acc4fa228a3878fe5e293a Mon Sep 17 00:00:00 2001 From: Uladzislau Harbachou Date: Fri, 4 Dec 2015 13:52:25 +0300 Subject: [PATCH 119/214] JS-334: Layout "jumps" on refresh while gallery is loading - Fixed size exactly in preview of gallery --- .../view/frontend/templates/product/view/gallery.phtml | 9 +++++++++ 1 file changed, 9 insertions(+) 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 index d344cef700db1..9c66257dfe30d 100644 --- a/app/code/Magento/Catalog/view/frontend/templates/product/view/gallery.phtml +++ b/app/code/Magento/Catalog/view/frontend/templates/product/view/gallery.phtml @@ -20,6 +20,15 @@
+ 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 index b8054564f60a2..3116962045dfe 100644 --- 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": { ?> -
+