pro-gallery 4.0.15-beta.21 → 4.0.15-beta.210

package/dist/cjs/components/item/itemView.js

@@ -4,14 +4,14 @@ var tslib_1 = require("tslib");
 /* eslint-disable prettier/prettier */
 var react_1 = tslib_1.__importDefault(require("react"));
 var pro_gallery_lib_1 = require("pro-gallery-lib");
-var imageItem_js_1 = tslib_1.__importDefault(require("./imageItem.js"));
+var imageWithMagnified_js_1 = tslib_1.__importDefault(require("./imageWithMagnified.js"));
 var textItem_js_1 = tslib_1.__importDefault(require("./textItem.js"));
 var itemHover_js_1 = tslib_1.__importDefault(require("./itemHover.js"));
 var itemHelper_js_1 = require("./itemHelper.js");
 var cssScrollHelper_1 = require("../helpers/cssScrollHelper");
-var galleryComponent_1 = require("../galleryComponent");
 var itemViewStyleProvider_1 = require("./itemViewStyleProvider");
 var videoItemWrapper_1 = tslib_1.__importDefault(require("./videos/videoItemWrapper"));
+var pure_1 = require("./pure");
 var ItemView = /** @class */ (function (_super) {
     tslib_1.__extends(ItemView, _super);
     function ItemView(props) {
@@ -21,7 +21,7 @@ var ItemView = /** @class */ (function (_super) {
             var _a = directLink || {}, url = _a.url, target = _a.target;
             var useDirectLink = !!(url &&
                 target &&
-                _this.props.styleParams.itemClick === 'link');
+                _this.props.options.itemClick === 'link');
             var shouldUseDirectLinkOnMobile = _this.shouldShowHoverOnMobile() &&
                 _this.isClickOnCurrentHoveredItem() &&
                 useDirectLink;
@@ -35,7 +35,7 @@ var ItemView = /** @class */ (function (_super) {
             return false;
         };
         _this.isClickOnCurrentHoveredItem = function () { return _this.state.isCurrentHover || // this single item was already hovered.
-            _this.props.styleParams.hoveringBehaviour ===
+            _this.props.options.hoveringBehaviour ===
                 pro_gallery_lib_1.GALLERY_CONSTS.infoBehaviourOnHover.NO_CHANGE; }; // all the items are always 'already' hovered
         _this.props.actions.eventsListener(pro_gallery_lib_1.GALLERY_CONSTS.events.ITEM_CREATED, _this.props);
         _this.init();
@@ -49,6 +49,7 @@ var ItemView = /** @class */ (function (_super) {
     //-------------------------------------------| INIT |--------------------------------------------//
     ItemView.prototype.init = function () {
         this.onItemClick = this.onItemClick.bind(this);
+        this.getSlideshowItemInner = this.getSlideshowItemInner.bind(this);
         this.onItemWrapperClick = this.onItemWrapperClick.bind(this);
         this.onItemInfoClick = this.onItemInfoClick.bind(this);
         this.onContainerKeyDown = this.onContainerKeyDown.bind(this);
@@ -75,8 +76,6 @@ var ItemView = /** @class */ (function (_super) {
         this.onBlur = this.onBlur.bind(this);
         this.checkIfCurrentHoverChanged =
             this.checkIfCurrentHoverChanged.bind(this);
-        this.getCustomInfoRendererProps =
-            this.getCustomInfoRendererProps.bind(this);
     };
     //----------------------------------------| ACTIONS |-------------------------------------------//
     ItemView.prototype.setItemLoaded = function () {
@@ -99,13 +98,15 @@ var ItemView = /** @class */ (function (_super) {
         }
     };
     ItemView.prototype.onFocus = function () {
-        if (this.props.styleParams.isAccessible) {
+        var _a;
+        if ((_a = this.props.settings) === null || _a === void 0 ? void 0 : _a.isAccessible) {
             this.props.actions.eventsListener(pro_gallery_lib_1.GALLERY_CONSTS.events.HOVER_SET, this.props.idx);
         }
         this.props.actions.eventsListener(pro_gallery_lib_1.GALLERY_CONSTS.events.ITEM_FOCUSED, this.props);
     };
     ItemView.prototype.onBlur = function () {
-        if (this.props.styleParams.isAccessible) {
+        var _a;
+        if ((_a = this.props.settings) === null || _a === void 0 ? void 0 : _a.isAccessible) {
             this.props.actions.eventsListener(pro_gallery_lib_1.GALLERY_CONSTS.events.HOVER_SET, -1);
         }
         this.props.actions.eventsListener(pro_gallery_lib_1.GALLERY_CONSTS.events.ITEM_LOST_FOCUS, this.props);
@@ -197,7 +198,7 @@ var ItemView = /** @class */ (function (_super) {
     //-----------------------------------------| UTILS |--------------------------------------------//
     ItemView.prototype.shouldShowHoverOnMobile = function () {
         if (pro_gallery_lib_1.utils.isMobile()) {
-            var _a = this.props.styleParams, titlePlacement = _a.titlePlacement, hoveringBehaviour = _a.hoveringBehaviour, itemClick = _a.itemClick, alwaysShowHover = _a.alwaysShowHover, previewHover = _a.previewHover, allowDescription = _a.allowDescription, allowTitle = _a.allowTitle, isStoreGallery = _a.isStoreGallery;
+            var _a = this.props.options, titlePlacement = _a.titlePlacement, hoveringBehaviour = _a.hoveringBehaviour, itemClick = _a.itemClick, alwaysShowHover = _a.alwaysShowHover, previewHover = _a.previewHover, allowDescription = _a.allowDescription, allowTitle = _a.allowTitle, isStoreGallery = _a.isStoreGallery;
             var isNewMobileSettings = pro_gallery_lib_1.featureManager.supports.mobileSettings;
             if (hoveringBehaviour === pro_gallery_lib_1.GALLERY_CONSTS.infoBehaviourOnHover.NEVER_SHOW) {
                 return false;
@@ -205,7 +206,7 @@ var ItemView = /** @class */ (function (_super) {
             if (itemClick === 'nothing' && this.props.type !== 'video') {
                 return true;
             }
-            else if (this.props.customHoverRenderer &&
+            else if (this.props.customComponents.customHoverRenderer &&
                 pro_gallery_lib_1.GALLERY_CONSTS.hasHoverPlacement(titlePlacement) &&
                 hoveringBehaviour !== pro_gallery_lib_1.GALLERY_CONSTS.infoBehaviourOnHover.NEVER_SHOW &&
                 isNewMobileSettings &&
@@ -227,8 +228,8 @@ var ItemView = /** @class */ (function (_super) {
     };
     ItemView.prototype.shouldHover = function () {
         //see if this could be decided in the preset
-        var styleParams = this.props.styleParams;
-        var alwaysShowHover = styleParams.alwaysShowHover, previewHover = styleParams.previewHover, hoveringBehaviour = styleParams.hoveringBehaviour, overlayAnimation = styleParams.overlayAnimation;
+        var options = this.props.options;
+        var alwaysShowHover = options.alwaysShowHover, previewHover = options.previewHover, hoveringBehaviour = options.hoveringBehaviour, overlayAnimation = options.overlayAnimation;
         var _a = pro_gallery_lib_1.GALLERY_CONSTS.infoBehaviourOnHover, NEVER_SHOW = _a.NEVER_SHOW, APPEARS = _a.APPEARS;
         var NO_EFFECT = pro_gallery_lib_1.GALLERY_CONSTS.overlayAnimations.NO_EFFECT;
         if (hoveringBehaviour === NEVER_SHOW) {
@@ -257,33 +258,32 @@ var ItemView = /** @class */ (function (_super) {
     //---------------------------------------| COMPONENTS |-----------------------------------------//
     ItemView.prototype.getItemHover = function (imageDimensions) {
         var _this = this;
-        var _a = this.props, customHoverRenderer = _a.customHoverRenderer, props = tslib_1.__rest(_a, ["customHoverRenderer"]);
+        var _a = this.props, customComponents = _a.customComponents, props = tslib_1.__rest(_a, ["customComponents"]);
         var shouldHover = this.shouldHover();
         return (shouldHover && (react_1.default.createElement(itemHover_js_1.default, tslib_1.__assign({}, props, { forceShowHover: this.simulateOverlayHover(), imageDimensions: imageDimensions, itemWasHovered: this.state.itemWasHovered, key: "hover", actions: {
                 handleItemMouseDown: this.handleItemMouseDown,
                 handleItemMouseUp: this.handleItemMouseUp,
-            }, renderCustomInfo: customHoverRenderer
-                ? function () { return customHoverRenderer(_this.getCustomInfoRendererProps()); }
+            }, renderCustomInfo: customComponents.customHoverRenderer
+                ? function () { return customComponents.customHoverRenderer(pure_1.getCustomInfoRendererProps(_this.props)); }
                 : null }))));
     };
-    ItemView.prototype.getCustomInfoRendererProps = function () {
-        return tslib_1.__assign(tslib_1.__assign({}, this.props), { isMobile: pro_gallery_lib_1.utils.isMobile() });
-    };
     ItemView.prototype.getImageItem = function (imageDimensions) {
         var props = pro_gallery_lib_1.utils.pick(this.props, [
             'gotFirstScrollEvent',
-            'alt',
+            'calculatedAlt',
             'title',
             'description',
             'id',
             'idx',
-            'styleParams',
+            'options',
             'createUrl',
+            'createMagnifiedUrl',
             'settings',
             'isPrerenderMode',
-            'isTransparent'
+            'isTransparent',
+            'style',
         ]);
-        return (react_1.default.createElement(imageItem_js_1.default, tslib_1.__assign({}, props, { key: "imageItem", imageDimensions: imageDimensions, isThumbnail: !!this.props.thumbnailHighlightId, actions: {
+        return (react_1.default.createElement(imageWithMagnified_js_1.default, tslib_1.__assign({}, props, { key: "imageItem", imageDimensions: imageDimensions, isThumbnail: !!this.props.thumbnailHighlightId, actions: {
                 handleItemMouseDown: this.handleItemMouseDown,
                 handleItemMouseUp: this.handleItemMouseUp,
                 setItemLoaded: this.setItemLoaded,
@@ -295,10 +295,10 @@ var ItemView = /** @class */ (function (_super) {
     ItemView.prototype.getTextItem = function (imageDimensions) {
         var props = pro_gallery_lib_1.utils.pick(this.props, [
             'id',
-            'styleParams',
+            'options',
             'style',
             'html',
-            'cubeRatio',
+            'cropRatio',
             'isPrerenderMode',
         ]);
         return (react_1.default.createElement(textItem_js_1.default, tslib_1.__assign({}, props, { key: "textItem", imageDimensions: imageDimensions, actions: {
@@ -308,14 +308,13 @@ var ItemView = /** @class */ (function (_super) {
             } })));
     };
     ItemView.prototype.getItemInner = function () {
-        var _this = this;
-        var _a = this.props, styleParams = _a.styleParams, type = _a.type, style = _a.style, offset = _a.offset;
+        var _a = this.props, options = _a.options, type = _a.type, style = _a.style, offset = _a.offset;
         var itemInner;
         var width = style.width, height = style.height, innerWidth = style.innerWidth, innerHeight = style.innerHeight;
         var innerTop = offset.innerTop, innerLeft = offset.innerLeft;
         var itemStyles = { width: innerWidth, height: innerHeight, marginTop: innerTop, marginLeft: innerLeft };
         var itemHover = null;
-        if (this.shouldHover() || styleParams.isSlideshow) {
+        if (this.shouldHover()) {
             itemHover = this.getItemHover(itemStyles);
         }
         switch (type) {
@@ -338,22 +337,27 @@ var ItemView = /** @class */ (function (_super) {
                     itemInner = [this.getImageItem(itemStyles), itemHover];
                 }
         }
-        if (styleParams.isSlideshow) {
-            var customSlideshowInfoRenderer = this.props.customSlideshowInfoRenderer;
-            var slideAnimationStyles = this.getSlideAnimationStyles();
-            var infoStyle = tslib_1.__assign(tslib_1.__assign({ height: styleParams.slideshowInfoSize + "px", bottom: "-" + styleParams.slideshowInfoSize + "px" }, slideAnimationStyles), { transition: 'none' });
-            var slideshowInfo = customSlideshowInfoRenderer
-                ? customSlideshowInfoRenderer(this.getCustomInfoRendererProps())
-                : null;
-            var _b = this.props, photoId = _b.photoId, id = _b.id, idx = _b.idx;
-            itemInner = (react_1.default.createElement("div", null,
-                react_1.default.createElement("a", tslib_1.__assign({ ref: function (e) { return (_this.itemAnchor = e); }, "data-id": photoId, "data-idx": idx, key: 'item-container-link-' + id }, this.getLinkParams(), { tabIndex: -1, style: tslib_1.__assign(tslib_1.__assign({}, slideAnimationStyles), { width: width, height: height }) }), itemInner),
-                react_1.default.createElement("div", { className: "gallery-slideshow-info", "data-hook": "gallery-slideshow-info-buttons", style: infoStyle }, slideshowInfo)));
+        if (pro_gallery_lib_1.GALLERY_CONSTS.isLayout('SLIDESHOW')(options)) {
+            return this.getSlideshowItemInner({ options: options, width: width, height: height, itemInner: itemInner, customComponents: this.props.customComponents });
         }
         return itemInner;
     };
+    ItemView.prototype.getSlideshowItemInner = function (_a) {
+        var _this = this;
+        var options = _a.options, width = _a.width, height = _a.height, itemInner = _a.itemInner, customComponents = _a.customComponents, photoId = _a.photoId, id = _a.id;
+        var customSlideshowInfoRenderer = customComponents.customSlideshowInfoRenderer;
+        var slideAnimationStyles = pure_1.getSlideAnimationStyles(this.props);
+        var infoStyle = tslib_1.__assign(tslib_1.__assign({ height: options.slideshowInfoSize + "px", bottom: "-" + options.slideshowInfoSize + "px" }, slideAnimationStyles), { transition: 'none' });
+        var slideshowInfo = customSlideshowInfoRenderer
+            ? customSlideshowInfoRenderer(pure_1.getCustomInfoRendererProps(this.props))
+            : null;
+        var idx = this.props.idx;
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement("a", tslib_1.__assign({ ref: function (e) { return (_this.itemAnchor = e); }, "data-id": photoId, "data-idx": idx, key: 'item-container-link-' + id }, pure_1.getLinkParams(this.props), { tabIndex: -1, style: tslib_1.__assign(tslib_1.__assign({}, slideAnimationStyles), { width: width, height: height }) }), itemInner),
+            react_1.default.createElement("div", { className: "gallery-slideshow-info", "data-hook": "gallery-slideshow-info-buttons", style: infoStyle }, slideshowInfo)));
+    };
     ItemView.prototype.getRightInfoElementIfNeeded = function () {
-        if (pro_gallery_lib_1.GALLERY_CONSTS.hasRightPlacement(this.props.styleParams.titlePlacement, this.props.idx)) {
+        if (pro_gallery_lib_1.GALLERY_CONSTS.hasExternalRightPlacement(this.props.options.titlePlacement, this.props.idx)) {
             return this.getExternalInfoElement(pro_gallery_lib_1.GALLERY_CONSTS.placements.SHOW_ON_THE_RIGHT, 'gallery-item-right-info');
         }
         else {
@@ -361,7 +365,7 @@ var ItemView = /** @class */ (function (_super) {
         }
     };
     ItemView.prototype.getLeftInfoElementIfNeeded = function () {
-        if (pro_gallery_lib_1.GALLERY_CONSTS.hasLeftPlacement(this.props.styleParams.titlePlacement, this.props.idx)) {
+        if (pro_gallery_lib_1.GALLERY_CONSTS.hasExternalLeftPlacement(this.props.options.titlePlacement, this.props.idx)) {
             return this.getExternalInfoElement(pro_gallery_lib_1.GALLERY_CONSTS.placements.SHOW_ON_THE_LEFT, 'gallery-item-left-info');
         }
         else {
@@ -369,7 +373,7 @@ var ItemView = /** @class */ (function (_super) {
         }
     };
     ItemView.prototype.getBottomInfoElementIfNeeded = function () {
-        if (pro_gallery_lib_1.GALLERY_CONSTS.hasBelowPlacement(this.props.styleParams.titlePlacement, this.props.idx)) {
+        if (pro_gallery_lib_1.GALLERY_CONSTS.hasExternalBelowPlacement(this.props.options.titlePlacement, this.props.idx)) {
             return this.getExternalInfoElement(pro_gallery_lib_1.GALLERY_CONSTS.placements.SHOW_BELOW, 'gallery-item-bottom-info');
         }
         else {
@@ -377,7 +381,7 @@ var ItemView = /** @class */ (function (_super) {
         }
     };
     ItemView.prototype.getTopInfoElementIfNeeded = function () {
-        if (pro_gallery_lib_1.GALLERY_CONSTS.hasAbovePlacement(this.props.styleParams.titlePlacement, this.props.idx)) {
+        if (pro_gallery_lib_1.GALLERY_CONSTS.hasExternalAbovePlacement(this.props.options.titlePlacement, this.props.idx)) {
             return this.getExternalInfoElement(pro_gallery_lib_1.GALLERY_CONSTS.placements.SHOW_ABOVE, 'gallery-item-top-info');
         }
         else {
@@ -385,28 +389,28 @@ var ItemView = /** @class */ (function (_super) {
         }
     };
     ItemView.prototype.getExternalInfoElement = function (placement, elementName) {
-        var _a = this.props, styleParams = _a.styleParams, customInfoRenderer = _a.customInfoRenderer, style = _a.style;
-        if (!customInfoRenderer) {
+        var _a = this.props, options = _a.options, customComponents = _a.customComponents, style = _a.style;
+        if (!customComponents.customInfoRenderer) {
             return null;
         }
         var info = null;
         //if there is no url for videos and images, we will not render the itemWrapper
         //but will render the info element if exists, with the whole size of the item
-        var infoHeight = styleParams.textBoxHeight + (this.hasRequiredMediaUrl ? 0 : style.height);
+        var infoHeight = options.textBoxHeight + (this.hasRequiredMediaUrl ? 0 : style.height);
         var infoWidth = style.infoWidth + (this.hasRequiredMediaUrl ? 0 : style.width);
-        var itemExternalInfo = customInfoRenderer(this.getCustomInfoRendererProps(), placement);
-        info = (react_1.default.createElement("div", { style: itemViewStyleProvider_1.getOuterInfoStyle(placement, styleParams, style.height, styleParams.textBoxHeight) },
-            react_1.default.createElement("div", { style: itemViewStyleProvider_1.getInnerInfoStyle(placement, styleParams, infoHeight, infoWidth), className: 'gallery-item-common-info ' + elementName, onClick: this.onItemInfoClick }, itemExternalInfo)));
+        var itemExternalInfo = customComponents.customInfoRenderer(pure_1.getCustomInfoRendererProps(this.props), placement);
+        info = (react_1.default.createElement("div", { style: itemViewStyleProvider_1.getOuterInfoStyle(placement, options, style.height, options.textBoxHeight) },
+            react_1.default.createElement("div", { style: itemViewStyleProvider_1.getInnerInfoStyle(placement, options, infoHeight, infoWidth), className: 'gallery-item-common-info ' + elementName, onClick: this.onItemInfoClick }, itemExternalInfo)));
         return info;
     };
     ItemView.prototype.simulateHover = function () {
         return (this.state.isCurrentHover ||
-            this.props.styleParams.alwaysShowHover === true ||
-            (pro_gallery_lib_1.isEditMode() && this.props.styleParams.previewHover));
+            this.props.options.alwaysShowHover === true ||
+            (pro_gallery_lib_1.isEditMode() && this.props.options.previewHover));
     };
     ItemView.prototype.simulateOverlayHover = function () {
         return (this.simulateHover() ||
-            this.props.styleParams.hoveringBehaviour ===
+            this.props.options.hoveringBehaviour ===
                 pro_gallery_lib_1.GALLERY_CONSTS.infoBehaviourOnHover.NO_CHANGE);
     };
     ItemView.prototype.itemHasLink = function () {
@@ -415,12 +419,13 @@ var ItemView = /** @class */ (function (_super) {
         return !itemDoesntHaveLink;
     };
     ItemView.prototype.getItemContainerStyles = function () {
-        var _a = this.props, idx = _a.idx, activeIndex = _a.activeIndex, offset = _a.offset, style = _a.style, styleParams = _a.styleParams, _b = _a.settings, settings = _b === void 0 ? {} : _b;
-        var scrollDirection = styleParams.scrollDirection, imageMargin = styleParams.imageMargin, itemClick = styleParams.itemClick, isRTL = styleParams.isRTL, slideAnimation = styleParams.slideAnimation;
-        var containerStyleByStyleParams = itemViewStyleProvider_1.getContainerStyle(styleParams);
+        var _a = this.props, idx = _a.idx, activeIndex = _a.activeIndex, offset = _a.offset, style = _a.style, options = _a.options, _b = _a.settings, settings = _b === void 0 ? {} : _b;
+        var scrollDirection = options.scrollDirection, imageMargin = options.imageMargin, itemClick = options.itemClick, isRTL = options.isRTL, slideAnimation = options.slideAnimation;
+        var containerStyleByoptions = itemViewStyleProvider_1.getContainerStyle(options);
         var itemDoesntHaveLink = !this.itemHasLink(); //when itemClick is 'link' but no link was added to this specific item
+        var isSlideshow = pro_gallery_lib_1.GALLERY_CONSTS.isLayout('SLIDESHOW')(this.props.options);
         var itemStyles = {
-            overflowY: styleParams.isSlideshow ? 'visible' : 'hidden',
+            overflowY: isSlideshow ? 'visible' : 'hidden',
             position: 'absolute',
             bottom: 'auto',
             margin: scrollDirection === pro_gallery_lib_1.GALLERY_CONSTS.scrollDirection.HORIZONTAL
@@ -478,118 +483,71 @@ var ItemView = /** @class */ (function (_super) {
             : {
                 transition: 'none',
             };
-        var itemContainerStyles = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, itemStyles), layoutStyles), containerStyleByStyleParams), transitionStyles), opacityStyles), slideAnimationStyles);
+        var itemContainerStyles = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, itemStyles), layoutStyles), containerStyleByoptions), transitionStyles), opacityStyles), slideAnimationStyles);
         return itemContainerStyles;
     };
     ItemView.prototype.getItemWrapperStyles = function () {
-        var _a = this.props, styleParams = _a.styleParams, style = _a.style, type = _a.type;
+        var _a = this.props, options = _a.options, style = _a.style, type = _a.type;
         var height = style.height, width = style.width;
         var styles = {};
         if (type === 'text') {
             styles.backgroundColor =
-                styleParams.cubeType !== 'fit' ? 'transparent' : 'inherit';
+                options.cubeType !== 'fit' ? 'transparent' : 'inherit';
         }
         else {
             styles.backgroundColor =
-                (styleParams.cubeType !== 'fit' ? style.bgColor : 'inherit') ||
+                (options.cubeType !== 'fit' ? style.bgColor : 'inherit') ||
                     'transparent';
         }
         styles.height = height + 'px';
         styles.width = width + 'px';
-        styles.margin = -styleParams.itemBorderWidth + 'px';
-        var itemWrapperStyles = tslib_1.__assign(tslib_1.__assign({}, styles), (!styleParams.isSlideshow && this.getSlideAnimationStyles()));
+        styles.margin = -options.itemBorderWidth + 'px';
+        var itemWrapperStyles = tslib_1.__assign(tslib_1.__assign({}, styles), (pure_1.getSlideAnimationStyles(this.props)));
         return itemWrapperStyles;
     };
-    ItemView.prototype.getSlideAnimationStyles = function () {
-        var _a = this.props, idx = _a.idx, activeIndex = _a.activeIndex, styleParams = _a.styleParams, container = _a.container;
-        var isRTL = styleParams.isRTL, slideAnimation = styleParams.slideAnimation;
-        var baseStyles = {
-            position: 'absolute',
-            display: 'block',
-        };
-        switch (slideAnimation) {
-            case pro_gallery_lib_1.GALLERY_CONSTS.slideAnimations.FADE:
-                return tslib_1.__assign(tslib_1.__assign({}, baseStyles), { transition: "opacity 600ms ease", opacity: activeIndex === idx ? 1 : 0 });
-            case pro_gallery_lib_1.GALLERY_CONSTS.slideAnimations.DECK: {
-                var rtlFix = isRTL ? 1 : -1;
-                if (activeIndex < idx) {
-                    //the slides behind the deck
-                    return tslib_1.__assign(tslib_1.__assign({}, baseStyles), { transition: "opacity .2s ease 600ms", zIndex: -1, opacity: 0 });
-                }
-                else if (activeIndex === idx) {
-                    return tslib_1.__assign(tslib_1.__assign({}, baseStyles), { zIndex: 0, transition: "transform 600ms ease", transform: "translateX(0)" });
-                }
-                else if (activeIndex > idx) {
-                    return tslib_1.__assign(tslib_1.__assign({}, baseStyles), { zIndex: 1, transition: "transform 600ms ease", transform: "translateX(" + rtlFix * Math.round(container.width) + "px)" });
-                }
-                break;
-            }
-            default:
-                return {};
-        }
-    };
     ItemView.prototype.getItemAriaLabel = function () {
-        var _a = this.props, type = _a.type, alt = _a.alt, styleParams = _a.styleParams;
-        var label;
-        switch (type) {
-            case 'dummy':
-                label = '';
-                break;
-            case 'text':
-                label = 'Text item';
-                break;
-            case 'video':
-                label = alt || 'Untitled video';
-                break;
-            default:
-                label = alt || 'Untitled image';
-                break;
-        }
-        return label + (styleParams.isStoreGallery ? ', Buy Now' : '');
+        var _a = this.props, type = _a.type, calculatedAlt = _a.calculatedAlt, htmlContent = _a.htmlContent, options = _a.options;
+        var mapTypeToLabel = {
+            'dummy': '',
+            'text': htmlContent,
+            'video': calculatedAlt || 'Untitled video',
+            'image': calculatedAlt || 'Untitled image',
+        };
+        var label = mapTypeToLabel[type];
+        return label + (options.isStoreGallery ? ', Buy Now' : '');
     };
     ItemView.prototype.getItemContainerClass = function () {
-        var styleParams = this.props.styleParams;
-        var isNOTslideshow = !styleParams.isSlideshow;
-        var imagePlacementAnimation = styleParams.imagePlacementAnimation;
-        var overlayAnimation = styleParams.overlayAnimation;
-        var imageHoverAnimation = styleParams.imageHoverAnimation;
+        var options = this.props.options;
+        var imagePlacementAnimation = options.imagePlacementAnimation;
+        var overlayAnimation = options.overlayAnimation;
+        var imageHoverAnimation = options.imageHoverAnimation;
         var classNames = {
             'gallery-item-container': true,
             visible: true,
             highlight: this.isHighlight(),
-            clickable: styleParams.itemClick !== 'nothing',
+            clickable: options.itemClick !== 'nothing',
             'simulate-hover': this.simulateHover(),
             'hide-hover': !this.simulateHover() && pro_gallery_lib_1.utils.isMobile(),
-            'invert-hover': styleParams.hoveringBehaviour ===
+            'invert-hover': options.hoveringBehaviour ===
                 pro_gallery_lib_1.GALLERY_CONSTS.infoBehaviourOnHover.DISAPPEARS,
             //animations
-            'animation-slide': isNOTslideshow &&
-                imagePlacementAnimation ===
-                    pro_gallery_lib_1.GALLERY_CONSTS.imagePlacementAnimations.SLIDE,
+            'animation-slide': imagePlacementAnimation ===
+                pro_gallery_lib_1.GALLERY_CONSTS.imagePlacementAnimations.SLIDE,
             //overlay animations
-            'hover-animation-fade-in': isNOTslideshow &&
-                overlayAnimation === pro_gallery_lib_1.GALLERY_CONSTS.overlayAnimations.FADE_IN,
-            'hover-animation-expand': isNOTslideshow &&
-                overlayAnimation === pro_gallery_lib_1.GALLERY_CONSTS.overlayAnimations.EXPAND,
-            'hover-animation-slide-up': isNOTslideshow &&
-                overlayAnimation === pro_gallery_lib_1.GALLERY_CONSTS.overlayAnimations.SLIDE_UP,
-            'hover-animation-slide-right': isNOTslideshow &&
-                overlayAnimation === pro_gallery_lib_1.GALLERY_CONSTS.overlayAnimations.SLIDE_RIGHT,
+            'hover-animation-fade-in': overlayAnimation === pro_gallery_lib_1.GALLERY_CONSTS.overlayAnimations.FADE_IN,
+            'hover-animation-expand': overlayAnimation === pro_gallery_lib_1.GALLERY_CONSTS.overlayAnimations.EXPAND,
+            'hover-animation-slide-up': overlayAnimation === pro_gallery_lib_1.GALLERY_CONSTS.overlayAnimations.SLIDE_UP,
+            'hover-animation-slide-right': overlayAnimation === pro_gallery_lib_1.GALLERY_CONSTS.overlayAnimations.SLIDE_RIGHT,
+            'hover-animation-slide-down': overlayAnimation === pro_gallery_lib_1.GALLERY_CONSTS.overlayAnimations.SLIDE_DOWN,
+            'hover-animation-slide-left': overlayAnimation === pro_gallery_lib_1.GALLERY_CONSTS.overlayAnimations.SLIDE_LEFT,
             //image hover animations
-            'zoom-in-on-hover': isNOTslideshow &&
-                imageHoverAnimation === pro_gallery_lib_1.GALLERY_CONSTS.imageHoverAnimations.ZOOM_IN,
-            'blur-on-hover': isNOTslideshow &&
-                imageHoverAnimation === pro_gallery_lib_1.GALLERY_CONSTS.imageHoverAnimations.BLUR,
-            'grayscale-on-hover': isNOTslideshow &&
-                imageHoverAnimation === pro_gallery_lib_1.GALLERY_CONSTS.imageHoverAnimations.GRAYSCALE,
-            'shrink-on-hover': isNOTslideshow &&
-                imageHoverAnimation === pro_gallery_lib_1.GALLERY_CONSTS.imageHoverAnimations.SHRINK,
-            'invert-on-hover': isNOTslideshow &&
-                imageHoverAnimation === pro_gallery_lib_1.GALLERY_CONSTS.imageHoverAnimations.INVERT,
-            'color-in-on-hover': isNOTslideshow &&
-                imageHoverAnimation === pro_gallery_lib_1.GALLERY_CONSTS.imageHoverAnimations.COLOR_IN,
-            'darkened-on-hover': isNOTslideshow &&
-                imageHoverAnimation === pro_gallery_lib_1.GALLERY_CONSTS.imageHoverAnimations.DARKENED,
+            'zoom-in-on-hover': imageHoverAnimation === pro_gallery_lib_1.GALLERY_CONSTS.imageHoverAnimations.ZOOM_IN,
+            'blur-on-hover': imageHoverAnimation === pro_gallery_lib_1.GALLERY_CONSTS.imageHoverAnimations.BLUR,
+            'grayscale-on-hover': imageHoverAnimation === pro_gallery_lib_1.GALLERY_CONSTS.imageHoverAnimations.GRAYSCALE,
+            'shrink-on-hover': imageHoverAnimation === pro_gallery_lib_1.GALLERY_CONSTS.imageHoverAnimations.SHRINK,
+            'invert-on-hover': imageHoverAnimation === pro_gallery_lib_1.GALLERY_CONSTS.imageHoverAnimations.INVERT,
+            'color-in-on-hover': imageHoverAnimation === pro_gallery_lib_1.GALLERY_CONSTS.imageHoverAnimations.COLOR_IN,
+            'darkened-on-hover': imageHoverAnimation === pro_gallery_lib_1.GALLERY_CONSTS.imageHoverAnimations.DARKENED,
             'pro-gallery-mobile-indicator': pro_gallery_lib_1.utils.isMobile(),
         };
         var strClass = Object.entries(classNames)
@@ -602,10 +560,10 @@ var ItemView = /** @class */ (function (_super) {
         return strClass;
     };
     ItemView.prototype.getItemWrapperClass = function () {
-        var _a = this.props, styleParams = _a.styleParams, type = _a.type;
+        var _a = this.props, options = _a.options, type = _a.type;
         var classes = ['gallery-item-wrapper', 'visible'];
-        if (styleParams.cubeImages) {
-            classes.push('cube-type-' + styleParams.cubeType);
+        if (options.cubeImages) {
+            classes.push('cube-type-' + options.cubeType);
         }
         if (type === 'text') {
             classes.push('gallery-item-wrapper-text');
@@ -660,12 +618,12 @@ var ItemView = /** @class */ (function (_super) {
         }
     };
     ItemView.prototype.onContextMenu = function (e) {
-        if (!pro_gallery_lib_1.utils.isDev() && !this.props.styleParams.allowContextMenu) {
+        if (!pro_gallery_lib_1.utils.isDev() && !this.props.options.allowContextMenu) {
             e.preventDefault(e);
         }
     };
     ItemView.prototype.getItemAriaRole = function () {
-        switch (this.props.styleParams.itemClick) {
+        switch (this.props.options.itemClick) {
             case 'expand':
             case 'fullscreen':
                 return 'button';
@@ -675,47 +633,22 @@ var ItemView = /** @class */ (function (_super) {
                 return '';
         }
     };
-    ItemView.prototype.getLinkParams = function () {
-        var _a = this.props, directLink = _a.directLink, styleParams = _a.styleParams, directShareLink = _a.directShareLink;
-        var isSEO = pro_gallery_lib_1.isSEOMode();
-        if (styleParams.itemClick === pro_gallery_lib_1.GALLERY_CONSTS.itemClick.LINK) {
-            var _b = directLink || {}, url = _b.url, target = _b.target;
-            var noFollowForSEO = this.props.noFollowForSEO;
-            var shouldUseNofollow = isSEO && noFollowForSEO;
-            var shouldUseDirectLink = !!(url && target);
-            var seoLinkParams = shouldUseNofollow ? { rel: 'nofollow' } : {};
-            var linkParams = shouldUseDirectLink
-                ? tslib_1.__assign({ href: url, target: target }, seoLinkParams) : {};
-            return linkParams;
-        }
-        else if (styleParams.itemClick === pro_gallery_lib_1.GALLERY_CONSTS.itemClick.FULLSCREEN ||
-            styleParams.itemClick === pro_gallery_lib_1.GALLERY_CONSTS.itemClick.EXPAND) {
-            // place share link as the navigation item
-            var url = directShareLink;
-            var shouldUseDirectShareLink = !!url;
-            var shouldUseNofollow = !styleParams.shouldIndexDirectShareLinkInSEO;
-            var seoLinkParams = shouldUseNofollow ? { rel: 'nofollow' } : {};
-            var linkParams = shouldUseDirectShareLink
-                ? tslib_1.__assign({ href: url, 'data-cancel-link': true }, seoLinkParams) : {};
-            return linkParams;
-        }
-    };
     ItemView.prototype.composeItem = function () {
         var _this = this;
-        var _a = this.props, photoId = _a.photoId, id = _a.id, hash = _a.hash, idx = _a.idx, styleParams = _a.styleParams, type = _a.type, url = _a.url;
+        var _a = this.props, photoId = _a.photoId, id = _a.id, hash = _a.hash, idx = _a.idx, options = _a.options, type = _a.type, url = _a.url;
         //if (there is an url for video items and image items) OR text item (text item do not use media url)
         this.hasRequiredMediaUrl = url || type === 'text';
         //if titlePlacement !== SHOW_ON_HOVER and !this.hasRequiredMediaUrl, we will NOT render the itemWrapper (but will render the info element with the whole size of the item)
-        var isItemWrapperEmpty = styleParams.titlePlacement !== pro_gallery_lib_1.GALLERY_CONSTS.placements.SHOW_ON_HOVER &&
+        var isItemWrapperEmpty = options.titlePlacement !== pro_gallery_lib_1.GALLERY_CONSTS.placements.SHOW_ON_HOVER &&
             !this.hasRequiredMediaUrl;
         var innerDiv = (react_1.default.createElement("div", { className: this.getItemContainerClass(), onContextMenu: function (e) { return _this.onContextMenu(e); }, id: cssScrollHelper_1.cssScrollHelper.getSellectorDomId(this.props), ref: function (e) { return (_this.itemContainer = e); }, onMouseOver: this.onMouseOver, onMouseOut: this.onMouseOut, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onContainerKeyDown, tabIndex: this.getItemContainerTabIndex(), "aria-label": this.getItemAriaLabel(), "data-hash": hash, "data-id": photoId, "data-idx": idx, role: this.getItemAriaRole(), "data-hook": "item-container", key: 'item-container-' + id, style: this.getItemContainerStyles() },
             this.getTopInfoElementIfNeeded(),
             this.getLeftInfoElementIfNeeded(),
-            react_1.default.createElement("div", { style: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, (!this.props.styleParams.isSlideshow &&
-                    itemViewStyleProvider_1.getImageStyle(this.props.styleParams))), (pro_gallery_lib_1.GALLERY_CONSTS.hasRightPlacement(this.props.styleParams.titlePlacement, this.props.idx) && { float: 'left' })), (pro_gallery_lib_1.GALLERY_CONSTS.hasLeftPlacement(this.props.styleParams.titlePlacement, this.props.idx) && { float: 'right' })) }, !isItemWrapperEmpty && (react_1.default.createElement("div", { "data-hook": "item-wrapper", className: this.getItemWrapperClass(), key: 'item-wrapper-' + id, id: 'item-wrapper-' + id, style: this.getItemWrapperStyles(), onClick: this.onItemWrapperClick }, this.getItemInner()))),
+            react_1.default.createElement("div", { style: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, (itemViewStyleProvider_1.getImageStyle(this.props.options))), (pro_gallery_lib_1.GALLERY_CONSTS.hasExternalRightPlacement(this.props.options.titlePlacement, this.props.idx) && { float: 'left' })), (pro_gallery_lib_1.GALLERY_CONSTS.hasExternalLeftPlacement(this.props.options.titlePlacement, this.props.idx) && { float: 'right' })) }, !isItemWrapperEmpty && (react_1.default.createElement("div", { "data-hook": "item-wrapper", className: this.getItemWrapperClass(), key: 'item-wrapper-' + id, id: 'item-wrapper-' + id, style: this.getItemWrapperStyles(), onClick: this.onItemWrapperClick }, this.getItemInner()))),
             this.getRightInfoElementIfNeeded(),
             this.getBottomInfoElementIfNeeded()));
-        if (styleParams.isSlideshow) {
+        var isSlideshow = pro_gallery_lib_1.GALLERY_CONSTS.isLayout('SLIDESHOW')(options);
+        if (isSlideshow) {
             return innerDiv;
         }
         else {
@@ -725,7 +658,7 @@ var ItemView = /** @class */ (function (_super) {
                         enableExperimentalFeatures: _this.props.enableExperimentalFeatures,
                         itemContainer: _this.itemContainer,
                     });
-                } }, this.getLinkParams(), { tabIndex: -1, onKeyDown: function (e) {
+                } }, pure_1.getLinkParams(this.props), { tabIndex: -1, onKeyDown: function (e) {
                     /* Relvenat only for Screen-Reader case:
                     Screen-Reader ignores the tabIdex={-1} and therefore stops and focuses on the <a> tag keyDown event,
                     so it will not go deeper to the item-container keyDown event.
@@ -739,7 +672,7 @@ var ItemView = /** @class */ (function (_super) {
         return this.composeItem();
     };
     return ItemView;
-}(galleryComponent_1.GalleryComponent));
+}(react_1.default.Component));
 exports.default = ItemView;
 /* eslint-enable prettier/prettier */
 //# sourceMappingURL=itemView.js.map