From 606413880eb5def328da80eceb530d56e7d0f088 Mon Sep 17 00:00:00 2001 From: Kacper Chara Date: Sat, 19 May 2018 14:12:27 +0200 Subject: [PATCH] Fix for Magnifier in inside mode --- app/design/frontend/Magento/luma/etc/view.xml | 1 + lib/web/mage/gallery/gallery.less | 18 +- lib/web/magnifier/magnifier.js | 353 +++++++++--------- 3 files changed, 189 insertions(+), 183 deletions(-) diff --git a/app/design/frontend/Magento/luma/etc/view.xml b/app/design/frontend/Magento/luma/etc/view.xml index 41d565789c25b..55d43272caad9 100644 --- a/app/design/frontend/Magento/luma/etc/view.xml +++ b/app/design/frontend/Magento/luma/etc/view.xml @@ -232,6 +232,7 @@ hover false + outside diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less index 24a5a2b4033d3..8f4dd78979018 100644 --- a/lib/web/mage/gallery/gallery.less +++ b/lib/web/mage/gallery/gallery.less @@ -736,24 +736,30 @@ text-align: center; top: 0; z-index: @z-index-10; + overflow: hidden; + + .magnifier-large { + width: auto; + height: auto; + max-height: none; + max-width: none; + border: none; + position: absolute; + z-index: @z-index-1; + } } .magnifier-loader-text { margin-top: 10px; } -.magnifier-large { - position: absolute; - width: 32%; - z-index: @z-index-1; -} - .magnifier-preview { bottom: 0; left: 58%; overflow: hidden; padding: 0; position: absolute; + z-index: 2; top: 215px; &:not(.hidden) { background-color: @color-white; diff --git a/lib/web/magnifier/magnifier.js b/lib/web/magnifier/magnifier.js index c475364368922..150c8adf0b22b 100644 --- a/lib/web/magnifier/magnifier.js +++ b/lib/web/magnifier/magnifier.js @@ -9,101 +9,100 @@ var magnify = new Magnify($(this), options); - /*events must be tracked here*/ + /* events must be tracked here */ /** * Return that from _init function * */ return magnify; - }; function Magnify(element, options) { - var gOptions = options || {}, + var customUserOptions = options || {}, $box = $(element), $thumb, that = this, - largeWrapper = options.largeWrapper || '.magnifier-preview', - $largeWrapper = $(largeWrapper); + largeWrapper = options.largeWrapper || '.magnifier-preview', + $magnifierPreview = $(largeWrapper); curThumb = null, - currentOpts = { - x: 0, - y: 0, - w: 0, - h: 0, - lensW: 0, - lensH: 0, - lensBgX: 0, - lensBgY: 0, - largeW: 0, - largeH: 0, - largeL: 0, - largeT: 0, - zoom: 2, - zoomMin: 1.1, - zoomMax: 5, - mode: 'outside', - eventType: 'click', - status: 0, - zoomAttached: false, - zoomable: gOptions.zoomable !== undefined ? - gOptions.zoomable - : false, - onthumbenter: gOptions.onthumbenter !== undefined ? - gOptions.onthumbenter - : null, - onthumbmove: gOptions.onthumbmove !== undefined ? - gOptions.onthumbmove - : null, - onthumbleave: gOptions.onthumbleave !== undefined ? - gOptions.onthumbleave - : null, - onzoom: gOptions.onzoom !== undefined ? - gOptions.onzoom - : null - }, - pos = { - t: 0, - l: 0, - x: 0, - y: 0 - }, - gId = 0, - status = 0, - curIdx = '', - curLens = null, - curLarge = null, - lensbg = gOptions.bg !== undefined ? gOptions.lensbg : true, - gZoom = gOptions.zoom !== undefined ? - gOptions.zoom - : currentOpts.zoom, - gZoomMin = gOptions.zoomMin !== undefined ? - gOptions.zoomMin - : currentOpts.zoomMin, - gZoomMax = gOptions.zoomMax !== undefined ? - gOptions.zoomMax - : currentOpts.zoomMax, - gMode = gOptions.mode || currentOpts.mode, - gEventType = gOptions.eventType || currentOpts.eventType, - data = {}, - inBounds = false, - isOverThumb = false, - rate = 1, - paddingX = 0, - paddingY = 0, - enabled = true, - showWrapper = true; + magnifierOptions = { + x: 0, + y: 0, + w: 0, + h: 0, + lensW: 0, + lensH: 0, + lensBgX: 0, + lensBgY: 0, + largeW: 0, + largeH: 0, + largeL: 0, + largeT: 0, + zoom: 2, + zoomMin: 1.1, + zoomMax: 5, + mode: 'outside', + eventType: 'click', + status: 0, + zoomAttached: false, + zoomable: customUserOptions.zoomable !== undefined ? + customUserOptions.zoomable + : false, + onthumbenter: customUserOptions.onthumbenter !== undefined ? + customUserOptions.onthumbenter + : null, + onthumbmove: customUserOptions.onthumbmove !== undefined ? + customUserOptions.onthumbmove + : null, + onthumbleave: customUserOptions.onthumbleave !== undefined ? + customUserOptions.onthumbleave + : null, + onzoom: customUserOptions.onzoom !== undefined ? + customUserOptions.onzoom + : null + }, + pos = { + t: 0, + l: 0, + x: 0, + y: 0 + }, + gId = 0, + status = 0, + curIdx = '', + curLens = null, + curLarge = null, + lensbg = customUserOptions.bg !== undefined ? + customUserOptions.lensbg + : true, + gZoom = customUserOptions.zoom !== undefined ? + customUserOptions.zoom + : magnifierOptions.zoom, + gZoomMin = customUserOptions.zoomMin !== undefined ? + customUserOptions.zoomMin + : magnifierOptions.zoomMin, + gZoomMax = customUserOptions.zoomMax !== undefined ? + customUserOptions.zoomMax + : magnifierOptions.zoomMax, + gMode = customUserOptions.mode || magnifierOptions.mode, + gEventType = customUserOptions.eventType || magnifierOptions.eventType, + data = {}, + inBounds = false, + isOverThumb = false, + rate = 1, + paddingX = 0, + paddingY = 0, + enabled = true, + showWrapper = true; var MagnifyCls = { magnifyHidden: 'magnify-hidden', magnifyOpaque: 'magnify-opaque', magnifyFull: 'magnify-fullimage' - }; - /** * Update Lens positon on. * @@ -143,105 +142,104 @@ $(thumb).parent().append(lens); } - function updateLensOnLoad(idx, thumb, large, largeWrapper) { - var lens = $box.find('.magnify-lens'), + function updateLensOnLoad(idSelectorMainImg, thumb, largeImgInMagnifyLens, largeWrapper) { + var magnifyLensElement= $box.find('.magnify-lens'), textWrapper; - if (data[idx].status === 1) { + if (data[idSelectorMainImg].status === 1) { textWrapper = $('
'); - lens.className = 'magnifier-loader magnify-hidden'; + magnifyLensElement.className = 'magnifier-loader magnify-hidden'; textWrapper.html('Loading...'); - lens.html('').append(textWrapper); - } else if (data[idx].status === 2) { - lens.addClass(MagnifyCls.magnifyHidden); - lens.html(''); - large.id = idx + '-large'; - large.style.width = data[idx].largeW * rate + 'px'; - large.style.height = data[idx].largeH + 'px'; - large.className = 'magnifier-large magnify-hidden'; - - if (data[idx].mode === 'inside') { - lens.append(large); + magnifyLensElement.html('').append(textWrapper); + } else if (data[idSelectorMainImg].status === 2) { + magnifyLensElement.addClass(MagnifyCls.magnifyHidden); + magnifyLensElement.html(''); + + largeImgInMagnifyLens.id = idSelectorMainImg + '-large'; + largeImgInMagnifyLens.style.width = data[idSelectorMainImg].largeImgInMagnifyLensWidth + 'px'; + largeImgInMagnifyLens.style.height = data[idSelectorMainImg].largeImgInMagnifyLensHeight + 'px'; + largeImgInMagnifyLens.className = 'magnifier-large magnify-hidden'; + + if (data[idSelectorMainImg].mode === 'inside') { + magnifyLensElement.append(largeImgInMagnifyLens); } else { - largeWrapper.html('').append(large); + largeWrapper.html('').append(largeImgInMagnifyLens); } } - data[idx].lensH = data[idx].lensH > $thumb.height() ? $thumb.height() : data[idx].lensH; + data[idSelectorMainImg].lensH = data[idSelectorMainImg].lensH > $thumb.height() ? $thumb.height() : data[idSelectorMainImg].lensH; - if (Math.round(data[idx].lensW) === 0) { - lens.css('display', 'none'); + if (Math.round(data[idSelectorMainImg].lensW) === 0) { + magnifyLensElement.css('display', 'none'); } else { - lens.css({ - width: data[idx].lensW + 1 + 'px', - height: data[idx].lensH - 1 + 'px', + magnifyLensElement.css({ + width: Math.round(data[idSelectorMainImg].lensW) + 'px', + height: Math.round(data[idSelectorMainImg].lensH) + 'px', display: '' }); } } function getMousePos() { - var xPos = pos.x - currentOpts.x, - yPos = pos.y - currentOpts.y, + var xPos = pos.x - magnifierOptions.x, + yPos = pos.y - magnifierOptions.y, t, l; - inBounds = xPos < 0 || yPos < 0 || xPos > currentOpts.w || yPos > currentOpts.h ? false : true; + inBounds = xPos < 0 || yPos < 0 || xPos > magnifierOptions.w || yPos > magnifierOptions.h ? false : true; - l = xPos - currentOpts.lensW / 2; - t = yPos - currentOpts.lensH / 2; + l = xPos - magnifierOptions.lensW / 2; + t = yPos - magnifierOptions.lensH / 2; - if (currentOpts.mode !== 'inside') { - if (xPos < currentOpts.lensW / 2) { - l = 0; - } + if (xPos < magnifierOptions.lensW / 2) { + l = 0; + } - if (yPos < currentOpts.lensH / 2) { - t = 0; - } + if (yPos < magnifierOptions.lensH / 2) { + t = 0; + } - if (xPos - currentOpts.w + Math.ceil(currentOpts.lensW / 2) > 0) { - l = currentOpts.w - Math.ceil(currentOpts.lensW + 2); - } + if (xPos - magnifierOptions.w + Math.ceil(magnifierOptions.lensW / 2) > 0) { + l = magnifierOptions.w - Math.ceil(magnifierOptions.lensW + 2); + } - if (yPos - currentOpts.h + Math.ceil(currentOpts.lensH / 2) > 0) { - t = currentOpts.h - Math.ceil(currentOpts.lensH); - } + if (yPos - magnifierOptions.h + Math.ceil(magnifierOptions.lensH / 2) > 0) { + t = magnifierOptions.h - Math.ceil(magnifierOptions.lensH); + } - pos.l = l; - pos.t = t; + pos.l = l; + pos.t = t; - currentOpts.lensBgX = pos.l; - currentOpts.lensBgY = pos.t; + magnifierOptions.lensBgX = pos.l; + magnifierOptions.lensBgY = pos.t; - if (currentOpts.mode === 'inside') { - currentOpts.largeL = xPos * (currentOpts.zoom - currentOpts.lensW / currentOpts.w); - currentOpts.largeT = yPos * (currentOpts.zoom - currentOpts.lensH / currentOpts.h); - } else { - currentOpts.largeL = currentOpts.lensBgX * currentOpts.zoom * (currentOpts.largeWrapperW / currentOpts.w) * rate; - currentOpts.largeT = currentOpts.lensBgY * currentOpts.zoom * (currentOpts.largeWrapperH / currentOpts.h); - } + if (magnifierOptions.mode === 'inside') { + magnifierOptions.largeL = Math.round(xPos * (magnifierOptions.zoom - magnifierOptions.lensW / magnifierOptions.w)); + magnifierOptions.largeT = Math.round(yPos * (magnifierOptions.zoom - magnifierOptions.lensH / magnifierOptions.h)); + } else { + magnifierOptions.largeL = Math.round(magnifierOptions.lensBgX * magnifierOptions.zoom * (magnifierOptions.largeWrapperW / magnifierOptions.w)); + magnifierOptions.largeT = Math.round(magnifierOptions.lensBgY * magnifierOptions.zoom * (magnifierOptions.largeWrapperH / magnifierOptions.h)); } } function onThumbEnter() { if (_toBoolean(enabled)) { - currentOpts = data[curIdx]; + magnifierOptions = data[curIdx]; curLens = $box.find('.magnify-lens'); - if (currentOpts.status === 2) { + if (magnifierOptions.status === 2) { curLens.removeClass(MagnifyCls.magnifyOpaque); curLarge = $('#' + curIdx + '-large'); curLarge.removeClass(MagnifyCls.magnifyHidden); - } else if (currentOpts.status === 1) { + } else if (magnifierOptions.status === 1) { curLens.className = 'magnifier-loader'; } } } function onThumbLeave() { - if (currentOpts.status > 0) { - var handler = currentOpts.onthumbleave; + if (magnifierOptions.status > 0) { + var handler = magnifierOptions.onthumbleave; if (handler !== null) { handler({ @@ -266,28 +264,30 @@ function move() { if (_toBoolean(enabled)) { - if (status !== currentOpts.status) { + if (status !== magnifierOptions.status) { onThumbEnter(); } - if (currentOpts.status > 0) { - curThumb.className = currentOpts.thumbCssClass + ' magnify-opaque'; + if (magnifierOptions.status > 0) { + curThumb.className = magnifierOptions.thumbCssClass + ' magnify-opaque'; - if (currentOpts.status === 1) { + if (magnifierOptions.status === 1) { curLens.className = 'magnifier-loader'; - } else if (currentOpts.status === 2) { + } else if (magnifierOptions.status === 2) { curLens.removeClass(MagnifyCls.magnifyHidden); curLarge.removeClass(MagnifyCls.magnifyHidden); curLarge.css({ - left: '-' + currentOpts.largeL + 'px', - top: '-' + currentOpts.largeT + 'px' + left: '-' + magnifierOptions.largeL + 'px', + top: '-' + magnifierOptions.largeT + 'px' }); } - pos.t = pos.t <= 0 ? 0 : pos.t; + var borderOffset = 2; // Offset for magnify-lens border + pos.t = pos.t <= 0 ? 0 : pos.t - borderOffset; + curLens.css({ left: pos.l + paddingX + 'px', - top: pos.t + 1 + paddingY + 'px' + top: pos.t + paddingY + 'px' }); if (lensbg) { @@ -296,10 +296,10 @@ }); } else { curLens.get(0).style.backgroundPosition = '-' + - currentOpts.lensBgX + 'px -' + - currentOpts.lensBgY + 'px'; + magnifierOptions.lensBgX + 'px -' + + magnifierOptions.lensBgY + 'px'; } - var handler = currentOpts.onthumbmove; + var handler = magnifierOptions.onthumbmove; if (handler !== null) { handler({ @@ -312,33 +312,33 @@ } } - status = currentOpts.status; + status = magnifierOptions.status; } } - function setThumbData(thumb, thumbData) { - var thumbBounds = thumb.getBoundingClientRect(), + function setThumbData(mainImage, mainImageData) { + var thumbBounds = mainImage.getBoundingClientRect(), w = 0, h = 0; - thumbData.x = thumbBounds.left; - thumbData.y = thumbBounds.top; - thumbData.w = thumbBounds.right - thumbData.x; - thumbData.h = thumbBounds.bottom - thumbData.y; + mainImageData.x = Math.round(thumbBounds.left); + mainImageData.y = Math.round(thumbBounds.top); + mainImageData.w = Math.round(thumbBounds.right - mainImageData.x); + mainImageData.h = Math.round(thumbBounds.bottom - mainImageData.y); - if (thumbData.mode === 'inside') { - w = thumbData.w; - h = thumbData.h; + if (mainImageData.mode === 'inside') { + w = mainImageData.w; + h = mainImageData.h; } else { - w = thumbData.largeWrapperW; - h = thumbData.largeWrapperH; + w = mainImageData.largeWrapperW; + h = mainImageData.largeWrapperH; } - thumbData.largeW = thumbData.zoom * w; - thumbData.largeH = thumbData.zoom * h; + mainImageData.largeImgInMagnifyLensWidth = Math.round(mainImageData.zoom * w); + mainImageData.largeImgInMagnifyLensHeight = Math.round(mainImageData.zoom * h); - thumbData.lensW = thumbData.w / thumbData.zoom / rate; - thumbData.lensH = thumbData.h / thumbData.zoom; + mainImageData.lensW = Math.round(mainImageData.w / mainImageData.zoom); + mainImageData.lensH = Math.round(mainImageData.h / mainImageData.zoom); } function _init($box, options) { @@ -360,11 +360,11 @@ if (_toBoolean(enabled)) { - $largeWrapper.show().css('display', ''); - $largeWrapper.addClass(MagnifyCls.magnifyHidden); + $magnifierPreview.show().css('display', ''); + $magnifierPreview.addClass(MagnifyCls.magnifyHidden); set(opts); } else { - $largeWrapper.empty().hide(); + $magnifierPreview.empty().hide(); } } @@ -376,7 +376,7 @@ if (showWrapper) { - if (currentOpts.status !== 0) { + if (magnifierOptions.status !== 0) { onThumbLeave(); } handleEvents(e); @@ -390,7 +390,7 @@ if (showWrapper) { if (!isOverThumb) { - if (currentOpts.status !== 0) { + if (magnifierOptions.status !== 0) { onThumbLeave(); } handleEvents(e); @@ -420,7 +420,7 @@ onThumbEnter(src); - setThumbData(curThumb, currentOpts); + setThumbData(curThumb, magnifierOptions); pos.x = e.clientX; pos.y = e.clientY; @@ -428,7 +428,7 @@ getMousePos(); move(); - var handler = currentOpts.onthumbenter; + var handler = magnifierOptions.onthumbenter; if (handler !== null) { handler({ @@ -462,15 +462,15 @@ eventType = options.eventType || thumb.getAttribute('data-eventType') || gEventType, onthumbenter = options.onthumbenter !== undefined ? options.onthumbenter - : currentOpts.onthumbenter, + : magnifierOptions.onthumbenter, onthumbleave = options.onthumbleave !== undefined ? options.onthumbleave - : currentOpts.onthumbleave, + : magnifierOptions.onthumbleave, onthumbmove = options.onthumbmove !== undefined ? options.onthumbmove - : currentOpts.onthumbmove; + : magnifierOptions.onthumbmove; - largeUrl = $thumb.data('original') || gOptions.full || $thumb.attr('src'); + largeUrl = $thumb.data('original') || customUserOptions.full || $thumb.attr('src'); if (thumb.id === '') { idx = thumb.id = 'magnifier-item-' + gId; @@ -529,7 +529,6 @@ onthumbmove: onthumbmove }; - rate = $thumb.width() / $thumb.height() / (data[idx].largeWrapperW / data[idx].largeWrapperH); paddingX = ($thumb.parent().width() - $thumb.width()) / 2; paddingY = ($thumb.parent().height() - $thumb.height()) / 2; @@ -556,7 +555,6 @@ } function onMousemove(e) { - pos.x = e.clientX; pos.y = e.clientY; @@ -567,29 +565,30 @@ } if (inBounds && isOverThumb) { - $largeWrapper.removeClass(MagnifyCls.magnifyHidden); + if(gMode === 'outside'){ + $magnifierPreview.removeClass(MagnifyCls.magnifyHidden); + } move(); } else { onThumbLeave(); isOverThumb = false; - $largeWrapper.addClass(MagnifyCls.magnifyHidden); + $magnifierPreview.addClass(MagnifyCls.magnifyHidden); } } function onScroll() { if (curThumb !== null) { - setThumbData(curThumb, currentOpts); + setThumbData(curThumb, magnifierOptions); } } $(window).on('scroll', onScroll); $(window).resize(function () { - _init($box, gOptions); + _init($box, customUserOptions); }); $box.on('mousemove', onMousemove); - _init($box, gOptions); - + _init($box, customUserOptions); } }(jQuery));