Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory : /home/corals/cartforge.co/pub/static/frontend/Magento/luma/en_US/mage/gallery/ |
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'jquery',
'fotorama/fotorama',
'underscore',
'matchMedia',
'mage/template',
'text!mage/gallery/gallery.html',
'uiClass',
'mage/translate'
], function ($, fotorama, _, mediaCheck, template, galleryTpl, Class, $t) {
'use strict';
/**
* Retrieves index if the main item.
* @param {Array.<Object>} data - Set of gallery items.
*/
var getMainImageIndex = function (data) {
var mainIndex;
if (_.every(data, function (item) {
return _.isObject(item);
})
) {
mainIndex = _.findIndex(data, function (item) {
return item.isMain;
});
}
return mainIndex > 0 ? mainIndex : 0;
},
/**
* Helper for parse translate property
*
* @param {Element} el - el that to parse
* @returns {Array} - array of properties.
*/
getTranslate = function (el) {
var slideTransform = $(el).attr('style').split(';');
slideTransform = $.map(slideTransform, function (style) {
style = style.trim();
if (style.startsWith('transform: translate3d')) {
return style.match(/transform: translate3d\((.+)px,(.+)px,(.+)px\)/);
}
return false;
});
return slideTransform.filter(Boolean);
},
/**
* @param {*} str
* @return {*}
* @private
*/
_toNumber = function (str) {
var type = typeof str;
if (type === 'string') {
return parseInt(str); //eslint-disable-line radix
}
return str;
};
return Class.extend({
defaults: {
settings: {},
config: {},
startConfig: {}
},
/**
* Checks if device has touch interface.
* @return {Boolean} The result of searching touch events on device.
*/
isTouchEnabled: (function () {
return 'ontouchstart' in document.documentElement;
})(),
/**
* Initializes gallery.
* @param {Object} config - Gallery configuration.
* @param {String} element - String selector of gallery DOM element.
*/
initialize: function (config, element) {
var self = this;
this._super();
_.bindAll(this,
'_focusSwitcher'
);
/*turn off arrows for touch devices*/
if (this.isTouchEnabled) {
config.options.arrows = false;
if (config.fullscreen) {
config.fullscreen.arrows = false;
}
}
config.options.width = _toNumber(config.options.width);
config.options.height = _toNumber(config.options.height);
config.options.thumbwidth = _toNumber(config.options.thumbwidth);
config.options.thumbheight = _toNumber(config.options.thumbheight);
config.options.swipe = true;
this.config = config;
this.settings = {
$element: $(element),
$pageWrapper: $('body>.page-wrapper'),
currentConfig: config,
defaultConfig: _.clone(config),
fullscreenConfig: _.clone(config.fullscreen),
breakpoints: config.breakpoints,
activeBreakpoint: {},
fotoramaApi: null,
isFullscreen: false,
api: null,
data: _.clone(config.data)
};
config.options.ratio = config.options.width / config.options.height;
config.options.height = null;
$.extend(true, this.startConfig, config);
this.initGallery();
this.initApi();
this.setupBreakpoints();
this.initFullscreenSettings();
this.settings.$element.on('click', '.fotorama__stage__frame', function () {
if (
!$(this).parents('.fotorama__shadows--left, .fotorama__shadows--right').length &&
!$(this).hasClass('fotorama-video-container')
) {
self.openFullScreen();
}
});
if (this.isTouchEnabled && this.settings.isFullscreen) {
this.settings.$element.on('tap', '.fotorama__stage__frame', function () {
var translate = getTranslate($(this).parents('.fotorama__stage__shaft'));
if (translate[1] === '0' && !$(this).hasClass('fotorama-video-container')) {
self.openFullScreen();
self.settings.$pageWrapper.hide();
}
});
}
},
/**
* Open gallery fullscreen
*/
openFullScreen: function () {
this.settings.api.fotorama.requestFullScreen();
this.settings.$fullscreenIcon.css({
opacity: 1,
visibility: 'visible',
display: 'block'
});
},
/**
* Gallery fullscreen settings.
*/
initFullscreenSettings: function () {
var settings = this.settings,
self = this;
settings.$gallery = this.settings.$element.find('[data-gallery-role="gallery"]');
settings.$fullscreenIcon = this.settings.$element.find('[data-gallery-role="fotorama__fullscreen-icon"]');
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.$gallery.on('fotorama:fullscreenenter', function () {
settings.closeIcon.show();
settings.focusableStart.attr('tabindex', '0');
settings.focusableEnd.attr('tabindex', '0');
settings.focusableStart.on('focusin', self._focusSwitcher);
settings.focusableEnd.on('focusin', self._focusSwitcher);
settings.api.updateOptions(settings.defaultConfig.options, true);
settings.api.updateOptions(settings.fullscreenConfig, true);
if (!_.isEqual(settings.activeBreakpoint, {}) && settings.breakpoints) {
settings.api.updateOptions(settings.activeBreakpoint.options, true);
}
settings.isFullscreen = true;
});
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);
settings.focusableStart.off('focusin', this._focusSwitcher);
settings.focusableEnd.off('focusin', this._focusSwitcher);
settings.closeIcon.hide();
if (!_.isEqual(settings.activeBreakpoint, {}) && settings.breakpoints) {
settings.api.updateOptions(settings.activeBreakpoint.options, true);
}
settings.isFullscreen = false;
settings.$element.data('gallery').updateOptions({
swipe: true
});
});
},
/**
* Switcher focus.
*/
_focusSwitcher: function (e) {
var target = $(e.target),
settings = this.settings;
if (target.is(settings.focusableStart)) {
this._setFocus('start');
} else if (target.is(settings.focusableEnd)) {
this._setFocus('end');
}
},
/**
* Set focus to element.
* @param {String} position - can be "start" and "end"
* positions.
* If position is "end" - sets focus to first
* focusable element in modal window scope.
* If position is "start" - sets focus to last
* focusable element in modal window scope
*/
_setFocus: function (position) {
var settings = this.settings,
focusableElements,
infelicity;
if (position === 'end') {
settings.$gallery.find(settings.closeIcon).trigger('focus');
} else if (position === 'start') {
infelicity = 3; //Constant for find last focusable element
focusableElements = settings.$gallery.find(':focusable');
focusableElements.eq(focusableElements.length - infelicity).trigger('focus');
}
},
/**
* Initializes gallery with configuration options.
*/
initGallery: function () {
var breakpoints = {},
settings = this.settings,
config = this.config,
tpl = template(galleryTpl, {
next: $t('Next'),
previous: $t('Previous')
}),
mainImageIndex,
$element = settings.$element,
$fotoramaElement,
$fotoramaStage;
if (settings.breakpoints) {
_.each(_.values(settings.breakpoints), function (breakpoint) {
var conditions;
_.each(_.pairs(breakpoint.conditions), function (pair) {
conditions = conditions ? conditions + ' and (' + pair[0] + ': ' + pair[1] + ')' :
'(' + pair[0] + ': ' + pair[1] + ')';
});
breakpoints[conditions] = breakpoint.options;
});
settings.breakpoints = breakpoints;
}
_.extend(config, config.options,
{
options: undefined,
click: false,
breakpoints: null
}
);
settings.currentConfig = config;
$element
.css('min-height', settings.$element.height())
.append(tpl);
$fotoramaElement = $element.find('[data-gallery-role="gallery"]');
$fotoramaStage = $fotoramaElement.find('.fotorama__stage');
$fotoramaStage.css('position', 'absolute');
$fotoramaElement.fotorama(config);
$fotoramaElement.find('.fotorama__stage__frame.fotorama__active')
.one('f:load', function () {
// Remove placeholder when main gallery image loads.
$element.find('.gallery-placeholder__image').remove();
$element
.removeClass('_block-content-loading')
.css('min-height', '');
$fotoramaStage.css('position', '');
});
settings.$elementF = $fotoramaElement;
settings.fotoramaApi = $fotoramaElement.data('fotorama');
$.extend(true, config, this.startConfig);
mainImageIndex = getMainImageIndex(config.data);
if (mainImageIndex) {
this.settings.fotoramaApi.show({
index: mainImageIndex,
time: 0
});
}
},
/**
* Creates breakpoints for gallery.
*/
setupBreakpoints: function () {
var pairs,
settings = this.settings,
config = this.config,
startConfig = this.startConfig,
isInitialized = {},
isTouchEnabled = this.isTouchEnabled;
if (_.isObject(settings.breakpoints)) {
pairs = _.pairs(settings.breakpoints);
_.each(pairs, function (pair) {
var mediaQuery = pair[0];
isInitialized[mediaQuery] = false;
mediaCheck({
media: mediaQuery,
/**
* Is triggered when breakpoint enties.
*/
entry: function () {
$.extend(true, config, _.clone(startConfig));
settings.api.updateOptions(settings.defaultConfig.options, true);
if (settings.isFullscreen) {
settings.api.updateOptions(settings.fullscreenConfig, true);
}
if (isTouchEnabled) {
settings.breakpoints[mediaQuery].options.arrows = false;
if (settings.breakpoints[mediaQuery].options.fullscreen) {
settings.breakpoints[mediaQuery].options.fullscreen.arrows = false;
}
}
settings.api.updateOptions(settings.breakpoints[mediaQuery].options, true);
$.extend(true, config, settings.breakpoints[mediaQuery]);
settings.activeBreakpoint = settings.breakpoints[mediaQuery];
isInitialized[mediaQuery] = true;
},
/**
* Is triggered when breakpoint exits.
*/
exit: function () {
if (isInitialized[mediaQuery]) {
$.extend(true, config, _.clone(startConfig));
settings.api.updateOptions(settings.defaultConfig.options, true);
if (settings.isFullscreen) {
settings.api.updateOptions(settings.fullscreenConfig, true);
}
settings.activeBreakpoint = {};
} else {
isInitialized[mediaQuery] = true;
}
}
});
});
}
},
/**
* Creates gallery's API.
*/
initApi: function () {
var settings = this.settings,
config = this.config,
api = {
/**
* Contains fotorama's API methods.
*/
fotorama: settings.fotoramaApi,
/**
* Displays the last image on preview.
*/
last: function () {
settings.fotoramaApi.show('>>');
},
/**
* Displays the first image on preview.
*/
first: function () {
settings.fotoramaApi.show('<<');
},
/**
* Displays previous element on preview.
*/
prev: function () {
settings.fotoramaApi.show('<');
},
/**
* Displays next element on preview.
*/
next: function () {
settings.fotoramaApi.show('>');
},
/**
* Displays image with appropriate count number on preview.
* @param {Number} index - Number of image that should be displayed.
*/
seek: function (index) {
if (_.isNumber(index) && index !== 0) {
if (index > 0) {
index -= 1;
}
settings.fotoramaApi.show(index);
}
},
/**
* Updates gallery with new set of options.
* @param {Object} configuration - Standart gallery configuration object.
* @param {Boolean} isInternal - Is this function called via breakpoints.
*/
updateOptions: function (configuration, isInternal) {
var $selectable = $('a[href], area[href], input, select, ' +
'textarea, button, iframe, object, embed, *[tabindex], *[contenteditable]')
.not('[tabindex=-1], [disabled], :hidden'),
$focus = $(':focus'),
index;
if (_.isObject(configuration)) {
//Saves index of focus
$selectable.each(function (number) {
if ($(this).is($focus)) {
index = number;
}
});
if (this.isTouchEnabled) {
configuration.arrows = false;
}
configuration.click = false;
configuration.breakpoints = null;
if (!isInternal) {
!_.isEqual(settings.activeBreakpoint, {} && settings.breakpoints) ?
$.extend(true, settings.activeBreakpoint.options, configuration) :
settings.isFullscreen ?
$.extend(true, settings.fullscreenConfig, configuration) :
$.extend(true, settings.defaultConfig.options, configuration);
}
$.extend(true, settings.currentConfig.options, configuration);
settings.fotoramaApi.setOptions(settings.currentConfig.options);
if (_.isNumber(index)) {
$selectable.eq(index).trigger('focus');
}
}
},
/**
* Updates gallery with specific set of items.
* @param {Array.<Object>} data - Set of gallery items to update.
*/
updateData: function (data) {
var mainImageIndex;
if (_.isArray(data)) {
settings.fotoramaApi.load(data);
mainImageIndex = getMainImageIndex(data);
if (settings.fotoramaApi.activeIndex !== mainImageIndex) {
settings.fotoramaApi.show({
index: mainImageIndex,
time: 0
});
}
$.extend(false, settings, {
data: data,
defaultConfig: data
});
$.extend(false, config, {
data: data
});
}
},
/**
* Returns current images list
*
* @returns {Array}
*/
returnCurrentImages: function () {
var images = [];
_.each(this.fotorama.data, function (item) {
images.push(_.omit(item, '$navThumbFrame', '$navDotFrame', '$stageFrame', 'labelledby'));
});
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);
}
};
settings.$element.data('gallery', api);
settings.api = settings.$element.data('gallery');
settings.$element.trigger('gallery:loaded');
}
});
});