newsupernova/lib/web/mage/zoom.js

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/**
 * @deprecated since version 2.2.0
 */
(function (root, factory) {
    'use strict';

    if (typeof define === 'function' && define.amd) {
        define([
            'jquery',
            'mage/template',
            'jquery/ui'
        ], factory);
    } else {
        factory(root.jQuery, root.mageTemplate);
    }
}(this, function ($, mageTemplate) {
    'use strict';

    $.widget('mage.zoom', {
        options: {
            largeImage: null,
            startZoomEvent: 'click',
            stopZoomEvent: 'mouseleave',
            hideDelay: '100',
            effects: {
                show: {
                    effect: 'fade',
                    duration: 100
                },
                hide: {
                    effect: 'fade',
                    duration: 100
                }
            },
            controls: {
                lens: {
                    template: '[data-template=zoom-lens]',
                    opacity: 0.7,
                    background: '#ffffff'
                },
                track: {
                    template: '[data-template=zoom-track]'
                },
                display: {
                    template: '[data-template=zoom-display]',
                    width: 400,
                    height: 400,
                    left: 0,
                    top: 0
                },
                notice: {
                    template: '[data-template=notice]',
                    text: null,
                    container: '[data-role=gallery-notice-container]'
                }
            },
            selectors: {
                image: '[data-role=zoom-image]',
                imageContainer: '[data-role=gallery-base-image-container]',
                zoomInner: '[data-role=zoom-inner]',
                track: '[data-role=zoom-track]',
                notice: '[data-role=notice]'
            }
        },
        noticeOriginal: '',

        /**
         * Widget constructor.
         * @protected
         */
        _create: function () {
            this._setZoomData();
            this._render();
            this._bind();

            if (this.largeImage[0].complete) {
                this._largeImageLoaded();
            }
            this._hide(this.display);
            this._hide(this.track);
        },

        /**
         * Render zoom controls.
         * @protected
         */
        _render: function () {
            var noticeContainer;

            this.element.append(this._renderControl('track').append(this._renderControl('lens')));
            this.element.append(this._renderControl('display'))
                .find(this.options.selectors.zoomInner)
                .append(this._renderLargeImage());
            noticeContainer = this.element.find(this.options.controls.notice.container);
            noticeContainer = noticeContainer.length ?
                noticeContainer :
                this.element;
            noticeContainer.append(this._renderControl('notice'));
        },

        /**
         * Toggle zoom notice.
         * @protected
         */
        _toggleNotice: function () {
            this.noticeOriginal = this.notice.text() !== this.options.controls.notice.text ?
                this.notice.text() :
                this.noticeOriginal;

            if (this.getZoomRatio() > 1 && this.largeImageSrc && !this.activated) {
                this.notice.text(this.options.controls.notice.text);
            } else {
                this.notice.text(this.noticeOriginal);
            }
        },

        /**
         * Render zoom control.
         *
         * @param {String} control - name of the control
         * @return {Element} DOM-element
         * @protected
         */
        _renderControl: function (control) {
            var controlData = this.options.controls[control],
                templateData = {},
                css = {},
                controlElement;

            switch (control) {
                case 'display':
                    templateData = {
                        img: this.largeImageSrc
                    };
                    css = {
                        width: controlData.width,
                        height: controlData.height
                    };
                    break;

                case 'notice':
                    templateData = {
                        text: controlData.text || ''
                    };
                    break;
            }
            controlElement = this.element.find(this.options.selectors[control]);
            controlElement = controlElement.length ?
                controlElement :
                $(mageTemplate(controlData.template, {
                    data: templateData
                }));
            this[control] = controlElement.css(css);

            return this[control];
        },

        /**
         * Refresh zoom controls.
         * @protected
         */
        _refresh: function () {
            this._refreshControl('display');
            this._refreshControl('track');
            this._refreshControl('lens');
        },

        /**
         * Refresh zoom control position and css.
         *
         * @param {String} control - name of the control
         * @protected
         */
        _refreshControl: function (control) {
            var controlData = this.options.controls[control],
                position,
                css = {
                    position: 'absolute'
                };

            switch (control) {
                case 'display':
                    position = {
                        my: 'left+' + this.options.controls.display.left + ' top+' +
                            this.options.controls.display.top + '',
                        at: 'left+' + $(this.image).outerWidth() + ' top',
                        of: $(this.image)
                    };
                    break;

                case 'track':
                    $.extend(css, {
                        height: $(this.image).height(),
                        width: $(this.image).width()
                    });
                    position = {
                        my: 'left top',
                        at: 'left top',
                        of: $(this.image)
                    };
                    break;

                case 'lens':
                    $.extend(css, this._calculateLensSize(), {
                        background: controlData.background,
                        opacity: controlData.opacity,
                        left: 0,
                        top: 0
                    });
                    break;
            }
            this[control].css(css);

            if (position) {
                this[control].position(position);
            }
        },

        /**
         * Bind zoom event handlers.
         * @protected
         */
        _bind: function () {
            /* Events delegated to this.element, which means that all zoom controls can be changed any time
             *  and not required to re-bind events
             */
            var events = {};

            events[this.options.startZoomEvent + ' ' + this.options.selectors.image] = 'show';

            /** Handler */
            events[this.options.stopZoomEvent + ' ' + this.options.selectors.track] = function () {
                this._delay(this.hide, this.options.hideDelay || 0);
            };
            events['mousemove ' + this.options.selectors.track] = '_move';
            events.imageupdated = '_onImageUpdated';
            this._on(events);
            this._on(this.largeImage, {
                load: '_largeImageLoaded'
            });
        },

        /**
         * Store initial zoom data.
         * @protected
         */
        _setZoomData: function () {
            this.image = this.element.find(this.options.selectors.image);
            this.largeImageSrc = this.options.largeImage ||
                this.element.find(this.image).data('large');
        },

        /**
         * Update zoom when called enable method.
         * @override
         */
        enable: function () {
            this._super();
            this._onImageUpdated();
        },

        /**
         * Toggle notice when called disable method.
         * @override
         */
        disable: function () {
            this.notice.text(this.noticeOriginal || '');
            this._super();
        },

        /**
         * Show zoom controls.
         *
         * @param {Object} e - event object
         */
        show: function (e) {
            e.preventDefault();

            if (this.getZoomRatio() > 1 && this.largeImageSrc) {
                e.stopImmediatePropagation();
                this.activated = true;
                this._show(this.display, this.options.effects.show);
                this._show(this.track, this.options.effects.show);
                this._refresh();
                this.lens.position({
                    my: 'center',
                    at: 'center',
                    of: e,
                    using: $.proxy(this._refreshZoom, this)
                });
                this._toggleNotice();
                this._trigger('show');
            }
        },

        /** Hide zoom controls */
        hide: function () {
            this.activated = false;
            this._hide(this.display, this.options.effects.hide);
            this._hide(this.track, this.options.effects.hide);
            this._toggleNotice();
            this._trigger('hide');
        },

        /**
         * Refresh zoom when image is updated
         * @protected
         */
        _onImageUpdated: function () {
            // Stop loader in case previous active image has not been loaded yet
            $(this.options.selectors.image).trigger('processStop');

            if (!this.image.is($(this.options.selectors.image))) {
                this._setZoomData();

                if (this.largeImageSrc) {
                    this._refreshLargeImage();
                    this._refresh();
                } else {
                    this.hide();
                }
            }
        },

        /**
         * Reset this.ratio when large image is loaded
         * @protected
         */
        _largeImageLoaded: function () {
            this.largeImage.css({
                width: 'auto',
                height: 'auto'
            });
            this.largeImageSize = {
                width: this.largeImage.width() || this.largeImage.get(0).naturalWidth,
                height: this.largeImage.height() || this.largeImage.get(0).naturalHeight
            };
            this.ratio = null;
            this._toggleNotice();
            $(this.options.selectors.image).trigger('processStop');
        },

        /**
         * Refresh large image (refresh "src" and initial position)
         * @protected
         */
        _refreshLargeImage: function () {
            var oldSrc;

            if (this.largeImage) {
                oldSrc = this.largeImage.attr('src');

                if (oldSrc !== this.largeImageSrc) {
                    $(this.options.selectors.image).trigger('processStart');
                    this.largeImage.attr('src', this.largeImageSrc);
                }

                this.largeImage.css({
                    top: 0,
                    left: 0
                });
            }
        },

        /**
         * @return {Element} DOM-element
         * @protected
         */
        _renderLargeImage: function () {
            var image = $(this.options.selectors.image);

            // Start loader if 'load' event of image is expected to trigger later
            if (this.largeImageSrc) {
                image.trigger('processStart');
            }

            // No need to create template just for img tag
            this.largeImage = $('<img />', {
                src: this.largeImageSrc
            });

            return this.largeImage;
        },

        /**
         * Calculate zoom ratio.
         *
         * @return {Number}
         * @protected
         */
        getZoomRatio: function () {
            var imageWidth;

            if (this.ratio === null || typeof this.ratio === 'undefined') {
                imageWidth = $(this.image).width() || $(this.image).prop('width');

                return this.largeImageSize ? this.largeImageSize.width / imageWidth : 1;
            }

            return this.ratio;
        },

        /**
         * Calculate lens size, depending on zoom ratio.
         *
         * @return {Object} object contain width and height fields
         * @protected
         */
        _calculateLensSize: function () {
            var displayData = this.options.controls.display,
                ratio = this.getZoomRatio();

            return {
                width: Math.ceil(displayData.width / ratio),
                height: Math.ceil(displayData.height / ratio)
            };
        },

        /**
         * Refresh position of large image depending of position of zoom lens.
         *
         * @param {Object} position
         * @param {Object} ui
         * @protected
         */
        _refreshZoom: function (position, ui) {
            $(ui.element.element).css(position);
            this.largeImage.css(this._getLargeImageOffset(position));
        },

        /**
         * @param {Object} position
         * @return {Object}
         * @private
         */
        _getLargeImageOffset: function (position) {
            var ratio = this.getZoomRatio();

            return {
                top: -(position.top * ratio),
                left: -(position.left * ratio)
            };
        },

        /**
         * Mouse move handler.
         *
         * @param {Object} e - event object
         * @protected
         */
        _move: function (e) {
            this.lens.position({
                my: 'center',
                at: 'left top',
                of: e,
                collision: 'fit',
                within: this.image,
                using: $.proxy(this._refreshZoom, this)
            });
        }
    });

    /** Extension for zoom widget - white borders detection */
    $.widget('mage.zoom', $.mage.zoom, {
        /**
         * Get aspect ratio of the element.
         *
         * @param {Object} element - jQuery collection
         * @return {*}
         * @protected
         */
        _getAspectRatio: function (element) {
            var width, height, aspectRatio;

            if (!element || !element.length) {
                return null;
            }
            width = element.width() || element.prop('width');
            height = element.height() || element.prop('height');
            aspectRatio = width / height;

            return Math.round(aspectRatio * 100) / 100;
        },

        /**
         * Calculate large image offset depending on enabled "white borders" functionality.
         *
         * @return {Object}
         * @protected
         */
        _getWhiteBordersOffset: function () {
            var ratio = this.getZoomRatio(),
                largeWidth = this.largeImageSize.width / ratio,
                largeHeight = this.largeImageSize.height / ratio,
                width = this.image.width() || this.image.prop('width'),
                height = this.image.height() || this.image.prop('height'),
                offsetLeft = width - largeWidth > 0 ?
                Math.ceil((width - largeWidth) / 2) :
                0,
                offsetTop = height - largeHeight > 0 ?
                Math.ceil((height - largeHeight) / 2) :
                0;

            return {
                top: offsetTop,
                left: offsetLeft
            };
        },

        /**
         * @override
         */
        _largeImageLoaded: function () {
            this._super();
            this.whiteBordersOffset = null;

            if (this._getAspectRatio(this.image) !== this._getAspectRatio(this.largeImage)) {
                this.whiteBordersOffset = this._getWhiteBordersOffset();
            }
        },

        /**
         * @override
         */
        _getLargeImageOffset: function (position) {
            if (this.whiteBordersOffset) {
                position.top -= this.whiteBordersOffset.top;
                position.left -= this.whiteBordersOffset.left;
            }

            return this._superApply([position]);
        }
    });

    return $.mage.zoom;
}));